nextjs의 끝판왕이라 생각되는 React-Query를 개념적으로만 다루어보겠습니다. React-Query는 React 앱에서 비동기 로직을 간편하게 처리할 수 있도록 도와주는 라이브러리입니다. 이전에 Redux와 Saga를 사용하여 비동기 관련 로직을 다뤘던 것과 다른 비동기 작업을 접근하고, 다양하고 유용한 기능을 제공하고있습니다. React-Query React-Query는 비동기 데이터 요청과 관련된 여러 가지 문제점을 해결하기 위해 등장했습니다. 이 라이브러리는 전역 상태 관리, 캐싱, 리패칭 등을 자동으로 처리하여 개발자가 데이터의 무결성에 직접 신경 쓰지 않아도 되도록 돕습니다. 기존에는 React 애플리케이션에서 비동기 데이터를 다루기 위해 Redux나 Context API와 함께 자체적..

개요 현재 제목에 '01-'로 시작하는 글들의 목적은 npx create-next-app으로 만드는 템플릿을 직접 구성하는 목적이다. 만약 npx create-next-app@latest my-app으로 프로젝트를 만든다면 자동으로 물어보는 질문은 다음 6가지이다. ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use src/ directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Ye..

서론 ESLint는 기본적으로 code linter이다. 코드 품질과 관련. Prettier는 기본적으로 code formatter이다. 코드를 이쁘게 정렬해준다. 문제는 linter의 기능에 formatter의 기능도 들어가기 때문에 충돌이 생긴다. 이 충돌을 막아주는 것은 eslint-config-prettier 라는 패키지다. 지난 번 Airbnb 설정을 따르려고 했지만 수많은 문제점이 생겼다. 너무 엄격하기 때문에 learning curve가 높고, 그로 인해 오히려 개발에 지장을 준다. 또한 예외 rules가 늘어나다보니 linter의 본래 역할을 못 하는 경우도 발생했다. 이번에는 간단하게 Lint의 기본 기능에도 충실하고 Prettier와도 충돌나지 않게 처음부터 다시 설정해보자. Tailw..

1995년 앞서 말했던 Netscape Communications의 두 가지 전략은 당시 Microsoft라는 공룡에 대항하기 위해 동시에 진행되었다. 1995년 4월 Netscape은 Brendan Eich를 영입하게 되었다. 5월에 Netscape 2.0 beta의 일정에 맞추기 위해 Brendan Eich는 입사하자마자 10일만에 브라우저에서 사용할 수 있는 동적 언어를 탄생시켰다. 10일만에 무에서 유를 창조할 수 없으니 Brendan Eich는 여러 언어에서 아이디어를 따왔다. 그 중 특히 4가지에서 영감을 받았는데, 1. 함수형 언어인 Lisp 계열의 Scheme이란 언어에서 영감을 받고 (first-class functions) 2. Bill Atkinson이 개발한 매킨토시의 Hyperta..

서론 Frontend framework의 진화에 대해서 이해를 하면 왜 javascript가 현재의 모습인가에 대한 약간의 통찰이 생긴다. 그러나 framework의 역사를 이해하려면 browser의 진화에 대해 같이 봐야 이해도가 더 올라간다. 그래서 browser, javascript, framework의 evolution에 대해서 간략히 정리해보려고 한다. HTML 브라우저 진화 정리하기 전에 우선 HTML은 언제부터 쓰였나가 궁금해져서 검색해보았다. 시작은 유럽의 입자물리연구소인 CERN에서 출발하였다. 세계의 여러 대학과 연구기관에서 일하는 물리학자들 상호간의 신속한 정보교환과 공동연구를 위해 고안되었다. WWW와 HTML과 현재 URL구조의 창시자로 유명한 영국의 Tim Berners-Lee(..

nextjs 공식사이트를 모니터링 하던 중 너무 잘만들어진, 학습과정이 있어 가져왔습니다. Next.js Learn Course next블로그를 읽다가 학습 과정에 대한 내용을 발견했는데요 내용은 아래의 이미지와 같습니다 Learn Next.js | Next.js by Vercel - The React Framework (nextjs.org) 다음.js 14 | 다음.js (nextjs.org) 처음 Next.js를 접했을 때는 이런 기능이 없었던 것 같은데... 이런 교육적인 요소도 제공해주는 환상적인 Next.js입니다. 그래서 해당 기능을 확인해보니, 설정된 학습 과정은 이렇게 구성되어 있습니다 또 여기서 react를 배운 적이 없다면, react 기초부터 배울 수 있도록 구성되어 있습니다 아.....