jiwondev.log

[JavaScript] window&document 전역객체와 DOM

2024.01.11

전역 window & document 객체 Built-in Variables & Functions 전역 변수로 코드 내에서 항상 사용할 수 있는 변수 window 객체 전역 객체 window 전역 객체는 웹 브라우저 환경에서 전역으로 사용 가능한 객체를 나타낸다. 모든 전역 변수와 함수는 실제로 이 window 객체의 프로퍼티로 존재한다. window 객체의 프로퍼티와 메서드. 함수 기호 f가 표시된 것이 메서드이고 그렇지 않은 것은 프로퍼티이다. window 객체에 내장된 프로퍼티와 메서드들은 window. 없이도 액세스할 수 있다. alert 메서드의 경우 window.alert()로도 사용할 수 있지만 그냥 alert()으로도 실행할 수 있는 것처럼 말이다. 윈도우와 브라우저 탭 윈도우는 웹 브라우..

💻 Programming/HTML, CSS

[CSS] 변환과 전환 (Transformations & Transitions)

2024.01.10

1. 변환 Transformations 요소의 모양을 이동하거나 변경하는 것 (ex. hover) 변환은 transform 속성을 사용하는데 이 속성은 변환하려는 요소에 추가하는 것이 아니라, 변환을 발생시키는 요소에 추가한다. 아래 예시를 통해 다시 살펴보자. .card-container { background-color: rgb(255, 255, 255); width: 350px; margin: 50px auto; box-shadow: 3px 3px 10px rgb(201, 200, 200); } .card-container:hover { transform: scale(1.05); } 변환하려는 요소는 .card-container이지만 여기에 transform 속성을 추가하는 것이 아니고, .card..

💻 Programming/HTML, CSS

[CSS] html, :root, * 선택자

2024.01.10

1. html 하는 css 규칙은 html에 적용되고 html 안에 포함된 요소들에도 상속된다. 아래의 css 변수 예제에서 사용했던 논리 html { --color-grey-100: rgb(236, 236, 236); --color-grey-400: rgb(134, 134, 134); --color-grey-600: rgb(58, 58, 58); --color-grey-900: rgb(41, 41, 41); --color-primary-300: rgb(167, 226, 255); --color-primary-700: rgb(0, 170, 255); --size-1: 18px; --size-5: 50px; background-color: var(--color-grey-100); } 2. :root 가상 ..

💻 Programming/HTML, CSS

[CSS] em, rem, %

2024.01.09

1. 폰트 크기에서의 em, rem, % 1) px 장점: Easy to understand & translateable 단점: Limited user focus & not scalable 2) em vs. rem (1) em (element) Size is relative to font-size 다른 요소의 폰트 크기와 연관된 크기 - 폰트 크기는 부모 요소의 크기에 달려있다. 단점 %와 마찬가지로 부모 요소에서 상속받는 크기에 따라 사이즈가 달라지기 때문에 관리가 어렵다. (2) rem (root em) Size is relative to root element’s font size 현재 요소의 폰트 크기와 최상위 요소의 폰트 크기와 연결되어 있다. HTML에서 최상위 요소: 최상위 요소에 폰트 크기..

💻 Programming/기타

VS Code 작은 따옴표, 큰 따옴표 설정하기

2024.01.07

VS Code에서 코드 작성할 때 나는 주로 큰 따옴표(Double quote)를 사용하는 것을 선호하는데, 자꾸 자동으로 작은 따옴표(Single quote)가 사용되어서 설정을 찾아보던 중에 발견했다. 나중에 팀 컨벤션이 작은 따옴표인 경우도 있을 수 있기 때문에, 상황에 맞게 설정을 변경할 때 유용할 것 같아 블로그에 남기는 게 좋을 것 같다고 생각했다. 먼저 code - 기본 설정 - Settings 또는 단축키 Command + , 를 눌러서 Settings에 들어간다. 여기서 다음 네 가지를 상황에 맞게 설정해준다. 1. 기본 설정을 큰 따옴표(Double quote)로 설정 시 JavaScript > Preferences: Quote Style ➡️ double TypeScript > Pre..

💻 Programming/기타

ROM, RAM, SSD, HDD (feat. 프로젝트 헤일메리)

2024.01.05

요즘 프로젝트 헤일메리라는 책을 재밌게 읽는 중인데, 주인공이 우주선에서 터치스크린 컴퓨터(아마 태블릿PC가 아닐까 한다.)를 발견하는 장면에서 다음과 같은 내용이 나온다. "'의회 도서관'이라는 이름이 붙은 폴더가 하나 있는데, 거기에는 미국에서 저작권을 인정받은 모든 전자 카탈로그가 통째로 들어 있는 듯 하다. ...(중략)... SSD는 무게가 가벼우니, 정보를 실을 때 굳이 인색해질 필요는 없다고 생각한 모양이다. 아니, 자료를 그냥 롬(ROM)에 구워버린걸 수도 있다." 이 부분을 읽으면서 SSD와 ROM이 뭐였더라? SSD는 비교적 익숙하지만 ROM은 들어만 봤지 무엇이었는지 정확히 기억이 나지 않아서 찾아보았다. 1. ROM ROM은 Read-Only Memory의 약자로 읽기 전용 메모리를..

✍️ What I Learned/TIL

[TIL] Recoil Selector

2023.10.29

💡 TIL 20231029 - Recoil Selector Selector란? Derived state 입력받은 state를 변형해 반환하는 순수함수를 거쳐 반환된 값 Selector는 파생된 state(derived state)의 일부를 나타낸다. 즉, 기존 state를 가져와서, 기존 state를 이용해 새로운 state를 만들어서 반환할 수 있다. 기존 state를 이용만할 뿐 변형시키지 않는다. derived state는 다른 데이터에 의존하는 동적인 데이터를 만들 수 있기 때문에 강력한 개념이다. atom의 output을 변형시켜 주는 개념 To Do 목록들을 카테고리별로 분류하려면 어떻게 할까? 컴포넌트 자체에서 전체 To Dos 배열을 불러온 뒤 분류할 수도 있지만, 이것은 데이터 자체를 바..

✍️ What I Learned/TIL

[TIL] React-hook-form 복습 - register, validate, errors, handleSubmit

2023.10.19

💡 TIL 20231019 - React-hook-form 복습 - register, validate, errors, handleSubmit React-hook-form import useForm 컴포넌트에서 useForm을 호출하면 register와 handleSubmit을 사용할 수 있다. form 내의 유효성 검사가 필요한 input들에 register 함수를 호출한다. required, minLength/maxLength, pattern, validate 등 💭 Register 함수 ; useForm hook으로 불러올 수 있음 검사가 필요한 input에서 register 함수를 호출 react-hook-form이 알 수 있도록 input에 이름을 부여해야 함 {...register("email..

✍️ What I Learned/TIL

[TIL] 비동기 함수로부터 받아오는 data에 제네릭 사용하기

2023.09.14

💡 TIL 20230914 - 비동기 함수로부터 받아오는 data에 제네릭 사용하기 비동기 함수로부터 받아오는 data에 타입 에러 발생 useMutation.tsx에서 useMutation 훅을 통해 받아오는 데이터의 형식을 아래와 같이 지정해두었다. // src/hooks/useMutation.tsx interface UseMutationState { loading: boolean; data?: object; error?: object; } // src/components/Auth/Auth.tsx // 생략 return ( // ... 중간 생략 {data?.ok ? null : ( {method === "email" ? ( 그랬더니 위의 data?.ok 부분에서 'Property 'ok' does ..

✍️ What I Learned/TIL

[TIL] HTTP 상태 코드

2023.09.12

💡 TIL 20230912 - HTTP 상태 코드 자주 쓰는 HTTP 상태 코드 ✅ 200 OK 요청이 성공적으로 되었습니다. (성공) 👎 400 Bad Request 이 응답은 잘못된 문법으로 인하여 서버가 요청을 이해할 수 없음을 의미합니다. (클라이언트에서 Request할 때 발생한 문제) 🔐 401 Unauthorized 요청된 리소스에 대한 유효한 인증 자격 증명이 없기 때문에 클라이언트 요청이 완료되지 않았음을 나타냅니다. ⛔️ 403 Forbidden 클라이언트는 콘텐츠에 접근할 권리를 가지고 있지 않습니다. 401과 다른 점은 서버가 클라이언트가 누구인지 알고 있습니다. 🚫 405 Method Not Allowed 요청한 메서드는 서버에서 알고 있지만, 제거되었고 사용할 수 없습니다. (허..

전체 글

[JavaScript] window&document 전역객체와 DOM

[CSS] 변환과 전환 (Transformations & Transitions)

[CSS] html, :root, * 선택자

[CSS] em, rem, %

VS Code 작은 따옴표, 큰 따옴표 설정하기

ROM, RAM, SSD, HDD (feat. 프로젝트 헤일메리)

[TIL] Recoil Selector

[TIL] React-hook-form 복습 - register, validate, errors, handleSubmit

[TIL] 비동기 함수로부터 받아오는 data에 제네릭 사용하기

[TIL] HTTP 상태 코드

티스토리툴바