작성 목적 최근 면접을 보면서 받은 질문이고 아주 기초적인 내용이지만 답변을 깔끔하게 못했음 개념을 알고는 있지만 설명하는 연습을 많이 안 해본게 가장 큰 원인이라는 생각이 들어서 설명하는 연습을 해보기 위해서 글을 작성했다. 단순히 var, let,const 키워드만 정리하는게 아니라 TDZ, 호이스팅, 스코프와 같은 관련 개념도 함께 다룸 var, let, const 차이점 정리표 선언 재선언 재할당 var undefined로 초기화 가능 가능 let 초기화 x 불가능 가능 const 초기화 x 불가능 불가능 재선언 이미 선언된 변수명을 다시 선언하는 것 var 변수1; // var 첫번째 선언 var 변수1; // var 두번째 선언 : ok let 변수2; // let 첫번째 선언 let 변수2;..

들어가며 이번주 면접 스터디 주제인 네트워크에 대해 학습을 진행중입니다. 프론트엔드 개발자는 CS 중에서도 특히 네트워크에 관한 지식이 중요하다고 들어서 면접 질문 중 출제 빈도가 많은 내용을 위주로 공부하면서 포스팅해보고자 합니다. 오늘은 HTTP를 주제로 잡고 CS책과 MDN, SSL 사이트를 참고하면서 핵심내용을 정리해보았습니다 HTTP Hyper Text Transfer Protocall 하이퍼텍스트 전송 프로토콜 클라이언트와 서버사이에 일어나는 요청/응답 규약 HTTP의 특징 단방향 통신 클라이언트는 요청, 서버는 응답하는 통신 구조 무상태성 HTTP 통신에서 서버는 클라이언트의 상태를 저장하지 않음 즉, 서버는 이전에 클라이언트가 어떤 요청을 했는지 상관없이 응답을 보낸다. 무연결성 클라이언트..

들어가며 이번에는 this에 대해 공부하며 포스팅을 해봤습니다. 이론적인 내용보다는 실제로 코드를 작성하면서 호출방식에 따라 어떤 값이 this가 되는지 확인할 수 있는 코드를 작성해봤고 그에 대한 내용을 포스팅했습니다~ 처음에는 어려웠던 개념이었지만 직접 코드로 쳐보니 그렇게 어렵지 않은 개념이었던 것 같습니다. this 자신이 속한 객체 또는 자신이 생성하는 인스턴스를 가리키는 자기 참조 변수 ⭐️ 함수가 호출될 때 결정된다는 특징이 있다 this 바인딩 특징 기본적으로 this에는 전역 객체가 바인딩 되지만 호출하는 방식에 따라 this가 가리키는 값이 동적으로 변화함 1. 일반함수로 호출된 모든 함수 내부의 this에는 전역 객체가 바인딩 2. 메서드로 호출시에는 호출한 객체가 바인딩 3. 생성자..

들어가며 이번주 면접 스터디 주제가 스코프, 클로저, 프로미스, this, 프로토타입 등 JS 개념들인데 전체적으로 쭉 어보니 스코프를 제대로 알지 못하면 나머지는 이해하기 힘들거라 생각되어 스코프 개념을 우선 공부했고 그중 핵심이라고 생각하는 부분을 요약해봤습니다. 스코프 식별자를 참조할 수 있는 유효범위 유효범위는 식별자가 선언된 위치로 결정된다. Ex) var x = "global"; function foo() { var x = "local"; console.log(x); // (1) } foo(); console.log(x); // (2) 위 예제 코드에서 코드 가장 바깥 영역에서 선언된 x는 전역에서 참조가능하지만 함수 foo 내부에서 선언된 x는 함수 내부에서만 참조 가능 스코프 체인 '함수가..

작성목적 next.js로 제작한 포트폴리오 웹 사이트를 버셀로 배포할 때 npm 패키지, next.js 빌드 과정 에서 발생한 에러를 해결하는 과정과 참고자료를 정리해보았습니다. 에러 eslint 에러 ESLint : Failed to load config "react-app" ESLint : Failed to load plugin "prettier" eslint config, plugin 에러 발생 빌드 에러 Build optimaization failed: found pages without a React Component as default export in ~~~ 빌드과정에서 디렉터리 구조에러 발생 에러 원인 eslint 에러 원인 프로젝트를 설정할때 초기 설정은 필요없을 거라 생각해서 기존 원티..

들어가며 💻 next.js 와 노션 API를 사용해서 포트폴리오를 만드는 과정에서 노션 api를 처음 사용해봤는데 백엔드 서버랑 db 구축하는 일 없이 간단하게 정적 웹을 만들 수 있다는 점이 편리했습니다. 포트폴리오는 앞으로도 조금씩 수정할 일이 있을 것 같아서 노션 페이지에 있는 db에 get요청을 하는 방법과 포트폴리오를 만들면서 마주친 에러에 대한 내용을 정리해봤습니다. 에러 ❌ Notion API axios 에러 export async function getStaticProps() { const options = { method: 'POST', url: `https://api.notion.com/v1/databases/${DATABASE_ID}/query`, headers: { accept: '..

💻 들어가며 원티드 프리온보딩이 끝나고 이력서를 넣으면서 이전에 만들었던 프로젝트나 개인적으로 할 프로젝트를 담을 포트폴리오가 필요하다고 생각해서 만들기로 했습니다. 아무래도 노션이나 ppt같은 프로그램으로 작성하는 것보다는 직접 만들어보는게 흥미도 가고 애정을 가지고 더 열심히 만들 수 있을 것 같아 직접 만들기로 했습니다. 오늘은 포스팅 내용은 포트폴리오의 레이아웃을 tailwind로 어떻게 구현했는지에 대해 작성해 봤습니다. ⚒️ 기능 구현 1. 페이지 레이아웃 📌 핵심 코드 const Nav = () => { return ( FE 개발자 신상오 Home Project Contact ); }; Tailblock 사이트를 참고해서 기본적인 뼈대를 잡은 다음에 각 요소의 위치와 색상 같은 디테일한 요소..

💻 들어가며 과제 전형을 진행하면서 제작했던 회원가입과 로그인 페이지입니다. tailwind css와 react-hook-form 를 사용해서 제작했습니다. 레이아웃이 어떤식으로 잡혀있는지를 위주로 포스팅한 글이고 이후에 react-hook-form을 어떻게 사용했나 다룰 예정입니다 😀 ⚒️ 기능 구현 회원가입 페이지 로그인 페이지 📌 핵심 코드 로그인 {errors && (errors.email || errors.password) && ( 잘못된 로그인 정보입니다. )} 아이디가 없으신가요? 회원가입 flex, justify-content : 가운데 맞춤 h-screen : 꽉 찬 화면으로 구현 m(margin), p(padding) : 간격조절 회원가입도 로그인 페이지와 비슷한 구성으로 작성되어 생략..