Just Do It

기초부터 시작! 리액트 App 설치와 실행 과정 정리React로 만든 웹 서비스들은 보통 React App, React Application 이라고 한다. 단순한 웹페이지의 기능을 넘어서 브라우저 위에서 동작하는 애플리케이션 같다고 하여 그렇게 부른다.react 또한 npm에 등록된 자바스크립트의 라이브러리다.react의 기타 도구 설치 및 설정은 입문자가 하기에는 어려움이 있어, Vite라는 차세대 프론트엔드 개발 툴로 기본 설정이 적용된 React App을 생성하자.Vite 툴로 리액트 app 생성 방법터미널에서 npm create vite@latest 입력하고 사용할 언어 등을 선택하여 프로젝트를 생성한다.생성된 프로젝트 폴더를 열고, 터미널에서 npm i 를 입력하여 라이브러리를 설치한다.생성된 ..

React의 기술적인 특징컴포넌트를 기반으로 UI를 표현한다.화면 업데이트 구현이 쉽다.화면 업데이트가 빠르게 처리된다.컴포넌트를 기반으로 UI를 표현한다.컴포넌트 (Component) : 화면을 구성하는 요소, UI를 구성하는 요소예로 Header.js, Main.js, Footer.js 등 여러 개의 컴포넌트로 나뉘어서 구성할 수 있다. 레고처럼.화면 업데이트 구현이 쉽다.업데이트 : 사용자의 행동(클릭, 드래그 등)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것렌더링(Rendering) : UI 요소를 화면에 그려내는 것리액트는 ‘선언형 프로그래밍’ 이다. 이는 과정을 생략하고 목적만 간결히 명시하는 방법이다. 반대는 ‘명령형 프로그래밍’으로 목적을 이루기 위한 모든 일련의 과정을 설명하..

본격적으로 리액트에 들어가기 앞서 다시 한번 상기하는 공부.Node.js 란?JavaScript 실행 환경 (Run Time), 즉 구동기이다.JavaScript는 웹 페이지 내부에 필요한 아주 단순한 기능만을 개발하기 위해 만들어졌다. 문법 자체가 매우 유연하고 작성하기가 쉽게 (생산성이 높게) 개발 되었다. 개발자들은 이렇게 쉬운 자바스크립트를 웹 브라우저 밖에서도 사용하고 싶어했다. 그래서 2009년에 탄생한 것이 node.js 이다.Node.js에서 사용하는 프로그램의 단위는 ‘패키지’ 라고 한다. (= 프로젝트)패키지의 root 폴더를 로컬 원하는 곳에 만든다.VSCode에서 루트 폴더를 열고 터미널( ctrl+j )을 연다.npm init을 실행한다. (초기화한 정보로 package.json ..

본격적으로 리액트에 들어가기 앞서 다시 한번 상기하는 공부.동기여러 개의 작업을 순서대로, 하나씩 처리하는 방식이다.JavaScript는 기본적으로 “동기적”으로 코드를 실행한다.동기 방식에는 치명적인 단점이 존재한다.자바 등 다른 언어에서는 ‘멀티쓰레드’ 방식으로 오래 걸리는 작업이 중간에 포함되어 있더라도 해당 작업이 프로그램 전체 성능에 큰 영향을 주지 않도록 동기 방식의 단점을 어느정도 보완한다.그러나 자바스크립트 엔진에는 쓰레드가 1개 밖에 없다. 그래서 ‘비동기’ 방식으로 해결한다.비동기작업을 순서대로 처리하지 않는 방식이다.여러 개의 작업이 주어졌을 때 앞선 작업이 끝나지 않았어도 다음 작업을 동시에 실행시킨다.비동기 작업들은 자바스크립트 엔진이 아닌 Web APIs에서 실행 된다.Web A..