기존 프로젝트 기존에는 CRA(create-react-app)로 구축되어 있었고 정적 파일로 빌드되어 단순히 S3에 호스팅 되는 구조로 심플하고 인프라 관리가 쉬운 형태이다. 브라우저 환경에서만 구동되는 것을 가정하고 작성한 아주 심플한 프로젝트였다. 규모는 비교적 작은 수준으로 서버 API는 graphQL 사용해서 아폴로 클라이언트가 API 레이어를 담당하고 styled-components로 스타일링 하고 있었다. Next.js로 전환 니즈는 방대한 컨텐츠에 대한 동적 SEO 지원이었다. 정적 파일로는 규모가 큰 콘텐츠의 SEO를 지원하는 데에 분명한 한계가 있었고 이를 해결하고자 SSR(server-side-rendering)이 필요했다. 브라우저 환경과 서버(Node)환경 두 가지 환경에서 동시에 ..

이 글에서는 meta 태그와 외부 스크립트 설치를 위한 script 태그를 다룬다. html문서에 메타 태그와 스크립트 태그를 작성하기 위해서는 두가지 방법이 있다. 1. next/head api 사용 2. _document 에서 next/document의 Head api 사용 메타 태그는 기본적으로 페이지 수준의 컴포넌트에서 next/head api를 사용할것 만약 _document안에 메타 태그를 작성할 경우 이후 다른 컴포넌트에서 next/head api를 사용한 코드가 작성되었을 경우 같은 메타태그가 교체되지 않고 중복된 키로 작성 되는 현상이 발생. next/head api만 사용하는 경우 마지막에 적용된 key에 해당하는 값만 적용된다. 여기서 키 포인트는 페이지 컴포넌트 레벨에서 next/h..

기본적으로 JWT를 저장하고 핸들링하는 방법은 다음과 같다. 로그인 인증서버로 부터 받은 JWT, refresh_token 을 사용한다. JWT는 메모리(즉 JS 변수)에 저장하고 refresh_token은 쿠키에 저장한다. JWT는 브라우저가 새로고침되면 사라지지만 최초 요청에 refresh_token이 쿠키에 함께 요청되므로 새로운 JWT을 발급하므로 여전히 로그인 상태로 동작. 여기서 의문은 refresh_token 자체를 인증키 처럼 사용하면 되지 않을까 하는 것이다. 그것은 아래 3가지를 기대함. 인증 서버 부하 줄임. Access Token 유효기간이 짧아 보안성 높임. 일정 기간 동안 사용하지 않으면 세션 만료 처리시킴. 리프레시토큰은 엑세스토큰이 만료된 경우 사용하며 이는 별도의 인증서버를..

기본적으로 nextjs는 i18n을 지원한다. https://github.com/isaachinman/next-i18next 라이브러리도 있지만 현재(8.3.0) SSR시 문제가 있는 것으로 보인다. 그래서 https://github.com/i18next/react-i18next 라이브러리를 사용해서 구현하였다. 사실 next-18next는 react-i18next의 랩핑 수준의 구현체이므로 크게 다르지 않다. 시작하기 next.config.js 에서 i18n 속성을 정의해 준다. i18n: { defaultLocale: 'ko', locales: ['ko', 'en'], }, 그럼 이제 각 페이지 getStaticProps, getServerSideProps API에서 locale prop으로 접근 가..

aws의 amplify 서비스를 통해서 nextjs 프레임워크를 사용해보려고 시도해 보았다. amplify 란? 웹과 앱을 만들 때 필요한 호스팅과 인증, 백엔드, 데이터베이스, CI, CD 등을 쉽게 통합 적용하고 관리할 수 있도록 제공하는 토탈 솔루션 서비스라고 볼 수 있다. 여기서 웹 같은 경우에는 CI,CD를 지원하기 때문에 더욱 빠른 서비스를 한 곳에서 처리할 수 있는 장점이 있다. github와 통합하고 브랜치 단위 배포 및 QA같은 격리된 내부 환경에서 PR 단위 호스팅 서비스등 개발 부터 운영까지 절대적으로 필요한 서비스를 간편하게 제공한다 내가 하고 싶었던건 nextjs를 통한 SSR이 가능한 웹 서비스. 결론적으로 현재 SSR이 되지는 않는다. 문서에도 웹은 '정적 웹앱'을 구축할 수 ..

saga의 eventChannel을 이용하여 pusher의 구독을 감지해 redux action을 실행해주는 로직 문제는 특정 action으로 인해서 지속적으로 pusher 구독을 실행하는 상황이 발생해 이벤트 바인딩이 계속해서 증가하는 현상이 발생한다는 것. function* sagaLogic() { : const channel = eventChannel((emitter) => { const pusherChannel = pusher.subscribe(pusherKey); pusherChannel.bind(event, (enc) => { emitter(enc) }); }) while (true) { const enc = yield take(channel); : } } export default funct..