[MainProject] 컴포넌트 관리, 폴더 구성
TypeScript 컴포넌트 관리
정말 기본적인 부분이지만 프로젝트를 하면서 타입스크립트를 처음 적용하여 정리하려고 한다.
기존에 설계했던 코드 방식(일부)
return (
<HeaderLayout>
<HeaderWrapper>
<HeaderTopbarContainer>
<Logo to="/">
<img src={logo} alt="logo" />
</Logo>
{isToken ? (
<>
<HeadBtnContainer>
<button className="forTeams_btn">Products</button>
</HeadBtnContainer>
<SearchForm></SearchForm>
<RightContainer>
<ProfileImgContain>
<Link to="/mypage">
<ProfileImg />
</Link>
</ProfileImgContain>
<>
) : (
<>
<HeadBtnContainer>
<button className="about_btn">About</button>
</HeadBtnContainer>
<HeadBtnContainer>
<button className="forTeams_btn">Products</button>
</HeadBtnContainer>
<HeadBtnContainer>
<button className="forTeams_btn">For Teams</button>
</HeadBtnContainer>
<SearchForm />
<Link to="/login">
<LoginBtn
width="59.45px"
height="32px"
fontSize="13px"
fontWeight="400"
>
Log in
</LoginBtn>
</Link>
<Link to="/signup">
<SignupBtn
to="signup"
width="64.44px"
height="33px"
fontSize="13px"
fontWeight="400"
>
Sign up
</SignupBtn>
</Link>
</>
)}
</HeaderTopbarContainer>
</HeaderWrapper>
</HeaderLayout>
);
}
❖ 문제점
- 가독성이 떨어진다.
-> styledCoponent의 남용
- 불필요한 공통 컴포넌트 작성의 반복
-> 공통 컴포넌트를 분리해서 관리하는 방식
프로젝트 폴더 관리
크게 다음과 같이 폴더를 구성했다.
pages: 페이지 컴포넌트가 들어가는 폴더
사용자에게 직접적으로 보여지고, 라우트에 바인딩된 컴포넌트 라우트 별로 폴더를 만들고 그 안에 해당 페이지의 컴포넌트를 관리
components: 재사용 가능한 UI 컴포넌트를 모아둔 폴더 버튼, 입력창, 카드 등과 같이 여러 곳에서 재사용 가능한 컴포넌트를 모아서 사용
hooks: 커스텀 훅을 정의하는 폴더입니다. 데이터 fetching, 상태관리 등 로직을 재사용하기 위한 커스텀 훅을 이 폴더에서 관리합니다.
styles: 공통적으로 사용되는 스타일, 테마 등을 정의하는 폴더
keyframe,globalStyle 등
redux: 상태 관리를 위해 Redux를 사용할 때 액션, 액션 생성 함수, 리듀서 등을 정의하고 관리
api: API 호출 함수를 정의하는 폴더 서버 API 호출을 위한 함수를 정의하고 관리
빌드도구
빌드 도구는
Vite를 사용하였다.
Vite를 사용한 이유
-
빠른 개발 서버 시작: Vite는 ES 모듈을 이용하여 서버를 빠르게 시작할 수 있다. 이는 브라우저가 필요한 모듈만 요청하게 하여 초기 로딩 시간을 크게 줄인다. -
빌드 성능: Vite는Rollup을 이용하여 빌드하며, 이는 코드를 트리 쉐이킹하여 불필요한 코드를 제거한다. 또한 빌드 시에는 전체 페이지를 한 번에 컴파일하지 않고 필요한 부분만 컴파일하므로, 큰 프로젝트에서도 빌드 성능이 향상된다. -
프레임워크 독립적: Vite는 Vue, React, Preact, LitElement 등 다양한 프론트엔드 프레임워크와 라이브러리를 지원한다. 이는 다양한 프로젝트에서 동일한 빌드 도구를 사용할 수 있게 해 준다. -
타입스크립트 지원: Vite는 기본적으로타입스크립트를 지원합니다. 별도의 설정 없이 타입스크립트 프로젝트를 시작할 수 있다. -
모듈 연동: Vite는ES Module Import를 지원하며, 브라우저 호환성에 대해 걱정할 필요 없이 최신JavaScript 문법을 사용할 수 있게 해준다. -
플러그인 시스템:Rollup플러그인을 기반으로 하는 Vite의 플러그인 시스템을 통해, 개발 및 빌드 과정을 사용자가 원하는 대로 조정할 수 있다. -
환경 변수:.env파일을 이용한 환경 변수 관리를 지원한다. 이를 통해 프로젝트 설정을 쉽게 관리할 수 있다.
vite - env.d.ts;
/// <reference types="vite/client" />
코드 품질 도구
ESLint: ESLint는
정적 분석 도구로서, 코드에서 발견할 수 있는 문제점을 자동으로 찾아내는 데 도움을 준다. 다른 개발자들과 협업할 때 매우 유용하게 사용한다. ESLint는 개발자가 정의한 규칙에 따라 코드를 검사하여, 문법 오류, 놓친 세미콜론, 사용되지 않는 변수, 기대하지 않은 console.log 등과 같은 일반적인 문제를 찾아낸다.
Prettier: Prettier는
코드 포매터로, 코드를일관된 스타일로 자동으로 서식 지정해준다. 개발자가 코드의 스타일에 신경 쓰지 않고 로직에 집중할 수 있게 해준다. 또한, 다른 개발자와 협업할 때 코드 스타일의 일관성을 유지할 수 있다.
//ESLint
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
"overrides": [],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint", "import"],
"rules": {
"react/react-in-jsx-scope": "off",
"import/order": [
"error",
{
"groups": [
"builtin",
"external",
"internal",
"parent",
"sibling",
"index",
"object",
"type"
]
}
]
}
}
//Prettier
{
"printWidth": 100,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "es5",
"useTabs": false,
"arrowParens": "always",
"bracketSpacing": true,
"bracketSameLine": false
}
댓글남기기