[김수연] Sprint8 #118
[김수연] Sprint8 #118
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
많은 것을 찾아보면서 했습니다.. 하면서도 이게 맞나라는 생각이 들 정도로 제가 쓴 코드에 확신이 없습니다. 이렇게 하는게 맞나요,,?
->
타입스크립트가 많이 낯설었을 텐데, 코드상으로는 크게 문제될 부분 없이 충분히 잘하고 계세요!
혹시 특별히 고민되는 부분이나 리팩토링해보고 싶은 코드를 구체적으로 공유해 주시면 함께 다듬어봐도 좋을 것 같습니다 :)
| productId: number, | ||
| limit: number, | ||
| cursor?: number | ||
| ): Promise<AxiosResponse<Comment>> { |
There was a problem hiding this comment.
이렇게 하셔도 됩니다만, 라이브러리를 쓰실 때 해당 라이브러리에서 제공해주는 타입이 어떤지 살펴보고 활용해 보시는 것도 좋습니다.
예를 들면 axios의 경우 get 메서드에 제네릭을 제공합니다!
따라서 requestor.get 제네릭에 Comment를 넘겨주면 getProductComment의 리턴 타입은 자동으로 잡히게 되는거죠~!
getProductComment(productId: number, limit: number, cursor?: number) {
let url = `/products/${productId}/comments?limit=${limit}`
if (cursor) {
url += `&cursor=${cursor}`
}
return requestor.get<Comment>(url)
}라이브러리의 타입은 알트(맥은 커맨드) + 클릭으로 확인하실 수 있습니다!
There was a problem hiding this comment.
저 스크린샷이 공포스럽게 느껴질 수도 있을 거 같아 추가로 말씀드리면, 처음엔 눈에 안 들어오는 것이 너무 당연합니다!
꼭 저렇게 찾아 들어가지 않고 다른 사람이 사용한 코드를 참고하셔도 좋습니다! 조금씩 쓰고, 보다 보면 익숙해 지실거에요 :)
| } | ||
|
|
||
| //React.FC는 함수형 컴포넌트를 선언할 때 사용함 | ||
| const Button: React.FC<ButtonProps> = ({ |
There was a problem hiding this comment.
크게 상관은 없는데, FC는 지양해야 한다는 분위기가 살짝 있습니다!
https://velog.io/@frombozztoang/React.FC-%EC%82%AC%EC%9A%A9-%EC%A7%80%EC%96%91%ED%95%98%EA%B8%B0
실제로 CRA에서는 제거 되었습니다 🤣
facebook/create-react-app#8177
| paddingHeight?: number | ||
| paddingWidth?: number | ||
| } | ||
| // [size!]에 느낌표는 필수로 넣어야 하는 값으로 설정한 것것 |
There was a problem hiding this comment.
느낌표는 필수로 넣어야 하는 값이라기 보다는 타입을 강제로 넣는 것입니다!
interface StyledButtonWrapper {
size?: number
width?: number
paddingHeight?: number
paddingWidth?: number
}여기서 물음표를 포함시켰기 때문에 실제 size의 타입은 number | undefined가 됩니다.
때문에 아래에서 느낌표를 쓰지 않으면 size가 undefined가 될 수도 있기 때문에 타입에러가 나는 것이죠!
이럴 때는 물음표를 써서 타입을 강제로 넣는 것이 아니라, size의 타입을 제대로 잡아주거나 undefined일 때를 처리해 주시는 것이 좋습니다 :)
타입을 강제로 넣으면 타입스크립트를 사용하는 의미가 많이 떨어집니다! 타입스크립트는 size가 undefined일 수도 있다고 알려주는 건데, 무시하고 코드를 작성하는 격이니까요 :)
| import Delete from '../../assets/svg/Delete.svg' | ||
|
|
||
| const ButtonImage = () => { | ||
| const fileInputRef = useRef<HTMLInputElement>(null) |
There was a problem hiding this comment.
HTMLInputElement 잘 찾아서 쓰셨네요! 👍
| import commentService from '../api/services/commentService' | ||
|
|
||
| export const useGetCommentService = (productId: number, limit = 3) => { | ||
| const [productQuestion, setProductQuestion] = useState({ |
There was a problem hiding this comment.
지금은 배열에 어떤 값이 올지 모르기 때문에 타입 추론이 안 되고 있습니다!
제네릭을 통해 상태의 타입을 확실하게 잡아주는 것이 좋습니다! :)
const [productQuestion, setProductQuestion] = useState<Comment>({
list: [],
nextCursor: null,
})|
|
||
| import commentService from '../api/services/commentService' | ||
|
|
||
| export const useGetCommentService = (productId: number, limit = 3) => { |
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게