너와 나의 프로그래밍

Intro🙂 Next.js 프레임워크 환경에서 로그인 기능을 개발하기 위해 여러 가지 방법을 찾아보던 중에 Next.js 공식 Document에 Authentication 부분에서 NextAuth와 With Iron Session의 Providers가 있다고 소개하는 것을 보고 이번에는 NextAuth라는 라이브러리로 로그인 기능을 구현해 봤다. NextAuth.js?🤔 NextAuth는 Next.js를 위한 쉽게 로그인 기능을 구현하는 것을 도와준다. 일반적인 ID, Password를 통한 로그인부터 JWT, OAuth 등 각종 로그인을 지원한다. 가장 매력적인 것은 지원하고 있는 OAuth들의 종류가 많았다는 점인데, 간단히 구글이나 페이스북, 트위터, 애플 같은 정말 대표적인 소셜 로그인 지원부터 ..

실무에서 사용하는 Next.js의 Version이 9.x.x 대의 Old Version이라 이번에 큰맘(?)을 먹고 Next.js 12 Verison으로 Upgrade를 시켜주기로 결심했다. 사실 기존 프로젝트의 Package들의 Version을 올리면 발생하는 각종 다양한 문제들이 많아 굉장히 고심을했는데 역시나 많은 문제가 발생했고 그러면서 프로젝트에서 사용하고 있는 Typescript의 Type들의 문제, 각종 오픈소스 라이브러리들의 문제등 여러가지 문제들은 해결했다만 JSX관련 'Component' cannot be used as a JSX component 문제가 발생했고, 이 문제를 도저히 해결하기가 너무 힘들었다. 'Component' cannot be used as a JSX compone..

AWS에서 제공하는 Amplify를 Next.js에 도입하면서 빌드를 하던 과정에 도대체 원인을 알 수 없는 에러가 발생했다. 빌드를 하는 과정에서 물론 내 실수(스크립트 오류 및 파일 경로 오류 등등...) 같은 경우에는 Amplify Console에 친절하게 어떤 파일에서 몇 번째 줄에 문제가 있다는지 명확하게 설명해 주는 경우가 있어 실제 Local에서 개발용 Build 명령어를 사용하는 것과 동일한 결과를 내주기도 한다. 하지만 이번에는 구글링을 하면서도 도대체 방법도 없고 애초에 Amplify Build 이슈는 있지만 이런 이슈는 처음 겪는지라 더욱 힘들었다. 그 와중에 "error next@12.0.1: The engine "node" is incompatible with this module..

Next.js로 몇 가지의 페이지를 구현하면서 갑자기 '뒤로가기 History Stack'의 이슈가 생겨서 Next.js의 Router의 대해 여러가지 찾아보던 도중에 window.history를 같이 검색하게 되었다. 상황은 이러했다. 문제의 조건 : 'Google -> 웹 접속 -> 로그인 페이지(로그인 완료) -> 리다이렉트 페이지(Router.push) -> 뒤로가기 -> 로그인 페이지(..?) -> Google' 실제 원하는 결과 : Google -> 웹 접속 -> '로그인 페이지(로그인 완료) -> 리다이렉트 페이지(Router.push) -> 뒤로가기 -> 처음 웹을 접속했던 메인 페이지(예: Google) 로그인이 완료 된 상태에서 리다이렉트 페이지로 넘어가면서 다시 뒤로 가기(back)을..

웹 개발에 있어 빠질 수 없는 Tab은 진짜 구현이 간단한것 같으면서도 까다로운 것 같다. 특히 기존 SPA 방식인 Component로 Tab을 구현하는 방식이 아닌 Next.js에서는 Page단위로 Tab Page를 만드는 경우도 있었다. 아직 국내에는 많은 Next.js의 개발 이슈라든지 정보들이 많이 없다는게 정말 안타깝다. 이번 Tab Page 개발을 통해서 Next.js 개발자들에게 작은 도움이 되었으면 좋겠다. 기본적인 Tab Page 구조 아주 Simple하게 Page1, Page2, Page3 페이지를 만들었고 공통으로 쓸 Header, 그리고 이 Tab 기능의 핵심 Component인 Layout Component를 만들어 주었다. Header Page 먼저 Next.js에서 기본적으로 ..

개발에 빠질 수 없는 Toggle 기능은 기본적으로 state을 true/false로 변경하면서 show, hide를 하는 것이 일반적이지만 보고 싶은 글만 보거나 대댓글 쓰기 기능을 구현할 때는 부분 Toggle을 사용할 때가 많다. 일반적인 show, hide는 구현방법이 쉽지만 부분적인 Toggle 같은 경우에는 어떻게 하면 좋을 지 공유하려고 한다. stackoverflow에 아주 좋은 예시가 있어 이 예시로 설명! const { useState, Fragment } = React; const SearchResults = props => { const [shownComments, setShownComments] = useState({}); const toggleComment = id => { se..