Skip to content

Latest commit

 

History

History
122 lines (104 loc) · 8.98 KB

installReact-FolderStructor.md

File metadata and controls

122 lines (104 loc) · 8.98 KB

리액트 설치하기

npm init react-app 원하는_리액트_폴더명
  • 원하는_리액트_폴더명으로는 리액트에 필요한 모든 파일 및 폴더가 설치되는 폴더를 만드는 것이다.
  • yarn으로 설치하는 방법이 있고, npm으로 설치하는 방법이 있다. 어느쪽을 사용해도 좋으나 여기서는 npm으로 설치하는 방법을 사용하도록 한다.

폴더 구조 확인하기

폴더 이동하기

cd 원하는_리액트_폴더명
  • 원하는 폴더 안의 경로로 터미널의 명령 실행 위치를 이동한다.

폴더 안의 리액트 폴더 구조 확인하기

ls
  • 현재 명령을 실행하는 경로에 있는 모든 파일 및 폴더 리스트를 확인한다.
README.md               package.json            node_modules
public                  package-lock.json       src
  • 위와 같이 파일 및 폴더 리스트가 나올 것이다.
ls -a
  • .으로 시작하는 파일은 윈도우로 치면 숨김 파일에 해당한다. 숨김 파일을 보기 위해서는 -a 옵션을 사용해 줘야 한다.
.                       README.md                  public
..                      node_modules               src
.DS_Store               package-lock.json
.gitignore              package.json

리액트 파일 및 폴더 기능 확인하기

.                       README.md                  public
..                      node_modules               src
.DS_Store               package-lock.json
.gitignore              package.json
  • 각 파일 및 폴더에 대한 기능은 리액트를 배우면서 알게되므로 간략한 설명만 한다.

.

  • 현재 폴더를 의미한다.
pwd
cd .
pwd
  • cd .은 . 경로로 이동하겠다는 의미이다.
  • pwd는 터미널에서 명령이 실행되는 경로를 알려 준다. 첫 번째 pwd를 입력했을 때와 두 번째 pwd를 입력했을 때가 같다는 것을 알 수 있다.
  • cd . 전후의 경로가 같다는 것은 .가 현재 폴더를 의미하는 것을 알 수 있게 해 준다.

..

  • 한 단계 상위 폴더를 의미한다.
pwd
cd ..
pwd
  • 상위 폴더로 갔으므로 다시 한 단계 아래의 이전 폴더로 이동하자
cd 원하는_리액트_폴더명

.DS_Store

Apple macOS 운영 체제에서 .DS_Store는 폴더 보기 옵션, 아이콘 위치 및 기타 시각적 정보 등 포함한 폴더의 사용자 지정 속성을 저장하는 파일입니다.

  • 위키의 설명을 보면 폴더 설정을 저장하는 용도로 사용하는 파일이다. 프로젝트의 코드와는 별 관계가 없는 파일이며 다른 사용자의 맥OS에서는 맥OS의 폴더 설정이 다르게 되어 있을 것이고 .DS_Store의 설정값 차이로 충돌이 발생할 수 있다. 이런 일을 방지하기 위해서 git을 사용할 때 git에 의해 파일이 추적되지 않도록 .gitignore에 .DS_Store를 추가해 줄 필요가 있다. .gitignore 기본적으로 추가되어 있다.

.gitignore

  • git은 .git파일이 있는 폴더의 파일과 하위의 파일들의 변경 사항을 추적하는 기능을 제공하고 git을 통해서 github에 파일을 올릴 수 있다.
  • .gitignore은 git에 파일의 변경사항이 추적되지 않도록 하는 기능이 있다. git에 의해 파일의 변경사항이 추적되는 github와 같은 저장소에 파일을 올릴 수 있기 때문에 github에 파일을 올리고 싶지 않은 경우 .gitignore에 파일 및 폴더 경로를 추가해 주면 된다.
  • 한 번 git에 의해 변경사항이 추적된 상태에서 github에 파일을 올리게 되면 추적에서 배제하기 어렵거나 거의 불가능하게 되는 경우가 있으므로 민감한 파일들은 반드시 git에 의해 추적이 되기 전에 .gitignore에 등록 해 줘야 한다.
  • 비쥬얼 스튜디오 코드에서는 .gitignore에 의해 등록된 파일 및 폴더는 EXPLOER의 파일 및 폴더 리스트에서 반투명의 회색으로 표기되어 있다. node_modules 폴더를 보면 색이 흐릿한 회색이다.

README.md

  • github 리포지토리에서 어떤 폴더 경로의 페이지에 접근할 때 화면에 게제하고자 하는 글을 폴더 경로의 README.md라는 파일에 적는다.

node_modules

  • NodeJS의 패키지의 라이브러리 코드가 들어 있는 폴더이다.
  • 리액트는 노드JS 라이브러리이다. 리액트로 애플리케이션을 만들 때는 리액트 라이브러리 뿐만 아니라 다양한 자바스크립트 라이브러리를 사용해야 한다. 라이브러리를 설치할 때 저장되는 장소가 node_modules 폴더이다.
  • 주의할 점 : node_modules는 git에 의해 추적이 되면 안 된다. git에 의해 추적이 되지 않는다는 말은 github에 올리지 않는다는 의미이다. node_modules은 용량이 아주 크다 수백 메가바이트에서 몇 기가바이트에 (혹은 그 이상) 이른다. github에는 한 달에 올릴 수 있는 파일의 용량이 정해져 있으며, node_modules와 같이 큰 용량의 파일을 올리게 되면 github에 올리지 못하는 일이 생길 수 있다.
  • github에서 코드를 다운 받을 때 node_modules이 없으므로 npm install 등의 명령어를 사용해서 package.json 또는 package-lock.json의 라이브러리 정보를 바탕으로 다운로드한다. 이 때 라이브러리는 github가 아닌 라이브러리를 관리하는 저장소에서 다운로드 한다.

package.json

  • 라이브러리는 점점 기능이 추가되고 버그가 수정이 된다. 라이브러리의 코드의 변경에 따라서 버전이 증가하고 버전에 따라서 기존에 지원하던 기능이 더 잘 될 수도 있고 버그가 생겨서 작동이 안 되는 경우도 생길 수 있다.
  • 라이브러리의 버전에 따라서 기존에 잘 동작하던 기능이 동작이 되지 않을 수 있기 때문에 라이브러리의 버전을 고정해서 이전에 사용했던 라이브러리와 동일한 라이브러리를 사용할 수 있게 하기위한 것이다.
  • package.json는 프로젝트에 설치되는 라이브러리의 버전 정보를 기록하는 곳이다. npm install 명령을 실행하면 package.json의 라이브러리 정보에 따라서 패키지를 다운로드해서 node_modules 폴더 안에 저장한다.

package-lock.json

  • package.json에는 라이브러리의 버전을 엄격하게 고정하지 않을 수 있다. 어떤 라이브러리의 버전이 3.2.1이라고 할 때, 3.2.*으로 등록이 되어 있으면 3.2.1을 설치할 수도 있고 3.2.2를 설치할 수도 있다. 설치 가능한 최신 버전을 설치하려고 하기 때문에 처음 설치했을 때의 버전과 나중에 다시 라이브러리를 설치했을 때의 버전의 차이가 발생할 수 있다.
  • 어떤 라이브러리를 설치할 때 자동으로 라이브러리의 버전을 고정하여 기록하는 곳이 package-lock.json이다.
  • 또한 사용자가 직접 라이브러리를 설치해서 개발에 이용하는 것 뿐만 아니라, 라이브러리를 만드는 사람도 다른 라이브러리를 사용해서 만들 라이브러리를 만든다.
  • 사용자가 설치한 라이브러리의 버전은 고정되어 있어도, 사용자가 직접 설치하지는 않았지만 라이브러리를 설치할 때 설치된 라이브러리가 사용하고 있는 다른 라이브러리의 버전은 고정되어 있지 않은 경우가 있다.
  • package-lock.json 파일에는 한 번 설치한 라이브러리를 만들 때 라이브러리가 사용한 라이브러리의 버전 정보도 포함되어 있기 때문에 라이브러리가 사용하는 라이브러리의 버전이 달라서 코드 동작이 달라질 가능성을 차단한다.
  • package-lock.json 파일이 없더라도 package.json만 있어도 npm install 명령을 통해서 라이브러리를 다운 받을 수 있으며, package-lock.json 파일이 있으면 package.json의 버전 정보보다 우선적으로 확인되어 라이브러리를 다운로드한다.

public

  • npm start 명령을 사용하면 리액트 서버가 실행 된다.
  • http://localhost:3000 (이 경로는 설정에 따라 다를 수 있다.) 이 경로로 접근을 하면 리액트 자바스크립트를 로드하기 위한 태그 구조가 포함되어 있는 index.html의 태그 구조를 가진 HTML이 로드된다.
  • 이 때 index.html 파일이 직접 로딩되는 것이 아니라, index.html 파일의 태그 구조를 사용해서 웹 페이지의 HTML을 리액트 서버가 직접 만들어서 제공해 주는 방식이다.
  • 태그 구조를 사용하기 때문에 몇 가지 바꿀 수 있는 부분을 제외하고는 건드리지 않는 편이 좋다.

src

  • 리액트를 애플리케이션을 만들기 위한 자바스크립트 코드를 정의하는 곳이다.