평소 리액트를 사용하면서 Styled-Components를 주로 사용해왔다. css를 사용하면 class name의 중복을 고려하며 개발 해야하고, 특정 스타일 코드를 찾기 어려운 단점 때문이었다. CSS in JS CSS-in-js는 자바스크립트 코드로 CSS를 작성하는 방식이다. 2014년 처음 나오게 됐고, 다음과 같은 문제를 해결하기 위해 나온 기술이다. Global namespace: 글로벌 공간에 선언된 이름의 명명 규칙 필요 Dependencies: CSS간의 의존 관계를 관리 Dead Code Elimination: 미사용 코드 검출 Minification: 클래스 이름의 최소화 Sharing Constants: JS와 CSS의 상태 공유 Non-deterministic Resolution..

프리온보딩 인턴십 과제인 facebook/react 이슈 목록을 가져오는 프로젝트에 필요하다고 생각되는 기능을 추가하고 더 많은 학습을 위해서 Next로 마이그레이션하고자 한다. https://wonillism.tistory.com/318 [NextJS] NextJS 13 예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다. NextJS를 한 번 써보자라고 생각 wonillism.tistory.com Next 13에 대해 간단하게 소개했던 포스팅인데, 12에서 13버전으로 대규모 업데이트한 이유에는 생각보다 더 깊은 이해도를 필요로 하는것같다. 위 포스팅은 계속해서 업데이트할 예정이..

지금은 로그인 방식이 OAuth만으로 되어있고 별도의 Credential은 적용하지 않고있다. 간단한 로그인 회원가입이 되길 원하는데 ... 어떻게 해야할까?? next-auth가 제공하는 callback 중에 signIn을 한 번 뜯어보자. https://next-auth.js.org/configuration/callbacks Callbacks | NextAuth.js Callbacks are asynchronous functions you can use to control what happens when an action is performed. next-auth.js.org 공식문서를 확인해보면 signIn callback만 존재하고, singUp callback은 존재하지 않는다. 따로 커스텀을 ..

어느정도 구조 파악이 됐으니 구글 소셜 로그인을 구현해보자. next-auth https://next-auth.js.org/ NextAuth.js Authentication for Next.js next-auth.js.org next-auth는 next 전용 라이브러리로 인증 로직을 보다 쉽게 구현할 수 있도록 해준다. 마치 django의 drf 같은 녀석인가?? 설치부터 해주자. > yarn add next-auth 공식문서를 확인해보면 API route를 만들어주기 위해 pages/api/auth/[...nextauth].js 에 위와 같이 설정할 수 있다고 나와있다. 하지만 지금 나는 Next 13 버전을 쓰고 있으므로 nextjs의 공식문서를 확인해보면 app/api 디렉토리 아래의 route 파..

https://wonillism.tistory.com/318 [NextJS] NextJS 13 예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다. NextJS를 한 번 써보자라고 생각 wonillism.tistory.com 앞서 보았던 app Routing Conventions 에 있던 Routing File을 자세히 알아보자. 확실히 프레임워크라 그런지 React에서는 일일이 해야했던 작업들을 미리 정의해둔 기능들이 많았다. 이전에 Nest 튜토리얼을 맛봤을 때는 이게 왜 이렇게 작동하는지 왜 필요한지 감이 잘 안왔었는데, React를 쓰다가 Next를 써보니 확실히 느낌이 왔다..

예전에 NextJS로 SSR은 아니고, SSG로 프로젝트를 한 번 진행해본적이 있었다. 간단한 프로젝트이기도 했고, SSR이 목적도 아니었어서, 어렵지 않게 해결할 수 있었다. NextJS를 한 번 써보자라고 생각이 들어서 무심코 yarn create next-app 을 입력했는데 왠걸... NextJS를 익숙할 만큼 접하지는 않았지만, 매우 어색한느낌이었다. 이유인 즉슨 NextJS에서 13버전을 출시하면서 라우팅 방식이 변경되었다. 기존에는 page 방식이었다면, 13부터는 app 방식이라고 한다. 아직 뭔말인지는 모르겠지만... NextJS 13이 궁금해서 못참겠다... 신기술 못참지!!! 13으로 가즈아~ 우선 NextJS의 공식 블로그를 확인해보자. https://nextjs.org/blog/n..