Fall in IT.

안녕하세요. 오늘은 immer 라이브러리를 사용하여 쉽게 데이터의 불변성을 유지하는 방법에 대해서 알아보겠습니다. 데이터 불변성의 중요성 리액트 컴포넌트에서 상태를 업데이트할때 불변성을 지키는 것은 매우 중요하다. 리액트에서는 React.memo를 사용했을때 props가 바뀌었는지 혹은 바뀌지 않았는지를 알아내서 리렌더링 성능을 최적화해줄수있다. 불병성이 지켜지지 않는다면 React.memo와 같은 최적화는 불가능하다 immer가 꼭 필요한가? 반드시 필요하진 않다. 전개 연산자와 배열의 내장함수를 사용하면 쉽게 새로운 값을 만들 수 있다. 하지만 객체 구조가 깊어질수록 불변성을 유지하면서 업데이트하는것은 힘들어진다. 컴포넌트의 상태 업데이트가 까다로울때 immer 라이브러리를 사용하면 좋다. // 사용..

안녕하세요. 오늘은 컴포넌트를 스타일링하는 방법에 대해서 간단히 알아보겠습니다. 컴포넌트 스타일링 방식은 다양하게 존재한다. 일반 CSS Scss, Sass 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해준다. CSS Module 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션 styled-components 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있다 일반 CSS 중요한 점은 CSS 클래스명을 중복되지 않게 만드는 것이다 [컴포넌트 이름] - [클래스 이름] 형태로 이름을 짓..

안녕하세요. 오늘은 ESLint와 Prettier를 사용해서 개발환경을 만들어보겠습니다. 여러명이서 개발을 할때 코드 품질/포맷팅 도구의 도움을 받지않고 일관된 코드로 작성을 하기란 매우 어렵습니다. 최근에 많이 사용되는 ESLint와 Prettier를 사용해서 여러명이서 협업을 할때 일관된 코드를 작성할 수 있는 자동화된 환경을 만들어보겠습니다. 알아둬야할 키워드 ESLint Prettier (eslint-config-prettier, eslint-plugin-prettier) husky lint-staged git hooks ESLint란? lint란 보풀이란 의미로 코드상의 보풀을 제거해주는 도구를 말한다. 코드에서 보풀이란 선언한 변수를 사용하지 않았거나 들여쓰기를 일관되게 하지 않았거나 긴 코드..

안녕하세요. 오늘은 DNS 즉, Domain Name System에 대해서 간단하게 알아보고 그와 관련하여 자주 사용되는 용어들을 정리해보도록 하겠습니다. DNS(Domain Name System)란? 호스트의 도메인 이름을 호스트의 네트워크 주소로 바꾸거나 그 반대의 변환을 수행하는 시스템 DNS 동작 원리 컴퓨터에서 브라우저를 켜고 www.google.com 을 입력한다. 컴퓨터는 컴퓨터 내부에 등록 되어 있는 DNS 서버로 www.google.com에 해당되는 IP 주소를 물어보고 DNS 서버는 해당 도메인의 IP 주소를 알려준다. 컴퓨터는 이를 받아서 IP 주소에 해당하는 컴퓨터에 접속하게 되는 것이다. DNS가 나오게 된 배경 인터넷에 연결 된 컴퓨터 한대 한대를 호스트(host) 라고 한다. ..

안녕하세요. 오늘은 웹 성능 최적화 방법에 대하여 간단하게 알아보도록 하겠습니다. 목표 느린 웹 페이지를 빠르게 만들어보자 목차 로딩 최적화 방법 렌더링 최적화 방법 용어 정리 Navigation Timing Resource Timing (Network) + Processing + Load로 결합된 페이지가 그려지기까지의 과정을 나타낸 그림이다. Resource Timing은 네트워크와 연관 된 부분으로 프론트엔드에서 최적화하기 어렵다. Processing과 Load 부분은 최적화가 가능하다. Critical Rendering Path 브라우저가 하나의 화면을 그려내는 과정을 말한다. DOMContentLoaded Event HTML 파싱이 끝났을때 (DOM Tree 분석이 끝났을때) 발생하는 이벤트로 ..