본문 바로가기

전체 글73

Next.js app router API Routes를 활용한 주문형 재검증 사건의 발단상사 : 제품 소개 페이지들을 만들자.나 : 속으로 생각 중 ( 제품 소개 페이지들은 변경될 일이 거의 없으니까 SSG로 만들까? 근데 만약에 관리자 페이지에서 해당 제품 정보를 변경하면 어떡하지…? SSG는 프로젝트를 빌드한 시점에 페이지를 생성해서 변경되지 않잖아…)나 : ISR로 캐싱시간을 10분? 1시간? 하루?를 줘서 페이지를 업데이트해주는 건 어떻게 생각하세요?상사 : 만약에 그 10분, 1시간, 하루 사이에 중요한 정보가 바뀐다면 어떡할래? 책임질 수 있어?나 : 어…그럼 사용자도 거의 없으니까… 그냥 요청마다… SSR하시죠… 캐싱하지 말죠… 하하하 (친구와 한풀이를 하며,,,) 나 : 오늘 이런 일이 있었다,,,친구 : 어 그거 ISR on demand revalidation라고.. 2024. 8. 1.
styled-component로 GlobalStyle 정의하기 장점 기존 css파일에서는 변수(ex)브랜드 컬러를 저장한 변수)를 불러오지 못하는데 GlobalStyle은 확장자가 js이기에 변수를 불러올 수 있다. 1. {이름}.style.js 만들기 2. 그 안에서 아래 사진처럼 원하는 전역 스타일 작성하기 3. 사용할 땐 최상단에서 호출해준다. 실제 사용하는 코드 import { createGlobalStyle } from 'styled-components'; export const GlobalStyle = createGlobalStyle` html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, c.. 2023. 4. 4.
디바운싱과 쓰로틀링 이벤트 제어하는 기법 Throttle과 Debounce는 이벤트가 과도한 횟수로 발생하여 이벤트 핸들러가 무거운 연산을 수 없이 많이 수행하는 경우에 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 하는 기술이다. 디바운싱 연속으로 호출되는 같은 함수들 중에 마지막에 호출되는 함수만 실행되도록 하는 것 혹은 제일 처음만 호출되게 하는 것 실제 사례 문제 상황 React-query의 useMutation을 사용해 서버에 데이터를 등록하는 작업 중에서 해당 등록하는 버튼을 빠르게 클릭하면 동일한 요청이 클릭한 만큼 실행되었다. 해당 함수가 성공을 하면 다른 페이지로 라우팅을 해주는 작업이었는데 해당 작업이 완료되기전에 빠르게 클릭하면 서버도 로딩 중인 걸 판단하지 못하고 서버에 클릭한 .. 2022. 11. 26.
Next.js 쓰면 SSR 하고 있는거 아님? 시작하게 된 이유 현재 하고 있는 프로젝트는 Next.js와 TypeScript를 사용한 프로젝트다. 그러던 와중에 SSR의 개념에 대해서 얘기가 나왔다. 팀원 의견 : getserversideprops 를 사용해야 SSR이다. 내 의견 : Next.js 자체로 SSR이 지원되니까 SSR을 하고 있는 것이다. CSR vs SSR CSR과 SSR에 대해서는 해당 POST에 정리해두었다. 넥스트 공식 홈페이지에서 설명 https://nextjs.org/docs/basic-features/pages Next.js는 기본으로는 정적 페이지를 생성해주는 프레임워크이다. SSR은 개발자의 선택사항으로 정하면 된다. hydration Pre-Rendering된 웹 페이지를 클라이언트에게 먼저 보내고, 번들링 된 자바.. 2022. 11. 18.
Prop style did not match. (feat. Next.js, fullcalendar, SSR) 문제 상황 Warning: Prop `style` did not match. Server: "null" Client: "min-width:;height:" 원인 Next.js는 SSR을 하기에 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라지게 된다. 게다가 Fullcalendar라이브러리는 SSR을 지원하지 않는다. 해결법 그렇기에 클라이언트에서만 렌더링을 해야한다. Next.js에서 제공하는 dynamic import를 사용한다. export const CalendarPage = () => { const Calendars = dynamic(() => import('./components/Calendar'), { ssr: false, }); return ( );.. 2022. 11. 17.
잘한 건지 미련에 대한 조언 (feat. 포트폴리오) 내 인생에 취업을 해야 하는 시즌이다. 내 목표는 막연히 첫 직장은 대기업이다. 내 주변 사람들에게 나 이런 사람이야! 나 엄청 노력했어 대단하지?! 이런 것을 보여주고 싶었나보다. 그런데 현실의 벽에 잠시 걸음이 멈췄다. 코딩 테스트를 준비하고 CS지식을 공부하면서 만약 다 통과 했고 면접에 들어간다면 나의 프로젝트들에 대해서 말할텐데 그때는 몰랐던 것들을 지금은 알고 나니 부족한 것들이 너무 많이 보여서 내가 면접장에 간다면 “저것들이 내 약점이 되지 않을까”라는 고민과 점점 내가 무슨 대기업이야 하면서 눈을 낮추고 내 스스로가 우물 안의 개구리라고 느껴졌다. 시맨틱 마크업 고려하지 않음 form태그 사용없이 바로 onClick 해서 서버에 전송 반응형 처리 부족 크로스 브라우징 안함 기타 등등 이렇.. 2022. 11. 16.

티스토리툴바