JavaScript/NextJS (9) 썸네일형 리스트형 [NextJS] OAuth 2.0 구글 로그인 API 적용하기 배경 최근 소셜(간편) 로그인은 대부분의 서비스의 필수 기능이 되었습니다. 회원가입 절차가 간단해지고, 사용자가 서비스에 접근하기 쉬워지기 때문에 유저 확보의 장점만 보더라도 개발하지 않을 이유가 없게 된 것이죠. 이러한 로그인은 SSO(Single Sign on)라는 이름으로 불리기도 하는데요, 구글을 예로 들면, 구글 로그인을 한 번 하면, 구글의 여러 서비스에서 따로 로그인 할 필요 없이 구글의 서비스를 이용할 수 있다는 점을 들 수 있습니다. 이러한 로그인은 구글 뿐만 아니라, 페이스북, 네이버, 카카오톡 등의 서비스에서 제공하고 있습니다. SSO는 인증(Authentication)과 인가(Authorization)와 관련이 있는데요, 인증은 로그인과 같이 사용자를 인증하는 과정이며, 인가는 어느.. NextJS - FFmpeg.wasm으로 영상 용량 줄이기 배경 웹 서비스에서 영상 업로드 기능이 있을 때, 서비스 컨셉에 따라 용량이 큰 영상을 업로드하는 경우가 있는데 이것을 그대로 서버에 저장하는 것은 비용적으로 부담이 될 수 있습니다. 그래서 영상 용량을 줄여서 저장하는 것이 좋은데, 백엔드에서 영상을 직접 처리한다면 서버 자원(메모리, CPU)에 무리가 가서 서버가 다운되거나 문제가 발생할 수 있습니다. 따라서 클라이언트 측에서 영상 용량을 줄여서 업로드 한다면 서버의 부담을 덜 수 있을 것입니다. 물론 이런 방법을 사용하면, 영상 변환이 오래 걸릴 경우, 사용자 경험이 저하된다는 단점이 있으므로 주의해야 합니다. 이 글의 목표는 next/image 사용하는 이유와 방법 Background next.js에서 태그를 사용하다 보면 next/image를 사용하라는 권고사항이 뜹니다. 이미지 최적화가 되고, 캐싱이 된다는 것에 next/image를 사용하기는 했지만, 개발하다보니 이미지 리사이징에 대한 이슈가 생겼고 어떻게 최적화가 이루어지는지에 대한 정확한 이해가 필요했습니다. What is next/image? 간략히 설명하면 next.js 내에서 태그 대신에 사용할 수 있는 내장 모듈입니다. 간단한 사용법은 아래와 같습니다. import Image from 'next/image' const MyImage = (props) => { return ( ) } Why use next/image? 기본적으로 이미지를 최적화하려면 많은 노력이 필요한데요, next/image를 사용.. HttpOnly 쿠키를 활용한 JWT 로그인 구현 배경 JWT를 구현하는 방법은 요청 헤더에 토큰을 포함해서 전송하는 방법이 있지만, 어차피 쿠키나 localstorage에 토큰을 저장해야 하므로, 좀 더 안전한 방법인 httponly가 적용된 쿠키를 활용해 구현해보려 합니다. 또한, Safari에선 HttpOnly 옵션을 적용하지 않으면 쿠키를 사용할 수 없었기 때문에 반 강제(?)로 이 방법을 사용하게 되었습니다. HttpOnly? 쿠키에 javascript로 직접 접근할 수 없도록 하는 옵션입니다. 따라서 XSS(Cross Site Script) 공격에 대한 방어 수단이 될 수 있습니다. 이 옵션을 쿠키에 적용하려면 백엔드에서 응답할 때 이 옵션을 적용한 쿠키를 만들어서 응답해야 합니다. 이 쿠키에는 개발자도 접근할 수 없으므로, 백엔드 서버로 전.. NextJS 백그라운드 서버 시작 npm install -g pm2 pm2 --name HelloWorld start npm -- start pm2 stop pm2 restart pm2 delete pm2 show NextJS - 비인증일 때 로그인 페이지로 리디렉션 이 글은 비인증 사용자가 보안 요소가 포함된 페이지를 방문했을 때, client-side에서 로그인 페이지 등의 다른 페이지로 리디렉션 해주는 방법을 소개합니다. RouteGuard 컴포넌트 RouteGuard 컴포넌트에는 NextJS의 client-side 인증 로직이 있으며, App 컴포넌트에서 사용됩니다. client-side 인증은 authCheck() 함수에 포함되어 있으며, 앱 로드 및 경로가 변경될 때마다 실행됩니다. 만약 로그인 없이 보안 요소가 포함된 페이지에 접근하려고 하면 그 페이지의 내용이 표시되지 않고 로그인 페이지로 자동 이동됩니다. returnUrl은 리디렉션 쿼리 파라미터 중 하나이며, 로그인이 성공했을 때 요청했던 페이지로 이동시켜줄 때 사용됩니다. authorized 상태.. NextJS - 경로 alias 설정하기(typescript) 파일 트리의 깊이가 깊어졌을 때 파일을 import 하기가 번거롭습니다. import Button '../../../../../../components/Button'; 여기에 별칭을 설정하면 좀 더 간편하게 경로를 사용할 수 있습니다. 아래와 같이 tsconfig.json 파일의 컴파일 옵션에 baseUrl과 paths를 아래와 같이 추가/수정해주면 됩니다. /* tsconfig.json */ { "compilerOptions": { ..., "baseUrl": ".", "paths": { "@/styles/*": ["styles/*"], "@/components/*": ["components/*"] } }, ... } 이제 아래와 같이 사용할 수 있습니다. import Button from '@/com.. WebSocket connection to 'ws://localhost/_next/webpack-hmr' failed; 1. 개발 환경 MacOS Rocky Linux 8.6(Docker) NginX, 80->3000으로 리버스 프록시 사용 중 NextJS v12.1.6 2. 이슈 개발 서버를 올렸을 때, 브라우저 콘솔 창에 아래와 같은 에러가 계속 발생함 WebSocket connection to 'ws://localhost/_next/webpack-hmr' failed; 3. 원인 NextJS가 WebSocket을 사용해 서버 상태를 유지하려는데, WebSocket에 대한 NginX 설정이 되어 있지 않아서 오류가 발생 4. 해결 NginX config 파일 중 location 항목에 3가지 속성을 추가 $ sudo vi /etc/nginx/nginx.config location / { ...(생략) proxy_se.. 이전 1 2 다음
