IT 엘도라도

1. yarn berry로 Next.js 프로젝트 생성하기 yarn berry는 npm과 비슷한 역할의 또 다른 패키지 관리자로, 이에 관한 자세한 설명은 이 포스팅을 참고하기 바란다. yarn berry를 사용하기 위해서는 우선 npm을 이용하여 최신 버전의 yarn을 전역으로 설치해야 한다. npm install -g yarn 다음으로, create-next-app 패키지를 이용하여 TypeScript 기반의 Next.js 프로젝트를 생성한다. 이때, 만약 평소대로 npx를 사용한다면 npx create-next-app 명령어를 사용하지만 yarn을 사용할 때는 yarn create next-app 명령어를 사용한다는 점에 주목하자. yarn create next-app next-ts-airbnb -..

Node.js를 설치할 때 기본적으로 npm이라는 패키지 관리자가 함께 설치되며, 아직까지는 이게 가장 많이 사용되고 있다. 그러나 npm은 의존성 관리 방식에 있어서 비효율적이거나 문제가 되는 부분이 꽤 존재한다. 이를 해결하기 위해 yarn 개발자가 버전 2의 yarn을 새로 출시하였는데(2020.01.25), 이때부터는 yarnpkg/berry 저장소에서 별도로 유지 보수하기 시작했고 이를 yarn berry라 부르게 되었다. 그렇다면 npm이나 yarn v1은 어떤 문제를 가지고 있었는지, 그리고 새로 등장한 yarn berry는 그러한 문제를 어떻게 해결한 것인지 한 번 알아보자. 1. yarn berry (feat. Plug'n'Play) 우선, yarn berry를 사용하는 방법은 다음과 같..

이번 포스팅은 npm을 이용하여 패키지를 관리할 때 사용하는 package-lock.json 파일의 내용을 파헤쳐본다. 대략적으로는 프로젝트에서 필요로 하는 각 패키지의 정확한 버전을 명시함으로써 설치 시기에 따라 설치되는 패키지의 버전이 달라지는 문제를 막는 수단 정도로 알고 있는 사람이 많을 것이다. 그렇다면 구체적으로 package-lock.json 파일의 내용은 구체적으로 어떤 모습을 하고 있는지, 그리고 이것과 관련하여 호이스팅(Hoisting)이란 무엇인지까지 함께 알아보자. 만약 npm이나 package.json, package-lock.json 파일에 대한 기본적인 이해가 없다면 아래 포스팅을 먼저 읽고 오기를 권장한다. [JavaScript] Node.js와 npm(+ npx)의 개념 1..

1. PWA (Progressive Web Apps) PWA는 웹사이트를 모바일 앱처럼 활용할 수 있도록 하는 기술이다. 즉, 모바일 앱처럼 홈 화면에 아이콘을 추가하여 간편하게 접근할 수 있고 JavaScript로 푸시 알림이나 오프라인 동작과 같은 기능도 구현할 수 있으며 UI도 브라우저 주소 창 없이 모바일 앱처럼 보이게 할 수 있는 웹사이트를 말한다. 또한, 어쨌든 웹사이트이기 때문에 설치 없이 URL만으로 접근할 수 있고 플레이 스토어나 앱 스토어의 심사가 필요 없다는 장점도 그대로 지닌다. 결국 웹사이트와 모바일 앱의 장점을 합친 것이라 볼 수 있다. 물론 아직까지는 Android 또는 iOS 자체에 제공하는 깊숙한 기능들까지 전부 다 그대로 구현하지는 못하는 것이 사실이다. 그러나 지금까지 ..

우리는 외부 JavaScript 파일을 로드하여 사용할 때 태그를 사용한다. 그런데 태그에는 해당 JavaScript 파일의 로드 및 실행 시점에 영향을 주는 특별한 옵션(어트리뷰트)이 두 가지 있다. 바로 async와 defer이다. 길게 설명하면 끝도 없지만, 웹 개발자로서 기본적으로 알고 있어야 하는 핵심적인 골자 정도는 이번 기회에 정리하고 넘어가자. 1. 기본적인 태그의 동작 기본적으로 브라우저는 HTML을 파싱하면서 DOM을 생성한다. 그런데 그러는 도중에 태그를 만나면, 해당 JavaScript 파일을 로드하고 실행을 완료할 때까지 원래 하고 있던 HTML 파싱 및 DOM 생성 작업은 잠시 중단한다. 그림으로 보면 다음과 같다. 그런데 이와 같은 기본 동작은 다음과 같은 문제점들을 내포하고 ..

개발자라면 XML, JSON, YAML에 최소 한 번은 들어본 적이 있을 것이다. 아마도 XML과 JSON은 웹에서 서버와 클라이언트가 데이터를 주고받을 때 사용하는 형식, 그리고 YAML은 어떠한 설정 파일을 작성할 때 사용하는 형식 정도로 알고 있을 것이다. 사실 그 정도로만 알고 있어도 실무에서 크게 문제가 되지는 않지만, 한 번 정도는 각각의 개념을 깔끔히 정리해두면 좋겠다는 생각에 이번 포스팅을 작성하게 되었다. 그렇다면 본격적으로 XML, JSON, YAML의 개념에 대해 알아보도록 하자. * 본 포스팅의 내용에 직접적인 도움을 준 유튜브 '얄팍한 코딩 사전' 채널에 감사의 마음을 표합니다. (영상 링크는 게시글 하단 참조) 1. XML, JSON 1-1. XML, JSON의 필요성 웹에서 서..

0. 책 정보 1. 제목 : 당신이 옳다 (정혜신의 적정심리학) 2. 저자 : 정혜신 3. 출판사 : 해냄 4. 출간일 : 2021년 11월 15일 5. 쪽수 : 320 페이지 6. 정가 : 15,800원 1. 읽게 된 계기 우연히 친한 친구가 추천해줘서 읽게 된 심리학 책이다. 친구도 본인의 친구가 추천해줘서 읽게 되었다고 했는데, 내용이 너무 좋다며 나에게도 읽어보라고 본인이 가지고 있던 책을 빌려주었다. 워낙 책을 자주 읽는 타입은 아닌 데다가 읽더라도 보통 지식서를 읽는 경우가 많았기 때문에 심리학 책을 읽는 것은 낯설었지만 내용이 궁금하여 읽어보게 되었다. 안 그래도 나는 내가 심리적으로 힘든 시기에 어떻게 대처해야 하는지, 그리고 주변에 힘든 시기를 겪고 있는 사람이 있을 때 어떻게 도와줘야 ..

Express는 Node.js 환경의 백 엔드 프레임워크이다. 즉, JavaScript로 구현하는 서버인 것이다. 마치 Django가 Python으로 구현하는 서버인 것과 마찬가지이다. 원래 필자는 Django 프레임워크에 가장 익숙한 개발자인데, 다른 백 엔드 프레임워크도 한 번 경험해보고 싶어서 공식 문서를 읽으며 나름대로 공부를 해보았다. 그런데 Express는 정말 최소한의 기능만을 직관적으로 제공하고 있다는 느낌을 받았고, 몇 가지 핵심적인 개념만을 알면 금방 익힐 수 있겠다는 생각이 들었다. 그래서 이번 포스팅을 통해 그 핵심적인 개념을 정리해보려 한다. 1. Express 시작하기 Express의 핵심 개념을 본격적으로 알아보기 전에, 간단한 Express의 사용 방법 및 예시부터 살펴보자...

API 설계 방법에 있어 REST와 비교되는 GraphQL의 핵심적인 개념에 대해 공부해보자. GraphQL은 특정 언어에 종속된 기술이 아니기 때문에, 여기서는 언어 독립적인 방식으로 설명할 것임을 밝힌다. GraphQL 클라이언트/서버 라이브러리는 여기서 설명하는 핵심 개념을 이해한 후에 자신만의 기준으로 적절한 것을 골라 사용하기 바란다. 1. 핵심 개념 1-1. GraphQL이란? GraphQL은 REST와 마찬가지로 API를 설계하는 여러 방식 중 하나로, 일종의 쿼리 언어이다. 그런데 이는 특정 언어에 종속되는 기술이 아니다. 대신, 어느 곳에서든 쉽게 적용되어 활용할 수 있도록 언어별로 여러 라이브러리가 제공되고 있다(아래 링크 참조). GraphQL Code Libraries, Tools ..

대부분의 웹 개발자(특히 백 엔드 개발자)는 이메일 발송 기능을 한 번쯤 구현해봤거나, 앞으로 구현하게 될 가능성이 크다. 따라서 이메일의 발송 원리를 이해하고 있다면 적어도 손해는 절대 아닐 것이다. 이메일의 발송은 기본적으로 [발신자 메일 클라이언트 → 발신자 메일 서버 → 수신자 메일 서버 → 수신자 메일 클라이언트]의 흐름으로 이뤄진다. 메일 클라이언트는 사용자가 이메일을 보내거나 받을 때 사용하는 프로그램 정도로 이해하면 되고, 메일 서버는 이메일 발송을 담당하는 원격 서버라고 생각하면 된다. 만약 구글 이메일 계정에서 네이버 이메일 계정으로 이메일을 보낸다면, 발신자 메일 서버는 구글 메일 서버가 되고 수신자 메일 서버는 네이버 메일 서버가 될 것이다. 그럼 이제 이메일 발송의 각 단계에 대해..