본문 바로가기

Frontend43

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.
프론트엔드 면접 경험 2022년 11월 15일 서류 합격과 필기 시험을 합격하고 실무 면접을 보았다. 면접은 면접과 4명 지원자 2명 다 대 다 면접 형식이었다. 면접을 보며 느낀점과 고민들에 대해서.... 말투 ~입니다 VS ~요 에대해서 면접에서 뭐가 더 좋을까에 대한 고민을 했는데 억지로 불편한 ~입니다에 맞추는 것보다 ~요도 예의도 있고 정중해보이기에 자신에게 맞는 말투를 사용하면 좋을 것 같다. 중요한 건 내가 상대방에게 배려를 하고 있고 정중히 대한다는 느낌을 주는 것! 좋아하니까 잘한다? 남이 시켜서 억지로 하는게 아닌 좋아서 하니까 더 잘할 수 있다! 스스로 해석 해보니 이 말은 “억지로 하는 사람들보단 내가 잘할 수 있다! “라는 말이다. 나는 좋아하기에 꾸준히 열정을 갖고 지속할 수 있다는 것을 강조하고 싶.. 2022. 11. 16.
[JS] this란? this란 누가 함수를 호출 했는지를 명시한다 함수를 호출할 때 결정된다. 누구인가? 누가 날 불렀어 - 궁예 == this - 일반함수 : 함수 호출을 한 위치에 따라서 this를 동적으로 결정한다. 그렇지 않게 하려면 this를 바인딩을 해야 한다 화살표 함수 : 함수를 선언했을 때 this가 정적으로 상위 스코프의 this를 가리키고 이것을 Lexical this라고 한다 자세히 ... https://sanghoon98.notion.site/JS-this-c585a8fd19af4f64a25bda752c1fcab9 JS의 this 누가 함수를 호출했는지를 명시한다. sanghoon98.notion.site 2022. 8. 23.

티스토리툴바