묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[코드팩토리] [초급] 8시간만에 끝내는 코드팩토리의 Typescript 완전정복 풀코스
infer를 사용한 type의 쓰임새
infer는 제너릭으로 컨디셔널 타입으로 만들 때 제너릭으로 하나의 타입을 받아서 유동적인 타입을 받고 난뒤에 해당 타입이 함수를 거치든 어떤 값으로 나올 때 T 또는 배열안에 있던 타입을 그대로 사용하기 따라가기 위한 용도라고 일단 외웠습니다.제가 혼자 예제 만들기를 좋아하는데 선생님이 해주신 아래 예제들이 어떤 의미를 가지고 어떻게 사용되는지 아직 잘 이해가 안됩니다 ㅠㅠ...가능하시다면 변수가 Flatten<T>을 사용하는 예제랑 함수가 returnType사용해서 결과값을 내는 예제를 주실 수 있으실까요?type Flatten<T> = T extends Array<infer ElementType> ? ElementType: T; type Flatten2<T> = T extends (infer ElementType)[] ? ElementType : T; type StringArray = Flatten<string[]>; type NumberArray = Flatten2<number[]>; type StringAndNumberArray = Flatten<(string|number)[]> type TwoDArray = Flatten<boolean[][]>감사합니다!
-
미해결Next + React Query로 SNS 서비스 만들기
혹시 PostForm 만들기에서 typescript 웹스톰에서type 추론해서 자동으로 들어가는거요,
에러 내용은 아닌데 PostForm만들기 강의 4분쯤에 typescript 쓸때 타입 웹스톰에서 자동으로 추론해서 들어간다고 하신거요,혹시 VScode 에서도 플러그인 있다고 하셨는데 어떤걸까요?? 찾아봤는데 모르겠어서요.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
타입스크립트 작동 안됨
안녕하세요! 강의 잘 듣고 있습니다. 10-TS 기초 강의를 듣고 TS 설치를 완료했는데, 저는 componemt의 타입을 지정하라는 등의 오류가 실행되지 않습니다. 콘솔 창에서는 별다른 에러 없이 잘 설치되었는데도요. yarn dev를 막 끝내고 _app.js를 tsx로 변경하니터미널 콘솔에는 이렇게 뜹니다. PS C:\Users\Yun\Desktop\frontEnd\class> yarn devyarn run v1.22.21$ next devready - started server on 0.0.0.0:3000, url: http://localhost:3000We detected TypeScript in your project and created a tsconfig.json file for you.event - compiled client and server successfully in 4.7s (388 modules)wait - compiling...event - compiled client and server successfully in 321 ms (388 modules)wait - compiling...error - ./pages/_app.tsxError: error: Unexpected token ,. Expected yield, an identifier, [ or { |3 | export default function App({ Component : , pageProps }) {| ^Caused by:0: failed to process js file1: Syntax Errorwait - compiling...event - compiled client and server successfully in 5.7s (388 modules)wait - compiling...error - ./pages/_app.tsxError: error: Expected ',', got '}' |3 | export default function App({ Component}, pageProps }) {| ^ 뭐가 문제일까요?
-
미해결
onSnapshot 함수 unsubscribe 에 대해서 질문이 있습니다
제가 궁금한건 다른 페이지에 있을 때에도 스냅샷 함수를 가동시켜 비용이 계속해서 발생하는 것을 막기위해 온스냅샷 함수를 unsubscribe, 구독취소하는 코드인데요어째서 제가 읽기에는 unsubscribe = ~ 온스냅샷함수 ~...return () => unsubscribe함수 실행useEffect cleanup기능으로 언마운트시 온스냅샷함수를 정지하려는데 다시 온스냅샷함수를 실행? 제가 어떻게 잘못 이해하는건지 모르겠어요 .. ㅠㅠexport default function Timeline() { const [tweets, setTweet] = useState<ITweet[]>([]); let unsubscribe: Unsubscribe | null = null; const fetchTweets = async () => { const tweetsQuery = query( collection(db, "tweets"), orderBy("createdAt", "desc"), limit(25) ); unsubscribe = await onSnapshot(tweetsQuery, (snapshot) => { const tweets = snapshot.docs.map((doc) => { const { tweet, createdAt, userId, username, photo } = doc.data(); return { tweet, createdAt, userId, username, photo, id: doc.id, }; }); setTweet(tweets); }); }; useEffect(() => { fetchTweets(); return () => { unsubscribe && unsubscribe(); }; }, []); }
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
코드 리뷰 부탁드립니다 :)
안녕하세요 선생님 😀강의 잘 보고 있습니다.저는 count 변수를 두고 값을 저장하고 i값을 변경하여 사용하였는데 이렇게 작성해도 되는지 궁금하여 질문을 올리게 되었습니다. 또 아래와 같이 for문 안에 있는 i 값을 변경해도 괜찮은지도 궁금합니다! function solution(k: number, arr: number[]): number { let sum: number = 0; let count: number = 0; let max: number = 0; for (let i = 0; i < arr.length; i++) { if (count < k) { sum += arr[i]; count++; } else { if (max < sum) { max = sum; } i = i - count; count = 0; sum = 0; } } return max; }감사합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn generate 에러
10-04-graphql-codegen-mutation/query강의를 보며 다운 받으라는 것 다 다운 받았는데 마지막에 yarn generate만 치면 아래처럼 오류가 나며 ts파일이 생기지 않습니다.... 구글링을 해봐도 잘 모르겠어서 질문 드립니다.yaml 파일과 package.json 파일은 아래와 같습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 13. 10-02 강의 질문
안녕하세요 차근차근 강의 따라가고 있는 수강생입니다섹션 13. 10-02 강의를 듣고 궁금한 점이 생겨 글을 남깁니다 export interface IBoardWriteUIProps { onClickSubmit: (event: MouseEvent<HTMLButtonElement>) => void; onClickUpdate: (event: MouseEvent<HTMLButtonElement>) => void; ... }강의에서는 위 두 함수의 매개변수를 지정해 주었습니다 export interface IBoardWriteUIProps { onClickSubmit: () => void; onClickUpdate: () => void; ... }그런데 매개변수를 지정하지 않아도 오류가 없더라고요 const onClickSubmit = async () => { ... }; const onClickUpdate = async () => { ... };두 함수는 매개변수로 event를 받아오고 있지 않습니다 그래서 궁금한 점은 아래 2가지 입니다매개변수를 지정한 이유두 가지 경우 모두 오류가 나지 않는 이유항상 감사합니다
-
미해결
빨간줄로 도배됐어요ㅠㅠ
next 13으로 typescript와 함께 개발중입니다어느 순간부터 html태그들과 improt 쪽에 빨간줄이 뜨더니 해결될 생각을 안하더라구요..많이 검색해 본 결과. @types/react, @types/react-dom 을 다운받아야 한다고 해서 다운 받았지만 해결이 안되더라구요...이 외에도 많은 방법들을 시도해 봤지만 효과가 없었습니다. 도와주세요ㅠㅠ 태크에서 나는 에러 : JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)import문에서 나는 에러: Cannot find module 'next/image' or its corresponding type declarations.ts(2307)
-
미해결풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
react typescript vite 설치시 오류 질문드립니다.
제목처럼 react typescript vite설치를 하려고 터미널에 yarn create vite를 입력하여 설치를 했습니다.아래 이미지와 같이 typescript를 선택 후, 설치를 완료했는데...아래 이미지들처럼 설치 하자마자 빨간줄들이 난무하고있습니다ㅜㅜ아래 이미지는 package.json 파일입니다.어떻게 해결할 수 있을까요?
-
미해결
코드캠프 프론트엔드 고농축 강의 질문드립니다.
안녕하세요. 코드캠프 프론트엔드 고농축 강의 내용 관련하여 질문 드립니다.우선 제가 원하는 내용은리액트 내용의 전반적인 복습타입스크립트 학습넥스트 js 학습이렇게 세 가지를 핵심으로 뽑을 수 있는데요.고농축 커리큘럼 소개에는 위의 내용이 다 적혀있긴 하지만 커리큘럼을 봤을 때 next js는 따로 탭이 분리 되어있지는 않더라구요. 어떤 부분이 next js 관련 부분인지 궁금하고, 또 커리큘럼의 전반적인 수준도 궁금합니다.
-
미해결
restAPI의 field-selection 개념 관련 질문드립니다!
안녕하세요! 강의 복습도 하면서 현업에 있는 직장인입니다ㅎㅎRestAPI를 구현중인데, 구현도 어렵지만 설계가 정말정말 어렵다고 느껴졉니다ㅠㅠ여러 레퍼런스를 찾아보면서 참고하여 설계를 해보고 있는데요,field selection 개념 도입하려는데 모호한 부분이 있어서요ㅠㅠ가령 GET /object 요청시 아래와 같이 Response가 왔을 경우,,{ "success": true, "message": "Data Found", "affectedRows": 1, "data": [ { "id": 1, "name": "test layer", "description": "test layer", "feature": { "type": "FeatureCollection", "features": [ { "type": "building", "properties": { "name": "object01" } } ] }, "sort_order": 0, "mod_date": "2023-03-09T06:52:19.000Z" } ] } GET field 파라미터로 가능한건 id, name, description, feature, sort_order, mod_date 까지인걸로 이해하고 있는데,만일 사용자가 features를 Return받고 싶다고 한다면이런 경우도 마찬가지로 field=feature로 받아서 처리하는게 개념적으로 맞을까요..?조언 부탁드립니다ㅜ.ㅜ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
TypeScript로 변환하는 과정에서
이런 에러가 뜹니다...
-
미해결따라하며 배우는 리액트 A-Z
오류 질문
검색을 해보니 컴포넌트 명 관련해서 에러 라고 나와져있는데 소스 를 확인해봐도 오타 문제는 아닌거같아 강사님께 여쭤봅니다 ㅠㅜ 무슨문제일까요 ?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
writeHead 부분
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Location에 /login만 해놓으니까 오류만 뜨고 로그인페이지로 안가고 커뮤니티 페이지로 들어가져서 경로를 아래처럼 바꿔더니 로그인페이지로 잘 가지긴 하는데 단순 경로 문제인가요??오류도 정상적으로 쿠키가 없다고 뜹니다
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
로그인페이지, 회원가입페이지 못들어가게하는 부분
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이 부분에서 axios.get으로 보내주는 쿠키가 없는데 어떻게 유저가 로그인을 했다는게 인증되는건가요??
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강의에서 사용하고 있는 next.js 버전으로 설치는 어떻게 하나요?
현재 next.js를 설치하려고 하면 13.2버전으로 설치가 되고 딱히 특정 버전을 설치해주는 기능은 없는 듯 합니다. 13버전과 강의에서 쓰이는 12버전은 사뭇 다르다고 생각이 듭니다.해당 강의에서 쓰고 있는 버전이 정확히 뭔지. 그리고 해당 버전으로 다운그레이드 혹은 설치를 하려면 어떻게 해야하는지 알려주실 수 있나요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
[공유] react-mention 항상 커서 위에 나오게 수정
이전 질문을 보면 react-mention 추천이 커서 아래로 나온다고 해서 공식 문서를 확인해봤습니다.결론적으로는 forceSuggestionsAboveCursor을 사용하면 됩니다. 해당 내용은 제로초님 sleact 레파지토리에 pull request 하였습니다.allowSuggestionsAboveCursor는 아래 공간이 부족하면 위에 배치가 '가능'하도록, 즉 워크스페이스 사람이 적으면 아래로 배치forceSuggestionsAboveCursor는 항상 위로 배치allowSuggestionsAboveCursor: Renders the SuggestionList above the cursor if there is not enough space belowforceSuggestionsAboveCursor: Forces the SuggestionList to be rendered above the cursor
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
user 과 auth에서 인증 부분
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.user.ts하고auth.ts에서이 부분이 같은데user.ts는 유저정보를 가져오기위한 미들웨어이고auth.ts는 인증을 위한 부분인데if(!user)이 둘다 있는 이유가 있을까요?그저 user.ts가 user정보를 가져오는데 조건에 해당하는 user정보가 없으면 안되니까(null) user.ts에 if(!user)이 있는건가요??제가 제대로 이해하고 있는지 헷갈려서요 ㅠㅠㅠ
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
next.js 버전이 12인건가요?
강의에서 사용하고 있는 next 버전이 궁금합니다.12버전인가요?
-
미해결[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편
axios 파트 첫번째 강의 질문입니다
axios 파트 첫번째 강의에서 AxiosInstance인터페이스가 Axios클래스를 상속하기 때문에 new axios() 이렇게도 쓸수 잇다고 말씀하셧는데 실제로 사용 해보려고 하니깐 config파라미터가 옵셔널 파라미터 인데도 에러가 떠서 비슷한 다른 코드(인터페이스가 클레스를 상속하는 코드)로 테스트 해봤는데도 해당 방식으로 사용 되지 않더라고요....TS에서 클래스는 객체를 생성하는 설계도로써의 역할도 수행하지만 그 자체로 타입의 역할도 수행하기에 인터페이스가 클래스를 상속할 경우에 클래스의 타입으로써의 역할만 상속, 즉 클래스의 생성자는 상속하지 않는다고 판단 했는데 혹시 제가 미처 생각 못하고 있는 부분이 잇을까요?