❓스코프란 스코프는 사전적 정의로 범위라는 의미를 가진다. 말그대로 스코프는 변수 또는 함수가 유효한 "범위"를 나타낸다. 사실 변수 이름, 함수 이름, 클래스 이름과 같이 모든 식별자는 어디에서 선언되었는 지에 따라 범위가 결정되고 식별자를 참조할 때 어떤 식별자를 참조해야 하는지를 스코프를 통해 정하게 된다. 실제로 우리는 컴퓨터를 사용하면서 스코프에 대해서 간접적으로 경험하고 있었다고 해도 과언이 아니다. 특정 파일의 이름을 "a"라고 했을 때 같은 폴더 내에서 두개의 파일 이름이 "a"일 수는 없지만, 다른 폴더내에서는 각각의 파일이 "a"라는 이름을 가질 수 있다. 1️⃣ 스코프의 종류 프로그래밍 공부를 해본 사람이라면 다들 전역 변수와 지역 변수에 대해서 들어본 적이 있을 것이다. 이 때 변수..
❓호이스팅이란 hoisting을 번역해보면 '끌어올리다'라는 뜻을 가진다. 기본적으로 코드는 위에서 아래로 순차적으로 실행되지만, 사전적 정의와 마찬가지로 자바스크립트에서 호이스팅은 모든 선언문을 해당 스코프의 최상단으로 끌어올리는 동작을 말한다. 실제로 코드가 끌어올려지는 것은 아니고 자바스크립트 엔진이 런타임 이전에 모든 선언들을 렉시컬 환경이라고 하는 자바스크립트 내부 데이터 구조에 저장하는 것으로 선언문이 끌어 올려진 것처럼 동작하는 것이기 때문에 오해하는 일이 없길 바란다. 변수 호이스팅 변수는 var, let, const 키워드를 사용하여 선언을 진행한다. 이 때 var과 let, const와의 호이스팅에는 차이가 존재하기 때문에 구분해서 알아보도록 하자. 1️⃣ var var과 let, co..
프로젝트를 진행하면서, 프로젝트의 볼륨이 커질수록 관리해야 하는 상태가 많아지고, 컴포넌트 중첩 구조가 발생함에 따라 관련 state를 상위 컴포넌트에서 하위컴포넌트로 반복적으로 전달하게 되는 props drilling 문제가 발생했다. 따라서 코드 유지보수를 원활하게 관리하고, 상태관리를 간편하게 하기위해 상태관리 라이브러리를 도입하게 되었는데, 이전 프로젝트에서는 redux를 사용하여 상태관리를 진행했었지만, 보일러 플레이트가 적고 비교적 간단한 recoil을 도입하게 되었고, 해당 과정을 포스팅하려고 한다. 1. recoil 라이브러리 설치 일단 recoil 패키지를 설치한다. // npm npm install recoil // yarn yarn add recoil 2. recoil 세팅하기 rec..
프로젝트를 진행하면서 api 요청을 통해 받아온 response 중에 외부 이미지 주소가 있었는데, 해당 주소를 Next/Image의 src에 직접 전달하니까 다음과 같은 에러가 발생했다. 기본적으로 nextjs는 nextjs에서 지원하는 Image 컴포넌트를 통해 애플리케이션의 이미지 최적화를 진행한다. Image 컴포넌트에는 필수적으로 필요한 props가 존재하는데, src, width, height, alt가 바로 그 필수적인 props에 해당한다. 오늘은 Image 컴포넌트에 대해서 자세하게 알아보기 보단, 외부 이미지를 가져오는데 집중할 것이기 때문에, Image 컴포넌트에 대해서 더 자세하게 알고 싶다면 공식문서를 참고하기 바란다. Image 컴포넌트에 필수적인 props인 src에는 다음과 ..
웹개발을 진행하면서 가장 처음 애를 먹었던 오류가 바로 CORS였고, 현재까지도 프로젝트를 진행하다보면 빈번하게 CORS를 마주친다. 처음에 CORS를 마주쳤을 때는 이해하기도 어려웠고 원하는 대로 API요청이 이루어지지 않아 스트레스를 많이 받았는데, 지금 CORS 에러를 마주하면 전보다는 버벅이지 않는 모습을 보면서 아 그래도 점점 성장하고 있구나를 느낀다. 따라서 이번 포스팅에는 CORS 에러에 대해서 한 번 다뤄보도록 하겠다. CORS 란? CORS는 Cross-Origin-Resource Sharing 으로 교차 출처 리소스 공유라는 뜻으로 해석할 수 있다. 여기서 말하는 교차 출처라는 것은 CORS를 다루는 많은 포스팅에서 다른 출처라는 뜻으로 해석하여 설명한다. 그렇다면 CORS는 다른 출처..
프로젝트를 진행하다보면 해당 애플리케이션의 레이아웃이 존재하게 되는데, 모든 페이지마다 레이아웃을 적용하기엔 반복적인 코드가 들어가기 마련이다. 그래서 오늘은 프로젝트 레이아웃을 공통적으로 적용하는 방법에 대해서 정리하면서, Nextjs 문서에서 소개하는 per-page Layout을 이용하여 다수의 레이아웃을 사용할 수 있는 방법에 대해서도 소개하도록 하겠다. 들어가기 전 일단 공통 레이아웃을 작성하기 전에 Nextjs의 구조를 한 번 살펴보자. pages 폴더 내부에 존재하는 _app.tsx 파일은 서버에 요청이 들어가면 가장 먼저 실행되는 최상위 컴포넌트를 담당한다. 모든 페이지가 초기화 되기 전 해당 파일을 거쳐가기 때문에 애플리케이션의 전체적인 설정을 해줄 수 있는 공간이라고 표현해보겠다. 그렇..
협업을 하다보면 Pull Request와 Issue를 사용하게되는데, 처음 협업을 진행했을 때 깃헙 칸반보드를 활용해서 스프린트 방식으로 개발을 하면서 직접 칸반보드에 구현할 기능을 명시하고 issue 탭에서 연결시키고, pr을 올리면서 해당 이슈를 또 연결하고....😂 나중에 보면 칸반에 이슈 번호가 뒤죽박죽 섞여있는 것을 보면서 issue와 pr을 연결하고 자동으로 issue를 닫아주는 방법을 정리해야겠다 생각했었는데, 이번에 새로운 프로젝트가 일정에 잡혀있어서 같이 협업하는 개발자 분과 컨벤션을 정하는 와중에 포스팅을 써보려한다. issue 생성하기 가장 먼저 issue를 생성해보자. issue를 생성해야하는 해당 레포에 들어가서 issue 탭을 클릭하고 New issue 버튼을 클릭해 이슈를 생성..
