소개
웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!
안녕하세요 🙇♂
저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자
세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.
강의) 한 입 크기로 잘라먹는 Next.js
강의) 한 입 크기로 잘라먹는 타입스크립트
강의) 한 입 크기로 잘라먹는 리액트
강의
수강평
- 한 입 크기로 잘라먹는 Next.js(v15)
- 한 입 크기로 잘라먹는 타입스크립트(TypeScript)
- [2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
게시글
질문&답변
input type="hidden"으로 설정 시, 오류 미발생
안녕하세요 이정환입니다.넵 요렇게 처리하셔도 됩니다. 참고로 강의에서 안내드린 readOnly Props를 전달해주셔도 오류는 사라집니다.
- 0
- 2
- 18
질문&답변
강의 마지막 부분 에러
안녕하세요 이연서님 이정환입니다.듣고 계신 강의 이전 챕터에 다음과 같이 "ts-node" 대신 "tsx"를 사용하셔야 한다는 안내를 드리고 있으니 참고하시면 좋겠습니다.(사진)
- 0
- 2
- 17
질문&답변
혹시 자바스크립트는 ENUM타입에 대해 잘 취급을 안하나요?
안녕하세요 이정환입니다.질문자님 말씀이 맞습니다. 규모가 커질 경우 분명히 문제가 발생할 수 있습니다. 따라서 보통의 프로젝트에서는 타입 정의가 가능한 TypeScript를 활용하는 편 입니다. TypeScript에서는 action.type으로 사용할 값의 범위를 미리 정의해 둘 수 있습니다. 더 나아가 action.type 뿐만 아니라 action 객체로 사용될 수 있는 값의 범위를 아예 미리 정의해 둘 수 있습니다. 마치 자바의 강타입 시스템과 비슷하다고 이해하시면 됩니다.
- 0
- 2
- 45
질문&답변
7.6 createReviewAction 서버 액션 컴포넌트에 state 값을 넘기는 것에 관한 질문입니다.
안녕하세요 이정환입니다.이는 React의 useActionState 훅의 내부 동작 때문에 그렇습니다. useActionState는 dispatch 함수가 호출될 때, 액션 함수(ex. createReview 등 ...)를 호출하면서 인수로 현재의 State 값과 FormData를 전달합니다. 예시와 함께 다시 이야기 하자면, 다음 코드에서 dispatch 함수가 호출될 경우 useActionState가 자동으로 action 함수를 호출하면서 인수로 state와 formData를 넘겨준다는 말 입니다.const [state, dispatch, pending] = useActionState(action, null)그리고 이런 동작은 React의 내장 Hook인 useActionState의 동작이므로 우리가 직접 수정할 수 없습니다 ㅠㅠ 따라서 어쩔 수 없이 useActionState와 함께 서버액션을 사용할 때에는 첫번째 매개변수로 현재의 State 값을 전달받도록 설정 해 주셔야 합니다.쉽게 딱 한문장으로 정리하자면 호출하는 쪽에서 그렇게 호출하기 때문이라고 할 수 있겠네요 😃
- 0
- 2
- 14
질문&답변
extends 키워드에서 서브타입과 슈퍼타입 관한 질문입니다.
안녕하세요 이정환입니다.결론부터 깔끔하게 말씀드리자면, 객체 타입에서는 프로퍼티가 적은 쪽이 슈퍼 타입이 되지만, 유니언 타입에서는 연산에 참여하는 타입이 많을수록 슈퍼타입이 됩니다.그 이유는 객체 타입에서의 프로퍼티 정의는 "이 프로퍼티가 꼭 있어야 해" 같은 제약 사항에 가깝지만, 유니언 타입으로 묶인 타입들의 정의는 "이 타입도 될 수 있어" 같은 옵션에 가깝기 때문입니다.예시로 다음 객체 타입은 a, b, c 프로퍼티가 존재해야 한다는 제약을 만드는 것과 같습니다.type Obj = { a: string; b: stirng; c: string; }단면 다음 유니언 타입은 a, b, c 무엇이든 될 수 있어 라는 옵션을 설정하는 것과 같습니다.type Union = a | b | c 따라서 결론적으로 "name" | "age" 보다는 "name" | "age" | "color"가 더 슈퍼타입입니다.
- 0
- 1
- 29
질문&답변
params의 type에서 string[]배열타입이 필요한 이유가 있을까요?
안녕하세요 이정환입니다.여러개의 URL Parameter가 배열 형태로 전달되는 상황에 대응하기 위함입니다. Next.js에서는 동적 경로를 캐치올 라우트(세그먼트) 혹은 옵셔널 캐치올 라우트(세그먼트)로 설정할 경우 URL Paramter가 문자열 배열 형태로 전달됩니다. 따라서 이럴 경우 params.id의 타입을 string | string[] 로 정의할 필요가 있습니다. 그러나 캐치올, 옵셔널 캐치올 라우트를 사용하지 않아 단 하나의 URL 파라미터만 제공될 것이 확실한 상황에서는 string[] 을 제외한 string 타입으로 정의하셔도 무방합니다.
- 0
- 2
- 26
질문&답변
7.3) 리뷰 조회 기능 구현하기 any type관련 질문입니다.
안녕하세요 이정환입니다.서버액션 함수가 매개변수로 전달받는 prevState의 타입을 any 으로 정의한 이유는 해당 변수는 사용하지 않을 예정이기 때문입니다. 따라서 타입이 무엇으로 추론되던 타입 오류만 해결되면 되기 때문에 비교적 간단하게 설정하고자 any로 정의하고 있습니다. any 외에도 unknown 등의 타입으로도 정의 가능합니다.
- 0
- 2
- 24
질문&답변
Type error: Type '{ params: { id: string | string[]; }; }' does not satisfy the constraint 'PageProps'. 오류 해결
안녕하세요 이정환입니다.본 내용은 우리 강의의 3.2) 페이지 라우팅 설정하기 챕터에 잘 설명되어 있으니 참고하시면 좋겠습니다.감사합니다.
- 1
- 2
- 36
질문&답변
npm run build 시 에러가 발생합니다.
해결하셨다니 다행입니다!
- 0
- 3
- 58
질문&답변
서버 컴포넌트 실행 시, 브라우저에서도 콘솔을 확인할 수 있도록 변경된 것 같아요!
안녕하세요 이정환입니다.확인해보니 그렇네요! 제보 감사합니다 😃
- 0
- 1
- 21