짧은코딩

App Router app 폴더 하위에 모든 파일 추가 폴더명으로 경로를 정의하며, page.js 또는 route.js로 작성된 파일만 경로로 활용 가능 layout.tsx 이 파일은 최상위 레이아웃으로 모든 페이지에 공유됨 pages router의 _app.js를 대체한다. page.tsx 웹 애플리케이션의 시작점이자, 루트 / 경로 페이지 Server Component 무엇이 서버 컴포넌트인가? 컴포넌트가 서버에서 렌더링이 되고 클라이언트에 html로 전송되는 것 특징 리렌더링이 되지 않는다. 서버 리소스에 접근 가능하다(서버 시스템, db) js 번들에 포함되지 않는다.(제로 번들 사이즈) 자동 코드 스플릿팅 → lazy로 명시할 필요 x 유저 인터랙티비티(useState, useEffect 등) ..

Next는 브라우저에서 기본적으로 pre-rendering(사전 렌더링)을 한다. => pre-rendering은 Server에서 DOM 요소들을 Build 하여 HTML 문서를 렌더링 하는 것을 말한다. SSG SSG는 Static Site Generation 빌드 시 html에 데이터를 미리 담아서 파일을 만들고 접속하는 유저들에게 보여주는 방식 장점 이미 만들어진 html를 여러 사람들에게 보여주는 것 서버 부담이 적고 응답 시간이 빠름 보통 마케팅 페이지, 블로그 글 등 한번 만들고 변화가 적은 페이지에 적합함 단점 데이터가 바뀌면 다시 빌드해줘야 함 동적 컨텐츠를 사용하면 SSG는 좋지 않음 SSR이나 CSR을 사용하면 되는 거 아님? -SSR 서버 부하가 높아짐 -CSR 초기 로딩 느림 seo..

최근 학교 수업에서 Recoil을 배웠다. 앞으로 진행하게 될 프로젝트에서 원래는 Redux Toolkit을 사용할 예정이었다. 하지만 Recoil을 배우고 난 뒤에는 생각이 바뀌어서 Recoil을 사용하기로 했다. 검색을 해보니 Recoil과 React Query를 같이 사용하면 더 좋다는 결과가 많아서 두 라이브러리를 같이 사용하여 프로젝트를 할 예정이다. 이 글에는 저 2가지를 사용해야 하는 이유를 적어보려고 한다. 파일구조 Recoil과 React Query를 사용하면 사진과 같은 파일 구조를 사용해야 할 것이다. 그리고 TypeScript를 사용하여 프로젝트를 진행 할 예정이라 typing 폴더를 따로 만들어 놓는다. recoil 폴더 recoil 폴더 안에는 atom과 selector을 구성하..

push useEffect(() => { if (signUpDone) { router.push("/"); } }, [signUpDone]); push를 사용하면 뒤로가기 버튼을 눌렀을 때, 다시 이전 페이지로 돌아간다. replace const router = useRouter(); useEffect(() => { if (me && me.id) { router.replace("/"); } }, [me && me.id]); replace를 사용하면 뒤로가기 버튼을 눌러도 이전 페이지로 돌아가지 못한다. 다시 뒤로 돌아가면 안되는 상황에서는 replace를 사용하는 것이 좋다.

이미지 전달법 프론트에서 이미지들을 서버에 전달하기 위해서는 formData에 담아서 전달해야 한다. 이 사진에 담긴 정보를 formData에 담아주면 된다. 사용법 const formData = new FormData(); images.forEach((image) => { formData.append('images', image.file as File); }); // 이미지 await axios.post(`/item/upload/${idx}/picture`, formData, { headers: { 'Content-Type': 'multipart/form-data', Authorization: `Bearer ${localStorage.getItem('accessToken')}`, }, }); 먼저 fo..

무한스크롤 불러올 데이터가 많으면 프론트엔드에서는 무한스크롤을 사용하여 데이터를 조금씩 가져와야 한다. 그러기 위해서는 스크롤의 위치를 구하는 방법이 가장 중요하다. 스크롤 위치 구하기 useEffect(() => { function onScroll() { window.scrollY + document.documentElement.clientHeight = document.documentElement.scrollHeight console.log( window.scrollY, document.documentElement.clientHeight, document.documentElement.scrollHeight ); window.addEventListener("scroll", onScroll); retur..

faker -npm 사이트 https://www.npmjs.com/package/faker faker Generate massive amounts of fake contextual data. Latest version: 6.6.6, last published: a year ago. Start using faker in your project by running `npm i faker`. There are 2560 other projects in the npm registry using faker. www.npmjs.com faker로 가상의 더미데이터를 만들어 api가 만들어지지 않은 상황에서 미리 구현할 수 있다. 프론트엔드 개발자라면 faker로 더미데이터를 여러 개 만들어서 성능을 높이는 방법도 좋..

shortId -npm 주소 https://www.npmjs.com/package/shortid shortid Amazingly short non-sequential url-friendly unique id generator.. Latest version: 2.2.16, last published: 2 years ago. Start using shortid in your project by running `npm i shortid`. There are 4230 other projects in the npm registry using shortid. www.npmjs.com map에서 key를 주는 등 개발을 하다보면 각각 다른 값을 넣어줘야하는 경우가 있다. 각각 값을 넣어주기 애매한 경우에 shortI..

대부분 개발을 하다보면 cors에러를 접해보게 될 것이다. 이 에러는 백엔드, 프론트엔드에서 모두 해결이 가능하다. 나는 프론트엔드에서 해결할 수 있는 방법을 소개하겠다. 하지만 이 방법은 proxy 방법이라 배포하면 백엔드쪽에서 cors에러를 잡아줘야 한다. proxy 브라우저에서 다른 도메인 서버로 요청을 보내면 cors 에러가 난다. 하지만 서버에서 서버로 보내면 cors 에러가 안난다. 이렇게 서버에서 서버로 보내는 것이 proxy이다. -경로 브라우저 -> 프론트 서버 -> 백엔드 서버 http-proxy-middleware 프론트엔드에서 cors 에러를 해결하기 위해서는 http-proxy-middleware 라이브러리를 사용하면 된다. 사용법 src 폴더에 setupProxy.js 파일을 만..

global style의 필요성 라이브러리를 사용해서 코딩을 하면 위 사진처럼 className이 이미 정해진 상태로 나온다. 이런 태그들의 스타일을 바꾸기 위해서 global style가 필요하다. 사용법 import styled, { createGlobalStyle } from "styled-components"; createGlobalStyle를 import 해줘야 global style을 사용할 수 있다. const Global = createGlobalStyle` .slick-slide { display: inline-block; } `; 위 사진에 있는 "slick-slide"의 이름을 바꾸기 위해서는 이런식으로 스타일링 해줄 수 있다. Global 컴포넌트는 아무 곳에나 넣어주면 global..