Weeeeey Weeeeey

1. getServerSideProps (Docs) getServerSideProps 라는 함수를 한 페이지 내부에서 export 할 경우, Next.js는 getServerSidePrpos에 의해 반환되는 각 페이지 별 요청에 따른 데이터를 pre-rendering 할 것이다.(자동적으로) export async function getServerSideProps(context) { return { props: {}, // will be passed to the page component as props } } Note that irrespective of rendering type, any props will be passed to the page component and can be viewed on..

SWR, React Query 등장 이전 Redux, MobX 등의 상태 관리 라이브러리는 클라이언트 상태 관리에는 유용하지만, 서버 상태와 동기화 되지 않았기 때문에 개발자들이 직접 상태를 업데이트 해줬어야 함. => SWR과 React Query는 이러한 불편함을 해소하기 위해 등장 선언적으로 프로그래밍 가능 여러번 호출 된 동일한 API 요청은 한번만 실행 dirty해진 데이터는 적절한 시점에 알아서 업데이트 Global State 와 Server State의 관심사 분리 react-query가 swr을 앞지르고 있다. React query vs SWR React Query React Query는 리액트 에플리케이션에 서버 상태를 가져와서, 캐싱|동기화|업데이트를 쉽게 해준다 React Query ..

const Clip= (url:string) =>{ return ( ) } 요렇게 선언했는데 이 후 url 값을 업데이트 해주어도 처음 할당된 영상만 보여지는 상황이 생겼다. 하고 싶은건 버튼 클릭시 url 값이 업데이트 되어 보여지는 영상도 바뀌는 것 이에 대한 해결책으로 video 태그에 키 값을 주거나 ref를 주는 것. const Clip= ( url:string ) => { const videoRef = useRef(); useEffect(() => { videoRef.current?.load(); }, [url]); return ( ); } const Clip=( url:string )=> { return ( ); } 참고 : https://stackoverflow.com/questions/4..

프론트엔드(FE) 개발자가 브라우저(Br) 동작 원리를 알아야 하는 이유 FE에게 Br는 거의 모든 것. Br를 통해 개발, Br를 통해 테스트 및 배포 진행, 사용자들은 Br를 통해 웹에 접속 FE는 Br의 모든 것이 아닌 HTML, CSS, JS가 의도대로 동작하는지 확인해도 큰 문제x 하지만 기능이 많고 다양한 동작이 발생한다면 최적화가 필요해짐 Br의 최적화를 위해선 결국 Br의 동작 원리를 이해하는 것에서부터 시작 해당 포스트에서 알아볼 것 => Br의 렌더 과정 & 원리 ( 아래는 선 4줄 요약 ) HTML로부터 DOM 트리를, CSS로부터 CSSOM 트리를 빌드 DOM & CSSOM을 결합하여 렌더 트리를 형성 렌더 트리에서 레이아웃을 실행 => 각 노드의 기학학적 형태를 계산 개별 노드를 ..

Middleware란? 통용적으로 사용되는 의미로는 "서로 다른 애플리케이션이 서로 통신하는 데 사용되는 소프트웨어" 이다. 미들웨어를 통해 더욱 빠르게 혁신할 수 있도록 애플리케이션을 지능적이고 효율적으로 연결하는 기능을 제공한다. 미들웨어는 단일 시스템에서의 다양한 기술,도구, DB간에 다리 역할을 한다. 유저는 이 같은 서비스에 대해 인식하지 못한다. 개발자는 처음에 미들웨어를 사용하여 초기 코드를 다시 쓰지 않고도 새 프로그램을 초기 시스템과 통합하였습니다. 미들웨어는 분산 시스템의 중요한 통신 및 데이터 관리 도구가 되었습니다. 개발자는 미들웨어를 사용하여 애플리케이션 개발을 지원하고 디자인 프로세스를 단순화합니다. 이렇게 하면 서로 다른 소프트웨어 구성 요소 사이를 연결하지 않고 자유롭게 비즈..

1. Next.js 가 제공하는 Image 컴포넌트(공식문서 링크) 특징과 장점 특징 lazy loading 이미지 사이즈 최적화 placeholder (Local Image일 경우) 장점 성능 향상 : 적절한 사이즈 이미지 서빙 & 작은 용량의 포맷 사용 가능 시각적인 안전성: placeholder를 통해 이미지 로드전 CLS(Cumulative Layout Shift) 방지 빠른 페이지 로딩: lazy loading & 이미지 사이즈 최적화, placeholder를 통한 2. lazy loading 이미지 로드 하는 시점을 필요할 때 까지 지연시키는 기술을 의미한다. ( 페이지 로드 속도 빨라지는 이점) 사용자가 이미지가 나올때까지 스크롤 하지 않으면 이미지는 로드 되지 않는다. Next.js는 사용..

SWR란? HTTP 캐시 무효 전략인 State-While-Revalidate 에서 유래됨. SWR은 캐시로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화 된 데이터를 가져오는 전략 SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트를 경험할 수 있음. Next.js 팀에서 만들었다. 설치 yarn add swr // npm install swr 사용법 import useSWR from "swr"; const fetcher = (url:string)=>{ fetch(url).then(res=>res.json()) } const useUser = () => { const { data, error } = useSWR("/api/users/me",fetcher); r..

참고: https://jforj.tistory.com/259 1. .env 파일에 사용할 변수 입력 COOKIE_NAME= carrot_market COOKIE_PASSWORD = carrot_password 2. next.config.js 파일에 변수들에 대해 입력 ( 자동완성 ) /** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, env: { COOKIE_NAME: 'carrot_market', COOKIE_PASSWORD: 'carrot_password', }, }; 3. env 타입 지정 root 경로에 @types 폴더 생성 후 그 안에 import-env.d.ts 파일 생성 import-env.d...