Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
변경사항 분리해서 커밋하기 귀찮아서 뭉뜽그림
arthurkimdev
reviewed
Aug 5, 2024
Comment on lines
+4
to
+14
| function InputItem(props: { | ||
| id: string; | ||
| label: string; | ||
| value: string; | ||
| placeholder: string; | ||
| isTextArea?: boolean; | ||
| onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void; | ||
| onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void; | ||
| }) { | ||
| const { id, label, value, placeholder, isTextArea, onChange, onKeyDown } = props; | ||
|
|
There was a problem hiding this comment.
props타입을 별도로 정의하면 재사용성과 가독성이 향상될 수 있습니다.onKeyDown이벤트는 텍스트 영역에서도 발생할 수 있으므로, 이에 대한 값도 필요합니다.
type InputItemProps = {
id: string;
label: string;
value: string;
placeholder?: string;
isTextArea?: boolean;
onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
onKeyDown?: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
};
function InputItem({
id,
label,
value,
placeholder = '',
isTextArea = false,
onChange,
onKeyDown
}: InputItemProps) {
There was a problem hiding this comment.
여기서 KeyboardEvent 타입은 내부적으로 아래와 같은 타입을 갖고 있을거예요.
interface KeyboardEvent<T = Element> extends UIEvent {
readonly altKey: boolean;
readonly ctrlKey: boolean;
readonly key: string;
readonly keyCode: number;
readonly metaKey: boolean;
readonly shiftKey: boolean;
readonly type: string;
isComposing: boolean;
getModifierState(key: string): boolean;
// ... 기타 메서드와 속성들
}
그래서 제너릭 값으로 HTMLInputElement 혹은 HTMLTextAreaElement 값을 주게되면 아래처럼 변경된답니다.
interface KeyboardEvent<T = <HTMLInputElement | HTMLTextAreaElement>> extends UIEvent {
arthurkimdev
reviewed
Aug 5, 2024
Comment on lines
+5
to
+13
| interface RemoveIconProps { | ||
| className?: string; | ||
| label: string; | ||
| onClick: MouseEventHandler<SVGSVGElement>; | ||
| } | ||
|
|
||
| function RemoveIcon({ className, label, onClick }: RemoveIconProps) { | ||
| return <XIcon className={`deleteIcon ${className}`} aria-label={`${label} 삭제`} onClick={onClick} />; | ||
| } |
arthurkimdev
reviewed
Aug 5, 2024
Comment on lines
+4
to
+7
| interface DropdownMenuProps { | ||
| onSortSelection: (sortOption: ProductSortOption) => void; | ||
| } | ||
|
|
There was a problem hiding this comment.
여기서 ProductSortOption 값을 별도로 import 하는 방법 좋아요.
sortOption 값은 여기말고도 다양하게 사용될 수 있는 값 이거든요. 보통 이런 타입들은 export 해서 외부에서 사용가능하도록 합니다.
arthurkimdev
reviewed
Aug 5, 2024
| isFavorite: boolean; | ||
| } | ||
|
|
||
| export type ProductSortOption = 'recent' | 'favorite'; |
There was a problem hiding this comment.
굳! 위처럼 별도로 정의 후 사용하게 되면 해당 타입을 다른 곳에서 재사용 할 수 있겠죠?
arthurkimdev
reviewed
Aug 5, 2024
Comment on lines
14
to
21
|
|
||
| /* Language and Environment */ | ||
| "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ | ||
| // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ | ||
| // "jsx": "preserve", /* Specify what JSX code is generated. */ | ||
| "target": "ESNext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ | ||
| "lib": ["dom", "dom.iterable", "esnext"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ | ||
| "jsx": "react-jsx", /* Specify what JSX code is generated. */ | ||
| // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ | ||
| // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ | ||
| // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ |
There was a problem hiding this comment.
tsconfig 설정 잘하셨습니다.
각각 어떤 의미가 있는지 공부해보면 좋겠어요. 🙂
컴파일 대상 파일들을 어떻게 변환할지 다양한 옵션들이 많거든요.
arthurkimdev
reviewed
Aug 5, 2024
Comment on lines
+1
to
+22
| // const login = document.getElementById('login'); | ||
| // const signup = document.getElementById('signup'); | ||
| // const email = document.getElementById('email'); | ||
| // const nickname = document.getElementById('nickname'); | ||
| // const password = document.getElementById('password'); | ||
| // const passwordConfirmationInput = document.getElementById('passwordConfirmation'); | ||
| // const submitButton = document.querySelector('.auth-container form button[type="submit"]'); | ||
|
|
||
| // function showError(input, errorId) { | ||
| // const errorElement = document.getElementById(errorId); | ||
| // errorElement.style.display = 'block'; | ||
| // input.style.border = '1px solid #f74747'; | ||
| // } | ||
|
|
||
| // function hideError(input, errorId) { | ||
| // const errorElement = document.getElementById(errorId); | ||
| // errorElement.style.display = 'none'; | ||
| // input.style.border = 'none'; | ||
| // } | ||
|
|
||
| // function validateEmailString(email) { | ||
| // const emailRegex = /^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/; |
There was a problem hiding this comment.
요건 파일 자체를 제거해주셔도 좋겠네요.
arthurkimdev
approved these changes
Aug 5, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
피그마 디자인에 맞게 페이지를 만들어 주세요.
Typescript를 사용합니다.
기본
주요 변경사항
스크린샷
멘토에게