에러 코드 초기 개발 환경을 구축하기 위해 구성 요소를 설치하고 터미널에 npm run start를 입력하자 위 사진과 같은 오류가 발생했다. 오류 발생 이유는 구성 요소가 설치된 폴더와 터미널 경로가 일치하지 않았기 때문이었다. 해결 방법 터미널 경로와 폴더 경로를 일치시키자 해당 명령어가 정상적으로 실행되었다.
전체 글
에러 코드 VS Code에서 npx create-react-app 명령어 실행 중 다음 에러가 발생했다. 해결 방법 npm uninstall -g create-react-app npm add create-react-app npx create-react-app [폴더 이름]
Virtual DOM React의 주요 특징 중 하나는 virtual DOM을 사용한다는 것이다. 그래서 virtual DOM에 대해 알아봐야 하는데 그 전에 우선 브라우저가 렌더링하는 과정을 살펴봐야 한다. 웹페이지 빌드 과정(Critical Rendering Path, CRP) 브라우저가 서버에서 페이지에 대한 HTML 응답을 받고 화면에 표시하기 전에 여러 단계를 거친다. 웹 브라우저가 HTML 문서를 읽고 스타일을 입히고 뷰표트에 표시하는 과정이다. 여기에서 문제점은 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그때마다 render tree가 재생성된다. 즉 모든 요소들의 스타일을 다시 계산하고 레이아웃, 리페인트 과정까지 다시 거친다. 이러한 문제로 인해 나온 것이 virtual DOM이다. ..
리액트는 여러 컴포넌트를 이용해 웹 앱을 개발한다. 컴포넌트는 리액트로 만들어진 앱을 이루는 최소한의 단위다. 리액트는 여러 개의 컴포넌트 조각으로 이루어져 있다. 만약 하나의 페이지를 리액트로 만든다고 했을 때 여러 개의 컴포넌트가 모여 하나의 페이지를 구성한다. 예를 들어 인스타그램 페이지는 검색, 프로필, 스토리, 포스트 컴포넌트 등으로 구성되어 있는데, 이렇게 컴포넌트가 여러 개로 나뉘어 있으므로 하나의 컴포넌트를 여러 곳에서 사용할 수 있다. 또 여러 명이 각자 맡은 컴포넌트를 동시에 수정할 수도 있다. 원래 리액트로 개발할 때는 클래스형 컴포넌트를 이용해 많이 개발했지만 리액트에서 리액트 훅스(React Hooks)를 발표한 이후부터는 주로 함수형 컴포넌트를 이용해 개발한다.
리액트의 용도 React는 상호 작용(Interaction)이 많은 웹 앱을 개발하기 위해 주로 사용된다. 그러므로 이러한 웹 앱을 만드는 다른 툴인 Vue나 Angular와 많이 비교된다. 처음으로 볼 수 있는 가장 큰 차이점은 프레임워크와 라이브러리의 차이다. Angular와 Vue는 프레임워크이며 리액트는 라이브러리다. 프레임워크와 라이브러리의 차이점은? 프레임워크는 어떤 앱을 만들기 위해 필요한 대부분의 것을 가지고 있다. 라이브러리는 어떤 특정 기능을 모듈화해 놓는다. 프레임워크는 라이브러리를 포함하고 사용자가 작성한 코드를 호출한다. 그리고 코드는 특정 기능을 구현하기 위해 라이브러리를 호출한다. 리액트가 라이브러리인 이유는 리액트는 전적으로 UI를 렌더링하는 데 관여하기 때문이다. 한편 화면..
초기 설정 git init git remote add origin 주소 git branch -m main git add . git commit -m "넣을메시지" git push -u origin main 이후 업데이트하기 git add . git commit -m "넣을메시지" git push -u origin main 다른 컴퓨터로 복제하기 git clone 주소 가져와서 병합하기 git pull 강제로 푸시하기 git push -u origin +main 리모트 저장소 삭제하기 git remote rm origin