Create a Next.js AppReact.js를 통해 웹 어플리케이션을 빌드하려면 세팅해야하는 사항이 많이 있다.webpack같은 번들러를 사용해 번들로 묶고 Babel과 같은 컴파일러를 통해 JavaScript코드로 변환해주어야 한다. 또한, 코드를 분할하는 방
난 프로젝트를 create-next-app 명령어로 생성하지 않았으니 타입스크립트를 사용하기 위해 npm으로 타입스크립트와 react, node type 모듈들을 설치하자.설치 후 다음 파일들을 생성해주자.next-env.d.tstsconfig.jsonNext.js +
Next.js는 React용 SSR 프레임워크이다.next 명령어를 통해 프로젝트를 실행하면 위에서 말한 export를 통해 빌드 시점에 미리 Page들을 파악하고 이를 각 HTML로 생성해놓는다.next export 명령어로 routing 경로로 정적 웹사이트를 만들
이전 프로젝트에서는 페이지, 컴포넌트를 디자인하기 위해 css-in-js 라이브러리인 @emotion을 통해 styled component를 생성해서 디자인을 진행했는데 이번 프로젝트에서는 styled-component 라이브러리를 통해 디자인했다.styled-comp
리덕스는 Flux 개념을 바탕으로 한 React에서 가장 많이 사용되고 있는 상태(State)관리 라이브러리로써 여러 컴포넌트에서 존재하는 State와 State관련 로직들을 다른 파일로 분리시켜 효율적으로 관리할 수 있게 도와줍니다.또한, 컴포넌트끼리 State를 공
이전의 블로그와 다르게 이번에는 TypeScript로 애플리케이션을 구현하고 있는데 redux, redux-saga를 활용하려고 하는 부분에서 불편한 점이 많았고, 참고한 여러 포스트에서 typesafe-actions라는 모듈을 활용하는 부분을 많이 보았기에 저도 학습
리덕스의 리듀서는 순수함수이여야 하므로 API 통신을 통한 응답 데이터를 저장하는 등의 기능은 미들웨어를 통해 진행해야합니다.redux-thunk도 있지만 기존에 사용해보았던 경험이 있는 redux-saga를 사용하도록 하겠습니다.리덕스 사가는 리덕스를 통한 비동기 장
도움을 얻은 곳NestJS Document노마드코더 - NestJS로 API만들기기존에 여러 애플리케이션을 만들어보면서 대부분을 NodeJS의 Express를 통해 서버를 구현했습니다. 프론트단을 타입스크립트 기반으로 수정하면서 백단 또한 타입스크립트 기반으로 구현해보
NestJS DocumentAuthenticationAuthorization먼저 $ nest g 명령어를 통해서 모듈과 프로바이더 등을 생성해봅시다.$ nest g -h 명령어를 입력하면 명령어를 통해 생성할 수 있는 파일 목록이 출력됩니다.위의 명령어를 입력하면 sr
이번 블로그 프로젝트의 서버는 AWS EC2로 배포하지 않고 Heroku(헤로쿠)라는 PaaS(Platform as a Service) 서비스를 통해 배포하려고 합니다.단순 클라우드 기반 앱에서부터 정교한 클라우드 사용 엔터프라이즈 응용 프로그램에 이르기까지 모든 것을
지난 번에는 API 서버를 헤로쿠를 통해 배포를 하였습니다.이번에는 클라이언트인 Next 기반의 React 소스를 올려 배포를 해보겠습니다.사실 Github pages를 통해 배포하려고 하였으나 멍청하게도 SSR(Server Side Rendering)을 하기 때문에
직접 블로그를 개발하면서 접한 CORS 문제에 대해 알아보면서 작성한 포스트입니다.
이번에는 도메인을 구매해서 헤로쿠와 버셀을 통해 배포한 서버와 클라이언트에 제 도메인을 적용시켜줘보겠습니다.먼저 도메인을 구매해봅시다.도메인을 구매할 수 있는 곳이 여러 곳이 있지만 저는 hosting.kr 에서 구매했습니다.먼저 Vercel 대시보드에서 원하는 앱을