안드로이드는 개발환경에서 Toast 라는 작은 메세지 박스를 자체적으로 구현이 가능합니다. 하지만 웹 어플리케이션에서는 custom 을 해주거나 별도로 라이브러리를 사용해야합니다. 사용하려면? react에서 지원되는 react-toastify라는 라이브러리를 통해 쉽게 toast 메세지 박스를 구현가능합니다. react-toastify 사용법 이 글은 react(nextjs) 를 기반으로 작성되었습니다. 공식문서 https://www.npmjs.com/package/react-toastify react-toastify React notification made easy. Latest version: 10.0.4, last published: 24 days ago. Start using react-toas..

재사용 가능한 모달 사이드 프로젝트 진행중에 모달창을 띄워야 하는 일이 생겼다. 대부분의 페이지에서 사용 해야했기 때문에, 재사용 가능한 컴포넌트로 제작하기로했다. 컴포넌트 단위로 생성했을때 여러곳에서 재사용이 가능하며, (가장 큰 장점) 개발시간을 크게줄여준다. 예를들어, 비슷하게 생긴 모달창이 20개 30개 혹은 100개 이상 필요한데 모두 다 복붙 할 수는 없다. 생산성이 매우 떨어지기 때문. 이를 바탕으로 컴포넌트가 얼마나 생산성을 높여주는지 실제로 만들어보면서 느껴보자. 일단. 컴포넌트를 먼저 생성해준다. 이 글은 Typescirpt와 NextJS 기반이다. 내가 만들어야 하는 컴포넌트 이다. 총 3가지의 변화가 있을 것이다. 1. 아이콘, 2. 텍스트, 3. 버튼 이 모달을 컴포넌트를 사용하지..

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more! Jest는 단순성에 중점을 둔 유쾌한 자바스크립트 테스트 프레임워크입니다. Babel, TypeScript, Node, React, Angular, Vue 등을 사용하는 프로젝트와 함께 작동합니다 - 자바스크립트 테스트 프레임워크이며, 다양한 라이브러리에서 사용이 가능한 프레임워크입니다. 1. 패키지 설치 생성되어 있는 NextJS 프로젝트 내부에 생성할 것입니다. jest사용에 필요한 라이브러리들을 설치합니다. je..

Custom Type을 한 곳에서 관리 하는 법 각각의 component와 pages마다 type을 선언할 때 마다, type이나 interface를 재선언해주는것이 올바르지 않다. 라고 생각했고, 다른 한 파일에 타입을 지정해놓고 필요할때 마다 꺼내서 사용하면 좋을 것 같았다. 분명 프로젝트 내에서 필요한 기능이기 때문에 당연히 NextJS 프레임 워크에서 구현이 되어 있었다. next-env.d.ts nextjs 프로젝트를 생성 했을때, 위의 파일이 자동적으로 생성된다. 이 파일은 nextjs 공식문서에서도 타입과 인터페이스를 관리하는 파일로 해석한다. 좋은점이 이 파일에 타입을 지정 했을 시, 자동으로 import없이 타입들을 사용 가능하다는 것이 큰 장점이다. api url같은 상수 값도 여기에 ..

fresh - 기본적으로 서버에서 데이터를 불러왔을때 갓 가져온 데이터 react-query는 기본적으로 모든 값이 fresh가 아니다 라고 정의한다. 언제까지 fresh인지 개발자가 설정해야함 stale - 기회가 되면 항상 데이터를 새로 가져와라. RQProvider에 있는 refetch~~ 를 통해서 다시 받아온다. refetchOnWindowFocus - 다른 탭 갔다가 다시 돌아왔을때 t/f refetchOmMount - 페이지를 이동했다던가 컴포넌트가 다시 리액트에 올라갈때 t/f refetchOnReconnect - 인터넷 연결이 끊겼다가 다시 시작될 때 t/f retry - 실패시에 몇번정도 더 시도할지 useQuery에서 따로 부여도 가능함 staleTime 옵션으로 fresh의 기한을 ..

기존에 이렇게 설정된 react state의 타입은 any배열로 줬기때문에 컴파일 오류를 일으켰을때 문제가 생길 수 있다. 실제로 set 함수를 통해 직접적인 state에 변화를 주지 않아서 굳이 useState를 사용 할 필요가 없지만 추후 유지보수시에 리스트가 추가될 것을 염려하여 State로 관리 하였고, 또한 후에 서버에서 받아온 값으로 리스트업 될 수도 있을것이라는 생각이 들어서 리스트로 만들었다. 이런식으로 any배열 대신 ReactElement 배열로 타입을 주어서 다른 타입 int,string 등등 컴포넌트가 아닌 타입이 위치했을때 컴파일 에러를 만든다 - 컴파일 에러는 좋은 에러이다, 개발자가 조기에 에러를 파악하고 고칠 수 있기 때문

2023년 10월 26일 NextJS 14버전이 발표되었습니다. 프론트엔드의 트렌드에 가장 부합하는 프레임 워크인 만큼 관심이 많이 쏠렸습니다. NextJS 14의 변경점 Turbopack: App 및 Pages Router에 대한 5,000개의 테스트가 통과 로컬 서버 시작 시간이 이전보다 53% 빨라짐 Fast Refresh를 통한 코드 업데이트 속도가 이전 대비 94% 향상 Server Actions (안정 버전): 점진적으로 향상된 뮤테이션 지원 캐싱 및 재검증과 통합 단순한 함수 호출 또는 양식과 자연스럽게 작동 Partial Prerendering (미리보기): 빠른 초기 정적 응답 및 동적 콘텐츠 스트리밍 Next.js Learn (새로운 기능): App Router, 인증, 데이터베이스 등..

Admin 페이지를 제작하게 되어서 로그인 페이지를 제작할 일이 생겼습니다. JWT란? JWT는 JSON Web Token의 약자로, 웹에서 정보를 전송하기 위한 토큰 인증 방식입니다. JWT는 정보를 JSON 객체로 표현, 이를 안전하게 전송하기 위해 Base64로 인코딩하여 문자열로 표현합니다. JWT는 일반적으로 사용자 인증 정보, 클레임(Claim)과 그에 대한 서명(signature)으로 구성됩니다. 클레임은 토큰에 담기는 속성으로, 사용자에 대한 정보나 토큰의 유효 기간 등을 나타내며, 서명은 토큰이 변조되지 않았음을 확인하기 위한 부분입니다. JWT는 크게 세 부분으로 나눠집니다: Header / Payload / Signature Header(헤더): JWT의 타입 및 사용된 해시 알고리즘..