프론트엔드 개발자라면 당연히 공부해야할 리액트를 이제 시작한다. 지금 시작하는 이유는 변명일 수 있지만.., 비전공자로서 자바스크립트와 컴퓨터의 기본적인 지식들을 익힌 다음 공부하고 싶었다..! 방통대 1학년 과정과 자바스크립트로 미니 프로젝트들을 하면서 이제서야 나는 자바스크립트라는 언어와 안면을 튼 사이가 된 것 같다:)

생활코딩님의 자바스크립트 강의를 다 듣고, 이제 리액트 강의를 듣게 되어서 영광이다:)

What is React?

: 페이스북에서 만든 자바스크립트 UI 라이브러리.

사람들은 단순히 라이브러리가 아닌 프레임워크가 아니냐 하는 여러 의견들을 내지만 일단, 라이브러리가 맞다:)
한마디로 정의하기 어렵지만 어쨌든 개발자의 개발을 더욱더 편리하고 유용하게 만든 아이!

-> 라이브러리와 프레임워크의 차이점이 궁금하다면 여기로 ->(업데이트 예정)

컴포넌트(Component)

: html로 웹페이지들을 만들다보면 복잡한 코드들을 계속 반복해서 사용하는 경우가 많다. 요런 복잡한 코드들을 한꺼번에 묶어서 관리하고 다시 묶은 것들을 다른 곳에 사용할 수 있는 기술을 '사용자 정의 태그'라는 기술이라고 하는데 우리는 이것을 '컴포넌트(Component)'라고 부른다.
그래서 우리가 컴포넌트를 이용하면

1. 재사용성이 높아진다.
2. 유지보수가 훨씬 편리해진다.

라는 효과를 리액트를 사용함으로써 얻을 수 있다.

How to use?

이 책에서는 리액트홈페이지(https://reactjs.org)의 공식문서를 참조하는데 중요성을 강조하고 있다. 뭐 그렇듯, 라이브러리를 잘 사용하는데는 역시 공식문서를 정독하는 것이 중요하니깐,,..
어쨌든, 책에서 말하는 설치방법은 npm을 이용하는 것이지만!
npm이 업데이트 되면서 npx도 이용할 수 있게 되었고, 또 찾아보니 npx를 이용하는게 아무래도 정석이자 최신 업데이트버전을 쓸 수 있어서 좋다.

그렇다면 npm이 뭐고 npx는 뭔데?

npm(node package manager) & npx(node package execute)

: 요 아이들은 Node.js라는 기술을 이용해서 만들어졌는데, 여러가지앱을 명령어 환경에서 쉽게 설치할 수 있게 도와주는 도구이다.
즉, 특정 프로그램을 잘 설치할 수 있게 도와주는 또 다른 프로그램.
요 아이들을 사용하기 위해서는 Node.js를 설치해야 한다.

Node.js를 설치하는 방법은 간단하다.
https://nodejs.org/ -> 여기로 들어가서 자신에게 맞는 OS에 따라 설치버튼을 누르면 된다:)
참고할 사항은 14.15.3 LTS, 15.4.0 Current 이렇게 두가지 버전이 쓰인 버튼들을 볼 수 있는데 LTS버전은 안정화된 버전이고, Current는 최신버전이므로 본인이 원하는데로 다운받으면 된다. 나는 안정화된 버전:)

Node.js 설치가 끝났다면 cmd나 powershell 등 명령어를 입력할 수 있는 프로그램을 실행시킨다.

npm이 잘 설치되었는지 확인한다.

npm -v

라고 입력했을때 버전이 잘 나오면 node.js가 잘 설치되었다는 것:)

잠깐!!! 여기서 npm와 npx의 차이점과 어떤걸로 리액트를 설치하는게 좋은걸까 하는 의문이 든다. 그 차이점은 -> https://velog.io/@dhrhghdql/Node.jsmemo-npm-npx-yarn
위에 정리해 놓은 것을 참고해서 선택해 잘 설치하기 바란다.

리액트를 원하는 디렉토리에 설치하기

그래서 나는 npx를 선택했다.
일단 리액트라는 라이브러리를 쓰기 위해서는 자신이 원하는 디렉토리가 있어야 한다.
cmd로 디렉토리를 만들거나 그냥 마우스 오른쪽 클릭해서 원하는 위치에 리액트를 사용하고 싶은 폴더를 만들자.

npx create-react-app 디렉토리이름

예를 들어, 바탕화면에 react-app이라는 폴더를 만들어주고 이 디렉토리에 리액트를 사용하고 싶다면
바탕화면으로 일단 이동하고나서 저 명령어를 입력해주면 된다.
(원하는 위치에 와서 저 명령어를 입력하면 폴더가 생성되고 리액트를 쓸 수 있는 환경이 만들어진다)

아니면 바로 디렉토리로 이동하고나서

create-react-app .

요렇게 입력해줘도 그 디렉토리안에 바로 리액트환경을 만든다. 이 말인 즉슨, Creat React App한테 리액트 개발 환경을 만들어달라고 하는 말이다.

그러면 여러줄에 걸쳐서 작업내역이 출력되고 react-app 디렉토리에 여러가지 파일들과 폴더가 생성되어있는 것을 확인할 수 있다. 즉, 우리가 리액트를 사용해 개발할 때 필요할만한 것들을 Create React App이 장만해 둔 것이다.

요렇게 설치하면 react를 이제 사용할 수 있는 환경이 되었다.

샘플 웹앱 실행하기

: 개발환경을 구축했으니깐 실행하는 방법을 알아보자.

cmd가 react-app 디렉토리에서 명령을 실행해야 한다.
현재 react-app위치에서 cmd에 아래처럼 입력한다.

npm run start

아니면

npm start

이렇게 하면 웹브라우저가 자동으로 열리면서 Create React App으로 만들어진 웹앱이 브라우저에서 실행된다.
터미널에 출력된 주소(http://localhost:3000, http://192.168.219.101:3000) 요런식으로 리액트 앱을 개발할때 브라우저를 통해 개발중인 앱을 확인할 수 있는 주소를 알 수 있다. 포트번호를 3000번 쓰나부다..

그리고 앱을 멈추고 싶다면
Ctrl + C 누르면 프로그램이 종료된다.

앱을 종료하고 나서 다시 개발용 앱을 실행하려면 cmd에 'npm run start'(짧게 npm start해도됨)를 눌러 다시 실행시킬 수 있다.

요렇게 하면 실습환경구축과 Create React App이 기본으로 제공하는 샘플어플을 구동하는 방법까지 알아보았다.

1일차 공부 끝!!

---

출처: 생활코딩! React 프로그래밍 책