이전 포스팅에서는 React가 어떤 특징을 가지는 프레임워크인지 알아보았습니다. 이번 포스팅에서는 React를 실제로 다루기 위해서 개발환경을 구성하도록 해보겠습니다.
개발 환경 | 주요 사용처 |
---|---|
CDN | 기존 웹 사이트에 리액트 코드를 추가할때 사용 |
Create-React-App(CRA) | Single Page App 개발 |
Next.js | Server Side Rending 개발 |
Gatsby | Static Site 개발 |
React App을 개발하기 위해 사용할 수 있는 선택처는 위의 표에서 보듯이 CDN, CRA, Next.js, Gatsby가 있습니다. CDN은 script 태그를 통해 React를 추가하여 React를 사용하는 방법으로, 주로 기존에 만든 웹 페이지가 있는데 부분적으로 React로 옮겨가기 위해서 사용합니다. 관심 있으신 분은 공식홈페이지에 관련 가이드가 있습니다.
새롭게 React Application을 만드는 경우 어플리케이션에 따라 CRA이나 Next.js, Gatsby를 많이 사용합니다.
Single Page App Single Page App은 페이지마다 서버에서 새로운 HTML을 다운 받아서 랜더링하는 것이 아니라, 처음 로딩시 모든 UI파일을 다운 받고 UI가 변경 될때마다 웹에서 다시 랜더링 하는 방식을 사용하는 웹 어플리케이션을 이야기합니다. 첫 사이트 로딩 속도가 느린 대신 사용 중에는 반응속도가 매우 좋으며, 모든 구성요소가 Frontend에 있기 때문에 Frontend 구성요소의 모듈화와 재사용성이 용이합니다. Backend에서는 View를 아예 신경을 안쓰고 순수한 API서버로 만들 수 있다는 장점이 있습니다. 대신에 SEO(검색엔진 최적화)가 제대로 안되는 단점이 있습니다.
Server Side Rendering Server Side Rendering은 SPA와 반대되는 개념으로 페이지를 변경할 때마다 서버에서 HTML구성요소를 생성해 뿌려주는 랜더링 방식을 이야기합니다. 초기 로딩 속도가 빠르고 SEO가 쉽다는 장점이 있습니다. 그러나 서버에서 VIEW에 대한 정보를 알고 있어야 하는 단점과 페이지 이동시 반응속도가 SPA에 비해 느리다는 단점이 있습니다. 최근에 많이 쓰는 next.js가 대표적이고 SPA이전에 많이쓰던 JSP나, Thyemleaf, Jinja와 같은 Backend Template Engine이 여기에 해당됩니다.
Static Site Static Site는 저장된 HTML을 그대로 사용자에게 전달해주는 사이트를 의미하며 주로 Blog와 같이 별도에 동작 없이 컨텐츠를 배포하는 서비스가 여기에 해당됩니다. 웹서버(파일 서버)에서 HTML을 바로 보내기 떄문에 매우 속도가 빠르나 복잡한 동잡을 할 수 없는 단점이 있습니다.
강의에서는 가장 많이 사용하는 React 개발 방법인 CRA를 이용해서 App을 만드는 것을 알려드리도록 하겠습니다.
Create-React-App
node.js 설치하기 node.js 공식 홈페이지에 들어가서 node.js를 설치합시다. (17버전은 설치하면 동작하지 않을 수 있습니다!) node.js와 npm(Node Package Manger)가 설치 됩니다.
create-react-app 설치하기 터미널에서 다음 커맨드를 통해서 create-react-app을 설치합니다.
npm install -g create-react-app
npx create-react-app my-app
npx(npm으로 설치한 패키지를 실행하는 명령어)로 create-react-app을 실행합니다. my-app이라는 폴더에 react-project가 설치됩니다.
npm start
localhost:3000
에 화면과 같은 창이 뜨면 성공입니다.
이제 프로젝트에서 pacakge.json이라는 파일을 봅시다.
{ "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", "@testing-library/user-event": "^13.5.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
package.json에는 프로젝트의 기본 정보와, 프로젝트에서 사용하는 라이브러리, 그리고 프로젝트 에서 사용하는 스크립트등의 정보가 있습니다.
dependencies
프로젝트에서 사용하는 라이브러리에 대한 정보입니다. 모든 팀원들이 같은 package.json을 공유함으로써 같은 라이브러리를 사용할 수 있습니다.
npm install --save {라이브러리명}
을 통해 라이브러리를 설치하면 package.json에 라이브러리가 추가됩니다. 설치된 라이브러리는 node_modules
폴더에 라이브러리들이 설치됩니다.
scripts
프로젝트에서 사용하는 명령어입니다. npm run {script명}
을 통해 실행할 수 있습니다. 예를들어 npm run build
를 실행하면 build 폴더에 프로젝트가 하나의 html로 빌드된 것을 확인 할 수 있습니다. 필요에 따라 이 부분을 수정하여 줍니다.
couchcoding
2022-12-07
Firebase로 Google 로그인 구현하기 (React 파트)
이전 포스팅에서는 Java Spring을 통해서 Resource Server 부분을 구현해보았는데요. 이번에는 React를 이용하여 Firebase OAuth Client 부분을 구현해 보도록 하겠습니다. ...
프론트엔드
couchcoding
2022-12-07
리액트 컴포넌트에 CSS 적용하기 - 많이 사용하는 4가지 기술 정리
HTML, CSS, JS를 공부하다가 React로 처음 넘어오시는 분들 중 리액트 프로젝트에서 권장되는 CSS 적용방식이 무엇인지 궁금해 하시는 경우가 많습니다. 정답은 없지만, 프로젝트 특성에 따라 더 적합한 도구가 있을 것입니다. 선택에 참고가 되도록 이 포스트에...
프론트엔드
couchcoding
2022-12-07
[React - 1] 리액트의 특징
가장 많이 사용하는 프론트엔드 프레임워크는 당연 리액트입니다. 프론트엔드 개발영역이 크지 않던 시절엔 프론트엔드 구인 광고에는 약 70% 이상이 리액트 개발자를 원하고 있습니다. 리액트는 어떤 이유로 가장 인기있는 프레임워크가 되었을까요? 이번 포스팅에서는 리액트의 ...
프론트엔드
couchcoding
카우치코딩 공식 계정입니다.