본문 바로가기

Computer Programming

React immer 라이브러리로 불변성 유지하기
Computer Programming/[리액트를 다루는 기술] 2023. 6. 20. React immer 라이브러리로 불변성 유지하기 객체의 구조가 깊어지면 자바스크립트 배열 내장 함수만으로 구현할 수는 있지만 복잡해질 것이다. 가독성을 높이기 위해 immer 이라는 라이브러리를 사용하면 구조가 복잡한 객체도 쉽고 짧은 코드로 불변성을 유지하면서 데이터를 업데이트할 수 있다. => 불변성에 신경쓰지 않는 것 처럼 하지만 실제로는 불변성관리를 해주는 라이브러리. yarn add immer 아래의 코드를 immer을 사용해서 바꿔보자 import { useCallback, useRef, useState } from 'react'; import './App.css'; function App() { const nextId = useRef(1) const [form, setForm] = useState({ name: '', username: '..
react-virtualized를 사용한 렌더링 최적화
Computer Programming/[리액트를 다루는 기술] 2023. 6. 20. react-virtualized를 사용한 렌더링 최적화 올해 초 캐나다에서 코딩 공부한지 정말 얼마 안 됬을 때.... 백엔드 친구와 주식 관련 앱을 만들어보려고 했던 적이 있는데 주식 데이터가 실시간으로 너무 많다보니 렌더링이 느리고 성능도 매우 좋지 않았고 최적화를 잘 못하던 시절이라.. 그 시절 내 자신이 정말정말 답답했었다... 😅 아무튼 그때 너무 구현해보고 싶었는데 못 했던 부분이 주식 데이터를 보여줄 때 일단 유저에게 짠 하고 처음 보여지는 부분만 먼저 렌더링하고, 유저가 스크롤하거나 zoom하면 그때 필요한 정보를 가져와서 렌더링하는 기능이었다. 비슷한 로직의 라이브러리를 보니 감회가 새롭다 🤩 이번에는 스크롤 하면서 렌더링 되게 만들어 줄 예정이다 리스트 아이템의 크기를 먼저 재야하는데, 이 때는 두번째 요소부터 해야 테두리가 합쳐진 크기가 ..
[리액트를 다루는 기술] 11. 컴포넌트 성능 최적화
Computer Programming/[리액트를 다루는 기술] 2023. 6. 19. [리액트를 다루는 기술] 11. 컴포넌트 성능 최적화 1. React DevTools 성능 분석 툴로 몇 초 걸렸는지 측정할 수 있다. 리렌더링은 4.2ms 정도가 걸렸고 랭크 아이콘을 눌러보면 리렌더링된 컴포넌트를 오래 걸린 순으로 정렬해서 보여준다. 그리고 아래쪽을 보면 변화를 일으킨 컴포넌트랑 관계 없는 컴포넌트들도 리렌더링된 것을 볼 수 있다. 이것들을 선택하면 어디부터 어디까지 렌더링이 몇 초 걸렸는지도 확인할 수 있다. 단순히 '느리다'라는 표현을 쓰기보다는 정확히 몇 초에서 몇 초로 단축되었는지 분석하고 해결하는 것이 중요하다..!! 불필요한 리렌더링을 어떻게 방지할 수 있을까? 2. React.memo -React.memo를 통해 props가 변경되지 않았다면 리렌더링 하지 않도록 설정할 수 있다. import React from 'react..
자바스크립트의 Scope 스코프 (렉시컬 환경, 호이스팅, var, let과 const)
Computer Programming/Javascript 2023. 6. 19. 자바스크립트의 Scope 스코프 (렉시컬 환경, 호이스팅, var, let과 const) 목차 1. 스코프란? 1-1. 렉시컬 환경 2. 스코프의 종류 2-1. 스코프 체인 2-2. 함수 레벨 스코프 3. 전역 변수 3-1. 문제점 3-2. 해결방법 4. let과 const 4-1. 호이스팅 4-2. 무엇을 사용해야 할까? 1. 스코프란? ES6의 주요한 변화로 let과 const 키워드로 변수를 선언할 수 있게 되었습니다. 이는 var 키워드의 변수와도 차이점이 있으며, 이러한 스코프는 자바스크립트를 포함한 모든 프로그래밍 언어에서 사용되는 중요한 개념입니다. 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)은 자신이 선언된 위치에 의해 다른 코드가 식별자인 자기 자신을 참조할 수 있는 유효 범위가 결정되며 이를 스코프라고 합니다. 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙..
WIL - JS ECMAScript(ES)란? ES5와 ES6의 주요 발전
Computer Programming/Javascript 2023. 6. 18. WIL - JS ECMAScript(ES)란? ES5와 ES6의 주요 발전 오늘은 JS ECMAScript의 정의와 발전 과정, 특히 주요한 발전이었던 ES5와 ES6에 대해 공부했다. JavaScript가 웹 개발을 위해 가장 일반적으로 사용되는 '언어'라면 ES는 이 JavaScript의 기능과 문법, 객체 모델을 정의하고 있는 규격, 표준이라고 할 수 있다. ES5는 2009년에 출시된 ECMAScript 5의 줄임말로, JavaScript에 많은 개선을 가져온 주요한 규격이다. 1. ES5 - strict mode (엄격 모드)의 도입 : 코드 자성의 실수나 잠재적인 오류를 방지하기 위한 규칙 도입 - 배열 메소드 추가: forEach, map, filter, reduce 메소드 - JSON객체 - bind 메소드 등 ES6는 2015년에 출시된 ECMAScript 20..
[리액트를 다루는 기술] 10. Todo List 만들기
Computer Programming/[리액트를 다루는 기술] 2023. 6. 17. [리액트를 다루는 기술] 10. Todo List 만들기 리액트를 다루는 기술 - 김민준 책을 따라만 하는것에 그치고 싶지 않아서 최대한 내가 먼저 생각해서 만들어 본 후, 책의 코드와 비교했다. 그리고 새로 알게된 점은 주석도 달고 여기에 메모해서 기억해두려고 한다. 디렉토리는 components와 styles 크게 두가지로 나눴고 css는 scss를 사용했다. npx create-react-app 으로 리액트 앱을 만든 후 App.js에 TodoTemplate.js 를 렌더링 한 후, 나머지 컴포넌트들은 이 컴포넌트의 props로 전달함으로서 렌더링했다. 1. classnames classnames 라이브러리 - 동적으로 css 클래스를 조작해야할 때 간결하게 작성할 수 있음. 조건부로 클래스 이름을 동적으로 생성해서 복잡한 조건에 따라서도 해결할 수 있음..
[리액트를 다루는 기술] 9. 컴포넌트 스타일링
Computer Programming/[리액트를 다루는 기술] 2023. 6. 16. [리액트를 다루는 기술] 9. 컴포넌트 스타일링 1. Sass 사용하기 Scss도 있지만 문법만 다르고 사용 용도와 방법은 같다. .scss 파일을 만들고 //util.scss //변수 사용하기 $red: #fa5252; $yellow: #fcc419; $blue: #339af0; $indigo: #5c7cfa; $violet: #7950f2; //mixin 만들기 (자주 사용되는 스타일을 함수처럼 만들어 재사용함) @mixin square($size) { $calculated: 32px * $size; width: $calculated; height: $calculated; } 자주 사용하는걸로 변수와 함수같은 minxin을 만들어 재사용할 수 있다. 자주 사용될 이 변수와 믹스인들은 utils.scss 와 같은 곳에 저장하여 필요할 때 꺼내 쓰는 ..
[리액트를 다루는 기술] 8. Hooks | Custom Hooks
Computer Programming/[리액트를 다루는 기술] 2023. 6. 16. [리액트를 다루는 기술] 8. Hooks | Custom Hooks 1. useEffect cleanup ? useEffect 에서는 함수를 반환할 수 있는데, 이를 cleanup 함수라고 한다. 렌더링이 다시 일어날때 (첫 렌더링 또는 deps 변화) useEffect 의 return 함수가 실행된다. 이 함수의 실행 시점은 업데이트 직전이다. 따라서 업데이트 직전 clean up 하고싶거나 원하는 상태로 되돌리고싶을때, 또는 중단하고 싶을 때 사용하면 된다. useEffect(() => { console.log("렌더링이 되었습니다!") console.log(name) return () => { console.log("cleanup") console.log(name) } },[name]) *주의사항 의존성 배열에 함수를 추가하면 렌더링때 마다 갱신됨 (렌더링때마다 함..
[Browser] DOM (Document Object Model)
Computer Programming/Browser 2023. 6. 15. [Browser] DOM (Document Object Model) https://nayoungkim00.tistory.com/44 브라우저의 구조와 렌더링 엔진의 working process 에 관한 글을 먼저 작성했습니다. 이후 DOM 에 관해 모던 자바스크립트 Deep dive 책을 읽고 정리해보았습니다. 프론트엔드 개발자(사실 지망생 😎)에게 브라우저의 동작 원리를 이해하는 것은 매우 중요합니다. 내가 작성한 코드가 어디에서 어떤 순서로, 어떤 방식으로 동작하는지 이해하면 더 효율적이고 클린한 코드를 작성할 수 있을 것이라 생각합니다 :) 1. DOM (Document Object Model) DOM 이란 HTML 문서의 계층적 구조(부모-자식)와 정보를 표현하며 이를 제어할 수 있는 API(DOM API), 즉 프로퍼티와 메소드를 제공하는 트리의 자료구조입니다...

티스토리툴바