Skip to content

Conversation

@Arooming
Copy link
Contributor

@Arooming Arooming commented Jun 3, 2024

✅ 작업 내용

  • ts 및 기타 모듈 설치
  • tsconfig.json, tsconfig.node.json 파일 추가
  • index.html, vite.config.ts(> resolve > extension) 수정
  • style.d.ts 정의
  • 타입 정의
  • 정의한 타입 입히기

📌 이슈 사항

1️⃣ 함수 역할 분리

  • 단일 책임 원칙에 따라 하나의 함수가 하나의 역할만 수행하도록 최대한 함수를 분리했습니다!

  • 타입 지정하는 부분도 하나의 폴더로 분리해서 타입별로 모아뒀습니다.


2️⃣ nullable, any 사용 지양

  • any는 전에 사용하지 않기로 얘기했었고, nullable로 타입 지정하는 것도 정확한 이유가 없다면 굳이 사용하지 않는게 낫다고 판단해서 nullable 대신 명확한 타입으로 지정해줬습니다 !

3️⃣ Early Return

  • mainContents는 퀴즈 내용에 해당하는 변수로, 항상 존재해야 하는 값이라 mainContents가 없는 경우에 얼리리턴 해줬습니다.
// QuizPage.tsx
if (!mainContents) return;
  • 나중에 에러페이지를 만들게 된다면 값이 없는 경우 에러페이지로 보내버리는게 더 좋을 듯 하네요 !

✍ 궁금한 것

1️⃣ tsconfig.json / tsconfig.node.json

  • vite로 프로젝트를 구현하면 초기 생성 시에 항상 생기던 파일들이라 큰 생각을 안했었는데 이번에 마이그레이션하면서 보니까 쟤네 둘의 차이가 뭘까 . . 궁금하더라구요 !

  • 그래서 가볍게 찾아봤고, 파일 내부는 vite로 프로젝트 만들었을 때 기본 생성되던 옵션 위주로 넣었습니다.

    • svgr 관련된 코드만 추가해줬어요 !
  • tsconfig.json

    • 프로젝트 전반적인 컴파일 옵션 설정에 사용
    • 프로젝트의 모든 환경에 대한 공통 설정을 담고 있음
    • 주로 웹 브라우저를 대상으로 하는 프로젝트에 사용되며, 대부분의 TypeScript 프로젝트에서 필수적으로 존재해야 함
  • tsconfig.node.json

    • Node.js 환경을 대상으로 하는 TypeScript 프로젝트에서 추가적인 컴파일 옵션을 설정하기 위해 사용
    • Node.js의 특정 기능이나 모듈 시스템과 관련된 설정을 담고 있음
    • 주로 Node.js 서버 애플리케이션 또는 Node.js 기반의 라이브러리 개발 시 사용되며, Node.js 환경에 맞게 컴파일 옵션을 설정하는 파일

@Arooming Arooming added the ⚒️ refactor 코드 리팩토링 label Jun 3, 2024
@Arooming Arooming added the 🐠 rooming 루밍 label Jun 3, 2024
@Arooming Arooming requested a review from 5wintaek June 3, 2024 16:19
@Arooming Arooming self-assigned this Jun 3, 2024
Copy link
Collaborator

@5wintaek 5wintaek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

봐줘요

Comment on lines +14 to +15
<OnboardingPage isLoadingPage={false} />
);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isLoading 이랑 setIsLoading props 지정 안해줘두 돼 ?

Comment on lines +4 to +6
const ModalPortal = ({ children }: ChildrenProps) => {
const el: HTMLElement | null = document.getElementById('modal');
return ReactDOM.createPortal(children, el as Element | DocumentFragment);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이쪽 부분 설명좀 ..! el을 뭘 위해서 썻는지 ?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

return ReactDOM.createPortal(children, el as Element | DocumentFragment); 이거 타입 지정 규칙 찾아보기

Comment on lines +12 to 15
const Button = styled.button<{ $isQuiz: boolean }>`
background-color: ${({ theme, disabled }) =>
disabled ? theme.colors.gray300 : theme.colors.prime};
color: ${({ theme }) => theme.colors.white};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

왜 button 에 $isQuiz를 썻는지 궁금!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

$ : 프리픽스
프리픽스를 사용하지 않으면 styled-component 에 props를 넘겨줄 때 에러가 뜬다

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

⚒️ refactor 코드 리팩토링 🐠 rooming 루밍

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants