SmileCat.

#next.js

6 posts

Refresh Token 및 Mocks Server 적용

Template Library 시리즈의 네 번째 글은 Template Library에 Refresh Token을 적용한 이야기입니다. Template Library에는 Real World Backend Specs에 맞추어 JWT가 적용되어 있었습니다. 이번 미들웨어 관련 정리를 하면서 미들웨어를 적용할 수단으로 인증을 생각했고, 인증을 적용하는 김에 관심이 있던 Refresh Token에 대한 처리도 같이 추가하고자 하였습니다. Nest.js Nest.js 공식 문서상에는 JWT에 대한 적용만 있을 뿐, Refresh Token

Next.js 12 업데이트

Template Library 시리즈의 세 번째 글은 Next.js 12 적용에 대한 이야기입니다. Next.js 12 업데이트 소식 나온 지 거의 두 달이 지나가고 있네요. Template Library에서 먼저 적용하여 테스트해보고 실무에도 적용한 지도 한 달이란 시간이 넘게 지나가고 있습니다. 사실 이 글은 Template Library를 적용하고 바로 작성하고자 했지만, 정작 적용 후 개인적으로 너무 바쁜 시간을 보내어 지금에서야 작성하게 되었습니다. Rust Compiler: 3x faster Fast Refresh an

Next.js에서 Tailwind CSS, Cypress 사용기

Template Library 시리즈의 두 번째 글을 작성하고자 합니다. 이번에 시도한 내용은 계속 사용해오던 Next.js입니다. Next.js 및 이 글에서 사용한 라이브러리들이 무엇인지는 이미 많은 글이 함께하고 있으니 간략하게만 이야기하고 넘어가고자 합니다. 필자는 근 몇 년간 React와 Next.js를 실무에서 많이 사용하고 있습니다. 여기에 Ant Design까지 덧붙여서 세트로 사용하고 있습니다. 필자가 작성하고 있는 대부분의 프로젝트는 이 세트를 베이스로 다른 라이브러리들을 선택하여 시작합니다. 그래서 Templat

[Next.js] node_modules의 모듈을 포함하여 transpile하기

Next.js를 사용 중에 일부 nodemodules 들에 대해 Transpile 해야될 필요가 있어서 nexttranspilemodules을 사용하고 있었습니다. 별도로 정리할 내용도 없을 정도로 간단한 설정으로 사용할 수 있는 모듈이어서 별도로 정리하거나 하지 않았습니다. 다만 근래에 코드를 정리하다보니 해당 모듈을 사용하고 있다는 존재 자체를 잊어버리고 있어서 간단하게 나마 정리해보고자 합니다. 모듈의 설치는 무척이나 간단합니다. nexttranspilemodules을 설치해 주시고 next.config.js에 하단과 같이 사

Next.js에 Worker 설정

지난 글에 이어 이번에는 Next.js에서 Worker를 설정하는 방법에 대해서 글을 작성하고자 합니다. 이전 글을 작성할 때에는 Simulator를 먼저 작성하고 Worker를 진행할 생각이었지만 개발 편의상 Worker를 먼저 진행하는 쪽이 낫다고 생각하여 순서를 조정하였습니다. withwebworker 우선 Next.js에서 Worker를 같이 빌드하게 하려면 어떻게할까 찾아보던 중에, Examples에서 withwebworker라는 예제를 찾을 수 있었습니다. 예제를 살펴보면 workerplugin라는 webpack plu

Firebase 동적 호스팅에 Next.js 배포하기

동기 항상 도구나 테스트를 필요할 때 Playground에 작성하곤 했습니다. 이 저장소는 Openlayers Examples의 기본 골격을 바탕으로 작성하였는데, Openlayer의 업데이트에 맞춰 따라가지를 못하고 그렇다고 계속 유지 보수 해가며 사용하기에는 이런저런 불편함이 있었습니다. 덕분에 Github Security에는 항상 몇 개의 경고가 노출되고 있었지만, 다른 대안이 없어서 애써 무시하며 사용하고 있었습니다. 그러다 최근에 새로운 도구를 작성하고 싶다는 생각이 들어 이를 어떻게 해결할까 하다 자유롭게 사용할 수 있고