Dug_House

웹 클라이언트 사용자가 web 접근하는 프로그램 일반적으로 웹 브라우저: Chrome, IE, Safari 등웹서버 ⭐ 클라이언트로부터 HTTP 요청을 받아들이고 HTML, CSS 같은 웹 페이지를 반환하는 컴퓨터 프로그램 정적 컨텐츠를 제공하는 서버 정적 컨텐츠: 단순 HTML, CSS, JavaScript, Image, 동영상 등 동적 요청은 WAS에게 요청해 받아온다. 동적 컨텐츠 요청을 받으면 WAS에게 해당 요청을 넘겨주고 WAS에서 처리한 결과를 클라이언트에게 전달해주는 역할도 한다. 웹 서버 프로그램: 아파치 http서버, 엔진엑스(nginx)WAS (Web Application Server) ⭐ HTTP 프로토콜을 통해 사용..

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된 웹 페이지를 클라이언트에게 먼저 보내고, 번들링 된 자바스크립트 ..

this란 누가 함수를 호출 했는지를 명시한다 함수를 호출할 때 결정된다. 누구인가? 누가 날 불렀어 - 궁예 == this - 일반함수 : 함수 호출을 한 위치에 따라서 this를 동적으로 결정한다. 그렇지 않게 하려면 this를 바인딩을 해야 한다 화살표 함수 : 함수를 선언했을 때 this가 정적으로 상위 스코프의 this를 가리키고 이것을 Lexical this라고 한다 자세히 ... https://sanghoon98.notion.site/JS-this-c585a8fd19af4f64a25bda752c1fcab9 JS의 this 누가 함수를 호출했는지를 명시한다. sanghoon98.notion.site