묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
웹소켓 관련 개념질문입니다.
안녕하세요. 현재 "DM채팅하기" 강의를 진행하기 전에도 시크릿모드로 두개를 띄워서 해보면 지금도 채팅 통신이 가능한데 이상태에선 계속 서버로 보냈다가 다시 가져오고 그런 상태이기 때문에 소켓통신으로 바꾸려고 socket.on 을 추가하는 것인가요? 그러니까 useEffect(()=>socket?.on('dm', onMessage) 이부분을 하는 이유가 http프로토콜을 소켓 프로토콜로 바꾸는 개념인가요? 동작 방식이 좀 헷갈리네요.. 제가 이해한 부분이 맞을까요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
(공유) 리액트 v6부터는 route가 바뀌어서 중첩라우터 이렇게 적용하셔야합니다
App 파트에서 workspace다음 와일드카드/* 를 표시해주셔야 합니다 workspace 안에서는 path에 /workspace/:workspace를 쓰면 App에서 workspace/:workspace/* 가 있어서 두개가 중복되기때문에 바로 /channel/:channel 로 path를 작성하시면 됩니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
slack 강의 커스텀 훅 만들기 질문이 있습니다.
강의를 보면서 많이 배우고 있습니다 :) setValue가 <T>를 인자로 받도록 타입을 지정해서 e.currentTarget.value는 못들어가는것인데(string이라서), e.currentTarget.value as T를 하면 될것이라고 생각했는데, 안되었고 강의에서 as unknown as T를 해주셨는데 이렇게 unknown을 한번 거치시는 이유가 궁금합니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
onCreateWorkspace Submit 무반응
안녕하세요! 지금까지는 문제 없이 잘 진행하고 있었으나 계속 찾아보고, alecture 폴더 내에 있는 소스코드와 비교를 해보아도 어떤 코드가 문제인지 모르겠어서 질문 글을 남기게 되었습니다. 해당 섹션 마지막에서 액시오스 코드를 작성하고 백엔드에 워크 스페이스를 생성하도록 요청하는 부분이 있는데요, const onCreateWorkspace = useCallback((e) => { console.log('ok'); e.preventDefault(); console.log(newWorkspace); if (!newWorkspace || !newWorkspace.trim()) return; console.log('b'); if (!newUrl || !newUrl.trim()) return; console.log('c'); axios.post('/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }, ).then((response) => { revalidate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }).catch((error) => { console.dir(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, []); 워크스페이스 이름과, 워크스페이스 url 을 넣고 생성하기 버튼을 누르면 반응이 없어서 위 코드처럼 console.log 를 찍어서 확인해보니 newWorkspace 에 아무런 값이 담기지가 않고 있습니다. 해당 소스코드 및 라인 : https://github.com/Kuass/sleact/blob/master/setting/ts/layouts/Workspace/index.tsx#L32 입니다. onCreateWorkspace = useCallback 에 event 객체도 콘솔에 찍어서 보았으나 값은 정상적으로 있는데.. 왜 이럴까요 강사님 ㅠㅠ..
-
미해결Vue.js + TypeScript 완벽 가이드
createListView의 return type
20:3 warning Missing return type on function @typescript-eslint/explicit-module-boundary-types 에러는 아니고 워닝이긴 하지만, CreateListView 코드에서 위와 같은 워닝이 뜹니다. ComponentOptions를 넣으면 될 것 같아서 넣어보았는데.. 5:55 Generic type 'ComponentOptions<V, Data, Methods, Computed, PropsDef, Props>' requires between 1 and 6 type arguments. 이런 에러가 발생해서 검색을 해보니... 최종적으로 아래와 같이 작성하니 에러가 없이 동작하는 것 같습니다. import ListView from "./ListView.vue"; import bus from "../utils/bus"; import { ComponentOptions, CreateElement } from "vue"; export default function createListView(name: string): ComponentOptions<Vue> { return { name, mounted() { bus.$emit("off:progress"); }, render(h: CreateElement) { return h(ListView); }, }; } 대충 찾아서 워닝이 발생하지 않아서 맞나 싶긴한데 리턴 타입이 모호한 경우, 보통 어떤 식으로 찾는지 궁금합니다. (저는 에러 로그와 인터넷에서 찾은 정보를 조합해서 몇 개 트라이 해보는 방식으로 처리했습니다.) 그리고 실무에서는 워닝 정도는 보통 무시하고 가는지 아니면 어떻게든 찾아서 해결하는지도 궁금합니다.
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
안녕하세요 도커 상에서 기술블로그 작성을 도전하고 있는데 문제가 ㅠㅠ...
현재 1파트 개발 환경 구축을 거의 마무리 짓는 과정에 있었습니다. typescript 설치 및 다 마친 뒤 `yarn develop`으로 로컬 상에서 최종 점검을 하는데, 위와 같은 에러가 발생했습니다. 뭐가 문제인지는 몰라 확인차 path 인자를 사용하는 수정한 파일들을 확인하였는데, 오탈자나 문제는 없어 보였습니다. 그래서 조언을 듣고 싶어서 일단 이렇게 오류 상황을 찍어서 올려봅니다 ㅠㅠ.. 현재 개발 환경은 m1 mac OS 12 docker ubuntu:latest gatsby-cli 4.4.0 node 최신 버전 에서 진행중입니다.
-
해결됨타입스크립트 입문 - 기초부터 실전까지
인터페이스 함수 파라미터
안녕하세요, 기효님 함수의 인터페이스를 정의 후 아래와 같이 파라미터를 하나만 적어보았는데 에러를 발생시키진 않더라고요. 정작 sum을 사용할 때는 파라미터를 하나만 넘기지 못하게 에러가 발생합니다. 왜 파라미터의 개수에 대해서는 에러 표시를 내지 않는가요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
react-router-dom 문제....
자꾸 이와 같은 에러 가뜹니다. react-router-dom에 Switch와 Redirect을 export없다고 합니다....
-
미해결Vue.js + TypeScript 완벽 가이드
vuex 질문드립니다!
강의 듣던 중 질문 남깁니다 저의 경우 예시처럼 하나의 state, action, mutation 파일로 나눠져 있는 것이 아닌서비스 별로 모듈로 나눠져 각 모듈에 state, mutation, action이 있는 구조로 구현 되어 있습니다. 혹시 이런 경우에 타입스크립트로 변환을 어떻게 해야하는지 가이드 부탁드리겠습니다!
-
미해결실전 리액트 프로그래밍
커스텀훅 작성할 때 axios 부분을 별도의 파일로 만들어서 호출 할 경우 type error 가 나타납니다.
안녕하세요. typescript 와 create-react-app 을 사용하여 공부중인데요. 커스텀 훅을 만들어서 비동기 API를 호출하여 테이블에 노출하는 기능을 구현하다가 도저히 답이 안나와서 질문드립니다. useState와 useEffect 를 사용하여 비동기 API를 set 하는 커스텀훅을 만들었고, axios 를 호출하는 별도의 파일을 만들어서 사용중인데 const [items, setItems] = useState<coronaApiProps[]>();const coronaItems = getCorona();useEffect(() => { setItems(coronaItems);}, []); 이렇게 사용하니 아래처럼 에러가 나타납니다. TS2345: Argument of type 'Promise<coronaApiProps[]>' is not assignable to parameter of type 'SetStateAction<coronaApiProps[] | undefined>'. Type 'Promise<coronaApiProps[]>' is not assignable to type '(prevState: coronaApiProps[] | undefined) => coronaApiProps[] | undefined'. Type 'Promise<coronaApiProps[]>' provides no match for the signature '(prevState: coronaApiProps[] | undefined): coronaApiProps[] | undefined'. coronaApiProps 는 제가 만든 인터페이스입니다. 해당 에러가 나타나서 useEffect 안에 const [items, setItems] = useState<coronaApiProps[]>();// axios 로 api 호출const coronaItems = getCorona(); useEffect(() => {coronaItems.then(response => {setItems(response); });}, []); 이렇게 사용하니 커스텀훅을 두번 호출합니다. 그래서 axios 파일을 분리하지 않고 커스텀훅 안에 사용하면 커스텀훅을 한번만 사용합니다. api를 호출하는 axios 파일을 분리하고 사용할 수 없나요? 필요하면 github 추가해드릴 수 있습니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
Failed to compile.
실행시 아래와 같은 오류가 발생합니다. 아무리 구글링해봐도 안보이네요. [에러내용]
-
미해결실전 리액트 프로그래밍
react typescript 환경에서 커스텀 훅을 만들어서 사용하려고 하는데 This expression is not callable 에러가 나타납니다.
안녕하세요. 강의 보고 useState, useEffect 를 활용해보고 싶어서 공공데이터 포털에서 제공해주는 openapi 로 커스텀 훅을 만들어 봤습니다. typescript + webstorm 환경에서 작업중인데요 TS2349: This expression is not callable. No constituent of type 'void | coronaApiPros[]' is callable. import useDailyCorona: void | coronaApiPros[] App.tsx 6번 라인의 useDailyCorona(); 코드에서 이런 에러가 나타납니다. 구글링을 계속 해보는데 원하는 답을 찾을수가 없어서 질문드립니다..ㅠㅠ App.tsx 파일과 커스텀훅 파일인 useDailCorona.tsx 파일을 첨부합니다. ----------- App.tsx --------- import './App.css'; import React from 'react'; import useDailyCorona from './hooks/useDailyCorona'; function App() { const items = useDailyCorona(); return ( <ul> {items?.map((item, index) => ( <li key={index}>createDate: {item.createDt}</li> ))} </ul> ); } export default App; ----------- useDailyCorona.tsx ------------- import {useEffect, useState} from "react"; import {getCorona} from "../corona"; interface coronaApiPros { createDt: string // 조회 시작 시간 deathCnt: number // 사망자 수 defCnt: number // 확진자 수 gubun: string // 시도명(한글) gubunCn: string // 시도명(중국어) gubunEn: string // 시도명(영어) incDec: number // 전일대비 증감 수 isolClearCnt: number // 격리 해제 수 isolIngCnt: number // 격리중 환자 수 localOccCnt: number // 지역 발생 수 overFlowCnt: number // 해외 유입 수 qurRate: string // 10만명당 발생률 seq: number // 게시글번호 (국내 시도별 발생 현황 고유값) stdDay: string // 기준 일 시 updateDt: string // 수정 일시 분초 } function useDailyCorona():void|coronaApiPros[] { const [items, setItems] = useState(); const coronaItems = getCorona(); useEffect(() => { coronaItems.then(response => { setItems(response); }); }, []); return items; } export default useDailyCorona();
-
미해결Slack 클론 코딩[실시간 채팅 with React]
npm run dev 시 에러가 나는데 해결이 안됩니다..
이것저것 다 시도해보아도 계속 이 에러가 납니다.. 노드 버전의 문제일까요? 현재 12.20 버전쓰고있습니다 ㅠㅠ
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
http-exception.filter.ts 파일 내용 중 질문이 있습니다.
const error = exception.getResponse() as | string | { error: string; statusCode: number; message: string | string[] }; 강의 중에 http-exception.filter.ts 파일에서 error 변수를 위와 같이 할당을 하는데 as | string 뒤에 있는 타입을 { error: string, statusCode: number; message: string | string[] };로 받는데 객체의 속성들을 특별하게 넣어준 이유가 있나요? 단순히 { error: string }로만 처리해도 다른 속성 값들이 자동으로 들어오기 때문에 출력할 때는 문제가 없는 것 같은데 정확한 타입을 제공하기 위해서 라던가 등 특별한 이유가 있는지 궁금합니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
배포 관련 질문입니다
헉 제로초님 저는 서버 강의는 안듣고 클라이언트만 듣고 배포하고 싶거든요 포폴로 사용하려고요 클라이언트만 따로 배포 할 방법은 없을까요?...
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
sleact 폴더 안에 파일이 다 들어있습니다.
깃에서 클론받아서 강의를 진행하고 있는데 front 뿐만 아니라 sleact 폴더에도 전부 만들어져 있는데 어떤식으로 진행해야하나요 초반 셋팅 부분 빼고는 다 삭제 후 만들면 되겟죠..?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
swr 설정 살펴보기 > revalidate 문제
swr 최신버전에서 revalidate가 삭제 된 것 같아서 질문드립니다! 제로초님의 강의를 듣고, 제가 이해한 것은, 기본 swr설정으로 사용을 하면, 지속적으로 데이터를 요청하게 되는데, swr에서 revalidate를 설정해주고, onSubmit의 post의 then에 reavalidate함수를 넣어주면, 그 함수가 실행 되었을 때부터 swr이 작동한다고 이해했는데 그게 맞을지 여쭤보고 싶습니다. swr 공식문서를 읽어보긴 했는데 확실히 이해가 되지 않아서요.. 조건부로 실행시키기 위해서, useSWR()에서 조건을 주어, 조건에 따라 false일 때 url의 위치에 null 안에 조건을 넣어주는 방식으로 공식 문서에 적혀있는데, 이렇게 되면 useState로 조건을 하나 만들어주어야 할까요? 해당 방법이 맞는지와 올바른 코드 예시가 있다면 알려주시면 감사하겠습니다!! ㅠ
-
미해결타입스크립트 입문 - 기초부터 실전까지
[질문아님] index.ts 노란색 밑줄 안뜨는 분들 참고하세용
2021-09-12 기준 영상과 동일하게 실습하면 밑줄이 안뜹니다. 먼저, Ctrl + Shift + P 키를 누르고 'settings'를 입력하시면 아래와 같은 화면이 나옵니다. 여기서 기본 설정: 설정 열기(JSON) 들어가시고 안에 내용을 추가해주세요. { ..., // 기존에 있던 내용 아래에 추가 "eslint.workingDirectories": [ {"mode": "auto"} ] } 그리고 저장 하시면 밑줄이 뜹니다. 한 프로젝트 내부에서 여러 개의 tsconfig.json을 사용하는 것을 IDE가 잘 인식하지 못하는 게 원인인 것 같습니다. 도움되셨으면 좋겠네요!
-
미해결Slack 클론 코딩[실시간 채팅 with React]
setShowCreateChannelModal props의 타입 질문
강의에서, setShowCreateChannelModal props의 타입을 (flag:boolean)=>void;라고 지정하셨는데, setState의 경우 기본적으로는 Dispatch<setStateAction<S>> 이런식이었던 것 같은데 이렇게 안쓰고 그냥 저렇게 쓸 수 있는 건가요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
GET .../members error
이전에 비슷한 문제를 겪은 글이 있었는데 해결되지 않아서 글을 작성하게 되었습니다. InviteChannelModal 컴포넌트에서 보내는 GET 요청 const { revalidate: revalidateMembers } = useSWR( userData ? `/api/workspaces/${workspace}/channels/${channel}/members` : null, fetcher, ); 위 코드의 실행되는 결과로 다음과 같은 에러가 발생합니다. const { workspace, channel } = useParams(); InviteChannelModal 컴포넌트에서 콘솔에 workspace와 channel을 찍어보니 channel이 undefined 값으로 나오는데 useParams를 사용하면 현재 URL에서 라우터에서 지정한 콜론 뒤의 키에 해당하는 값을 반환하는 것으로 알고 있습니다. 로그인 후 "http://localhost:3090/workspace/sleact/channel/일반" 주소로 이동하기에 channel 값이 일반으로 출력되기를 예상합니다만.. Workspace layouts 에서 라우터 설정을 했음에도 매칭되는 channel 값을 받아오지 못하기에 원인을 알 수 없어 여쭤봅니다. <Switch> <Route path="/workspace/:workspace/channel/:channel" component={Channel} /> <Route path="/workspace/:workspace/dm/:id" component={DirectMessage} /> </Switch>