IT 엘도라도

1. Recoil 소개 작지 않은 규모의 웹사이트를 React로 개발해본 사람이라면 전역 상태가 얼마나 중요한지 알고 있을 것이다. 전역 상태가 없다면, 여러 컴포넌트가 특정 상태를 공유해야 할 때 컴포넌트 트리의 props 전달 구조가 매우 복잡해지기 때문이다. 그래서 보통 React로 개발할 때는 Redux나 MobX 등의 전역 상태 관리 라이브러리를 함께 사용하는 경우가 많다. 그러나 React를 배우기 위해서 또 다른 라이브러리도 배워야 한다는 것은 다소 부담스럽다. 해당 라이브러리를 사용하기 위해 추가로 작성해야 하는 보일러 플레이트 코드도 그다지 마음에 들지 않는다. 웬만하면 React가 자체적으로 전역 상태 관리 기능을 제공했으면 좋겠다. 이러한 맥락에서 등장한 React 자체의 기능이 바로..

목차 ⦁ 구체적인 기술 스택 선택 (Next.js, Django REST Framework) ⦁ Next.js 프로젝트 생성 및 관련 패키지 설치 ⦁ Next.js 프로젝트 Docker 세팅 (로컬 환경) ⦁ Next.js 프로젝트 Docker 세팅 (배포 환경) ⦁ Django REST Framework 세팅 ⦁ 기존 인증 기능과의 호환성 확보 ▎구체적인 기술 스택 선택 (Next.js, Django REST Framework) 모든 준비가 완료되었으니, 이제 React로 기술 스택을 전환할 때다. 우리는 프론트 엔드 기술 스택으로 React를 선택하였다. 그 이유에 대해서는 이 포스팅에서 설명하였다. 그런데 React를 선택했다고 끝이 아니다. 순수한 React로 개발하면 검색 엔진 최적화(SEO)에..

Node.js 프로젝트(React, Next.js 등)에서 개발을 진행하다 보면 예쁜 코드에 대한 욕심이 생기기 마련이다. 여기서 말하는 '예쁜 코드'란 문법적으로 올바른 코드를 의미할 뿐 아니라 일관된 컨벤션으로 작성된 코드를 의미하기도 한다. 그리고 이렇게 코드를 예쁘게 만드는 툴들은 똑똑한 사람들이 이미 만들어 놨는데, 가장 유명한 것이 바로 ESLint와 Prettier이다. 이 둘의 차이점을 간단하게 설명하면, ESLint는 코드 문법 검사 및 코드 포맷팅을 수행하는 툴이고, Prettier는 코드 포맷팅만을 집중적으로 수행하는 툴이다. 일반적으로 ESLint와 Prettier를 함께 사용하는 경우가 많다. 그러나 이때 주의가 필요하다. 왜냐하면 ESLint도 코드 포맷팅을 수행해서 Pretti..

기술 스택 전환을 위한 대대적인 Django 서버 정리 작업을 작년(2021년) 중반기까지 진행한 이후, 회사 차원에서 필요로 하는 대규모 기능들을 잇따라 개발하게 되면서 기술 스택 전환을 위한 작업은 다소 지연되었습니다. 이 포스팅은 해당 기능들의 개발이 완료되었던 작년 말에 진행한 서버 배포 라인 변경 작업에 관해 기술합니다. 목차 ⦁ 기존 설계에 대한 번복 (Docker 도입의 계기) ⦁ Docker 기반의 ECS 배포 환경 구축 ▎기존 설계에 대한 번복 (Docker 도입의 계기) Docker 기반의 ECS 배포 환경을 구축하게 된 계기를 설명하려면, 이 포스팅에서 기술 스택의 전환을 위해 설계했던 구조에 대한 번복이 먼저 필요할 것 같다. 여기서 설계했던 구조는 결과적으로 현재 구축한 ECS 배..

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다. Next.js는 IE11을 포함한 모든 현대 브라우저들(Edge, Firefox, Chrome, Safari, Opera 등)을 지원한다. 1. Polyfills Next.js는 IE11 호환을 위해 필요한 Polyfill들을 자동으로 삽입한다. 또한 fetch() 함수, URL 클래스, Object.assign() 함수 등의 기..

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다. Next.js는 다음과 같은 환경 변수 파일들을 통해 자체적으로 환경 변수를 지원한다. 환경 Default 환경 변수 (원격 저장소 푸시 O) Secret 환경 변수 (원격 저장소 푸시 X) 모든 환경 .env .env.local 개발 환경 (next dev) .env.development .env.development.local..

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다. Next.js 앱이 제공할 Static 파일들은 프로젝트 폴더의 public 폴더에 둬야 한다. Next.js는 public 폴더에 존재하는 모든 파일들을 Base URL(/)을 통해 접근할 수 있도록 하기 때문이다. 예를 들어, public/me.png 파일은 코드 내에서 /me.png URL을 통해 접근하도록 할 수 있다. i..

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다. Next.js에서는 JavaScript에서 CSS/Sass 파일을 import 할 수 있다. 이는 Next.js가 JavaScript에서의 import 문법을 확장했기 때문에 가능한 일이다. (아마도 Next.js가 Webpack의 동작 방식을 커스터마이징 한 것이 아닐까 추측한다.) 1. CSS 전역적으로 영향을 미치는 CSS ..

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다. 1. 페이지 및 라우트 Next.js에서 각각의 페이지는 pages 디렉토리에 존재하는 .js, .jsx, .ts, .tsx 확장자의 파일에서 default export 되는 React 컴포넌트로 표현된다. 그리고 각 페이지의 라우트는 해당 파일의 이름에 의해 결정된다. 예를 들어, pages/about.js 파일은 /about ..

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다. 1. create-next-app 패키지 이용 다음과 같이 create-next-app 패키지를 이용하면 Next.js 앱의 개발을 위해 필요한 대부분의 것들을 쉽게 설치할 수 있다. npx create-next-app@latest # TypeScript 프로젝트 npx create-next-app@latest --typescri..