짧은코딩

Next는 브라우저에서 기본적으로 pre-rendering(사전 렌더링)을 한다. => pre-rendering은 Server에서 DOM 요소들을 Build 하여 HTML 문서를 렌더링 하는 것을 말한다. SSG SSG는 Static Site Generation 빌드 시 html에 데이터를 미리 담아서 파일을 만들고 접속하는 유저들에게 보여주는 방식 장점 이미 만들어진 html를 여러 사람들에게 보여주는 것 서버 부담이 적고 응답 시간이 빠름 보통 마케팅 페이지, 블로그 글 등 한번 만들고 변화가 적은 페이지에 적합함 단점 데이터가 바뀌면 다시 빌드해줘야 함 동적 컨텐츠를 사용하면 SSG는 좋지 않음 SSR이나 CSR을 사용하면 되는 거 아님? -SSR 서버 부하가 높아짐 -CSR 초기 로딩 느림 seo..

좋은 개발을 하려면 호이스팅을 하지 않는 것이 가장 좋다! 분석 코드 const x = "x"; console.log(z); var y = "hehe"; const z = () => {}; function c() { const y = "y"; console.log("c"); function b() { const z = "z"; console.log("b"); c(); } } function a() { const x = "x"; console.log("a"); } a(); c(); 이런 코드가 있을 때, 호이스팅 상황에서 어떻게 되는지 분석해보겠다. var const x = "x"; console.log(z); var y = "hehe"; 이런 코드가 호이스팅 되면 var y; const x = "x"; ..

스코프 체인 스코프 체인은 "함수에서 어떤 값에 접근이 가능한가 혹은 어떤 값에 접근이 불가능한가"이다. 블록("{}")이 기준이 된다. 함수 안에도 블록이 존재하며, 함수가 아닌 블록은 if, for, while, swtich 등이 있다. -참고 const a = () => ({}); 이 코드는 객체를 리턴하는 함수이다. 예시 const x = "x"; function c() { const y = "y"; console.log("c"); function b() { const z = "z"; console.log("b"); c(); } } function a() { const x = "x"; console.log("a"); b(); } a(); c(); 위 코드는 b가 정의되어 있지 않다는 에러가 나온다..

코드 분석 이 코드에 대해서 호출 스택 분석을 해보겠다. 이렇게 선언을 제외한 함수 호출 할 때마다 호출스택에 넣어주고 함수 끝날 때마다 빼주면 된다. -개발자도구에서 호출 스택 보는 방법 브라우저의 콘솔에다가 내가 원하는 지점에 debugger라고 넣는다. 그러면 이렇게 호출 스택을 볼 수 있다. 또한 오른쪽 창의 "범위"가 스코프 부분이라 이것도 알 수 있다. 처음에 anonymous(익명)이 있는 이유는 파일 전체를 익명 함수로 치기 때문이다. *스코프 체인: 특정 함수에서 어떤 값에 접근할 수 있는지 -참고 const console = { log() { // 콘솔에 글자 적는 기능 }, }; const x = "x"; function c() { const y = "y"; console.log("c..

“함수의 호출은 리턴 값으로 대체해라!” JS 예시 const onClick1 = () => () => { console.log("hello"); }; const onClick2 = () => { console.log("hello"); }; document.querySelector("#header").addEventListener("click", onClick1()); // 정답 document.querySelector("#header").addEventListener("click", onClick2()); // 오답 -onClick1이 정답인 이유는 onClick1() 자리에 document.querySelector("#header").addEventListener("click", () => { con..

이전 구현 방식 https://shortcoding.tistory.com/534 전체 상품 불러오기 무한 스크롤 구현 with react-intersection-observer 구현 화면 및 사용 기술 fakejs와 MSW를 이용하여 mock API를 만들어서 구현했다. "react-intersection-observer"를 이용하여 총 아이템 중 마지막에서 4번째 위치에 있는 아이템을 사용자가 보면 데이터를 더 shortcoding.tistory.com 저번에는 무한 스크롤에서 데이터를 불러오고 데이터 저장을 items를 따로 만들어서 하였다. 이번에는 공식 사이트에서 준 예시를 보고 구현해 보겠다. 전체 상품을 불러오는 페이지를 구현하는 것은 쉬웠다. 하지만 검색 상품을 가져오는 페이지에서 설정 방법..

무한 스크롤을 구현하고 나서 아이템을 많이 불러왔을 때, 맨 위로 올리는 버튼이 있으면 좋겠다는 생각이 들었다. 그래서 맨 위로 올라가는 버튼을 만들려고 했는데 스크롤을 다루기가 은근히 까다로워서 글로 기록하려 한다. 사용한 라이브러리는 "react-custom-scrollbars"이다. useRef도 같이 사용해서 구현했다. 구현 설계 1. 스크롤이 어느 정도 내려가고 나서 위로 올라가는 버튼이 나타난다. 2. "/"와 "/searchitem" 경로에서만 버튼이 나타나도록한다. 구현 const App = () => { const { pathname } = useLocation(); const ref = useRef(null); const [positionY, setPositionY] = useState..

MSW를 사용하여 개발하는데, 콘솔에 이런 경고 메시지가 엄청 많이 떴다. 콘솔 로그를 보면서 테스트를 진행해야 하는데 불편함이 생겨서 저 경고 메시지를 없애보려고 한다. 왜 저런 경고가 뜨는걸까? MSW의 worker가 API를 가로채서 mock 데이터를 보내주는 것인데 정의되지 않은 주소를 가로챘기 때문에 발생한다. 따라서 요청에서 무시하거나 허용하는 onUnhandledRequest를 사용하여 지정해야한다. 해결법 onUnhandledRequest 이 속성은 setupWorker 초기화 이후에 Request handler를 등록하기 위해 사용된다. https://mswjs.io/docs/api/setup-worker/start#onunhandledrequest start() Register the ..

구현 화면 및 사용 기술 fakejs와 MSW를 이용하여 mock API를 만들어서 구현했다. "react-intersection-observer"를 이용하여 총 아이템 중 마지막에서 4번째 위치에 있는 아이템을 사용자가 보면 데이터를 더 불러오도록 했다. (다음엔 serializeQueryArgs, merge, forceRefetch도 같이 이용하여 구현해보려 한다..!) 구현 RTK Query 우선 RTK Query의 endpoints에 위와 같이 코드를 작성했다. fakejs 백엔드와 위 데이터 형식으로 소통하기로 했기에 fakejs를 통해 위 데이터 구조를 만들었다. import { faker } from "@faker-js/faker"; export function createRandomItem..

브라우저는 파싱 → 스타일 → 레이아웃 → 페인트 → 합성 → 렌더 등의 과정을 거친다. JS, CSS의 변화에 의해 DOM, CSS에 변화가 생기면 Reflow 혹은 Repaint 등의 과정을 수행한다. 1. 파싱 브라우저가 HTML을 파싱하고 읽어들이는 과정 -DOM Tree Hello web performance students! 이런식으로 코드가 해석되는 과정이 파싱이다. -CSSOM Tree body { font-size: 16px } p { font-weight: bold } span { color: red } p span { display: none } img { float: right } CSS 코드 역시 해석이된다. 2. 스타일 DOM Tree, CSSOM Tree가 생성되면 스타일을 매..