-
Notifications
You must be signed in to change notification settings - Fork 1
TIL 2월 14일
daeun heo edited this page Feb 14, 2023
·
10 revisions
- somthing..
- somthing..
- somthing..
- somthing..
- somthing..
- somthing..
- somthing..
- somthing..
- somthing..
- somthing..
- somthing..
- somthing..
- 22:00 ~ 00:30 온라인 코어 스터디
- 절대 경로 설정하고 상대 경로를 절대 경로로 코드 리팩토링하기
- typescript의 Pick and Omit을 사용하여 코드 리팩토링하기
- 벌써 다음주면 끝! 이번주 다음주는 죽었다 생각하고 갈아 넣어야겠다.
- 절대 경로 설정하기: craco(Create React App Configuration Override)
프로젝트를 cra로 생성했을 때, craco를 사용하면 eject를 하지 않고도 root 폴더에 craco.config.js 파일을 추가하여 eslint, babel 등 설정을 쉽게 할 수 있다.
처음에 여기에서 보고 따라 세팅했는데 절대 경로가 적용이 되지 않았다. 알고보니 안된 이유는 타입스크립트를 사용하는 경우에는 다르게 세팅을 해줘야하기 때문이다.
그래서 다음 사이트를 참고하여 절대 경로를 재설정하였다.
- craco 설치
yarn add @craco/craco yarn add craco-alias -D
- craco.config.js 세팅
const CracoAlias = require("craco-alias"); module.exports = { plugins: [ { plugin: CracoAlias, options: { source: "tsconfig", tsConfigPath: "tsconfig.paths.json", }, }, ], };
- tsconfig.json 세팅
{ ..., "extends": "./tsconfig.paths.json" }
- tsconfig.paths.json 세팅
{ "compilerOptions": { "baseUrl": ".", "paths": { "@api/*": ["src/api/*"], "@components/*": ["src/components/*"], "@configs/*": ["src/configs/*"], "@fonts/*": ["src/fonts/*"], "@hooks/*": ["src/hooks/*"], "@pages/*": ["src/pages/*"], "@store/*": ["src/store/*"], "@styles/*": ["src/styles/*"], "@utils/*": ["src/utils/*"] } } }
결과
이제 길게 상대경로를 작성하지 않고, 절대 경로로 파일을 불러올 수 있다!
image
- typescript - Pick and Omit
- Pick
여러 개의 타입 중에서 일부 타입만 골라 사용하고 싶은 경우에 사용한다. 즉, 몇 개의 속성을 선택하여 타입을 정의할 수 있다.
(적용한 코드) - color, backgroundColor, fontWeight 타입만 가져온다.
interface SettingButtonProps { text: string; onClick: MouseEventHandler<HTMLButtonElement>; fontWeight?: "normal" | "bold"; color?: ColorType; backgroundColor?: BackgroundColorType; disabled?: boolean; status: ServerSettingType; } ... export const SettingButtonContainer = styled.button< Pick<SettingButtonProps, "color" | "backgroundColor" | "fontWeight"> >` ...
- Omit
특정 속성만 제거한 타입을 정의한다. 즉, Pick과 반대이다.
(적용한 코드) - text, onClick을 제외한 모든 타입들을 가져온다.
interface DefaultButtonProps { text: string; onClick: MouseEventHandler<HTMLButtonElement>; width?: number | null; height?: number | null; fontSize?: FontSizeType; fontWeight?: "normal" | "bold"; color?: ColorType; backgroundColor?: BackgroundColorType; hoverBackgroundColor?: BackgroundColorType; disabled?: boolean; borderColor?: BorderColorType; mb?: number; ph?: number; pv?: number; } ... const DefaultButtonContainer = styled.button< Omit<DefaultButtonProps, "text" | "onClick"> >` ...
- API 합칠 준비하기
- 메인화면에 검색하기 모달 안되는거 고치기
- 채팅 구현 준비하기
- 스토리북 절대 경로 설정하기
- 서버 글자 색깔 black → 바꾸기
- 채팅 이미지 업로드 모달 구현하기