브라우저 렌더링 과정과 Virtual DOM 브라우저 렌더링 과정 크롬이나 사파리, 파이어폭스 같은 것들을 브라우저라고 한다. HTML 문서는 내가 원하는 웹페이지의 요소들과 그 구조를 마크업으로 작성하여 보낸다. body 태그 안에 header, main, foo

CSR은 단순 뼈대만 있는 HTML document와 JS 파일들을 클라이언트로 모두 보낸 뒤, 클라이언트 단에서 JS 코드들을 통해 웹 화면을 동적으로 빠르게 렌더링하는 방식이다. 덕분에 사용자 경험이 좋아지고, 서버에 요청하는 횟수가 훨씬 적기 때문에 서버의 부담이

이전 게시글에서 Css-in-JS를 서버 사이드 렌더링 시 헤더에 주입하여 미리 HTML을 마크업할 때 스타일까지 HTML 요소에 녹여내기 위해 \_document.tsx를 작성했다.Next.js로 마이그레이션하기Customizing renderPage(https&#x

Next.js는 React를 Server Side Rendering할 수 있게 해주는 프레임워크다. SSR의 장점은 첫 렌더링 화면이 빠르고 검색 엔진 최적화에 유리하므로 검색에 노출이 필요한 서비스에서 SSR은 필수적이라고 할 수 있다. 그리고 이후부터는 CSR 방식

말 그대로 Data들을 미리 가져오는 것을 의미한다.만약 HAO SHOP를 방문하는 사용자들이 꼭 Lookbooks를 페이지를 들어가 직원들의 룩북을 본다고 가정해보자.데이터를 가져오기까지 Suspense를 통해 로딩창을 보여주고, 데이터를 응답받은 다음에 룩북 페이지

React Query와 RTK Query 모두 서버에서 넘어온 데이터를 효율적으로 캐싱하는 것이 주요한 기능이다. 그리고 서버에서 가져온 데이터들도 하나의 상태로 관리하여 이를 서버 상태라고 한다. 서버 상태 관리 라이브러리 덕분에 서버와의 통신 과정에서 로딩 상태,

웹 접근성을 위해 아이콘 버튼 IR 기법을 활용하기위 코드는 웹 접근성을 위해 아이콘 버튼 IR 기법을 활용하기에서 추가로 여러 아이콘을 이용한 svg 이미지 포맷을 png 이미지 포맷으로 바뀌 IS(Image Sprites) 기법을 이용한 코드이다.근데 아이콘 같은

웹사이트에 접속하면 브라우저의 상단 탭에서 페이지 제목을 볼 수 있다. 이 페이지 제목을 Document Title이라고 한다. Document Title은 가장 대표적인 웹사이트의 타이틀로, 각 페이지의 주제를 잘나타낼 수 있는 요소이자 해당 웹사이트를 사용하는 유저

아직도 끝나기 않은 룩북 리스트 페이지 만들기... 이제 하나 빼고 파란불이 들어온다.. 근데 하나가 노란불도 아닌 빨간불... Cumulative Layout Shift 뭔데!Footer 컴포넌트가 lookbooks의 초기 상태인 빈 배열에서 20개의 룩북 리스트를

Serve images in next-gen formats lighthouse하면서 이미지 포맷의 종류 GIF(Graphics Interchange Format) : 256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 듭니다. 투명은 표현 가능하지만

룩북 페이지에서 다음과 같이 모든 이미지가 같은 width와 height를 가지면서 반응형으로 만드려고 한다.ImgBox 컴포넌트를 살펴보자.다음처럼 img 요소에는 width: 100%, height: 100%를 준 것을 확인할 수 있다. 하지만 img 요소를 감싸고

반응형에 맞는 이미지 박스 컴포넌트를 만드려고 하는 와중에 다음과 같은 에러가 발생하게 되었다.왜 이런 문제가 발생하는지 구글링을 하면서 알게된 것이 내가 임의로 만든 props를 전달하려고 하니깐 발생한 문제라고 한다. 그래서 overload란 무엇일까?TypeScr

사용자가 로그인하면 localStorage.setItem('accessToken', accessToken); 즉, localStorage를 통해 accessToken을 저장하고 이를 헤더에 담아 요청하는 방식을 사용하였다. 이는 페이지를 리프레시하거나 창을 닫고 다시

자동 슬라이드 기능을 구현하면서 setInterval()를 사용하는데에 있어

haoshop-refactorgin모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것즉, 어떠한 사용자(일반인, 장애인, 고령자 등)가 어떠한 환경(브라우저, 운영체제, 디바이스의 환경이나 사양 등)ㅇ에서도 어려움 없이 접근, 이

haoshop-refactoring오늘부터 본격적으로 쇼핑몰 프로젝트 HAO Shop을 리팩토링해보려고 한다. 첫 스타트가 중요하다고 아래처럼 매번 다른 경로에서 컴포넌트들을 불러오기 보다는 절대 경로를 설정하고 한 파일로 경로를 묶어 경로를 깔끔하게 정리하려고 한다.

createSelector는 Reselect 라이브러리로부터 비롯됐으며, 사용하기 쉽게 재배포된 것이다.그리고 Reselect 라이브러리를 살펴보면 createSelector는 selector 함수를 memoization할 수 있도록 도와준다.A library for

git의 HEAD: 현재 속한 브랜치의 가장 최신 커밋(가지의 맨 끝단)checkout: 커밋 내역들을 그대로 두고 파일들의 상태만 뒤로 옮기는 즉, 시간선을 바꾸지 않고 그냥 과거로만 돌아갈 때 사용HEAD가 각 브랜치의 가장 최신 커밋인데 checkout으로 과거로

글 작성 계기 이전에 쇼핑몰 프로젝트를 한 경험이 있다. 이 때 백엔드 분이 jwt 방식으로 accessToken은 json으로 보내주셨는데 이 처리를 어떻게 해야 할지 모르겠어서 그냥 localStorage에 저장했다. 하지만 이러한 방식은 XSS 취약점을 통해 그

바벨 사용하지 않고 리액트 컴포넌트 만들어보기jsx에서 map 메서드를 왜 사용하는지 알아보기 전에 babel의 도움 없이 React 컴포넌트를 만들어보면서 babel이 해주는 역할에 대해 알아갈 필요가 있다.babel을 사용하면 다음처럼 태그를 사용할 수 있는 자바스