Weeeeey Weeeeey

1. 검색 창에 찾을려는 '제목' 을 입력 2. 제목 입력 성공시 router.push 를 통해 url에 ?title="제목" 을 넣어줌 => "/pathname?title="제목" const onSubmit = (data: FormProps) => { const { title } = data; router.push(`${pathname}?title=${title}`); }; 3. 나는 pathname에 접근하면 react-query를 통해 쿼리 키에 따라 데이터를 받아오도록 해놨었다. 4. useSearchParams를 통해 "title"을 get 해옴. 없다면 undefined. // /pathname component const searchParam = useSearchParams(); const ..

카카오 개발자 센터에 들어가보면 api key (자바스크립트 키) 를 발급 후 아래 코드를 삽입하라고 한다. "API를 로딩하는 스크립트 태그는 HTML파일안의 head, body 등 어떠한 위치에 넣어도 상관없습니다. 하지만, 반드시 실행 코드보다 먼저 선언되어야 합니다." 리액트 같은 경우에는 intex.html에 작성하면 되고 next.js 같은 경우 layout 같은 곳에 Script 태그를 불러와 삽입하면 된다. 하지만 이 같은 번거로운 작업을 JaeSeoKim 님이 배포하신 라이브러리를 사용하면 비교적 간단하게 처리 할 수 있다. next.js 같은 경우 example에 따르면 .env 에 아래와 같이 작성해두면 script 문을 따로 작성하는 대신 useKakaoLoader를 통해 api 키..

prisma docs post의 like 값을 수정하고 싶다면(eg. +1 or -1) 유니크 키를 통해 데이터에 접근 후 post.like +1 과 같은 행동을 할 수 있다. 하지면 통신 측면에서 값을 조회 후 업데이트 하는 것은 두번 이상의 행위를 하는 것이므로 비효율. update의 increase / decrease를 통해 조회와 동시에 값을 수정 해보자. (cf. string 필드를 추가한다면 https://github.com/prisma/prisma/issues/15269 요거 참고 ) export async function PATCH( req: Request, { params }: { params: { postId: string } } ) { try { const { postId } = pa..

import 'react-quill/dist/quill.snow.css'; import { EditorProvideProps } from '../new/new-types'; // 중간 생략 ReactQuill에 입력한 데이터 value는 html 요소를 string 형태로 받아와짐 (++참고) next.js에서 ReactQuill 컴포넌트를 사용할려면 dynamic으로 import 해야함. (window로 정의 되어 있는데 next는 서버 측에서 작동하니 아래처럼 dynamic으로 받아오면서 ssr:false 넣어주기. + useMemo를 하지 않으면 렌더링 될 때마다 변경되어보림) const ReactQuill = useMemo( () => dynamic(() => import('react-quill'..

webpack 여러 개의 파일을 하나로 합쳐주는 모듈 번들러 기능 css loader 기능 jsx 변환 작업 여러 개로 나눠진 js 파일을 html이 실행 할 수 있는 하나의 js파일로 합쳐줌 파일 분할(Code Splitting) 애플리케이션 번들에 포함된 코드를 여러 개의 조각/청크 로 분할하는 기술 초기 로딩 시 필요한 최소한의 코드만 다운로드 하여 페이지 로딩 속도 향상 대규모 애플리케이션에 유용 리액트 라우터와 같은 라이브러리와 잘 통합되어 있어, 각 페이지에 필요한 코드만 로딩하게 도와줌 // 동적 import() - 모듈은 필요할 때만 로딩되며 웹팩은 이를 감지하여 해당 모듈을 별도의 청크로 분할 const someModule = import('./someModule.js'); // 웹팩의 ..

1. 전체 옵션 (축약 by Chat GPT) name: 프로젝트의 이름입니다. version: 프로젝트의 현재 버전입니다. description: 프로젝트에 대한 간단한 설명입니다. keywords: 프로젝트를 설명하는 키워드 배열입니다. homepage: 프로젝트 홈페이지의 URL입니다. bugs: 버그를 보고할 수 있는 이슈 트래커의 URL이나 이메일 주소입니다. license: 프로젝트 라이선스를 명시합니다. people fields: author: 프로젝트의 저자에 대한 정보입니다. contributors: 프로젝트에 기여한 사람들의 리스트입니다. funding: 프로젝트의 재정 지원 정보입니다. files: npm에 포함될 파일들 또는 디렉토리들의 배열입니다. main: 패키지가 로드될 때의 ..

https://www.daleseo.com/jest-basic/ Jest로 기본적인 테스트 작성하기 Engineering Blog by Dale Seo www.daleseo.com 1. jest란 Jest는 테스트 과정에서 필요한 Test Runner, Matcher, Mock을 한 번에 해결해 줄 테스팅 프레임워크로 불리운다. npm i -D jest 2. 실행 package.json 스크립트 옵션에서 아래와 같이 작성하여 npm test 라고 입력시 jest가 실행되도록 함 jest는 test.js로 끝나는 파일이나 , __test__ 디렉터리 안에 있는 파일은 모두 테스트 파일로 인식해줌. ( 특정 테스트 파일만 실행하고 싶으면 npm test 입력 "scripts": { "test": "jest"..

1. NPM 계정 만들기 https://www.npmjs.com/ npm | Home Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java www.npmjs.com 2. 배포 전 패키지명 중복 확인 npm info Javascript-Package-Name 중복 된 이름이라면 해당 패키지의 내용이 뜰 것이..