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

고민지원하는 회사에 자체 커리어 페이지나 양식이 있지 않고서는 제네럴 하게 작성한 이력서와 포트폴리오를 제출하고 있다. 요즘 관심이 있는 유지보수와 효율적인 코드 작성면에서 배울 점이 많았던 한 회사의 블로그 글을 보고 채용공고에 지원을 했다. 하지만 결과를 서류에서 바로 탈락.해당 채용공고는 신입 개발자가 아닌 3년 차 이상의 주니어 개발자를 채용을 희망하고 있었기 때문에 당연하다고 생각할 수 있다. 하지만 나는 Yess 팀에서 보낸 서류 탈락 사유를 보고 고민에 빠졌다.  ... 도메인에 대한 이해와 경험을 바탕으로React와 TypeScript를 통한 웹 클라이언트 개발을 빠르게 수행하실 수 있는 분을 찾고 있습니다. ...  전달해주신 이력서를 바탕으로 스킬과 경험을 검토하였으나,아쉽게도 저희 팀..

수십 년 동안 한 가지 일을 하면서 전문가가 안 되는 비결이 있다면이 타당성과 피드백이 부족한 환경에서 일하는 겁니다.-김창준, 함께 자라기- 이 글귀는 책 함께 자라기를 읽으면서 충격을 받은 내용이라 가져와 봤다.여담으로 나는 요즘 생활에 피드백을 주기 위해서 매일 밤 10시 회고 모임을 가지고 있다.같이 프론트엔드 직군을 준비하는 개발자들이 모여서 고군분두한 하루의 일과를 이야기하고 격려하는 모임이다. 오늘 쓰고자 하는 내용은 독서한 내용에 대한 회고이다. 그리고 추가된 앞으로의 목표이기도 하다. 진짜 개발자가 되는 습관 중 하나는 최신의 공식 문서(Docs)를 보면서 문제를 해결하는 것이라 생각한다.가장 빨리 찾을 수 있는 블로그나 ChatGPT 구현 예시는 게임의 튜토리얼에 불과하다. 진짜 본 게..

프로젝트를 배포하기 위해서 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를 초..

요약이제 공부가 아니라 프로젝트를 미친듯이 할 때앞으로 가져야 할 성장법책이든 강의든 공부는 이제 그만하는 게 좋겠다. 책도 빠르게 한 두번 훓어보고 모르는게 있을 때 찾아볼 수 있는 정도로만 알아두자. 부트캠프로 배운 기간 4 ~ 6개월이란 시간도 정말 많이 배운거다.기본이 되는 기술을 익혔다면 주변 기술들은 프로젝트를 하면서 필요한 것들을 익혀가며 가져다 쓸 뿐이다.자주 보면서 익숙해 지는 것이 중요하다. 처음에는 이해 못해도 이곳저곳에서 자주 보면서 이해가 될 것이다.그러고 나서는 내가 직접 해보고, 적용해보는 데 시간을 써야 한다.일단 엉터리더라도 내가 필요한 부분만 가져와서 스스로 활용하고 덧붙여 나가자.진짜 프로젝트강사가 잘 정리한 강의와 책으로 지식을 배우는 것은 체계적이고 잘 동작하겠지,하..

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..

머리는 복잡하고 별다른 성과없이 시간을 보내면서 뒤 늦게 작성한 이력서와 포트폴리오를 제출했다.10 곳 정도 떨어지면서 이력서 피드백도 받고 다시 제출하기를 반복.스타트업 중에서도 마음에 드는 기업 문화를 가진 회사에서 정성을 들여 지원서를 수정해서 지원했다.운좋게도 1차 면접을 거쳐 실기 평가를 진행했다. 하지만 결과는 탈락했고, 계획했던 여행을 다녀왔다. 실기 평가를 하면서 여행 준비도 같이 했기 때문에 정신이 없었다. 그러면서 내가 이곳에 가서 정말 잘 할 수 있을까? 라는 고민도 함께 했다. 아마도 이런 불필요한 에너지 손실로 인해서 집중해서 개발하지 못했고, 제한 시간 내에 기능 구현을 하지 못한 것이 떨어진 이유가 아닐까 싶다. 소통에서도 매일 매일 담당자와 소통하며 과제를 진행했다면 다른 쪽..

이러다간 안되겠다! 😱 싶어서 위기감을 가지고 쓰는 2024년 상반기 회고.벌써 2024년 상반기가 지나가고 있다. (오늘은 2024.05.28)6개월이 지났지만, 정기적으로 회고를 안해서 내가 잘 성장하고 있는지 점검을 못했다.6개월을 돌아보며 잘한 점은 칭찬하고, 부족한 부분은 하반기에 보완하도록 하자. 오늘 회고해볼 세부 내용은,   1) 목표 달성률 확인하기   2) Localhost에서 벗어날 용기   3) 코딩 테스트 부담감 내려놓기   4) 액션 아이템 오늘 문득 슬퍼서 왜 그럴까 생각을 해봤는데,최근 나에게 평가 받고,지인 들에게 평가 받고,인사 담당자들에게 평가 받았다. 그런데 사람들과 대화하면서 내가 바랬던 건,있는 그대로 '잘하고 있다'라는 인정과 칭찬이 아니었나 싶다.아프지만 나를..