2024년도의 끝이 얼마 남지 않았다,올 한해를 떠올려보면 정말 숨고를 시간도 없이 달려온 기억들만이 남는데,회고를 작성하는 지금 이 시점에서나마 1년이라는 짧지만 긴 시간이 지나감을 몸소 느낄 수 있는 것 같다. 올 한해 나는 과연 어떤 삶을 살았을까? 한 번 돌이켜보자.2024년도 나의 구성요소 💫회사생활동아리성장하기 위한 몸부림위 세가지는 나의 24년도를 상징하는 큰 세가지 부분집합이 될 것 같다.1. 회사생활23년 말 첫 회사에 입사하게 되었다,내가 지금의 회사를 선택한 이유는 다음과 같았다.꾸준히 성장하고 있는 회사일 것.실제 유저에게 영향을 미치고 있는 서비스를 전개하고 있을 것.꾸준히 성장하는 회사 속에, 더 많은 기회가 열려있다. 그리고 그러한 기회를 통해 실제 유저들에게 영향을 미칠 수..
Introductionzustand 상태관리 방식을 이해한다는 것은 무엇일까?zustand 상태관리를 이해하기 위해 아래 네 가지 개념들의 유기적 상관관계를 이해해보도록 한다.createStorecreateuseSyncExternalStoreuseStoreOverview전역상태(zustand): StoreApi ( setState, getState, getInitialState, subscribe )로 접근 가능한 캡슐화된 객체👉 "React 렌더링 사이클과 독립적으로 존재. “createStore : 전역상태를 만들고, storeAPI를 반환한다.👉 ”캡슐화된 사용자정의 State 및 Action(메서드)를 만들고, 상태 관리를 위한 핵심 API인 StoreApi ( setState, getStat..
1. VDOM의 정의리액트 legacy 공식문서(https://ko.legacy.reactjs.org/docs/faq-internals.html)에 따르면 VDOM을 다음과같이 정의하고 있습니다.Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.브라우저의 크리티컬 렌더링 패스 수행은 꽤나 무거운 작업입니다. 따라서 보여져야할 모든 UI정보를 메모리상의 자바스크립트 객체로 저장하고, 변경사항을 관리하며, 최적의 브라우저 렌더링을 수행할 수 있는 상태로 커밋하여 UX를 높이는 기술이라 할 수 있습니다.2. VDOM의 구성요소VDOM의 구성요소..
이번 글또 10기를 지원하며, 과거부터 현재까지 나의 삶의 지도를 보여주세요! 라는 항목을 작성하게 되었어요.지원하기 위해 필수로 작성해야하는 미션의 일부이지만, 왜 이러한 미션이 주어졌는지에 대해 깊이 공감할 수 있어 즐겁고 설레는 마음으로 글을 작성할 수 있었습니다. 제 이십대를 전반적으로 회고하는? 느낌의 글이 될 것 같은데, 가벼운 마음으로 읽어주시면 감사드리겠습니다. :) 희미한 안갯속에서 걷다제 인생의 삶의 지도를 이미지로써 떠올려보면, 아마 20대 초반이 되기 전까지 영역은 낡고 희미해져 빛바랜 느낌일 것 같아요. 그만큼 성인이 되기 전까지는 그저 세상이 말하는대로, 부모님이 시키는 대로, 주관없이 따라가기만 하는 수동적인 인생이었다고 느껴져요. 즐거운 기억도 많았지만, 인생에서 무언가 치..
[1] 디펜던시 추가 yarn add -D @babel/runtime @babel/plugin-transform-runtime @babel/runtime Babel 변환 과정에서 사용되는 런타임 헬퍼(helper) 함수와 core-js의 폴리필(polyfill)을 제공하는 코어 패키지의 일종 @babel/plugin-transform-runtime @babel/runtime 패키지가 제공하는 **헬퍼함수와 폴리필(polyfill)**을 재사용할 수 있도록 돕는다. babel이 async-await 문법을 지원하도록 돕는다. *헬퍼 함수: Babel 변환 시 필요한 여러 보조 기능을 제공합니다 (예: 클래스 생성, 스프레드 연산자 확장 등). *폴리필: 구형 브라우저에서 ES6 이상의 기능(예: Promi..
7. Husky로 local 코드 품질 관리하기 Whay is Husky? pre-commit (커밋 전) 단계에서 코드 린팅 및 포매팅 자동화를 통해 코드 품질을 관리하는 도구 팀으로 작업시에 설정한 린팅,포매팅을 자동 적용하기 때문에 일관성 있는 코드를 작성할 수 있다. [1] 디펜던시 설치 yarn add -D husky@4 lint-staged husky husky는 Git 훅(hooks)을 쉽게 관리하고 사용할 수 있게 해주는 도구입니다. ( *Git Hook : 특정한 Git 이벤트(예: 커밋, 푸시)가 발생할 때 자동으로 실행되는 스크립트 ) lint-staged Git의 staged 파일(커밋하기 전에 스테이징된 파일)에 대해 린트(lint)나 다른 자동화된 프로세스를 실행하는 도구 hus..
6. Prettier 적용 ( code beautifier ) Prettier를 통해 코드 서식 지정 스타일 가이드를 적용할 수 있다. [1] VScode Prettier extension 설치 [2] Prettier관련 Dev 디펜던시 설치 yarn add -D prettier eslint-config-prettier eslint-plugin-prettier prettier prettier 코어 라이브러리 eslint-config-pretteir prettier와 충돌할 수 있는 eslint rule을 disable 시켜줌 eslint-plugin-prettier prettier를 eslint rule에 맞게 동작시키는 플러그인 [3] root디렉토리 .prettierrc.js 설정 파일 추가 // ...
5. ESLint 사용하기 [1] ESLint ? JS 코드의 버그를 미리 찾아내고, 코드 스타일과 일관성을 유지하는 데 도움을 줌. [2] ESLint 적용을 위한 패키지 설치하기 (for React with TS) yarn add -D eslint yarn add -D eslint-plugin-react eslint-plugin-react-hooks // react, hooks lint 규칙 지원 yarn add -D @typescript-eslint-parser @typescript-eslint/eslint-plugin // ts parser , ts lint 규칙 지원 yarn add -D eslint-plugin-import eslint-plugin-jsx-a11y // ESModule 사용 ,..
