반응형 Nuxtjs4 Nuxt SSR 상황에서 axios 요청에 쿠키 넘기기 Nuxt를 사용하다보면 서버사이드에서 axio를 요청하면 쿠키를 전달 할 수 없다는 걸 알게 된다. 브라우저에서 받은 쿠키를 프론트서버에서 API서버로도 전달해야 하는데, 이것을 어떻게 쉽게 해결하는지와 서버사이드와 클라이언트사이드의 코드가 같아질 수 있는 방법을 설명한다.Nuxt universal modeNuxt를 universal 모드로 사용하면 SSR(서버사이드렌더링)을 사용하게 된다. SSR페이지 최초 접근시에 다음과 같은 단계들은 서버사이드에서 실행된다.nuxtServerInitasyncDatafetchmiddleware그리고 최초 로딩이 끝나고 이후에 페이지 전환을 할때는 클라이언트 사이드에서 실행된다. 그래서 여기에서 axios를 이용하여 서버로부터 데이터를 받아오는 코드가 있다면, 서버사이.. 2023. 4. 27. Nuxt.js SSR 모드 PM2 배포시 빌드 문제 Nuxt를 사용하여 SSR 모드로 어플리케이션을 만들어서 PM2를 사용하여 서버로 배포한다. 그러면 서버에서 nuxt build 작업을 하게 되는데, 이때 빌드 작업이 CPU와 메모리에 상당한 부하를 일으킨다. 그래서 AWS EC2 micro 이하급으로 하면 빌드 중간에 리소스 부족으로 멈추는 현상이 발생한다. 문제가 발생하는 현재 상황은 이렇다. Nuxt SSR + PM2 Deploy Nuxt SSR 모드로 개발을 하고 PM2를 이용하여 서버에서 인스턴스 관리를 하고 PM2 deploy 를 이용하여 배포 작업을 한다. Nuxt SSR 모드로 production server에서 동작하려면 빌드 과정이 필요하다. 이 빌드 작업은 Remote Server에서 실행한다. Nuxt SSR 모드 명령어 Nuxt가.. 2023. 4. 13. JWT를 활용한 로그인 인증 구현 JWT 로그인 인증을 구현하기 위해 Session 과 JWT 방식 중에 엄청난 고민을 하다가, 아무래도 DB를 덜 사용하고 MSA에 유리한 JWT 방식을 사용하기로 마음먹었다. 개발 코드: Vue, NuxtJS 1. JWT 인증 최종 구현 모델 JWT에 대한 세부적인 스펙과 관련한 설명은 생략하도록 하겠다. JWT 토큰을 이용해 어떻게 안전하게 인증 시스템을 만들어야 하는지에 초첨을 두었다. 🤜 일단 결론적으로 아래 그림이 내가 구현한 인증 모델이다. 크게 3가지 부분으로 나뉜다. ① 로그인 일단 로그인을 요청하면 사용자 정보를 확인하고 JWT를 사용하여 AccessToken과 RefreshToken을 발급한다. 👉 토큰 만료시간 만료시간을 AccessToken은 짧게, RefreshToken은 길게 잡.. 2023. 3. 8. 내가 React가 아닌 Vue를 쓰는 이유 1. Vue / React Vue React Vue와 React는 모두 프론트엔드를 편하게 개발하기 위한 Javascript로 만들어진 도구이다. 이제는 이것들 없이 프론트 개발을 한다는 것은 상상하기도 싫다. 둘다 컨셉은 동일하다. 모든 UI를 스스로 동작하는 컴포넌트 단위로 개발해서 어디든 편하게 가져다 쓸 수 있게하는 것이다. 페이지 단위가 아닌 더 작은 단위의 컴포넌트를 개발하여 재사용성과 코드의 간결함을 유지한다. 모든 개발의 지향점은 코드 중복을 없애고 코드의 단위를 사람이 알기 쉽게 논리적으로 구조화하는 것이 궁극적 목적인데, Vue와 React도 결국 이러한 목적을 위한 것이다. 2. NuxtJS / NextJS 이걸 또 더 편하게 개발하라고 Vue는 NuxtJS, React는 NextJS.. 2023. 3. 7. 이전 1 다음 반응형
