본문 바로가기

JavaScript/React45

React) Node.js, yarn, Git, VS Code 다운로드 및 프로젝트 생성 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. Node.js 다운로드 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org * Node.js 다운로드 이유? 더보기 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치! 이 때 사용하는 개발 도구에는 ECMAScript 6를 호환시켜주는 바벨, 모듈화된 코드를 한 파일로 합치고(.. 2022. 10. 26.
React) 컴포넌트와 render 함수, 초기렌더링/리렌더링(조화과정) Virtual DOM 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리액트란? - 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용 - 오직 V(view)만 신경 쓰는 라이브러리 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하는 리액트를 이해하려면 '초기 렌더링'과 '리렌더링' 개념을 이해해야 합니다. 먼저 컴포넌트와 render 함수에 알아보겠습니다. 컴포넌트(Component) 버튼과 텍스트 박스 등의 범용성이 높은 요소를 컴포넌트로 정의하여 UI 부품을 설계할 수 있습니다. - 특정 부분이 어떻게 생길지 정하는 선언체 - 재사용이 가능한 API로 수많은 기능들을 내장 - 하나의 컴포넌트에서 해당 컴포넌트의 생김새와 작동 방식.. 2022. 10. 26.
React) 리액트 사용 이유와 탄생 과정 안녕하세요, 코린이의 코딩 학습기 채니 입니다. [리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다. 리액트 탄생 과정 프론트엔드 사이드에서 돌아가는 애플리케이션 구조를 관리하려면 순수 자바스크립트만으로는 부담이 존재합니다. (어떠한 데이터를 변경하고자 할 때 해당 요소를 찾아 업데이트 처리) 이유는? 규모가 클수록 코드가 복잡 제대로 관리가 어려우면 성능 저하 이러한 문제점을 기반으로 지금까지 MVC, MVVM, MVM 아키텍쳐 기반으로 프레임워크들이 개발 되었습니다. 간단하게 개발할 수 있는 방법? 페이스북 개발팀이 고안해낸 방법은 데이터가 변경될 때마다 어떤 변화를 주는 것이 아닌 기존 뷰를 날려버리고 처음부터 새로 랜더링하는 방법을 생각하였습니다. 간단하다 코드의 양이 줄어든다.. 2022. 10. 26.