Next.js
-
[Next.js] 개발 환경에 의한 삽질기...Next.js 2023. 7. 20. 10:14
개발하면서 현타가 와서 생각 정리겸 푸념하며 몇자 끄적여보고자 한다... 그동안 Next.js로 개발을 하면서 로컬 환경과 배포 환경의 차이로 인해 수많은 오류를 발견하고 수정하느라 꽤나 삽질을 많이했고 스트레스도 어지간히 받았었다. 알고보니 생각보다 간단하게 해결될 일이었다... 먼저 배포 환경에서 Next.js가 실행되는 방법을 생각해보자. 배포 과정에서 npm run build 명령어를 통해 빌드를 한다. 빌드가 완료되면 .next 폴더에 웹에서 실행될 javascript 파일들이 생성된다. 배포 환경에서는 이 파일들을 실행시키는 것이다. 그렇다면 npm run start는 어떨까. 실행 순서를 보면 배포 환경과 같은 과정이다. 먼저 빌드 후에 .next 폴더의 파일들을 실행시키는 것이다. 이 점을..
-
[Next.js] node.js와 socket.io를 이용한 websocketNext.js 2023. 7. 12. 13:58
클라이언트 버전 정보 Next.js : 13.4.9 socket.io : 4.7.1 socket.io-client: 4.7.1 서버 버전 정보 node.js : 18.12.0 express : 4.18.2 socket.io : 4.7.1 Next.js로 여러 웹 프로젝트를 개발하던 중 이번엔 websocket을 사용해보기로 했다. 먼저 websocket이 무엇인지부터 알고 넘어가는 것이 중요하다. 기존 웹은 단방향 통신이며 필요시에 데이터를 송/수신 할 수 있다. 그에 비해 websocket은 서버와 클라이언트간에 실시간으로 양방향 통신을 하게 해주는 녀석이다. 간단히만 말하자면 이런 것이고, 자세한 개념은 구글에 셀 수도 없이 널렸으니 개념이 이해될 때까지 찾아보기를 바란다. socket 통신을 위해 ..
-
[Next.js] 내가 겪은 next-auth Error들Next.js 2023. 2. 10. 16:09
참고 문서 next-auth 공식 문서 삽질의 시작... 최근에 웹페이지에 로그인 기능을 도입하게 되었다. 단, 서비스 자체 가입 및 로그인은 만들지 않기로 했다. 카카오 로그인 등의 간편 로그인만 사용하기로 했다. 하지만 각각의 간편 로그인 서비스들을 일일이 구현하기에는 많은 시간 소모와 삽질이 예고 되어있음을 감지했다. 그래서 어지간한 간편 로그인 서비스들이 모여있고 코딩하기에 간편한 'next-auth' 라이브러리를 사용하기로 했다. 그 중 GoogleProvider(구글 계정으로 로그인), KakaoProvider(카카오 계정으로 로그인)를 추가할 계획이다. 그런 뒤에, 이렇게 저렇게 해서 아기다리 고기다리 던 로그인 기능 구현이 완료되었다. 이제 배포해야지ㅎ 하고 기능 구현이 생각보다 금방 끝나..
-
[Next.js] Sentry 에러 net::ERR_BLOCKED_BY_CLIENTNext.js 2023. 2. 5. 20:15
Next.js 프로젝트에서 발생한 에러를 추적하기 위해 Sentry 를 도입했다. local 환경에서 동작 확인을 위해 npm run dev를 실행하여 localhost:3000으로 접속해보았다. (브라우저는 Chrome을 사용했다) 그런데 브라우저 콘솔 창에 아래와 같은 오류가 나타났다. 필자의 환경 기준에서 이 오류가 발생하는 원인은 브라우저의 광고 차단 확장프로그램 때문이었다. 모든 사람들은 유튜브나 기타 웹사이트에서 광고가 나타나는 것을 싫어한다. 때문에 브라우저에서 광고를 차단 시켜주는 플러그인을 사용하는 사람들이 많아졌다. 하지만 이 기능이 Sentry에서 오류를 추적하는 것까지 차단을 시켜버린다. 정상적으로 오류를 추적하고 싶다면 해당 페이지에서 만큼은 광고 차단 플러그인을 중단시켜야 한다.