위코드의 꽃, 위코드의 하이라이트, 위코드의 자랑(?)!!!!!
대망의 팀 프로젝트가 코앞으로 다가왔다!!
.....아직도 배울게 한참 남았는데 프로젝트라뇨....
이거 실화냐...?
프로젝트 기간에 어리버리 타면 안되니까, 프로젝트 시작 전 초기 세팅에 관한 내용을 미리 정리해본다!!!
코드블럭 안의 명령어중에 옆에
// 터미널이라고 되어있는것만 터미널에 입력하는 명령어입니다!😘
node, npm 설치
node 란?
node.js 를 말한다.
터미널에서node -v로 로컬에 설치되어 있는지 확인할 수 있다.
npm 이란?
Node Packaged Manager를 말한다. Node로 만들어진 pakage 들을 관리해주는 툴이다.
터미널에서npm -v로 버전을 확인할 수 있다.
node는 공식사이트에서 설치할 수 있다. npm 은 node를 설치하면 자동으로 같이 설치된다.
만약 brew는 설치되어 있는데 node는 설치되어있지 않다면,
brew install node // 터미널이렇게 간단하게 node를 설치할 수 있다.
CRA 설치
npm install -g create-react-app // 터미널이렇게 설치할 수 있다.
하지만, wecode 에서는 npm 보단, npx 로 설치하는것을 권장하므로 npx 로 CRA를 설치할거다.
npx 란?
npm의 5.2.0 버젼부터 새로 추가된 도구인데, 기존의 npm은 전역적으로 CRA가 설치되기 때문에 발생하는 문제점 (CRA의 무거운 의존성 라이브러리가 컴퓨터에 남고, CRA 버전이 업데이트 되면 다시 설치해야 한다.) 을 해결하기 위해 등장했다.
npx -v로 설치 유무 / 버전을 확인할 수 있다.
npm install npx -g // 터미널npx -v 로 버전 확인이 안된다면, 위 명령어로 npx 를 먼저 설치하고,
npx create-react-app {폴더 이름} // 터미널npx 가 설치되었다면, npx 를 통해 react app을 폴더를 생성한다.
npx 로 react app을 생성하면, 패키지 다운로드 및 세팅 후에는 다운받았던 CRA 패키지는 제거되고, 항상 최신 버전의 react app을 사용할 수 있다.
여기까지 하면 설정한 폴더 이름으로 폴더가 만들어진다.
React Router 설치
만들어진 폴더의 경로로 이동해서
Router와Sass를 설치해준다.
npm install react-router-dom --save // 터미널Router 설정은 이 글을 참고해서 진행하기!
Sass 설치 및 설정
npm install node-sass --save // 터미널scss를 사용하기 위해 sass를 설치해준다.
띠용 오타난거 아님? nono~!
sass를 설치하면sass와scss를 모두 사용할 수 있다! (scss가 좀 더 최신버전이다! )
sass가 설치되었다면, src 폴더 안에 styles 라는 폴더를 만들고
reset.scss 와 common.scss 파일 두개를 만들어준다. (필요하다면 media.scss 도 만든다.)
각 scss 파일에는 일반적으로 다음과 같은 내용이 들어간다.
reset.scss
box-sizing 같은 css default 속성을 설정한다.
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000; // 보통 reset.scss 에서 color는 잘 안다루긴 함!
}
등등.....팀과 소통해서 팀만의 scss 파일을 만들어야 한다.
common.scss
자주 사용되는 색상, 폰트 사이즈/ 글꼴/ 두께 등을 변수로 정의해둬서, 재사용과 수정이 용이하게 만든다.
$mainColor: #42a5f5;
.article {
color: $mainColor;
}예를 들어 이렇게 main color의 색상을 변수 지정 했는데, 갑자기 main의 색상이 바뀌었다면? (물론 우리는 이미 있는 사이트를 클론하는거라 이런 일은 거의 발생하지 않겠지만...)
$mainColor: #f06292;이렇게 변수 지정된 색상 하나만 수정해주면 해당 변수를 사용한 모든 색상도 함께 수정된다!!
media.scss
반응형 웹 구현 위한 파일이다.
디바이스 크기에 따라 스타일 속성이 달라질 때, 이 scss 파일을 이용한다!
필요없는 파일 삭제 및 수정
👉 최상위 폴더에서 yarn.lock 을 삭제해준다.
yarn은 facebook 에서 만든 javascript 패키지 매니저인데,npm과 동일한 기능을 수행한다.
만약 우리처럼npm만 쓸거라면 필요없는 녀석이다.
그 외에도 각 파일안에서 지워야 할 내용은 여기 참고해서 지워놓자!!!
👉 src 폴더 에서 index.js 파일만 제외하고 모두 삭제한다.
👉 index.js 파일의 내용을 다 지우고 아래의 코드를 붙여넣고 저장해준다.
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './Routes';
ReactDOM.render(
<React.StrictMode> // StrictMode는 react가 업그레이드 되면서 생긴건데, 필수는 아니고 지워도 무방하다.
<Routes />
</React.StrictMode>,
document.getElementById('root')
);👉 public 폴더 에서 index.html , favicon.ico 파일만 제외하고 모두 삭제한다.
( favicon.ico 파일도 삭제해도 무방하지만, 나중에 클론할 실제 사이트 icon으로 덮어씌우기 위해 남겨뒀다. )
👉 index.html 파일의 내용을 다 지우고 아래의 코드를 붙여넣고 저장해준다.
<!DOCTYPE html>
<html lang="ko"> // 한국, 외국 사이트 구분해서 맞는 언어로 작성
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> // 위에서 favicon.ico 파일을 삭제했다면 이 줄도 삭제
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<title>사이트 이름</title>
</head>
<body>
<div id="root"></div>
</body>
</html>jsconfig.json 파일 생성
NODE_PATH (절대 경로)를 적용하기 위해 jsconfig.json 라는 이름의 파일을 최상단 폴더(root 폴더)에 만들어준다!
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
jsconfig.json 안에 위 코드만 붙여넣기 하면 끝!!!
이제 다른 컴포넌트에서 image를 import 할 때,
import facebookImg from "Images/logo_text.png";이렇게 src 부터 시작하는 절대 경로로 작성할 수 있다!
data.json 파일 생성
public 폴더 안에 data 폴더를 생성하고, 그 안에 data.json 파일을 만든다.
data 폴더는 mock data 를 관리하기 위한 폴더이다.
mock data란?
샘플 데이터 / 가짜 데이터 정도로 이해하면 된다.
실제 백앤드 API에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 가짜로 만들어본 데이터를 말한다.
아직 백앤드로부터 API가 나오기 전인데 페이지 레이아웃이 먼저 나오는 경우, mock data 를 만들어서 실제 백앤드 데이터가 들어온 것 처럼 가정하고 UI가 계획대로 잘 나오는지 테스트할 때 이용한다.
http://localhost:3000/data/data.json
위 주소로 우리가 만든 mock data를 이용할 수 있다.
혹은, https://jsonplaceholder.typicode.com/ 이 사이트에 있는 이미 만들어진 다양한 mock data를 이용해도 된다.
{
"data": [
{
"id": 1,
"name": "solmi",
"age": 26
},
{
"id": 2,
"name": "wecoder",
"age": 36
}
]
}이렇게 가짜 json 데이터를 만들때 필요하다!
src 폴더 정리!!!
여기까지 따라왔다면, 우리의 프로젝트 폴더에는 src , public 폴더 2개와 root 폴더에 package.json , .gitignore , jsconfig.json , README.md 파일 등이 만들어져 있을 것!
public 폴더는 다음과 같아야한다!
이제 src 폴더를 구성해보자.
( 참고로 이 폴더 구성은 wecode 컨벤션이므로, 회사나 프로젝트마다 달라질 수 있다. )
-
Components 폴더
다양한 페이지에서 공통으로 사용되는 컴포넌트만 관리, 해당 페이지에서만 사용되는 컴포넌트는 해당 컴포넌트 파일의 하위에서 관리한다.
Nav 폴더
Nav.js,Nav.scss
Header 폴더Header.js,Header.scss
Footer 폴더Footer.js,Footer.scss -
Pages 폴더
Login 폴더
Login.js,Login.scss
Main 폴더Main.js,Main.scss
MyPage 폴더MyPage.js,MyPage.scss -
Styles 폴더 (앞에서 만들어둔 폴더가 있어야 함!)
reset.scss
common.scss
-
Images 폴더
여기까지 하고나면 src 폴더의 모습은 다음과 같아야 한다.
ESLint, Prettier 설치 및 설정
우선, VSCode의 Extentions 에서 Prettier 와 ESLint 를 설치해준다.
나는 둘 모두 이미 설치해서 세팅까지 마친 상태라 아래의 설정외에 따로 설정은 안했다. 만약 둘 다 처음 사용해보는 거라면 google에 해당 Extention을 검색해서 본인 취향에 맞게 설정하면 된다.
만약 팀프로젝트를 위해 설치하는 거라면, 팀원들과 상의 후 똑같이 설정해서 사용하면 된다.
wecode 에서는 vscode의 settings.json 에서 다음을 추가하라고 안내하는데,
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"prettier.disableLanguages": ["js"],
"files.autoSave": "onFocusChange"👉 나는 formatOnSave 를 이미 체크해놔서, 이렇게 추가했다.
"[javascript]": {
"editor.formatOnSave": false
},
"eslint.alwaysShowStatus": true,
"prettier.disableLanguages": ["js"],
"files.autoSave": "onFocusChange",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}👉 그리고 폴더 제일 최상단에 .eslintrc.json 파일을 생성하고, 아래의 코드를 붙여넣는다.
{
"extends": ["react-app", "plugin:prettier/recommended"]
}
위 이미지의
.env자리에jsconfig.json가 있어야 한다!
package.json , .gitignore 파일 등과 같은 위치에 존재해야 한다.
👉 그리고 마지막으로 터미널에 다음의 명령어를 입력해준다!
npm i prettier eslint-config-prettier eslint-plugin-prettier -D // 터미널ESlint와 prettier 를 연동하는 명령어라고 하는데, 사실 이 명령어를 안쳐도 잘 동작하긴 했다. 혹시 모르니 그래도 명령어까지 따라함.....ㅎㅎ
여기까지 하고 나면 전체적인 폴더의 구성은 다음과 같다!!!
위 이미지의
.env자리에jsconfig.json가 있어야 한다!
