jh.nrtv

✅ 들어가며 React를 더 심도있게 공부하기 위한 방법을 고민하다보니 직접 React의 여러 hook을 구현해 보는 것이 효과적일 것이라는 생각이 들었다. 먼저 리액트의 훅 중에서 가장 유명하고 특징적인 useState를 구현해보고자 한다. 사실 useState의 구조와 사용법은 간단하기 때문에 쉽게 가능할것이라 생각했으나 큰 오산이었다... ㅠ 라이브러리나 프레임워크가 아닌 html와 js만을 사용한 프로그래밍은 익숙하지 않기도 하거니와, event listener가 중복해서 추가된다던가 의도치 않게 재실행 된다던가 하는 수 많은 시행착오가 있었기에 시간도 매우매우 많이 걸렸다. 그래도 감사하게도 먼저 구현하시고 그 과정을 공유하신 분( 개발자 황준일 님 )들이 많이 계시기에 해당 자료들을 참고하고,..

✅ Virtual Dom 리액트에 존재하는 실제 DOM의 사본과 같은 개념 실제로 DOM 객체에 접근해서 조작하는 대신 가상DOM을 이용해 변화 전, 후를 비교해서 변화하는 부분만 빠르게 파악 후 적용 Real DOM (DOM)? Document Object Model의 약자로, 뜻을 그대로 풀자면 문서 객체 모델을 의미합니다. 여기서 문서 객체란 브라우저가 JavaScript와 같은 스크립팅 언어가 , , 와 같은 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것을 의미합니다. 다시 말하자면 DOM은 브라우저가 트리 구조로 만든 객체 모델입니다. 트리 구조로 DOM 객체가 이뤄져 있기 때문에 JavaScript는 쉽게 DOM 객체에 접근할 수 있고, DOM 객체를 조작할 수 있게..

✅ 번들링 번들링? 사용자가 더 쉽게 앱에 접근할 수 있게 용량 줄이거나 파일 최소화하여 유저에게 전달하는 방법입니다. 번들? 판매량을 높이기 위해 사은품을 주는 마케팅 전략 입니다. 프론트엔드 개발자에게 번들은 '사용자에게 웹 애플리케이션을 제공하기 위한 파일의 묶음 ->사용자가 브라우저 열고 주소 입력하면 프론트엔드 개발자가 번들링한 여러 파일을 받습니다. 번들링의 필요성 ? 번들링 없이 전송하면 아래와 같은 어려움 발생 두 개의 .js 파일에서 같은 변수를 사용하고 있어서, 변수 간 충돌이 일어났습니다. 딱 한 번 불러오는 프레임워크 코드가 8MB라서, 인터넷 속도가 느린 국가의 모바일 환경에서 사용자가 불편을 호소합니다. 번들 파일 사이즈를 줄이기 위해서 파일의 공백을 모두 지웠는데, 가독성이 너..

상태관리 이번 유닛에서는 프론트엔드 개발에서 상태 관리를 보다 더 효율적으로 할 수 있는 방법에 대해서 학습합니다. 바로 컴포넌트와 상태를 분리하여 전역에서 상태 관리를 해줄 수 있게 해주는 상태 관리 라이브러리인 Redux입니다. React 애플리케이션을 개발할 때 Redux를 사용하면 React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어집니다. 특히 컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 Redux를 활용한 상태 관리는 빛을 발합니다. 전역 상태 관리 리액트는 상태관리를 위한 라이브러리는 아니기에, 상태관리 주요 원칙을 따라가면 컴포넌트 간 서로 느슨하게 결합된 (loose coupled), 구조적으로 아름다운 코드 작성 가능 상태는 '변하는 데이터'이다. 특히 프론트엔드에..