LazyWon Story

블로그 포스트 페이지 내에 Scroll Indicator를 개발하던 중 마주친 Warning과 해결 과정에 대해 남겨두려고 한다. 일단 문제의 그 빨간 글씨의 Warning은 아래와 같다. Unmounted 된 컴포넌트에 대해 상태를 업데이트할 수 없다 ! 해당 작업은 수행되지 않지만, 메모리 누수를 발생시킨다. 고치려면 useEffect의 cleanup function을 이용하라. React에서 window나 document에 addEventListener를 통해 이벤트를 추가할 때, 그냥 사용하게 되면 렌더링 시점이 구분되지 않아 에러가 난다. 따라서 useEffect를 통해 최초 로드 시 이벤트를 추가해 주어야 한다. useEffect(() => { window.addEventListener("sc..

Next.js를 이용하여 정적 블로그 개발 중 포스팅한 블로그 글 페이지 콘솔에 다음과 같은 warning이 발생하였다. 💡 dangerouslySetInnerHTML란? 현재 블로그 포스팅을 위해 포스팅할 마크다운 파일을 가져와서 `remark-html`로 파싱하여 HTML string 형태로 변환해주고 있다. dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법이다. 일반적으로 코드에서 HTML을 설정하는 것은 XSS 공격에 쉽게 노출될 수 있어 위험(html 내부 script로 인해 유저의 쿠키 등 개인 정보를 탈취할 수 있기 때문)하다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 d..

목차 이미지 최적화의 중요성 이미지 종류와 포맷에 대해서 이미지 최적화 방법 알아보기 ⭐ 이미지 최적화의 중요성 회사에서 개발한 이벤트 페이지에 일부 이미지가 로드되지 않는다는 CS건이 들어왔다. 네트워크 통신 장애로 인해 느린 리소스 다운로드 현상이었던 것을 확인하였다. 종종 웹사이트 접속 시 이미지가 느리게 로드되는 것을 확인할 수 있다. 인터넷이 느린 환경이더라도 사용자에게 최대한 빨리 많은 자원이 로드될 수 있도록 해야 한다. (사이트 방문자 40%가 3초 안에 웹페이지가 로딩되지 않으면 떠난다고 한다. ) 그중에서도 웹 페이지(특히 이미지가 중점인 이벤트성의 웹뷰)에서 대부분의 용량을 차지하는 이미지 최적화를 통해 이미지 용량을 줄이고자 한다. 이미지 사이즈를 적절히 줄이고, 렌더링 속도를 빠르..

NextJS로 정적 블로그를 만들어 보고 있다. vercel을 이용하여 배포하던 중, git remote repository에 push를 했는데도 배포한 사이트에 반영이 되어있지 않는 것이다 !! 😱 전 날까지만 해도 잘 배포 되던 것이 어느 순간부터 Build Error가 나고 있었다 .. 로컬 환경에서는 잘만 작동해서 문제없을거라 생각하고 따로 빌드해보지 않았는데 .. Error가 났던 깃 커밋로그를 추적하며 어디서부터 뭐가 잘못된 것인지 살펴보기로 했다.. 로컬에서 빌드 해보았을 때, 아래와 같은 에러가 나왔다. $ npm run build > build > next build info - Linting and checking validity of types info - Creating an opt..

목차 리액트에 대해서.. 리액트의 대표적인 특징 리액트 설치를 위해 필요한 Tools 리액트에 대해서.. 👀 리액트는 페이스북사에서 만든 자바스크립트 라이브러리 중 하나이다. 페이스북에서 자체적으로 이용되고 있을 뿐만 아니라, 에어비앤비, 우버, 넷플릭스, 인스타그램 등 대체적인 웹 어플리케이션이 리액트로 만들어졌다. 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용된다. 즉, 리액트는 웹 UI를 만드는 라이브러리이다. 사용자에게 보여지는 UI를 만들고 그 위에서 사용자가 클릭을 하거나 다양한 이벤트가 발생하면 그에 맞게 반응하도록 만들어진 라이브러리라고 보면 된다. 보통 조금 복잡한 어플리케이션 만들 때 MVC 패턴을 많이 이용한다. 리액트는 이 중에서 View 레이어를 담당하고 있다. MVC..

목차 프론트엔드 트렌드 변천사 SSR, CSR, SSG 프론트엔드 프레임워크 비교 🎠 프론트엔드 트렌드 변천사 웹 프론트엔드 트렌드 변천사 전통적인 웹 동작 방식은 웹 서버가 HTML 전체 페이지를 브라우저에게 전송하는 구조로 동작했다. 과거 웹 사이트는 지금에 비해 문서 하나에 전달되는 파일 용량이 매우 적었다. User Interaction이 거의 없는 단순한 HTML, CSS 자체의 정적인 페이지를 개발하는데 그쳤다. 그래서 어떤 요소를 한 번 클릭하면 완전히 새로운 페이지를 서버에서 전송해주곤 했다. 이후 동적인 웹 서비스가 등장하면서 웹 서버가 HTML 페이지와 더불어 Javascript를 통해 필요한 데이터만을 주고받으며, User Interaction을 구현하게 되었다. Javascript를..

Testing Library를 이용하여 리액트 컴포넌트 테스트 코드 작성 시 아래와 같은 에러가 발생했다. 테스트는 통과하는데 cosole.error가 자꾸 발생했다. console.error Error: Expected key descriptor but found "" in "" See https://github.com/testing-library/user-event/blob/main/README.md#keyboardtext-options for more information about how userEvent parses your input. ... 에러가 발생한 코드는 다음과 같다. userEvent.type(input, ''); input에 빈 값('')을 입력 후, 특정 함수를 호출하려 하면 해..

목차 학습 주제 JWT의 이해 학습 주제 ch. 23 - 24 JWT를 통한 회원 인증 시스템 구현하기 💡 JWT의 이해 JSON Web Token의 약자로, 데이터가 JSON으로 이루어져 있는 토큰을 의미한다. 쉽게 말해, 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰이다. 두 개체가 서로 안전하게 정보를 주고받을 수 있도록 웹 표준으로 정의된 기술이다. 사용자의 정보 열람, 수정 등 개인적인 작업들을 수행할 수 있다. 세션 기반 인증 시스템 서버가 사용자가 로그인 중임을 기억하고 있는 것. 사용자가 로그인하면 서버는 세션 저장소에 사용자 정보를 조회하고 세션 id를 발급한다. 발급된 id는 브라우저의 쿠키에 저장한다. 이후에 사용자가 다른 요청을 보낼 때마다 서버는 세션 저장소에서 세션을..

목차 학습주제 React Router API 연동 Context API 학습 주제 13장. 리액트 라우터 14장. 외부 API 연동하기 Context API 💡 React Router router 기능을 구현하기 위해 외부 라이브러리 필요 사용 빈도가 가장 높은 react-router-dom 라이브러리 사용 프로젝트에 라우터 적용 프로젝트에 리액트 라우터 적용할 때는 src/index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용하여 감싸면 된다. BrowserRouter 컴포넌트는 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해준다. Route 컴포넌트로 어떤 규칙을 가..

목차 Hooks 컴포넌트 스타일링 학습주제 8장. Hooks 💡 Hooks 클래스형 컴포넌트의 state관리와 Life cycle method 기능을 제공해 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해주는 기능이다. Hooks의 사용으로 기존의 클래스형 컴포넌트가 가지고 있던 복잡성, 재사용성의 단점들까지 해결해 준다. useState 가장 기본적인 Hook으로 상태 변수와 상태 업데이트 함수를 반환 함수형 컴포넌트에서 상태 관리를 하기 위해 컴포넌트 코드를 클래스 형태로 변환할 필요가 없어 매우 편리하다. 하나의 useState 함수는 하나의 상태 값만 관리할 수 있다. useEffect 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook. 클래스형 ..