ChatGPT 선생님과 성장하는 독학 개발자의 기록

아주 간단하게 만든 'Quick News' 프로젝트를 배포하고 싶었다. Next JS로 구현했고, 이를 쉽게 배포할 수 있는 방법 중 하나가 'Vercel'이라는 것은 강의를 통해 알고 있었다. 배포한 적은 있었지만, 강의를 따라서 해봤을 뿐, 직접 처음부터 스스로 해본 적은 없었다. (다른 서비스를 이용한 적은 있었다) 그래서 "이번에 한 번 배포해보자"라는 생각으로 시도했다. 그런데, 에러가 발생했다. "도대체 에러가 몇 개야.." 첫 번째 에러, ESLint 에러 error - ESLint: Failed to load config "airbnb-typescript" to extend from. Referenced from: /vercel/path0/quick-news/.eslintrc.json 위 ..

프로젝트를 하면서 '상태 관리'를 편하게 하기 위해 사용하는 라이브러리가 'Redux'이다. 그러나, 'Redux'는 이전에 사용한 라이브러리이며 단점이 존재한다. 이를 개선해 나온 것이 'Redux Toolkit'이다. 이번 시간에 프로젝트에 활용할 'Redux Toolkit'을 미리 학습하려고 한다. npm install @reduxjs/toolkit 우선, 사용할 라이브러리를 설치해야 한다. // productSlice.js let initialState = { productList: [], selectedItem: null, } function productReducer(state = initialState, action) { let {type, payload} = action; switch (t..

어제, 스코프와 클로저에 대해 배웠다. 배우면서 자연스럽게 컨텍스트 실행이라는 단어가 나왔다. 그렇다면, '컨텍스트 실행'은 무엇일까? 컨텍스트 실행 '컨텍스트(Context)'는 코드가 실행될 때 변수와 함수에 접근할 수 있는 '범위(Scope)'를 나타낸다. 컨텍스트는 '실행 컨텍스트(Execution Context)'라는 내부 데이터 구조로 관리가 된다. 각각의 실행 컨텍스트는 변수, 함수 선언, this 값 등과 같은 정보를 갖고 있다. 컨텍스트 실행은 '스택(Stack)' 형태로 관리가 된다. 새로운 코드 블록이 실행될 때마다 해당 코드 블록에 대한 새로운 실행 컨텍스트가 생성이 되고, 새로 생성된 컨텍스트는 스택의 가장 위에 쌓인다. 코드 블록의 실행이 완료되면 해당 실행 컨텍스트는 스택에서 ..

스코프 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 쉽게 말해, '식별자가 유요한 범위'를 말한다. 즉, 식별자(변수)를 찾기 위한 규칙이다. 스코프의 종류 스코프는 두 가지 종류로 나뉜다. 전역과 지역으로 나뉘며, '전역'은 전역 스코프를 말하며 어디서든지 참조가 가능하다. '지역'은 지역 스코프이며 자신의 지역 스코프 및 하위 스코프에서만 유효하다. 스코프는 변수 이름의 충돌을 방지하는 것을 제공하며, 같은 이름의 변수 사용이 가능하다. 그러나, 이는 'var' 키워드에서 해당이 되며, 스코프 내 식별자는 유일해야 된다. (const, let) 지역 소크프를 생성하는 방법 블록 레벨 스코프: 대부분의 프로그래밍 언어가 지역 스코프 생성 방법을 사용하며, 함수 몸체 + 모든..

"리터럴(literal) 타입"은 뜻 그대로 읽기 전용이라는 의미이다. 즉, 리터럴 타입은 읽기만 가능할 뿐, 수정할 수 없다. 간단한 예시로 리터럴 타입이 무엇인지 이해해보자. type ImageType = "png" const imageType: ImageType = "png" const imageType2: ImageType = "jpg" 위의 코드처럼, 리터럴 타입으로 ImageType을 "png" 값으로 선언하였다. 그리고 ImageType 타입을 상속받아서 선언된 두 개의 변수가 있다. 하나는 "imageType", 또 다른 하나는 "imageType2"이다. "imageType" 변수는 "png" 값으로 선언이 되었다. 이는 리터럴 타입으로 선언한 것과 같은 값이기 때문에 에러가 발생하지 않..

function counting() { let i = 0; for (i = 0; i { console.log(i); }, i * 100) } } counting(); 위의 코드를 실행하면, 결과가 어떻게 나올까? 혹시, '4'라고 생각했다면 오답이다. 일반적으로 반복문 속 'i'의 값이 0, 1, 2, 3, 4가 되면 종료가 된다. 그래서 '4'가 최종 결과라고 생각하기 쉽다. 위의 코드는 'i'라는 변수를 0으로 초기화하고, 반복문을 통해 'i' 변수가 5보다 작을 때까지 'setTimeout()'을 호출한다. 여기서, setTimeout() 함수를 알아야 하는데, 이 함수는 일정 시간이 지난 후에 콜백 함수를 실행하는 자바스크립트 함수다. 첫 번째 ..

검색 엔진 최적화(Search Engine Optimization, SEO)가 필요한 이유는 다음과 같다. 콘텐츠, 웹 페이지를 제작할 때, 궁극적인 목적은 사용자에게 양질의 정보를 올바르게 전달하는 것이다. 잘 만들어진 콘텐츠와 잘 작성된 문서라도 사용자가 읽지 않는다면 그것은 콘텐츠, 문서로써 의미가 없다. 검색 엔진 최적화에 영향을 주는 요인들은 10가지 있다. 페이지 타이틀(Title) 올바른 meta 태그 사용 캐노니컬(Canonical) 태그 사용 모바일 친화적인 웹 시맨틱 마크업, 의미있는 문서 작성과 링크(a), 이미지(img) 등 올바른 태그와 그에 맞는 속성 사용 SSL(Https) 사용 여부 핵심적인 웹 지표(LCP, FID, CLS)와 로딩 속도 백링크 연관성있는 양질의 콘텐츠를 주..

Next JS로 코드를 작성하다 보면 갑자기 아래와 같은 에러가 발생할 수도 있다. Warning: validateDOMNesting(...): cannot appear as a descendant of 이 문제가 발생하는 이유는 HTML에서 유효하지 않은 중첩이 발생했을 때 발생한다. 이 경우, a 태그가 a 태그 내부에 중첩되어 있다는 뜻이다. 이전에는 Link를 사용했을 때, a 태그를 같이 사용해서 구현했었다. 즉, a 태그 역할을 Link 안에 또 다른 a 태그를 사용했기 때문에 발생한 것이다. ... or ... 그러나 이제는 위 처럼 코드를 작성하지 않는다. 왜냐하면, 이제는 a 태그를 사용하지 않고 Link로만 처리하기 때문이다. 그렇기 때문에 아래와 같이 수정해서 처리하면 더 이상 에러가..