브라우저 렌더링 과정에 대해 알아보자
이전 단계에서 통신을 통해 받아온 html 파일들은 바이트 형태로 전달된다.바이트 > 문자 > 토큰 > 노드 > 객체 모델로 전환하는 작업이 수행되고 최종 트리 형태의 DOM이 출력된다. \+ 만약 html 파싱 중 link 태그나 style 태그를 만날 경우 블로킹되
웹 브라우저에 해당 도메인 주소를 입력했을 때 데이터를 받아오는 과정
주소창에 url을 입력하면 DNS서버(domain name system의 약자로 도메인 이름과 IP 주소를 매핑해주는 서버)에 요청하기 전에 먼저 캐싱된 dns 기록들을 확인한다. 만약 캐싱된 기록이 있으면 요청을 보내지 않고 바로 ip 주소를 반환하고 없으면 dns
requestAnimationFrame을 사용해 ProgressBar 만들기
첫 번째, 두 번째 막대는 각각 setInterval과 requestAnimationFrame을 이용해서 너비값을 증가시키는 애니메이션이다.setInterval을 이용한 막대 그래프는 requestAnimationFrame을 이용한 막대 그래프에 비해 일정한 간격으로
프로젝트를 최적화하는 다양한 방법 - lazy loading
: 커다란 번들을 작은 여러개의 청크로 나누는 과정으로 코드 스플리팅을 통해 유저가 필요하지 않은 코드들을 다운 받지 않도록 할 수 있다. : 어플리케이션 규모가 커질수록 번들 사이즈는 증가하게 되고 초기 로딩 속도가 증가할수 밖에 없다. 이때 코드 스플리팅을 적용하면
전역 상태 관리 라이브러리인 Recoil에 대해 알아보자
Recoil 이란? React 애플리케이션 상태 관리를 위한 라이브러리 Facebook에서 개발한 상태 관리 라이브러리로 atom 이라는 단위로 상태를 정의하고 이를 이용해 컴포넌트 사이에서 데이터를 공유하며 상태를 업데이트한다. ❗Recoil 사용시 장점 간편한
Next-auth 소셜 로그인 구현 과정(2)
✅ https://console.cloud.google.com 에서 새 프로젝트 생성 후 프로젝트 이름 설정 > 만들기✅ 생성한 프로젝트 선택 후 사용자 인증 정보 > API 키 생성✅ OAuth 동의 화면에서 User Type에 따른 선택 (Hole-in-
Next-auth 소셜 로그인 구현 과정(1)
공식문서 참고설치.env 파일에 NEXTAUTH_URL 환경변수 추가API Route 추가: api/auth/...nextauth.ts 파일 생성 후 원하는 인증 공급자(Provider) 및 옵션 설정발급받은 인증 공급자의 client_id와 client_secret을
[에러로그] 빌드 중 만난 error
### 💥 에러 발생! 로컬에서는 문제 없이 작동되는데 빌드 하려고 하니 다음과 같은 에러가 발생하면서 실패😭 ``` Type error: Type 'OmitWithTag<typeof import("C:/Users/kimsooin/hole-in-the-wall/sr
[에러로그] Next-auth 소셜 로그인 구현 중 만난 Login error
카카오로 로그인을 시도하면 url에 다음과 같이 표시되면서 로그인이 되지 않음 http://localhost:3000/users/login?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F&error=OAuthAccountNotLinked
Next.js 13 변경된 내용
Next.js 13 변경된 내용 기존의 pages 폴더 기반 파일 시스템 라우터를 app 디렉토리로 변경하여 라우팅 및 레이아웃 개선 Layout : app 디렉토리 루트의 RootLayout 필수적으로 생성(하위에 layout.js라는 커스텀 레이아웃 파일도 생성 가
기술면접
: 가독성 및 유지보수성 향상, 재사용성 높임, 연산 및 함수 정의, 파일 분할 및 모듈화로 코드 관리변수(Variables) : 스타일에서 사용되는 색상, 폰트 크기 등을 변수로 정의중첩 규칙(Nested Rules) : 요소의 계층 구조를 중첩하여 스타일을 작성믹스
useContext훅에 대해 알아보자
Context API : React가 자체적으로 제공하는 상태 관리 방법 컴포넌트 트리 안에서 전역적으로 사용할 수 있는 값 관리 Props Drilling을 피하고 컴포넌트 간 상태를 쉽게 공유 가능하게 함 데이터를 공유하기 위한 방법 예시로 로그인한
[프로그래머스] 가장 가까운 같은 글자
문자열 s가 주어졌을 때, s의 각 위치마다 자신보다 앞에 나왔으면서, 자신과 가장 가까운 곳에 있는 같은 글자가 어디 있는지 알고 싶습니다.예를 들어, s="banana"라고 할 때, 각 글자들을 왼쪽부터 오른쪽으로 읽어 나가면서 다음과 같이 진행할 수 있습니다.b
[프로그래머스] 기사단원의 무기
숫자나라 기사단의 각 기사에게는 1번부터 number까지 번호가 지정되어 있습니다. 기사들은 무기점에서 무기를 구매하려고 합니다.각 기사는 자신의 기사 번호의 약수 개수에 해당하는 공격력을 가진 무기를 구매하려 합니다. 단, 이웃나라와의 협약에 의해 공격력의 제한수치를