묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Code Sandbox 문의
안녕하세요 선생님, 오늘 처음으로 수강듣게되었네요. 이 단계에서부터 질문을 드리게 될줄 몰랏는데, codesandbox 에서 실행을하려니, installing dependencies 가 계속 진행되면서 retrying package fetch 가 console 에서 지속 반복되네요ㅠ 이걸 해결할 방법이 있을까요? 없다면, 앞으로 수업은 어떻게 듣는게 좋을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
데이터베이스 못찾으시는 분들
UI가 업데이트된건지 강사님과 화면이 다르네요 아래 화면에서 프로젝트 이름 (저는 boilerplate) 누르면 나오는 화면에서 collections 누르시면 나옵니다 1. 프로젝트 이름 클릭 2. collections클릭
-
미해결Slack 클론 코딩[실시간 채팅 with React]
인피니티 스크롤 시 데이터 일부를 가져오지 못하는 문제
채팅방에서 새로운 데이터를 입력한 후, 스크롤을 위로 올려 다음 페이지를 로드하면 다음 페이지 값의 일부가 사라져서 출력되는 것 같습니다. 사진에서 5를 새로 입력했습니다. 그리고 나서 위에 닿을 때까지 천천히 스크롤하여 새로운 페이지를 불러오면 8 다음에 있어야 할 9를 불러오지 못했습니다. 테스트는 강좌 깃헙의 front 폴더와 back 폴더에 있는 코드로 진행 했습니다. 버그인 것인지, 페이지를 불러오는 과정에서 문제가 생긴건지 궁금합니다ㅠㅠ..
-
해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
강의 설명란 오타 수정
git checkout -f ready/tab-view-2 가 아니라 git checkout -f ready/tab-2로 변경되어야 할 거 같습니다
-
해결됨Redux vs MobX (둘 다 배우자!)
mobx makeAutoObservable 과 mobx로 비동기처리해야될때 질문입니다.
class Store{ repository; rootStore; num = 0; constructor(repository,rootStore){ makeAutoObservable(this); this.repository = repository; this.rootStore = rootStore; } addnum = ()=>{ num++; } } mobx makeautoObservable 관련 질문입니다. 대충 이런식으로 store 가 있는데 makeAutoObservable이 알아서 action 이랑 observable을 지정해줍니다. 1-1. respository와 rootStore는 observable 하게 하고싶지 않은데 mobx devtools를보니 repository와 rootStore를 감지하고 있더라고요 특정 변수 또는 함수를 autoObservable 에 제외시킬수 있나요? repository 나 rootStore 앞에 private 키워드를 줘봤는데도 감지하고 있었습니다. 1-2. 위처럼 메모리에 불필요한 상태값까지 감지하게되면 나중에 state 가 커지면 성능과 메모리 차지에 큰 영향을 끼칠까요? mobx로 비동기 처리해야될때 질문입니다. 네트워크 요청해서 데이터를 보여줘야되는데 리스트로 항목 4개 보여주고 화살표로 다음 페이지버튼 보거나 이전페이지 버튼 보게 하고 있습니다. 다음페이지로 넘기면 네트워크 요청하고 응답받으면 데이터를 보여주게되고 요청을 날릴때는 빈화면이고 요청에대한 응답을 받았을때 데이터를 뿌려줘야됩니다. <button onClick = {()=>store.loadPrevious()}>previous</button> {store.listData && <MyListComponent data={store.listData.slice(store.page*4,store.page+4)}/>} <button onClick = {()=>store.loadNext()}>next</button> 이런식으로 store.listData 가 있을때 컴포넌트가 나오게 했습니다. 첫화면 로딩시 즉 useEffect() 에서 요청날렸을땐 제대로 동작하는데 다음페이지 버튼을 누르면 이미 store.listData는 이미 null이 아니기떄문에 네트워크요청 응답을 받기도전에 화면을 넘겨서 데이터를 제대로 뿌려주지를 못합니다. 2-1. 이런경우는어떻게 처리하는게 좋을까요?
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
Post 챕터 Read (1) 강의에서 axios 안되시는 분들 정보 공유합니다
백단에서 post요청 then().catch() 설정한 후 클라이언트 List.js에서 axios로 /api/post/list 포스트 요청하고 콘솔창 확인해보면 400 에러가 뜨는데 일단 서버폴더 Model/Post.js에서 스키마 부분 Collection : "posts"로 바꾼 다음에 다시 새로고침 해보니깐 postList 데이터 콘솔창에 찍힙니다 초반강의 몽구스 설정할 때 collation : "posts"로 하셨는데 오타인지 궁급합니다!
-
해결됨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를 작성하시면 됩니다.
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
react-router-dom 버전 6이후의 동작
안녕하세요. Route 컴포넌트를 사용하는 방법이 조금 바뀐거같습니다. (v6 이후) <Routes> <Route path="/about/*" element={<AboutPage/>}/> <Route path="/about/company/" element={<AboutCompanyPage/>}/> <Route path="/profile/" element={<ProfilePage/>}/> <Route path="/blog/" element={<BlogPage/>}/></Routes> 위에처럼 Route 바깥에 Routes로 감싸줘야 하는것으로 보이구요. 또 about아래에 여러 URL을 지원하려면 *를 붙여줘야 하는거 같습니다. (exact 속성도 지원하지 않는다고 합니다.) 다만 about/abcd 이런식으로는 접속해도 URL매칭은 되지만 about/company/로 슬래시로 끝내면 매칭이 되지는 않네요. 원만한 강의 진행을 위해서는 v5로 낮추어서 듣는게 좋을까요? https://stackoverflow.com/questions/69866581/property-exact-does-not-exist-on-type https://stackoverflow.com/questions/49162311/react-difference-between-route-exact-path-and-route-path
-
미해결오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1
react 비주얼 스튜디오
여기 보면 client앱이 강사님께 보이는데 처음에 실행할 때 리액트로 설정하는 화면도 없고 clientapp 디렉토리도 없는데 어떻게 하면 되는건가요..
-
해결됨Redux vs MobX (둘 다 배우자!)
runInAction 에 비동기
mobx react next 로 하고 있는데 runInAction 에서 비동기처리를 하려면 어떻게 해야되나요? Component.tsx const store = useIndexStore(); useEffect(() => { const fetchData = async () => { await store.loadNewMemberData(); console.log(store.newMember) } fetchData(); }, []) 일단 훅스 컴포넌트에서 useEffect에서 store 에 저장된 정보를 불러와야되는데 Promise 기때문에 따로 함수를 만들어줘서 호출을 했고요. useEffect 뜯어보니 함수 리턴타입이 void|Destructor(?) 라 Promise 타입을 못받아서 저렇게 만들었습니다. 1. useEffect 에서 비동기 작업을 할때 저렇게 async 함수 만들어서 호출해야되는건가요? 2. async 함수를 만들었으면 꼭 await 으로 호출안해도 되는건가요? store.ts class IndexStore { root; repository rtrMenu: MenuItem[] = []// constructor(root: RootStore, repository: BaseRepository) { this.root = root this.repository = repository makeAutoObservable(this) } loadRealtimeRequestData = async (): Promise<void> => { runInAction(() => { this.rtrMenu =this.repository.getRealTimeRequestItem() }); } } store에선 loadRealtimeRequestData() 함수에서 네트워크 요청한 결과를 받습니다. await this.repository.... 여기가 await axios.get() 이런 역할을 하게 되는데 then 을 하면 쉽게 해결될문제지만 async awiat 으로 runInAction 안에서 처리할려면 어떻게 해야되나요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
Unhandled Runtime Error 질문입니다
아래는 에러 문구입니다.'REACT_APP_SC_ATTR'로 검색시 확인되지 않습니다1. package.json을 지우고 npm install을 다시 하는게 최선일까요?2. 제 폴더 내에서는 검색되지 않는 내용인데, 왜 이런 에러가 나는지도 궁금합니다. Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'REACT_APP_SC_ATTR') Call Stack eval node_modules\styled-components\dist\styled-components.browser.esm.js (1:1130) Module../node_modules/styled-components/dist/styled-components.browser.esm.js file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/pages/index.js (9943:1) Module.options.factory /_next/static/chunks/webpack.js (633:31) __webpack_require__ file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/webpack.js (37:33) fn /_next/static/chunks/webpack.js (302:21) eval webpack-internal:///./components/AppLayout.js (13:75) Module../components/AppLayout.js file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/pages/index.js (1568:1) Module.options.factory /_next/static/chunks/webpack.js (633:31) __webpack_require__ file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/webpack.js (37:33) fn /_next/static/chunks/webpack.js (302:21) eval webpack-internal:///./pages/index.js (4:79) Module../pages/index.js file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/pages/index.js (1623:1) Module.options.factory /_next/static/chunks/webpack.js (633:31) __webpack_require__ file:///D:/2021/NodeBirdSNS/front/.next/static/chunks/webpack.js (37:33) fn /_next/static/chunks/webpack.js (302:21) eval node_modules\next\dist\build\webpack\loaders\next-client-pages-loader.js?page=%2F&absolutePagePath=D%3A%5C2021%5CNodeBirdSNS%5Cfront%5Cpages%5Cindex.js! (5:15) eval node_modules\next\dist\client\route-loader.js (236:50)
-
미해결
react 저장 시 iframe 강제 재생성 문제
create react app을 통해 프로젝트를 진행 중입니다. 원래 컴퓨터에서는 프로젝트가 정상적으로 작동 되었는데, 다른 컴퓨터에서 git clone을 받아 npm install 후 npm start 진행하니, 1. Cannot read property 'tap' of undefined 상기와 같은 에러가 발생하여 검색해보았더니, webpack version문제라고 나와 5버전에서 4버전으로 내려주었습니다. 2. <iframe style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; border: none; z-index: 2147483647;"></iframe> 그 후 리액트를 실행하고, 저장할 때마다 iframe이 자동으로 주입되어 홈페이지의 click을 막습니다. 혹시 이와같은 문제를 겪으시는 분들 중에 해결하신 분이 계실지요...? 원래는 다른 컴퓨터에만 문제 발생하였는데, 이제 작업하던 원래 컴퓨터에까지 발생하기 시작했습니다. 저는 임시 방편으로나마 css에서 ifame display none 시키고 작업중인데, 무슨 이유로 생기는 오류인지 모르겠습니다.
-
미해결오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1
visual studio에서 프로젝트 실행시 오류가 발생합니다
안녕하세요 리액트를 익히고자 수업을 듣고있는 수강생입니다. 강의를 잘 따라가는 와중 환경세팅부분에서 막혔습니다. - 증상: Visual Studio2022에서 프로젝트 실행 시 첨부파일과 같은 오류가 발생하며 오류 발생 - 추가 사항 (1) visual studio가 아닌 VS Code, nodejs에서 실행하면 정상 동작되는거 확인하였습니다 (2) cmd, powershell에서 npm명령 잘 작동하고 있습니다. - 캡처화면
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
강의소개에서
강의소개보면 swr(리덕스대체) 라고 나와있는데 swr도 리덕스처럼 상태관리를 하는건가요?
-
미해결리액트로 구현하는 블록체인 이더리움 ERC721(NFT)
프로젝트 구성에 대해서 질문을 드려봅니다.
안녕하세요. 회사에서 NFT를 발행해주는 프로젝트를 진행하려는데요. 올려주신 강의를 보고 하나씩 처리를 해가고 있는데, 프로젝트 구성의 감을 잡지 못해서 문의를 좀 드리려고 합니다. 이 곳에 질문을 남겨도 될지는 모르겠지만, 너무 답답해서 문의를 드립니다. nodejs 를 사용해 backend(API 서버)를 만들고 raect(3000번 포트) 에서 proxy 를 설정해 nodejs(3001번 포트) 의 데이터를 받아오도록 frontend를 만드는 프로젝트를 진행하고 있습니다. 이 프로젝트는 NFT를 발행해주는 사이트를 만드는 것이 목표인데요. 만약 올려주신 drizzle-dapp으로 backend(API 서버)와 연결하는 back을 만들려면 package.json의 main을 truffle-config.js로 해도 괜찮을까요? 그게 아니라면 프록시서버를 따로 두지 않고 react-node 가 proxy로 설정되어 있는 상태로 NFT 거래가 가능하게 만들려면 truffle 을 어떻게 사용해야 할지 조언 해주실 수 있을까요...? 강의 내용과 맞지 않는 내용 올려서 죄송합니다.
-
미해결리액트로 나만의 블로그 만들기(MERN Stack)
몽고db 사이트가 많이 바뀌어서
몽고db 사이트가 많이바뀌어서 cluster 화면이 너무많이바뀌어서 강의를 알아들을수없습니다.
-
미해결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 객체도 콘솔에 찍어서 보았으나 값은 정상적으로 있는데.. 왜 이럴까요 강사님 ㅠㅠ..
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
콜백함수가 헷갈려서 질문 드립니다!
index.js에서 user.comparePassword를 호출할 때 req.body.passwod로 비밀번호를 인자로 전달하고 뒤에 err, isMatch는 comparePassword 메소드에서 cb(err)과 cb(null, isMatch)로 받아와서 비밀번호가 틀렸습니다 쪽으로 넘어가는 것 같은데 제가 이해한 게 맞을까요...??
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
Django 로 이용한 머신러닝/딥러닝 서비스
안녕하세요 강사님 퀄리티 높은 강의와 디테일좋은 강의 감사드립니다. 머신러닝에도 관심이 있어 공부를 하던와중에 내가직접 서비스를 하려면 백엔드의 지식도 필요할듯하여 감사하게 강의를 듣고있습니다. 머신러닝/딥러닝 서비스를 사용하기위한 백엔드 서비스가 Django 가 좋은것같은데 현업에서도 많은 사용을 하고있나요? (아마 강사님께서도 많은 컨설팅을 해주셔서 아실거라 생각이 들어 질문을 드립니다.) 딥러닝 모델을 웹에서 돌리기위해서는 병렬처리?가 필요할듯한데 Django 에서는 이러한 부분에대한 솔루션이 있는지 또한 궁금합니다. 감사합니다.