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

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) 액션 아이템 오늘 문득 슬퍼서 왜 그럴까 생각을 해봤는데,최근 나에게 평가 받고,지인 들에게 평가 받고,인사 담당자들에게 평가 받았다. 그런데 사람들과 대화하면서 내가 바랬던 건,있는 그대로 '잘하고 있다'라는 인정과 칭찬이 아니었나 싶다.아프지만 나를..

원티드 프리온보딩 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..

나는 어떤 개발자인가? 이상적이고 좋은 개발자가 아닌, 나라는 개발자에 대해서 표현하는 글의 예시 이름 직군 소개글 출처 권기석 프론트엔드 사용자 경험과 가장 관련 있는 브라우저에 관심이 생겨 프론트엔드 개발을 시작했다. 현재 마트 관련 커머스 서비스와 사용자 중심 모바일 디자인 시스템 개발 등에 참여하여 서비스 발전에 기여하고 있다. 우아한 타입스크립트 with 리액트 (표지) 권세진 프론트엔드 사용자가 선호할 만한 서비스를 기획하는 것을 좋아하는 프론트엔드 개발자이다. 새로운 기술을 빠르게 접해보며 검증하는 것을 즐긴다. 우아한테크코스 3기 웹 프론트엔드 과정을 거쳐 현재 우아한형제들의 만다오 제품을 개발하고 있다. 우아한 타입스크립트 with 리액트 (표지) 고우혁 프론트엔드 커피와 아쿠아리움을 사..

구조분해할당 (Destructuring) (1) 배열의 구조분해할당 - 구조분해할당이란 배열이나 객체에 저장된 여러 개의 값들을 말 그대로 분해해서 각각 다른 변수에 할당하는 문법 - 배열의 요소를 변수에 할당한다고 했을 때, 변수 마다 일일이 배열의 요소를 넣어 주는 것은 상당히 불편하다. - 이럴 때 구조분해할당을 사용하면 매우 편리하다. - 배열의 요소를 넘어가는 변수를 구조분해할당으로 선언하면, 배정되는 배열의 요소가 없는 배열들은 초기화 되지 못하고 undefined가 할당된다. - 배열의 요소가 구조분해할당으로 선언하는 변수의 수 보다 모자랄 상황을 대비해서 구조분해할당 시에 기본값을 설정하는 것도 가능하다. - 만약 배열의 원소에서 변수로 만들 필요가 없는 경우, let 다음에 나오는 대괄호..

Truthy와 Falsy - JavaScript에서는 참, 거짓이 아닌 값도 참, 거짓으로 평가한다. - 어떤 값이 참이나 거짓을 의미하는 값이 아닌데도, 조건문 내에서 참이나 거짓으로 평가하는 JavaScript의 특징을 지칭할 때 Truthy, Falsy라고 부른다. - 아래 if 문의 조건식에 있는 123이란 숫자 값처럼 참은 아니지만 조건문 내에서 참으로 평가되는 이러한 값들을 Truthy(트루시), 즉 참 같은 값이라고 표현한다. - 반대로 아래 코드 if 문의 조건식에 있는 undefined 처럼 거짓은 아니지만 조건문 내에서는 거짓으로 평가되는 이런 값들을 Falsy한 값, 즉 거짓 같은 값이라고 표현한다. - JavaScript에 존재하는 모든 값은 Truthy하거나 Falsy 하다. 이런..

객체 원시 타입이 아닌 객체 타입이며, 여러가지 값을 동시에 저장할 수 있는 자료형을 의미한다. 객체를 이용하면 현실 세계에 존재하는 어떤 삼루이나 개념을 표현하기 용이함 객체의 생성과 프로퍼티 - JavaScript에서는 객체를 두 가지 방식으로 생성할 수 있다. - 첫번째 방법은 객체 생성자라고 불리는 new Object() 내장함수를 이용하는 방식이고, 두번째 방법은 빈 중괄호를 하나 열어서 객체를 생성해주는 객체 리터럴 방식이다. 두가지 방식 모두 동일한 객체를 생성한다. 객체 리터럴 방식이 훨씬 더 간겨하기 때문에 대부분은 이 방식을 사용한다. - 객체를 작성하는 방법은 key-value 쌍을 콤마(,)로 구분해서 중괄호 안에 작성한다. 이때 key-value 쌍들을 객체의 프로퍼티라고 부르며,..