1️⃣ Typescript를 이용하여 프로젝트 시작
npx create-react-app . --template typescript위의 명령어를 이용하여 react를 typescript로 시작한다. 나는 이미 만들어진 폴더 아리애 바로 프로젝트를 생성하기 위해 .을 입력했지만 여기에 원하는 파일명을 입력하면 그 안에 리액트 프로젝트를 시작할 수 있다. 프로젝트 파일이 모두 생성된 후에는 제대로 실행이 되는지 확인한 후에 필요없는 파일들을 전부 다 삭제해주었다.
그럼 이렇게 파일이 몇개 남지 않는다. 컴포넌트를 생성하기 전에 몇가지 설정들과 style을 잡아주고 시작해보자.
2️⃣ eslint 설정
npm install eslint
npx eslint --initeslint를 설치해주고 `eslintrc` 파일을 통해 원하는 형식으로 설정해주면 된다.
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": [
"react-app",
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended"
],
"rules": {},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"prettier/prettier": ["error", { "endOfLine": "auto" }],
"@typescript-eslint/explicit-function-return-type": "off"
}
}
]
}나는 이정도로만 간단하게 설정했는데, 원하는 형식으로 본인이 얼마든지 커스텀해서 쓸 수 있다. 나의 경우 interface로 선언할 때 객체를 무조건 대문자로 설정해야하는 규칙도 넣고 싶었는데 도무지 방법을 찾지 못해서 일단 이렇게만 설정해두고 스스로 대문자로 쓰는 것을 인지하면서 프로젝트를 진행했다.
3️⃣ prettier 설정
나는 이미 vscode에 prettier가 깔려있고, 기본 설정들도 바꿔준 것이 많기 때문에 prettier설정의 경우는 prettierrc 파일만 만들어주고 그 안에서 간단하게 설정을 진행했다.
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80,
"arrowParens": "always",
"orderedImports": true,
"bracketSpacing": true,
"jsxBracketSameLine": false
}신경써준 것은 `singleQuote`를 true 해준 부분 뿐이다. 지금까지 항상 double을 써왔는데, 수석님이 자바스크립트로 코딩하는 사람 중에 single quote 아닌 사람 못 봤다는 말씀을 듣고 나도 주류에 합류하기로 했다.
4️⃣ styled component 설치
직접 모든 컴포넌트를 만들면서 진행하는 것을 좋아하기 때문에, 이번에도 styled component를 이용해보기로 했다.
npm install styled-components
npm install --save @types/styled-components타입스크립트에서 styled component를 이용하기 위해서는 타입 설정을 하고 한 번 더 설치를 진행해줘야 한다. 기본 라이브러리도 당연히 설치되어있어야 하므로 총 두번을 설치해야하는 셈. 나는 뭣도 모르고 타입스크립트용만 설치했다가 수많은 에러를 경험했다🥹...
(1) styles 폴더 생성 및 styled-reset 설치
npm install styled-resetreset 패키지를 설치하고, src 아래에 styles 폴더를 생성한다. 이 안에서 기본 스타일을 설정해줄 것이다. 먼저 globalStyle.ts 파일을 생성하고 원하는대로 커스텀하면 된다.
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';
export const GlobalStyle = createGlobalStyle`
${reset}
* {
box-sizing: border-box;
font-family: Pretendard, 'Roboto', sans-serif;
}
html {
font-size: 16px;
-webkit-text-size-adjust: none;
font-family: Pretendard, 'Roboto', sans-serif;
font-display: fallback;
color: "#333333";
background-color: "#dadada";
-ms-overflow-style: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
body {
margin: 0;
font-family: Pretendard, 'Roboto', sans-serif;
}
}
a {
color: inherit;
text-decoration: none;
cursor: pointer;
}
`;나는 이정도로만 진행했다. 이번 프로젝트는 기능적으로 배울 것들을 찾는 것이 목적이라 스타일을 꼼꼼하게 체크해주지는 않았다.
(2) theme.ts로 자주쓰는 css 및 색상 설정하기
자주쓰는 애니메이션이나, flex는 여기서 한번만 설정해두고 계속 불러쓰면 편하기 때문에 styles 폴더 아래에 theme.ts를 추가해준다.
import { css, DefaultTheme, keyframes } from 'styled-components';
const animation = keyframes`
from {
opacity: 0;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(-12px);
}
`;
const defaultAnimation = css`
animation-duration: 0.7s;
animation-name: ${animation};
animation-fill-mode: forwards;
`;
export const theme: DefaultTheme = {
color: {
background: '#f8f8f8',
lightGray: '#dadada',
beige: '#ebf1de',
darkGray: '#8c8b8e',
gray: '#80c6bd',
red: '#ff9494',
},
defaultAnimation,
};t1.gg를 만들 때에는 따로 flex box를 설정해주지 않았는데, 보통은 flex나 grid에서 자주 쓰는 것들은 theme.ts 에 잡아주고 가는 편이다. 여기에 설정한 것들은 나중에 styled component에서 쉽게 불러쓸 수 있다!
(3) index.tsx 파일에 적용
이렇게 열심히 설정한 것들을 index.tsx 파일에 적용시킬 차례다.
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement,
);
root.render(
<>
<GlobalStyle />
<ThemeProvider theme={theme}>
<React.StrictMode>
<App />
</React.StrictMode>
</ThemeProvider>
</>,
);GlobalStyle은 최상단에 위치시켜야 모든 컴포넌트에 적용된다. ThemeProvider의 경우에는 단일 자식만 있어야 하므로 주의하기.
이제 진짜진짜 모든 셋팅이 끝났다! 개발만 하면 됩니다!