NEXTJS와 TypeScript 프로젝트 일지 -1

Next.js와 TypeScript, Redux를 활용한 개인 프로젝트 계획

나는 Next.js와 TypeScript, Redux를 이용한 풀스택 개발의 길을 시작했다. 기존에 Next.js로 CRUD를 구현하고 TypeScript의 기본 문법, Redux의 디스패치 액션 정도는 익혔으나, 이를 프로젝트에 녹여보는 경험은 부족했다. 개인 프로젝트를 통해 이러한 기술들을 실제로 활용해보고자 한다.

Next.js에 대한 이해

Next.js는 React와는 다르게 CSR (Client Side Rendering)뿐만 아니라 SSR (Server Side Rendering)도 함께 사용할 수 있는 구조와 Router 기능을 제공한다. 이로 인해 구조적인 차이가 있다. 내가 파악한 Next.js의 주요 기능은 다음과 같다:

• Hot reloading: 저장되는 코드를 자동으로 새로고침
• Automatic routing: 따로 라우팅하지 않아도 pages 폴더에 있는 파일이 해당 파일 이름으로 라우팅
• Single file components: 해당 컴포넌트만 스코프를 가지는 CSS를 style jsx를 통해 만들 수 있음
• Server rendering: 서버 렌더링된 페이지의 소스에 내부 소스가 포함됨
• Code splitting: 원하는 페이지에서 원하는 자바스크립트와 라이브러리만 렌더링 가능
• TypeScript: 웹팩과 바벨을 수정할 필요 없이 명령어만 쓰면 자동으로 TypeScript 컴파일러가 Next.js의 타입을 가져오게 하는 next-end.d.ts 및 트랜스파일을 위한 tsconfig 생성

Next.js는 1인 개발에 용이하며, 개인 프로젝트로 사용하기 적합하다고 판단했다.

프로젝트 목표

나의 첫 도전은 랜덤 채팅 페이지와 화상 랜덤 채팅을 중점으로 개발할 예정이다.

TypeScript의 중요성

TypeScript를 사용하는 가장 중요한 이유는 "정적 타입을 명시한다"는 것이다. 함수와 변수 등에 타입을 명시해 개발자가 의도한 변수나 함수의 목적을 명확하게 전달할 수 있고, 코드 자동 완성이나 잘못된 변수/함수 사용에 대한 에러 알림 같은 풍부한 피드백을 받을 수 있다.

Redux를 사용하는 이유

이전에는 React의 Context API를 사용하여 전역 상태 관리를 했으나, 대형 프로젝트에서는 Redux가 유리하다 판단하여 개인 프로젝트에서도 Redux를 사용하기로 했다. Redux의 장점은 다음과 같다:

• 예측 가능성: 상태 변화가 항상 동일한 방식으로 일어나기 때문에 디버깅과 테스트가 용이함
• 중앙 집중식 상태 관리: 애플리케이션의 모든 상태를 한 곳에서 관리하기 때문에 복잡한 애플리케이션에서 상태를 추적하기 쉬움
• 미들웨어 지원: Redux Thunk, Redux Saga와 같은 미들웨어를 사용하여 비동기 로직을 간단하게 관리할 수 있음
• 큰 커뮤니티와 에코시스템: 다양한 도구와 미들웨어, 풍부한 문서와 자원이 제공됨
• Redux DevTools: 상태 관리를 편리하게 해주는 강력한 디버깅 기능 제공

결론

Next.js와 TypeScript, Redux를 활용한 풀스택 개발을 통해 개인 프로젝트를 성공적으로 수행하고자 한다. 이 과정에서 배운 기술들을 실제로 적용하고, 프로젝트의 전반적인 완성도를 높이는 것이 목표이다.