Dug_House

1. rewrite정의: URL을 내부적으로 변경하여 다른 리소스에 요청을 전달합니다. 사용자에게는 변경된 URL이 보이지 않습니다.용도: SEO 최적화, URL 구조 개선 등을 위해 사용됩니다.예시:요청 URL: /old-page내부적으로: /new-page사용자에게는 여전히 /old-page로 보입니다.2. redirect정의: 클라이언트에게 새로운 URL로 이동하라는 응답을 보냅니다. 이 경우, 브라우저의 주소창도 변경됩니다.용도: 페이지 이동, 사이트 구조 변경 시 사용자 안내 등을 위해 사용됩니다.예시:요청 URL: /old-page응답: 301 Moved Permanently → /new-page브라우저 주소창이 /new-page로 변경됩니다.요약Rewrite는 내부 리소스 변경, 사용자에게 ..

사건의 발단상사 : 제품 소개 페이지들을 만들자.나 : 속으로 생각 중 ( 제품 소개 페이지들은 변경될 일이 거의 없으니까 SSG로 만들까? 근데 만약에 관리자 페이지에서 해당 제품 정보를 변경하면 어떡하지…? SSG는 프로젝트를 빌드한 시점에 페이지를 생성해서 변경되지 않잖아…)나 : ISR로 캐싱시간을 10분? 1시간? 하루?를 줘서 페이지를 업데이트해주는 건 어떻게 생각하세요?상사 : 만약에 그 10분, 1시간, 하루 사이에 중요한 정보가 바뀐다면 어떡할래? 책임질 수 있어?나 : 어…그럼 사용자도 거의 없으니까… 그냥 요청마다… SSR하시죠… 캐싱하지 말죠… 하하하 (친구와 한풀이를 하며,,,) 나 : 오늘 이런 일이 있었다,,,친구 : 어 그거 ISR on demand revalidation라고..

문제사항 잘되던 vscode-Styled-components 확장 프로그램이 자동완성 기능이 제공이 되지 않은 현상 해본 것 VSCode 버전 별로 설치 vscode-Styled-components 버전 별로 설치 1번과 2번 동시에 진행 컴퓨터에 VScode 관련 파일들 모두 지우고 재설치 1 ~ 4번 모두 실패 그러다가 아무런 설정(ex github 계정 연동, 확장 프로그램 설치)이 되어있지 않은 VSCode에 vscode-Styled-components를 설치해 보았을 때 자동완성 기능을 제공하였다. 그래서 VSCode와 연동한 계정에 담긴 확장프로그램이 문제라고 판단을 하였다. 먼저, vscode-Styled-components를 설치하고 확장 프로그램을 하나씩 설치해보면서 vscode-Styl..

장점 기존 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..

이벤트 제어하는 기법 Throttle과 Debounce는 이벤트가 과도한 횟수로 발생하여 이벤트 핸들러가 무거운 연산을 수 없이 많이 수행하는 경우에 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 하는 기술이다. 디바운싱 연속으로 호출되는 같은 함수들 중에 마지막에 호출되는 함수만 실행되도록 하는 것 혹은 제일 처음만 호출되게 하는 것 실제 사례 문제 상황 React-query의 useMutation을 사용해 서버에 데이터를 등록하는 작업 중에서 해당 등록하는 버튼을 빠르게 클릭하면 동일한 요청이 클릭한 만큼 실행되었다. 해당 함수가 성공을 하면 다른 페이지로 라우팅을 해주는 작업이었는데 해당 작업이 완료되기전에 빠르게 클릭하면 서버도 로딩 중인 걸 판단하지 못하고 서버에 클릭한 ..

글을 작성하게 된 이유현재 하고 있는 프로젝트는 Next.js와 TypeScript를 사용한 프로젝트다. 그러던 와중에 SSR의 개념에 대해서 얘기가 나왔다.팀원 의견 : getserversideprops 를 사용해야 SSR이다. 내 의견 : Next.js 자체로 SSR이 지원되니까 SSR을 하고 있는 것이다.CSR vs SSRCSR과 SSR에 대해서는 해당 POST에 정리해두었다.  넥스트 공식 홈페이지에서 설명https://nextjs.org/docs/basic-features/pagesNext.js는 기본으로는 정적 페이지를 생성해주는 프레임워크이다.SSR은 개발자의 선택사항으로 정하면 된다.hydrationPre-Rendering된 웹 페이지를 클라이언트에게 먼저 보내고, 번들링 된 자바스크립트 ..

문제 상황 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월 15일 서류 합격과 필기 시험을 합격하고 실무 면접을 보았다. 면접은 면접과 4명 지원자 2명 다 대 다 면접 형식이었다. 면접을 보며 느낀점과 고민들에 대해서.... 말투 ~입니다 VS ~요 에대해서 면접에서 뭐가 더 좋을까에 대한 고민을 했는데 억지로 불편한 ~입니다에 맞추는 것보다 ~요도 예의도 있고 정중해보이기에 자신에게 맞는 말투를 사용하면 좋을 것 같다. 중요한 건 내가 상대방에게 배려를 하고 있고 정중히 대한다는 느낌을 주는 것! 좋아하니까 잘한다? 남이 시켜서 억지로 하는게 아닌 좋아서 하니까 더 잘할 수 있다! 스스로 해석 해보니 이 말은 “억지로 하는 사람들보단 내가 잘할 수 있다! “라는 말이다. 나는 좋아하기에 꾸준히 열정을 갖고 지속할 수 있다는 것을 강조하고 싶..