전체 글

2장 타입스크립트 프로젝트 생성과 관리

2-1 타입스크립 프로젝트 만들기 타입스크립트 개발은 노드제이에스 프로젝트를 만든 다음, 개발 언어를 타입스크립트로 설정하는 방식으로 진행. 노드제이에스 프로젝트는 디렉터리를 하나 만들고 여기에 package.json이란 이름의 파일을 만드는 것으로 시작한다. package.json은 노드제이에스가 관리하는 패키지 관리 파일로서 프로젝트 정보와 관련 패키지가 기록된다. 즉, 필요한 패키지를 관리할 수 있다. 프로젝트 생성자 관점에서 패키지 설치하기 npm install 혹은 npm i 명령으로 설치가능하다. 이때 패키지 설치 명령은 두 가지 옵션을 줄 수 있다. —save : 프로젝트를 실행할 대 필요한 패키지로 설치한다. 패키지 정보가 package.json dependencies 항목에 등록된다 —s..

[Next.js] React-Query로 쿼리 캐싱한 데이터 가져오기

리액트 쿼리는 서버사이드 렌더링을 지원한다. NextJS에서 React-Query를 연동하는 방법을 지난번에 소개했었다. 그러나 나 조차도 프로젝트를 하면서 내가 캐싱에 대해서 잘못 생각하고 있었나?라는 사실을 깨닫게 되었다. 그래서 이번에는 React-Query에 캐싱개념을 좀 더 공부해 볼려고 한다. 지난번에도 말했지만 이번에도 한 번 더 개념을 짚어보고 가보자. NextJS에서는 getStaticProps 또는 getServerSideProps에서 props 객체를 페이지로 전달한 후에 리액트 쿼리의 initialData 옵션을 이용해서 SSR을 구현할 수도 있다. 이렇게 하는 방식이 잘못된 것은 아니지만 공식문서에서는 권장하지 않는다. 이유는 깊이 있는 컴포넌트 단에서 서버 사이드 렌더링한 데이터..

[Zustand] React 상태관리 라이브러리

현재 리액트 상태관리 라이브러리는 다양하게 존재한다. 대표적으로 Context API, Redux, MobX, Recoil, Jotai 등이 있다. 이 중 Redux가 상태관리 라이브러리의 시초격이라 할 수 있다. 그렇기 때문에 아직까지 많은 개발자들로 부터 사용되고 있으며 여전히 인기가 많다. 하지만 시간이 지날수록 상태관리 라이브러리로 Redux를 기피하고 걷어내고 있는 이유도 있다. 그것이 바로 보일러 플레이트 코드 때문이다. 즉, 반복적으로 비슷한 코드들이 여러곳에서 재사용되며, 비슷한 형태를 띄우는 코드를 뜻한다. 물론 Redux Toolkit이 이러한 점을 극복하고 있고 계속해서 업데이트되고는 있지만 여전히 보일러플레이트가 존재하며 문법이나 사용하는 방법이 익히는 데 어렵고 난해한 편이라고 생..

[Next.js] Serverless + Github Actions로 Vercel 배포 및 자동화 작업

Github Actions란? GitHub Actions는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼이다. 레포지토리에 대한 모든 풀 요청을 빌드 및 테스트하는 워크플로를 생성하거나 병합된 풀 요청을 프로덕션에 배포할 수 있다. GitHub Actions는 단순한 DevOps를 넘어 리포지토리에서 다른 이벤트가 발생할 때 워크플로를 실행할 수 있도록 한다. 예를 들어, 누군가가 저장소에 새 문제를 생성할 때마다 적절한 레이블을 자동으로 추가하는 워크플로를 실행할 수 있다. GitHub 홈페이지 쉽게 얘기하면 깃헙에서 특정 이벤트가 발생했을 때 어떤 동작을 할지 설정해놔서 리액션을 자동화하는 서비스라고 보면 된다. CI / CD란? CI (Continuous Integratio..

[우당탕탕한 첫 사이드 프로젝트] - My-Rss-Feed 회고

🤔프로젝트 기획 및 시작 개발에 대한 공부를 하다보면 개인적으로 흥미롭고 유익한 정보들이 많은 블로그나 회사 공식 페이지들이 많지만 뉴스 피드처럼 한 곳에 모아서 보는게 아닌 꾸준히 찾아가서 최신 글이 나왔나 봐야하는 번거로움이 있다. 이러한 귀찮음을 해결하기 위해서 RSS 방식으로 XML 주소만 등록시켜 놓으면 매번 사이트를 방문하지 않아도 신착정보를 볼 수 있게 자동으로 업데이트 해 주는 개인 개발 구독 사이트를 만들어 보면 어떨까 생각했다. 본격적으로 Next를 공부하면서 기존 React에 적응했던 나로서는 알아야 할 다양한 개념과 처음 써볼려고 하는 기능들에 공부를 해야 했기 때문에 수많은 구글링과 공식 문서를 보다보니 시간이 생각보다 오래 걸렸다. 우당탕탕한 첫 개인 사이드 프로젝트 회고를 시작..

[Next.js] 정적 사이트에 다크 모드 구현하기

굳이 다크모드를?? 대부분의 웹사이트는 다크모드를 지원하지는 않지만 요즘 들어 많은 사이트들이 다크모드를 지원하기 시작했다. 굳이 어두운 테마를 추가하는 이유가 뭘까? 우리가 어두운 곳에서 핸드폰을 볼 때 핸드폰 밝기를 낮추면서 보는 이유는 우리의 눈이 예민하기 때문이다. 계속해서 밝은 빛을 어두운 환경에서 비추게 되면 눈이 쉽게 피로해지며 눈 건강에도 좋지 않다. 또한, 나부터도 어두운 테마를 조금 더 선호하기 때문에 웹 접근성을 높이기 위해서 추가적인 리소스를 넣으면서까지 다크 모드를 설정할 수 있도록 구현해야 한다. 이 글은 Next.js에서 다크모드를 적용한 방법에 대해 정리할려고 한다. Next.js + Typescript + Styled-Components를 사용하여 어떻게 구현했는지 보자. ..