[김참솔] Sprint 8#118
Hidden character warning
Conversation
- `OrderBySelect`를 공통 component에서 `product` feature 하위 component로 이동 - `ORDER_BY_DEFAULT`와 `ORDER_BY_VALUES`를 별도의 모듈로 분리해서 `product.js`와 `product-sort-select.jsx`에서 재사용
|
스프리트 미션 하시느라 수고 많으셨어요. |
함수 컴포넌트의 반환 타입은 따로 명시하지 않아도 JSX.Element로 추론될 것 같은데요. 현업에서는 반환타입을 JSX.Element로 명시하는 편인지, 아니면 추론되게 놔두는 편인지 궁금합니다.맞습니다 ! 제 경험에서는 따로 명시하는 곳은 못본 것 같네요 😉 |
제가 사용했던 Swift 언어는 타입 추론이 성능에 영향을 줘서 일부러 타입 추론 기능을 사용하지 않기도 했었는데요. TypeScript를 사용할 때 타입을 명시하지 않고 타입 추론을 많이 사용하면 성능 저하가 일어날 수 있는지 궁금합니다.오잉 ? 스위프트는 어떻게 동작하길래 성능에 영향을 주는지는 잘 모르겠습니다. 다만, 자바스크립트는 인터프리터이며, 타입스크립트의 경우 자바스크립트로 트랜스파일링을 해주는 언어 모델입니다. 영향이 있다면 트랜스파일링 과정의 성능에 영향이 있을 수는 있겠으나 타입 별로 서로 다른 저수준 메모리 제어를 해주는 C, C++과 같은 언어처럼 다루진 않으므로 성능 상 영향이 클지는 잘 모르겠습니다. (해당 답변은 주관적 견해입니다 !) |
enum 은 JS 변환 시 tree shaking이 되지 않아 성능상 좋지 않다는 글을 봤는데요. 대신 union type을 활용하라고 해서 이번 미션에서는 enum 을 사용하지 않으려고 해 보았습니다. 그런데, 개인적으로는 enum 문법을 더 선호하는데요. 현업에서는 enum을 많이 사용하나요?참고 : https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking 음 저의 경우에는 혼자 개발할 때 아티클에서 소개한 방식대로 고정된 타입과 변수가 필요할 때(= 저의 경험만 들어간 것 같아 다른 현직 개발자한테도 물어봤는데 굳이 |
package.json, vite.config.ts, tsconfig.json 등 소스 코드 외에 프로젝트 설정과 관련된 내용을 효과적으로 공부하는 방법이 있을까요? 지금은 강의에서 자세하게 알려주지 않기도 하고, 구글링하면서 공부해봐도 약간 뜬구름 잡는 느낌입니다.음 ~~ "프로젝트 설정과 관련된 내용을 효과적으로 공부하는 방법"이라면 역시 개인 프로젝트를 진행하는 방법이 제일 효과적이지 않을까 싶습니다 ! |
| const Breakpoint = { | ||
| tablet: 1199, | ||
| mobile: 767, | ||
| } as const; | ||
|
|
||
| const MediaQueryBreakpoint = { | ||
| tablet: `(max-width: ${Breakpoint.tablet}px)`, | ||
| mobile: `(max-width: ${Breakpoint.mobile}px)`, | ||
| } as const; | ||
|
|
||
| type MediaQueryBreakpoint = | ||
| (typeof MediaQueryBreakpoint)[keyof typeof MediaQueryBreakpoint]; | ||
|
|
||
| export { MediaQueryBreakpoint }; |
There was a problem hiding this comment.
오호. 여기가 트리쉐이킹 이슈 때문에 enum을 쓰지 않았던 부분인가 보군요? 👏
평소에 여러 아티클을 읽으시나보군요. 훌륭합니다. 언제나 귀를 열어두시는 모습을 보면 다각적으로 성장하시는 모습이 느껴집니다 👍
| <Route | ||
| path="/" | ||
| element={ | ||
| <OnboardingLayout> | ||
| <OnboardingPage /> | ||
| </OnboardingLayout> | ||
| } | ||
| /> |
There was a problem hiding this comment.
크으 ~ 레이아웃을 잘 배치시켜놨네요.
이 전에 children안에 레이아웃을 공통적으로 배치하셨었는데, react-router-dom에서 권장하는 방식으로 레이아웃으로 변경하셨군요 👍👍👍
| import defaultImg from "../../assets/profile-default.svg"; | ||
|
|
||
| const StyledAvatar = styled.div` | ||
| const StyledAvatar = styled.div<{ $size: number }>` |
There was a problem hiding this comment.
ㄷㄷㄷ... 타입 제네릭도 바로 적용해버리시는 클라스.. 👍👍
| interface Props extends ButtonHTMLAttributes<HTMLButtonElement> { | ||
| size?: ButtonSize; | ||
| shape?: ButtonShape; | ||
| children: React.ReactNode; | ||
| } |
There was a problem hiding this comment.
크으..... 정말 멋집니다 참솔님 👍
공통 컴포넌트인 버튼에 타입을 기존에 리액트에 정의된 HTML 속성 타입들을 확장하여 만드시다니..
정말 훌륭하고 멋진 방법입니다. 이는 현업에서도 유효한 방법이예요. 👏👏
There was a problem hiding this comment.
오호 컴포넌트와 타입 파일을 구분해놓다니 흥미롭네요.
컴포넌트 내부에 해당 코드가 있어도 될 것 같은데, 따로 분리하셨다는 것은 파일의 목적에 따른 분리를 하고 싶으셔서 그런거겠죠? 😉
그렇다면, social-login.types.ts와 같이 정의해볼 수도 있겠어요.
그리고 같은 파일 내에 타입 선언과 컴포넌트가 함께있다면 어떤 단점과 장점이 있는지도 생각해보면 좋을 것 같아요. 😊
제 사견으로는.
컴포넌트와 타입이 함께 있다면 높은 응집도가 될 것으로 보입니다 ! 만약 다른 컴포넌트나 페이지, 레이아웃에서 해당 타입을 참조할 일이 있다면 그 때 파일을 분리하셔도 좋지 않을까 사료되네요. 😉
응집도: 응집도는 모듈의 독립성을 나타내는 개념
There was a problem hiding this comment.
해당 파일도 분리가 되어 있군요 !
같은 개념을 다루는 데에 있어서 하나의 파일에서 관리하셔도 무방할 것으로 보여요. 😊
앞선 피드백에 이어서 만약 타입 파일을 따로 분리하시고자 하신다면 form-social.types.tsx로 통합하여 분리하실 수도 있겠어요.
| function breakText(text: string): JSX.Element { | ||
| const elements = text.split("\n").map((value) => ( | ||
| <span key={value} style={{ display: "inline-block" }}> | ||
| {value} | ||
| </span> | ||
| )); | ||
| return <>{elements}</>; | ||
| } |
There was a problem hiding this comment.
해당 함수는 컴포넌트로 보이는군요 !
컴포넌트는 다음과 같이 표현해볼 수 있겠어요 😉
| function breakText(text: string): JSX.Element { | |
| const elements = text.split("\n").map((value) => ( | |
| <span key={value} style={{ display: "inline-block" }}> | |
| {value} | |
| </span> | |
| )); | |
| return <>{elements}</>; | |
| } | |
| function BreakText({text}: {text: string}): JSX.Element { | |
| const elements = text.split("\n").map((value) => ( | |
| <span key={value} style={{ display: "inline-block" }}> | |
| {value} | |
| </span> | |
| )); | |
| return <>{elements}</>; | |
| } |
| <TextContainer $reverse={reverse}> | ||
| <span>{content.label}</span> | ||
| <Title>{content.title}</Title> | ||
| <p>{breakText(content.description)}</p> |
There was a problem hiding this comment.
(이어서) 그리고 다음과 같이 호출해볼 수 있겠네요 😉
| <p>{breakText(content.description)}</p> | |
| <p><BreakText text={content.description} /></p> |
|
크으 ~ 참솔님 역시 기대를 저버리지 않네요. 나중에는 특정 기술과 패턴에 대해 논의하고 토론해봐도 재밌겠네요 👍 수고 많으셨습니다 참솔님 !! |
2 participants
요구사항
기본
심화
주요 변경사항
.js및.jsx파일을.ts및.tsx로 변환합니다.스크린샷
Onboarding
Login
Signup
멘토에게
JSX.Element로 추론될 것 같은데요. 현업에서는 반환타입을JSX.Element로 명시하는 편인지, 아니면 추론되게 놔두는 편인지 궁금합니다.enum은 JS 변환 시 tree shaking이 되지 않아 성능상 좋지 않다는 글을 봤는데요. 대신 union type을 활용하라고 해서 이번 미션에서는enum을 사용하지 않으려고 해 보았습니다. 그런데, 개인적으로는enum문법을 더 선호하는데요. 현업에서는enum을 많이 사용하나요?package.json,vite.config.ts,tsconfig.json등 소스 코드 외에 프로젝트 설정과 관련된 내용을 효과적으로 공부하는 방법이 있을까요? 지금은 강의에서 자세하게 알려주지 않기도 하고, 구글링하면서 공부해봐도 약간 뜬구름 잡는 느낌입니다.