리액트는 페이스북에서 만든 오픈소스 자바스크립트 프레임워크.
리액트는 가상 DOM과 JSX에서 동작한다.
리액트는 SPA방식을 이용하며, SPA 란 single page application을 의미한다.
index.html 파일 1개로 동작하기 때문에 서버에 자원을 1번만 요청하고, 화면 깜빡임 현상이 발생하지 않는다.
필요한 부분만 동적으로 화면을 생성하는 방식인 것이다. (jquery의 ajax랑 비슷한 느낌?)
전자정부프레임워크 4.0부터 리액트를 프론트앤드 기술로 도입한다고 한 만큼, 실제로 굉장히 많이 사용하고 있는 프론트앤드 언어이다.
나는 Do it ! 리액트 모던 웹개발 with 타입스크립트 책을 통해 리액트를 실제로 활용해 보면서 공부해보려고 한다.
설치할 개발 도구는 다음과 같다.
| 프로그램명 | 용도 | 운영체제 | 기타 |
| Node.js | 웹서버 개발 플랫폼 | Window / macOS | 필수 |
| VSCode | 소스 코드 편집기 | Window / macOS | 권장 |
| scoop | 윈도우용 설치 프로그램 | Window | 권장 |
| Homebrew | macOS용 설치 프로그램 | macOS | 권장 |
| touch | 파일 관리 유틸리티 | Window | 선택 |
| Chrome | 웹 브라우저 | Window / macOS | 권장 |
나는 윈도우 환경에서 개발할 예정이므로, Node.js와 scoop와 touch만 설치해 보겠다. (VSCode와 Chrome은 설치되어 있음)
1. scoop 설치
윈도우 모양에서 오른쪽 버튼 - Windows PowerShell을 킨다.
$env는 변수명이고, C:\Scoop는 scoop를 설치할 위치이다. 위치를 각자 지정해서 위와 똑같이 입력하면 된다.
그리고 Set ~~~를 입력하면 실행규칙 변경을 하겠냐는 말이 나오는데, 이때 모두 예 를 의미하는 A를 입력하면 된다.
scoop이 깔렸다! (성공!)
scoop install git aria2를 입력하여 둘 다 깔아준다.
2. Node.js 설치
scoop을 깔았다면, node.js설치는 너무나 쉽다.
scoop install nodejs-lts
node -v
위와 같이 두줄을 쳐서, 설치 후 노드의 버전까지 확인해 보자.
Node.js설치 완료!
내 Node.js 버전은 v18.14.0이다. (2013년에 리액트가 개발됐는데... 벌써 버전이 18?!)
3. touch 프로그램설치
scoop install touch < 한방으로 설치 완료!
갑자기 이렇게 간단하게 설치하게 해주는 스쿱이 궁금해졌는데...
Scoop은 리눅스 명령어 실행기처럼 윈도우에서도 명령어를 통해서 소프트웨어들을 간단하게 설치하도록 도와주는 프로그램이다.
관리자 권한이 필요 없는 패키지 매니저로, 스크립트 기반의 패키지 관리자라고 한다.
https://scoop.sh/ < 여기 들어가 보자
4. VSCode 확장 프로그램설치
VSCode에서도 확장 프로그램이 몇 개 필요하다.
VSCode에서 F1(Ctrl+Shift+P)을 눌러 명령어 팔레트를 켜고, User Settings를 검색하여 아래 (JSON) 표시 있는 것을 열어 내용을 수정해 줍니다.
Ctrl + ` 를 눌러서 터미널을 열어줍니다.
이후 npm i -g typescript ts-node를 입력! (tsc -v, ts-node -v로 버전 확인!)
이후에는 명령어로 디렉터리에 index.ts 파일을 만들어본다.
만들어졌다!!
index.ts에 입력한 console.log도 제대로 나오는 것을 확인할 수 있었다.
이후 터미널에 touch .prettierrc.js를 입력하여 프리티어를 사용할 수 있도록 한다.
.prettierrc.js에는 다음과 같이 설정 후 저장 !
(문자열에서 큰따옴표를 다 작은 따옴표로 바꾸는 설정, 세미콜론을 모두 지우라는 설정)
설정 후 세미콜론을 입력하거나 " 를 입력하면 알아서 '로 바꿔주고, 세미콜론을 지워준다.
(대박 완전 간편)
심지어 // prettier-ignore 주석을 입력하면 프리티어가 그 아래부터는 적용되지않는다 !
오늘은 블로그 설정하느라 시간이 다가서 오늘은 설치까지만 진행하고 내일부터 개발을..^^*
그나저나 node.js가 스프링같은 도구(?)라는 사실을 지금 알았다... 언어중 하나인줄 (나 무식 ㅠ)