728x90 Developer/Javascript 해부학10 컴포넌트 상태 변이 흐름에 대한 고찰 목차 도대체 어디서 상태 변이시키는거야? 상태 변이 흐름 개선하기 상태 변이 일원화 상태 돌려놓기 부적절한 UX 마무리 도대체 어디서 상태 변이시키는거야? 컴포넌트 상태가 복잡해져서 예상치 못한 변이 흐름이 생기지 않을까 고민하셨나요? 아니면 의도하지 않은 상태로 변이되어서 당황하신 적이 있으신가요? 컴포넌트에 기능이 많아지고 비즈니스 로직이 복잡해질 수록 더 많은 상태가 생기게 됩니다. 특히 api 호출에 의존되는 경우 예외처리까지 고려해야합니다. 생각만해도 사이드 이펙트로 화면에 이상한 값이 보여질까 걱정되는데 여러분들은 어떻게 상태 변이 흐름을 관리하시나요? 상태 변이 흐름 개선하기 먼저 상황을 가정해보겠습니다. 화면은 필터링, 상품의 목록과 페이지네이션으로 이루어져있습니다. 첫 화면이 렌더링이 완.. 2023. 12. 9. 리액트의 렌더링이란? 목차 우리가 말하는 렌더링 리액트가 말하는 렌더링 Trigger Render Commit 리액트의 화면 그리기 렌더링을 알면 보이는 것들 우리가 말하는 렌더링 프론트 공부를 하다보면 렌더링이라는 어휘를 자주 접하게 됩니다. 이러한 렌더링은 화면을 그리는 작업을 의미합니다. 그 중 브라우저에서 렌더링은 브라우저 렌더링 엔진이 렌더 트리를 만들어 paint하는 것을 의미합니다. 하지만 많은 인기를 얻고 있는 React는 조금 다른 의미로 렌더링을 소개합니다. 리액트가 말하는 렌더링 리액트에서 렌더링은 컴포넌트를 호출하는 것입니다. 하지만 컴포넌트를 호출한다고 무조건 화면을 그린다는 것은 아닙니다. 리액트가 화면을 그리는 과정의 일부가 렌더링이라고 생각하는 것이 이해하기 쉬울 것이라고 생각합니다. 왜냐하면 공.. 2023. 2. 28. Javascript Module System 목차 들어가기 모듈 불편한 코드 정리된 코드 핵심 기능 알아두면 좋은 것 CommonJS와 ECMAScript Module의 배경이야기 mjs와 type="module" 코드를 보기 전에 CommonJS Module, ECMAScript Module을 구분하기 CommonJS Module 특징 cjs require cjs cjs import mjs ECMAScript Module 특징 mjs import mjs mjs require cjs mjs import cjs ECMAScript Module은 어떻게 동작되는가 Construction (구성) Instantiation (인스턴스화) Evaluation (평가) 나가기 참고 들어가기 개발 분야로 입문했던 당시, Express를 이용한 작은 프로젝트에서.. 2023. 1. 23. [JavaScript] Hoisting 이란? poiemaWeb - 데이터 타입과 변수 poiemaWeb - let, const와 블록 레벨 스코프 JaeYeopHan - Interview_Question_for_Beginner 1. 서론 기본적으로 코드를 작성할 때 변수를 선언한 후에 사용을 하는데, 함수의 경우 선언을 하단에 작성하고 사용하는 작업을 상단에서 하는 경우가 있었다. Hoisting에 대해서 모르는 경우 함수 표현식으로 작성하였을 때 원하는 대로 동작하는 않는 경험을 하게 된다. 이러한 문제점은 Hoisting 이란 개념을 통해 해결해 나갈 수 있다. 2. Hoisting JavaScript Parser가 모든 선언을 유효 범위(scope) 최상단으로 끌어올려지는 것이다. Hoisting 대상은 var, let, const, func.. 2022. 1. 27. 이전 1 2 3 다음 728x90
