평소 리액트를 사용하면서 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버전으로 대규모 업데이트한 이유에는 생각보다 더 깊은 이해도를 필요로 하는것같다. 위 포스팅은 계속해서 업데이트할 예정이..

기존 프로젝트에서는 무한스크롤을 구현하면서 특정 타깃이 감지되면 query param에 page값을 증가시켜서 api 요청하고, issue list를 상태로 관리하여 새로 패칭되는 issue list를 상태에 계속 붙여주었다. 이번에는 react-query의 useInfiniteQuery 함수를 사용하여 구현해보자. react-query 공식문서 - useInfiniteQuery useInfiniteQuery | TanStack Query Docs const { fetchNextPage, tanstack.com useInfiniteQuery ...result와 ...options 부분의 값은 useQuery 와 같다. react-query 공식문서 - useQuery useQuery | TanStack ..

진행했던 프로젝트 중에 github api를 사용하요 이슈 목록을 가져오는 프로젝트가 있었다. 프로젝트의 목적은 api를 사용하여 이슈 목록을 가져오고 무한스크롤을 직접 만드는 프로젝트였다. 이 프로젝트의 목적을 좀 더 분명히 하기 위해서 리팩토링을 해보자. facebook/react 리포지토리의 이슈만 가져오는 프로젝트였는데, 직접 검색한 리포지토리의 이슈를 가져오는 기능을 만들어보자. 검색바 만들기 내가 원하는 검색바의 기능은 다음과 같다. 리포지토리를 검색할 수 있는 검색바 검색바가 포커싱 되었을 때, 확인할 수 있는 검색 결과 영역 검색어 입력중일 때, 검색중 표시 검색 버튼을 누르지 않아도, 검색 결과를 확인할 수 있음 검색 결과에 원하는 리포지토리를 누르거나, 검색 결과 영역 밖을 눌렀을 때,..

지금은 로그인 방식이 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은 존재하지 않는다. 따로 커스텀을 ..

Options next-auth를 사용하여 jwt를 사용하려면 NextAuthOptions 사용하여야 한다. OAuth를 구현하면서 기존에는 GoogleProvider만 사용하였던 Option을 좀 더 사용해보자. Option은 API 경로에서 초기화할 때 NextAuth.js에 전달된다. https://next-auth.js.org/configuration/options Options | NextAuth.js Environment Variables next-auth.js.org 사용자가 로그인을 완료 하면 Authorization Server가 파라미터의 redirect_url로 authorization code를 포함하여 리다이렉팅 시키며 NextAuth는 client_id, client_secret..

Prisma는 Django ORM, Sequelize 등과 같은 자바스크립트와 타입스크립트 커뮤니티에서 주목받고 있는 차세대 ORM(Object Relational Mapping) 프레임워크이다. Prisma는 어떤 데이터베이스를 사용하든 동일한 방식으로 데이터 모델링을 할 수 있도록 자체적인 스키마 문법을 제공하고 있다. 설치 우선 라이브러리를 설치 해주고, prisma cli를 사용하여 간단한 db작업을 위한 sqlite를 사용해보자. yarn add -D prisma npx prisma init --datasource-provider sqlite 설치를 완료하고나면 .env파일과 prisma폴더가 생성된다. database 경로를 위한 환경변수인데 나는 .env파일을 삭제하고 기존에 있던 .env...

https://wonillism.tistory.com/321 Web Socket 그리고 Socket.io 이전에 express와 js를 이용하여 간단한 chat app을 만들어 본적이 있는데, 이번에는 nextjs를 이용해서 chat app을 만들어보려고 한다. https://wonillism.tistory.com/246 socket.io 기본 채팅 서비스 만들기 (1) https: wonillism.tistory.com WebSocket에 대해 간단히 정리한 글이다. Socket.io의 공식문서를 확인하면서 Chat App 프로젝트에 연결해보자. https://socket.io/docs/v4/server-api/ Server API | Socket.IO Server socket.io 기본 코드 서버에서..