40,700원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
typescript 강의를 보고 개발을 하다가 강의와 다른 내용인데 물어볼곳이 여기밖에 없어서 질문 드립니다.
먼저 /api/users는 제가 임의적으로 403에러를 리턴하게 구성 해두었습니다.그렇게 되면 당연하게 try catch로 console.log(error); 잘 실행되는걸 알 수 있는데요. 질문은 항상 매일 하면서 궁금 했던건데 위에 GET http://localhost:3000/api/users 403(Forbidden) 해당 네트워크 에러는 try catch든 무엇이든 상관없고 http 요청에서 에러가 나면 무조건 뜨는건가요?인증 실패로 뜨는 401에러며 그런 에러들이 계속 네트워크 에러로 크롬에 뜨는게 거슬려서 원래 당연히 뜨는게 정상인건지, 아니면 안 뜨게 에러를 캐치하게 만들 수 있는데 제가 모르는건지 정말 정말 궁금합니다.
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
강의에 필요한 사전준비와 예제 코드 첨부
먼저 라이브러리를 설치 해줍니다.npm i react-nativenpm i react-native-keyboard-aware-scroll-view //types/react-native-keyboard-aware-scroll-view.d.tsdeclare module "react-native-keyboard-aware-scroll-view" {} //keyboard.tsximport React, { FC, ReactNode } from "react"; import { TouchableWithoutFeedback, Keyboard, StyleSheetProperties, } from "react-native"; import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"; const DismissKeyboardView: FC<{ children: ReactNode; style: StyleSheetProperties; }> = ({ children, ...props }) => ( <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}> <KeyboardAwareScrollView {...props} style={props.style}> {children} </KeyboardAwareScrollView> </TouchableWithoutFeedback> ); export default DismissKeyboardView; 즐거운 강의 되세요
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
local.ts 예제코드 첨부 합니다.
강의 시작전 예제 코드 첨부 합니다.// local.ts import passport from "passport"; import { Strategy } from "passport-local"; export default () => { passport.use( "local", new Strategy( { usernameField: "userId", passwordField: "password", }, async (userId, password, done) => { try { return done(null, false, { message: "비밀번호가 틀립니다." }); } catch (error) { console.log(error); return done(error); } } ) ); };
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
redux 예제코드 가져와서 강의 보면서 따라하는데
//tsconfig.json strict:true 일때const store = createStore(reducer, initialState, enhancer);해당 부분에서 에러가 사라지지 않아서 createStore를 보니까 Argument of type '{ user: { isLoggingIn: boolean; loading: boolean; data: null; }; posts: never[]; }' is not assignable to parameter of type '{ user?: undefined; posts?: undefined; }'.Types of property 'user' are incompatible.Type '{ isLoggingIn: boolean; loading: boolean; data: null; }' is not assignable to type 'undefined'.ts(2345)에러 메세지user와 posts State가 never로 추론 되어지네요. tsconfig.json 파일에서 strict: false로 바꾸면 정상적으로 추론 됩니다.//tsconfig.json strcit: false일때
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
react 함수 컴포넌트 타이핑은 있는데 클래스 컴포넌트 타이핑 예제 코드가 없네요.
react 함수형 컴포넌트 타이핑 예제 코드는 제로초님 github에 가면 있어서 쉽게 복붙 후 강의를 따라가기 좋은데, class 컴포넌트 타이핑은 예제 코드가 없는것 같습니다! 제로초님 ts-all-in-one github레포에 있으면 좋을것 같아요!
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
axios 1.6.0 버전으로 보고 있는데영
axios 1.6.0에서는export function isAxiosError<T = any, D = any>(payload: any): payload is AxiosError<T, D>;제네릭 넣는공간이 생겼네용!!다른분들도 참고 하시라고 남깁니다!
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
Module '"axios"' has no default export 에러 나시는분들
다른 질문에 제로초님께서 재설치나, 컴퓨터 재부팅 하면 해결 된다고 답변이 있지만, 그래도 해결 되지 않아서 저는 다음과 같은 시도를 했습니다.환경: vscode, 맥북 node_modules와 package-lock.json을 삭제 한 후 npm clean cache를 한 후 axios를 재설치를 하였는데도 에러가 남.재설치, 컴퓨터 재부팅 해도 에러가남.해결방법을 찾은건 공식문서 npm에서 찾았습니다.https://www.npmjs.com/package/axios/v/1.3.1대충 읽어보니까 Typescript에서 사용 할려면 tsconfig.json에 옵션을 넣어줘야 하는듯 합니다."moduleResolution": "Node16"이거 추가 하니까 해결됬습니다!
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
안녕하세요, 제로초님 타입스크립트 axios 분석 강의보고 궁금한점이 있어서 질문드립니다
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c```export interface AxiosInstance extends Axios { <T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D>): Promise<R>; <T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>; defaults: Omit<AxiosDefaults, 'headers'> & { headers: HeadersDefaults & { [key: string]: AxiosHeaderValue } }; }```해당 axios 분석 영상을 보고 질문이있습니다,AxiosInstance 인터페이스에 익명함수 시그니처 형식으로 타입정의가 되어있는데요 나름 찾아본결과 이거는 다형성 관련해서 다중오버로딩할때 편하다라고는 생각은 했습니다,,,근데 제가 궁금한점은 제가 일반적으로 axios 기본기능만 쓰면 사실 extends해서 가져오니까요,굳이 안써도잘 동작 할거같아서 의문이 들었습니다,,제가 나름 생각한 써져있는 이유는 axios라이브러리를 이용해서 자체 확장을 할때 필요 한가라고도 생각이드는데요 막연히 생각이들고 예상이라 정확히 어떨때 쓸 의도로 둔건지 궁금해서 질문드립니다요약: AxiosInstance 에 익명함수 시그니처의 의도가 뭘까요 extends 해오는거라 없어도 될거같은데요 어떤상황에 대비해서 추가된 코드일까요?
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
안녕하세요. 제로초님 당신의 강의 매니아 입니다. typescript 모듈 관련 질문이 있어서요.
정말 이부분이 궁금하고, 제가 chatgpt나 구글링 모든 방법을 다 동원해서 찾아 보았는데도, 궁금증 및 해결 방법을 찾을 수 가 없어서 혹시나 하는 마음에 질문을 남기게 되었습니다. 질문은 typescript 모듈 관련 질문 입니다. react + typescript 개발을 하다가 깜빡하고 export를 빼먹은 적이 있었는데, 정말로 신기하게도 interface를 사용하고자 하는곳에서 import도 없어도 에러가 나지 않고 사용이 가능했습니다.a.interface에서 타입 선언b.component.tsx에서 사용그래서 이부분이 궁금해서 꼭 이해하고 넘어가고 싶어서 ts 기본세팅을 해서 테스트 해보았고//second.ts//import meal없음 const lunch: meal = { menu: "ff", }; //first.tsinterface meal { menu: string; } //export없음not found meal 에러가 날줄 알았으나, 아무 이상 없이 작동함. 이거 굉장히 흥미롭다 생각해서 이번엔 nest.js에서 실험 해보았습니다.//src/boards/boards.controller.tsinterface meal { menu: string; } //export없음 //src/boards/boards.service.ts//import meal없음 const lunch: meal = { menu: "ff", }; nest.js에서 tsconfig.ts{ "compilerOptions": { "module": "commonjs", "declaration": true, "removeComments": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "allowSyntheticDefaultImports": true, "target": "ES2021", "sourceMap": true, "outDir": "./dist", "incremental": true, "strict": true, "skipLibCheck": true, "strictNullChecks": true, "strictBindCallApply": true, "forceConsistentCasingInFileNames": true, "noImplicitAny": true, "noFallthroughCasesInSwitch": true, "baseUrl": "./", "esModuleInterop": true, // 추가 "paths": { "@/*": ["src/*"], "test/*": ["test/*"] } } } 당연히 또 에러 없이 될줄 알았으나에러발생: Cannot find name 'meal'. ??? 이거 저만 이해 안가나요. 여러번의 삽질의 끝에 또 한가지 흥미로운 사실을 알게 되었습니다. nest.js에서는 src 밖에다가 //first.ts//second.ts만들어서 위와 똑같이 코드 작성하면 또 에러가 발생하지 않습니다. 정리하면,우선적으로, 특정 경로 설정을 하지 않으면, 어디서든 사용이 가능한것 같습니다. (nestjs에서 src같은 설정)react-typescript에서 export없이 interface선언 import 없이 다른파일 export없는 interface 사용가능ts init로 typescript 프로젝트 처음부터 만들어서 export없이 interface선언 import 없이 다른파일 export없는 interface 사용가능nest.js에서 export없이 interface선언 import 없이 다른파일 export없는 interface 사용가능, 하지만 src 폴더 밖에서만 가능! 질문은 결론적으로 질문은어떻게해서 이게 동작 하는건지가 너무 궁금 합니다.nestjs에서 src처럼 export import없이 사용 불가능하게 하려면 어떻게 해야할지...?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
axios catch 에서 error 타입에 대해 as 없이 이렇게 사용하면 어떨까요?
interface IResponse<T = {}> { data: T; message: string; } interface IUser { id: string; email: string; name: string; } class CustomError<T> extends AxiosError<T> { constructor(...args: any[]) { super(...args); } static isCustomError<T>(value: any): value is CustomError<T> { return value instanceof CustomError<T>; } } axios.get('').then().catch((error: unknown) => { if (CustomError.isCustomError<IResponse<IUser>>(error)) { // console.error( // (error as AxiosError<{ message: string }>.response?.data.message) // ) const errorMessage = error.response?.data.message; } })response의 대해서 타입이 좁혀지긴 하지만, 지저분해서 맞는 방법인지 모르겠네요
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
global 선언 시 export {}
>> IDE 오류로 추측됩니다. 재시작하니까 접근안되어 declare global 선언시 export {} 강의 내용대로 해주는게 맞습니다.현재 5.1.3 버전 쓰고 있는데 추가로 만든 types.d.ts파일에 declare global 선언 후 export {} 해주지 않아도오류없이 정상적으로 진행되던데 혹시 현재는 바뀐걸까요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
initialState가 제네릭 S인 이유가 잘 이해가 되지 않습니다.
안녕하세요, 항상 좋은 강의 감사드립니다.기존에 리덕스를 사용한 경험이 있어서 작성하신 리덕스 사용법에 대해서는 의문이 없으나ReducersMapObject의 제네릭 S가 initialState라고 말씀해주셨는데 해당 부분이 잘 이해가 되지 않습니다.제가 현재 이해한 로직으로는combineReducers자리에 ReducersMapObject<S, A>타입이 들어가고 ReducersMapObject<S, A>은 객체로서 해당 객체의 key값은제네릭 S의 key값을 K로 받고 해당 value값(S[K])을 Reducer의 첫번째 제네릭으로 ( Reducer<S[K], A>) 들어가 initialState 타입을 리턴해주는 함수타입이 되고 ReducersMapObject 객체의 value값 타입으로 적용되고있습니다. 하지만 아무리 강의를 반복해서 봐도 S가 initialState가 되는 인과관계가 파악이 안되고 있습니다 위의 로직은 전부 S가 initialState라는 약속하에 이해되는 로직인데 해당 약속을 어디서 파악할 수 있는지 혹시 제가 놓친 부분이 있을까요?어렴풋이 짐작해본 이유로는 createStore 함수를 실행할 때 두번째 인자로 initialState를 넣은 부분이 아닐까 싶은데해당 이유를 설명해주시면 감사하겠습니다.
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
declare module vs declare namespace
declare namespace와 declare module 두 문법은 모두 외부 모듈 또는 라이브러리의 타입 정의를 선언하는 데 사용가능해서 어떤걸 써도 호환가능하며 의미 혹은 선호도에 따라 namespace를 쓸지 module를 쓸지 정하는게 맞을까여?@types/node 에서도 각 모듈별로 declare namespace를 써도 될 것 같은데 맞을까여?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
declare namespace vs namespace
declare namespace JQuery { ... namespace Ajax { ... }}두가지 궁금한 부분이 있습니다.declare namespace를 쓰면 내부의 멤버들을 직접 export 하지 않아도 자동으로 모두 내보내지고 namespace만 쓸 경우엔 멤버들을 외부에 공개할려면 직접 export 해야하는걸로 아는데 이렇게 알고 있어도 될까요?위 코드도 JQuery가 declare로 선언되었으니 외부에서 Ajax 네임스페이스에 접근가능하니 declare를 선언하지 않은걸로 봐도 될까요? 아니면 다른 이유가 더 있는걸까요?
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
"axios": "1.4.0" 버전 axios type 코드가 강의와 다릅니다!
export interface AxiosInstance extends Axios { <T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D>): Promise<R>; <T = any, R = AxiosResponse<T>, D = any>(url: string, config?: AxiosRequestConfig<D>): Promise<R>; defaults: Omit<AxiosDefaults, 'headers'> & { headers: HeadersDefaults & { [key: string]: AxiosHeaderValue } }; } bind 함수 때도 버전에 따라 바뀐 버전이 확인 됐는데..type 업그레이드가 상당히 빈번히 되나보네요 ....
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
Redux type 설정 과정에서 발생한 오류 질문 (ts[2345])
안녕하세요 redux 강좌 타입 강좌를 연습하는 과정에서 다음 코드에서 애러가 발생했습니다.// 사용 패키지 버전 "redux": "^4.2.1", "typescript": "^5.0.4" "redux-thunk": "^2.4.2",// redux.ts 코드에서 애러 발생// initialState에서 애러 발생 const store = createStore(reducer, initialState, enhancer); /* Argument of type '{ user: { isLoggingIn: boolean; data: null; }; posts: never[]; }' is not assignable to parameter of type '{ user?: { isLoggingIn: boolean; data: { userId: number; nickname: string; } | null; } | undefined; posts?: undefined; }'. Types of property 'posts' are incompatible. Type 'never[]' is not assignable to type 'undefined'.ts(2345) const initialState: { user: { isLoggingIn: boolean; data: null; }; posts: never[]; } */이를 해석해 보았을 때, posts 속성에서 문제가 발생하고 undefined와 호완이 되지 않는다고 이해했습니다. 그래서 따로 타입을 만들어서 type assertion을 활용해서 타입을 주입해 보았습니다. 하지만 여전히 애러가 발생하고 있습니다. interface InitialState { user: { isLoggingIn: boolean; data: null | LoginSucessData; }; posts: AddPostData[] | undefined; } const initialState = { user: { isLoggingIn: true, data: null, }, posts: [], }; const store = createStore(reducer, initialState as InitialState, enhancer); /* Argument of type 'InitialState' is not assignable to parameter of type '{ user?: { isLoggingIn: boolean; data: { userId: number; nickname: string; } | null; } | undefined; posts?: undefined; }'. Types of property 'posts' are incompatible. Type 'AddPostData[] | undefined' is not assignable to type 'undefined'. Type 'AddPostData[]' is not assignable to type 'undefined'.ts(2345) */결과적으로 강제로 any로 설정하면 애러가 해결이 되기는 하지만, 무언가 찝찝합니다. const store = createStore(reducer, initialState as any, enhancer); 그래서 해당 애러가 ts[2345] 애러라고 하여 검색을 해보았을 때, 데이터의 타입이 일치하지 않을 때 발생하는 애러와 연관이 있는 것 같았습니다. 어디서 타입의 불일치가 발생하는지 명확히 이해가 잘 안되어서 질문을 드립니다.
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
index.d.ts 에서 global declare 선언을 했을 때와 하지 않았을 때의 차이
index.d.ts 에서 declare global 없이 그냥 interface 만 정의해도 express.ts 에서 Error 와 User 의 타입이 합쳐지고 인식되는 것 같은데,declare global 을 선언하고 타입을 정의하는 것과, 그냥 없이 선언하는 것에 구체적으로 어떤 차이가 있는 건가요??
- 해결됨[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
미들웨어가 커링패턴으로 이루어진 이유
const thunkMiddleware: Middleware = (store) => (next) => (action) => { if(typeof action === 'function) { return action(store.dispatch, store.getState) // 비동기 } return next(action) // 동기 }안녕하세요!store => next => action 의 커링패턴으로 이루어진게 store 함수에 접근하기 위함일까요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
axios 파트 첫번째 강의 질문입니다
axios 파트 첫번째 강의에서 AxiosInstance인터페이스가 Axios클래스를 상속하기 때문에 new axios() 이렇게도 쓸수 잇다고 말씀하셧는데 실제로 사용 해보려고 하니깐 config파라미터가 옵셔널 파라미터 인데도 에러가 떠서 비슷한 다른 코드(인터페이스가 클레스를 상속하는 코드)로 테스트 해봤는데도 해당 방식으로 사용 되지 않더라고요....TS에서 클래스는 객체를 생성하는 설계도로써의 역할도 수행하지만 그 자체로 타입의 역할도 수행하기에 인터페이스가 클래스를 상속할 경우에 클래스의 타입으로써의 역할만 상속, 즉 클래스의 생성자는 상속하지 않는다고 판단 했는데 혹시 제가 미처 생각 못하고 있는 부분이 잇을까요?
- 미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
FunctionComponent 인터페이스 관련 질문입니다
interface FunctionComponent<P = {}> { (props: P, context?: any): ReactElement<any, any> | null; // 함수의 추가속성 propTypes?: WeakValidationMap<P> | undefined; contextTypes?: ValidationMap<any> | undefined; defaultProps?: Partial<P> | undefined; displayName?: string | undefined; } 이 부분에서 첫 번째 줄을 함수형 컴포넌트의 모습을 타이핑한 것으로 배웠는데 아래 속성같은 경우는 함수형 컴포넌트 자체의 속성(프로퍼티)을 타이핑한 것 같다고 유추를 할 수 있었습니다.그런데 타입스크립트가 interface만 보고도 자동으로 함수의 시그니처와 함수 자체의 프로퍼티를 따로 분리해서 추론을 해주는 건가요?이부분의 작동 원리가 궁금합니다.예를 들면const WordRelay:FunctionComponent = () => { return jsx코드 }이 부분에서 FunctionComponent로 타이핑하였을 때, WordRelay를 왜 타입 부분의 첫 번째로 타이핑한 건지, 아래의 propsTypes, contextTypes 등의 속성으로는 추론하지 않은 이유가 타입스크립트 내부 동작방식에 의해서인지가 궁금합니다. 추가적으로 이 방법이 인터페이스를 사용하여 좀 더 복잡한 함수를 타이핑할 수 있는 방법이라고 생각해도 될까요? (보통 함수에 프로퍼티를 추가할 일이 없어서 이런 타이핑 방식을 보니 헷갈리네요ㅠㅠ)