2023년부터 로그 기록 2023년부터 로그 기록

프로젝트를 배포하기 위해서 npm run build 명령어를 수행한 결과 빌드 에러가 뙇! ProblemSuspense 경계 없이 useSearchParams를 통해 매개변수를 읽으면 전체 페이지가 클라이언트 측 렌더링으로 선택된다. 왜냐하면 클라이언트 사이드에서 정적 렌더링 동안에 가장 가까운 Suspense boundary에서 렌더링을 하려고 하고, React는 useSearchParams 사용을 발견하면 가장 가까운 Suspense 경계까지 fallback으로 표시하기 위해 렌더링을 일시 중단한다. Suspense 설정이 없으면 타고타고 올라가서 전체 페이지가 클라이언트 측 렌더더링이 된다. 이로 인해 클라이언트 측 JavaScript가 로르될 때까지 페이지가 비어 있을 수 있기 때문에 빌드 에러가..

Problem기본적으로 존재하지 않는 경로는 자동으로 app 폴더 밑에 있는 not-found.tsx 파일인 404 페이지로 redirect 된다.그런데 Next.js 14 App Router 버전에서 동적 경로를 사용하는 Catch All Segment를 사용하는 경우 하위의 모든 경로를 포함하기 때문에 라우팅에서 편리 하지만 데이터가 존재하지 않는 페이지도 보여지게 된다. SolutionnotFound 활용하기기존적인 해법으로 직접 코드 상에서 특정 조건에서 notFound 메서드를 호출하면 된다.내 경우에는 데이터 페칭 결과값이 없을 때, 서버 액션에서 에러를 반환하는 것이 아니라 undefined를 반환하도록 하고, 데이터 페칭의 결과가 존재하지 않을 경우 notFound 를 호출하는 코드로 작성..

Problem렌더링 하이드레이션 과정에서 SSR 값과 CSR 값이 다를 때 발생한다.이 react-hydration-error의 해결방법은 두 가지가 있다.  (1) 방법: 클라이언트에서만 렌더링되는 콘텐츠를 useEffect 훅으로 처리  (2) 방법: 특정 컴포넌트에서 SSR을 비활성화하면 불일치를 방지할 수 있다.현재 useEffect를 사용할 수 없는 상황이라 나는 (2) 방법을 선택해서 해결하기로 했다. Solution두번째 방법을 사용하여 'next/dynamic' 패키지로부터 dynamic 메서드를 호출해서 화면에 보여줄 Layout의 SSR을 비화활성화하고 완전한 CSR 컴포넌트로 설정해 렌더링한다. let NoSSRComponent: ComponentType | null = null; ..

Next.js 프로젝트 내에서 SNS 자동 로그인 기능을 구현하는데 https 설정이 필요했다. 그래서 VSCode를 통해 프로젝트를 개발자 모드로 실행할 때, https로 실행되도록 관련 프로그램을 설치하고 설정 해본다.기존에 openssl을 통해서 인증서를 만들고, server.mjs를 통해서 커스텀 서버를 돌리면 브라우저에서 URI는 https로 시작하지만, 보안 경고가 생겨서 의미가 없어 보여서 이 방법을 사용한다. 1. PowerShell로 chocolately (choco) 설치https를 적용하기 위해서는 TTL/SSL 인증서가 필요하다. mkcert는 자체 서명된 인증서를 만들어주고, 이를 신뢰할 수 있도록 로컬 CA(인증 관린)를 설치하고 관리한다. 따라서 개발 중 보안 경고 없이 htt..

Problem프로젝트를 진행하면서 로컬스토리지로부터 객체 데이터를 가지고 와서, 파싱하고 state에 저장하는 과정이 반복해서 수행되고 있었다. 반복되는 과정의 코드를 줄이기 위해 커스텀 훅 useLocalStorage을 만들었다.로컬스토리지는 브라우저의 저장소로 데이터를 key-value 쌍으로 저장할 수 있다. 그런데 Next.js는 서버 사이드 렌더링을 지원하기 때문에, 서버 측에서 코드가 실행될 때 문제가 발생하게 된다. 로컬스토리지를 사용할 때는 Window 객체가 존재하는 클라이언트 사이드에서만 접근해야 한다.Next.js 클라이언트 컴포넌트에서는 일반적으로 useEffect를 사용하여 컴포넌트가 마운트된 후에 로컬스토리지에 접근하는 방식을 사용한다. 하지만 내 상황에서는 useState를 초..

Vercel로 배포를 한 뒤 사용할 수 있는 주요 기능인 Analytics와 Speed Insights는 각각 웹사이트의 트래픽 및 성능을 모니터링을 위한 도구이다. 이를 Next.js 14의 App Router 버전의 코드에 적용해본다. 1. Vercel Analytics 설치Vercel Analytics는 웹사이트의 실시간 트래픽 통계를 제공한다. 이를 통해 페이지의 조회수와 사용자 행동을 추적할 수 있다. 이 기능은 개발 모드에서는 작동하지 않으며, 배포된 애플리에케이션에서만 데이터를 추적한다. Analytics의 가장 큰 장점은 어떤 페이지가 가장 많이 방문되고 있는지, 사용자가 어떤 특정 이벤트를 많이 발생시키는지 드을 분석할 수 있다.일반적으로 이 컴포넌트는 모든 페이지에서 트래픽을 추적할 수..

Next.js 14 App Router 버전으로 개발을 진행하면서 Header 컴포넌트에 로그인/로그아웃 기능을 넣고 email 로그인을 해봤는데 로그인 상태가 변경되지 않는 이슈가 발생했다.1. Problem [ 문제 정의 ]Email 로그인 (signInWithCredentials) 할 경우 세션 값이 새로고침 해야 업데이트 되는 문제 [ 원인 분석 ]useSession Hook의 경우 loading, unauthenticated, authenticated로 3 가지 Status로 구분된다. 현재 로그인 후 accessToken이 잘 들어옴에도 loading → unauthenticated 상태에 그치고, 새로고침을 해야 loading → authenticated 상태로 변경되는 상황이다.[ 문제 접..

이번 주 면접 스터디 주제는 CS와 관련된 아래의 키워드로 구성된다. CS 기술 면접 키워드- 스레드와 프로세스의 차이, 싱글 스레드와 멀티스레드- 재귀함수- 자료구조 (트리, 힙, 스택, 큐)- 객체지향과 절차지향- 함수형 프로그래밍이란?- 프레임워크와 라이브러리- JavaScript는 싱글 스레드 언어인데, 병렬처리가 가능한 이유- CS 지식을 프로젝트에 적용해본 경험 1. 기술 면접1-1. 스레드(threads)와 프로세스(process)의 차이독립적인 프로세스는 메모리 영역을 다른 프로세스와 공유하지 않습니다. 하지만 스레드는 프로세스 내에서 프로세스 자원을 공유합니다. 스레드는 프로세스 내에서 실행에 필요한 다른 ID, 레지스터 값, 스택으로 구성되며 각각 다른 정보를 가지고 있기 때문에 다른 ..

이번에 준비할 기술면접 질문은 웹 프론트엔드 개발자라면 숙지하고 있어야 할 JavaScript와 관련된 질문이다. 스터디원 중에 기술면접을 받고 와서 JavaScript 쪽에서 나오는 질문에 답변 준비가 미흡했다는 후기를 바탕으로 주제와 키워드를 선정하게 되었다. 이번 주에 다룰 키워드는 아래와 같다. 기술면접 키워드- 호이스팅이란?- var, let, const의 차이- 프로토타입- this 스코프, 스코프체인- ES6+ 새로 생긴 기능들- 클로저- Event Loop- JavaScript 원시타입과 참조타입- 동기 비동기의 차이점- forEach 루프를 멈추는 방법 1. 기술 면접 질문1-1. var, let, const의 차이 (p. 109)각 키워드가 변수로 선언됐을 때, var 키워드는 함수 스..

친구들과 함께 모의면접 스터디 과제를 수행한다.이번주 진행하는 기술 면접 주제는 아래와 같다.1. 기술 면접을 위해 다음 키워드 공부해오기- 브라우저 렌더링 과정 (CRP)- URL 구조- 주소창에 URL 입력 시 동작 과정- http와 https- 브라우저 저장소 (Local Storage, Session Storage, Cookie)- CORS, SOP- REST API- SSR, CSR, SSG, ISR2. (내가 뽑은) 인적성 면접 질문 2개 정리- 공백기가 존재하는데 왜 발생했고, 공백기 동안 무엇을 했나요?- 앞으로 성장해 나가며 3년 뒤, 본인만의 비전이나 성장 방향에 대해 말해주세요.  1. 기술 면접 키워드 공부답변은 20초 답변을 기준으로 작성한다. 1-1. 브라우저 렌더링 과정 (CR..

원티드 프리온보딩 2024년 5월 프론트엔드 챌린지를 위한 사전 과제내가 누구인지 글로 표현하기 질문1. '나'는 어떤 성격을 가진 사람인가요?나는 신중하면서도 도전적이고 충동적인 선택과 행동을 하는 양면성을 가진 재미난 성격을 가진 사람이라고 생각해요. 신중해서 주저하거나 진도가 느린 경향이 있는데, 본인도 그걸 알아서 답답해 하다가 충동적인 행동을 하거나 선택으로 분위기를 바꾸거나 답답함을 해소하기도 하죠. 생각보다 충동적인 사고의 전환과 행동이 창의력을 가져오기도 하고 느슨해 질 수 있는 신중함에 새로운 바람을 불어 넣어 다시 의지를 불사를 수 있는 에너지를 제공해주기 때문이죠.개발을 할 때도 신중하고 기능을 추가하고, 제대로 작동하는지 점검을 해가며 진행을 합니다. 그래서 꼭 TDD를 익히고 싶다..

이번에 React 복습 강의를 듣게 되면서 node 18번대 버전을 삭제하고 20번대을 설치하게 되었다. 매번 node를 설치 삭제하고 최신 LTS 버전을 설치하는 것이 귀찮으니, node.js 버전관리 프로그램인 nvm을 설치하여 최신 LTS node.js의 재설치를 해본다. 예전 경험상 nvm을 설치하기 전에 node가 설치되었다면, 미리 삭제해둬야 했다. 혹시 오류가 생길 수 있으니 기존에 node를 설치했다면 제거해준 뒤에 nvm을 통해 다시 node를 재설치하자. 1. NVM 설치 파일 다운로드 나는 윈도우 운영체제를 사용하고 있으므로, nvm-windows 설치파일이 있는 GitHub 저장소를 이용했다. (맥 유저는 nvm 보다 n이라는 패키지 모듈을 설치하는 것이 좋다고 한다.) 이미지 상에..

비동기 작업(Queue)의 처리 우선순위 수업에서 비동기 설명에 사용되는 Callback Queue에 대해 조사해 보면 Task를 관리하는 Queue가 더 존재함을 알 수 있다. Callback Queue는 정식 명칭이 아니라는 블로그도 있고, 잠깐 찾아보면 아래와 같은 우선순위로 Event Loop 에서 처리됨을 알 수 있다. Macrotask Queue에는 setTimeout, setInterval 함수 등이 있고, Microtask Queue에는 Promise, Async/Await, Object.Obserce 등이 있다. Animation Frames에는 requestAnimationFrame과 같이 브라우저 렌더링과 관련된 비동기 작업을 수행한다. (1) Microtask Queue > (2) ..

자바스크립트의 두 가지 타입의 동작 원시타입의 동작 - 원시타입과 객체타입은 값이 저장되거나 복사되는 과정이 서로 다르기 때문이다. - 원시 타입의 경우에는 값 자체로써 변수에 저장되고 또 복사되는 반면에, 객체 타입의 경우에는 값 자체가 아닌, 값에 접근할 수 있는 주소 값이라 불리는 특별한 참조 값을 통해서 변수에 저장되고 또 복사된다. - 아주아주 중요한 포인트는 원시 타입의 경우 변수의 값을 1에서 2로 변경을 하게 되더라도 메모리 공간에 저장되어 있었던 값은 실제로 수정되지 않는다. 대신에 변경해야 할 값을 새로운 메모리 공간에 추가적으로 저장하고 이어서 변수가 가리키던 주소 공간을 추가된 주소 공간을 가리키게 한다. - 원시 타입의 값들은 값이 저장되고 복사되고 변경되는 과정에서 변수의 값이 ..

배열 메서드 배열 요소 조작 - 배열 타입 자체가 실무에서 굉장히 요긴하게 사용되는 타입이다. - 그렇기 때문에 배열을 다루는 배열 메서드들도 정말 많은 곳에서 활용되기 때문에 매우 중요하다. - 배열 요소를 조작하는 6가지 메서드를 알아본다. (1) push - 배열의 맨 뒤에 새로운 요소를 추가하는 메서드이다. - 만약 여러 개의 요소를 동시에 추가하고 싶다면 쉼표로 구분해서 추가해주면 된다. - push 메서드는 요소 추가를 수행하고 난 뒤 변환된 배열의 길이를 반환한다. // 6가지 요소 조작 메서드 // 1. push // 배열의 맨 뒤에 새로운 요소를 추가하는 메서드 let arr1 = [1,2,3]; arr1.push(4); console.log(arr1); // 1 2 3 4 const n..