inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

비동기문제

미해결

프로젝트로 배우는 React.js

강의에서는 toast가 비동기적으로 실행되는것을 해결하기 위해 useRef를 활용했는데 혹시 async나 promise로도 해결이 가능한건가요?

  • react
  • es6
  • redux
댓글 1 좋아요 1 조회수 320

(에러) volume이 작동하지 않아 server.js 업데이트 되지 않을때

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

윈도우 기준으로 작성했습니다. server.js를 변경해서 도커를 다시 실행해도 변경된 코드가 반영되지 않은 문제를 확인함. 도커 컨테이너 내부 server.js를 확인하기 위해 아래 명령어로 컨테이너에 진입 docker exec -it 컨테이너아이디 sh server.js 파일을 읽기 위해 아래 명령어를 입력함 nano server.js 하지만 아래와 같은 출력이 발생하면서 파일 읽기에 실패함 아래 명령어들을 입력해 해결 apt-get update apt-get install nano nano 설치완료 후 server.js를 읽으니 아래와 같이 변경전 코드가 확인됨: 1) 변경전 res.send('Hello Word'); 2) 변경후 res.send('zxzzzzz'); 3) 도커 컨테이너에서 확인한 코드 도커 명령어 를 완벽히 이해하지 못한 상태 로 본 글을 작성했습니다. 따라서 부족한 부분이 있을 수 있습니다. 다음 강의를 위해 우선 기능이 작동하는데 초점 을 맞췄다는 점 참고 부탁드립니다. 명령어 변경: docker run -d -it -p 5000:3200 -v "/$(pwd)/server.js:/usr/src/app/server.js" joykim93/nodejs:latest 도커 컨테이너에서 server.js 파일 확인 참고: https://docs.docker.com/storage/bind-mounts/ https://cloudkul.com/knowledgebase/nano-command-not-found-docker/ https://itzone.tistory.com/610

  • docker
  • github
  • 도커
  • docker
  • volume
  • aws
  • cicd
  • 데이터 엔지니어링
  • travis-ci
김기쁨 댓글 1 좋아요 1 조회수 533

playground api-docs 질문

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

playground에서 api-docs가 강의에 있는 docs랑 다릅니다 같게 할 방법이 있을까요?

  • seo
  • react
  • graphql
  • nodejs
  • Next.js
cheolung 댓글 2 좋아요 0 조회수 446

DB 연결 성공 후 테이블 까지 만들었습니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

그런데 테이블을 선택해서 코드를 보려면 자꾸 workbench가 팅겨서 꺼집니다 ㅠㅠ 코드를 깃허브에 있는 class형 함수를 긁어서 사용해서 문제가 되는걸까요..?ㅠㅠ 아래는 오류창입니다..

  • redux
  • nodejs
  • react
  • express
  • Next.js
hyuri 댓글 2 좋아요 1 조회수 557

HistoryListView 구현 시 KeywordListView 상속 받는 것에 관련해 문의드립니다.

해결됨

[React 1부] 만들고 비교하며 학습하는 React

안녕하세요. 강사님께서 강의에서 HistoryListView 클래스를 작성하실 때 KeywordListView를 상속 받아서 작성하셨는데요. 실무에서도 이와 같이 비슷한(동일한 수준의) 클래스 중 하나를 먼저 구현하고 이를 상속 받아 다른 클래스를 만드는 경우가 흔히 있나요? 저는 아래와 같이 공통의 기능을 갖고 있는 또 다른 클래스 (ex. ListView)를 만들고, 각 클래스들(ex. KeywordListView, HistoryListView)이 이 공통의 클래스를 상속받는 것이 좋을 것이라고 생각했었거든요. KeywordListView -> ListView -> View HistoryListView -> ListView -> View 강사님께서 사용하신 방법 대로 하면 기존의 코드를 최대한 활용할 수 있다는 장점은 있지만 서로 동일한 수준의 클래스가 서로 상속을 받게 되는 것 같아서요.

  • react
  • MVC
JIYEON KIM 댓글 1 좋아요 -2 조회수 391

사가 모든 설정 후 로그인시 오류

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

강사님 모든 코드를 수정한 후 로그인하려고 하는데 아이디, 비밀번호 입력 후 누르면 로그인이 되지 않습니다. 콘솔창에 에러도 나타나지 않아서 어디가 틀렸는지 모르겠네요. 몇개파일의 코드 같이 올려드립니다. 아래는 로그인 안되는 화면캡처본입니다. LoginForm.js import React, { useCallback, useMemo } from "react"; import Link from "next/link"; import { Form, Input, Button } from "antd"; import styled from "styled-components"; import useInput from "../hooks/useInput"; import { useDispatch, useSelector } from "react-redux"; import { loginRequestAction } from "../reducers/user"; const FormWrapper = styled(Form)` padding: 15px; `; const LoginForm = () => { const dispatch = useDispatch(); const { isLoggingIn } = useSelector((state) => state.user); const [id, onChangeId] = useInput(""); const [password, onChangePassword] = useInput(""); const style = useMemo(() => ({ marginTop: 10 }), []); const onSubmitForm = useCallback(() => { console.log(id, password); dispatch(loginRequestAction({ id, password })); }, [id, password]); return ( <FormWrapper onFinish={onSubmitForm}> <div> <label htmlFor="user-id">아이디</label> <Input name="user-id" value={id} onChange={onChangeId} required></Input> </div> <div> <label htmlFor="user-password">비밀번호</label> <Input name="user-password" value={password} onChange={onChangePassword} required ></Input> </div> <div style={style}> <Button type="primary" htmlType="submit" loading={isLoggingIn}> 로그인 </Button> <Link href="/signup"> <a>회원가입</a> </Link> </div> </FormWrapper> ); }; export default LoginForm; reducers-user.js export const initailState = { isLoggingIn: false, // 로그인 시도중 - 로딩창을 띄우기위해 isLoggedIn: false, isLoggingOut: false, // 로그아웃 시도중 me: null, signUpDate: {}, loginData: {}, }; // 로그인 액션 create export const loginRequestAction = (data) => { return { type: "LOG_IN", data, }; }; export const logoutRequestAction = () => { return { type: "LOG_OUT", }; }; const reducer = (state = initailState, action) => { switch (action.type) { case "LOG_IN_REQUEST": console.log("reducers login"); return { ...state, isLoggingIn: true, }; case "LOG_IN_SUCCESS": return { ...state, isLoggingIn: false, isLoggedIn: true, me: { ...action.data, nickname: "가나다" }, }; case "LOG_IN_FAILURE": return { ...state, isLoggingIn: false, isLoggedIn: false, }; case "LOG_OUT_REQUEST": return { ...state, isLoggingOut: true, }; case "LOG_OUT_SUCCESS": return { ...state, isLoggingOut: false, isLoggedIn: false, me: null, }; case "LOG_OUT_FAILURE": return { ...state, isLoggingOut: false, }; default: return state; } }; export default reducer; sagas-user.js import { all, fork, delay, put, takeLatest } from "redux-saga/effects"; import axios from "axios"; function loginAPI(data) { return axios.post("/api/login", data); // 서버에 요청 } function* login(action) { try { console.log("saga login"); yield delay(1000); // 비동기 요청 대신수행 // const result = yield call(loginAPI, action.data); yield put({ type: "LOG_IN_SUCCESS", data: action.data, }); } catch (err) { yield put({ type: "LOG_IN_FAILURE", data: err.response.data, }); } } function logoutAPI() { return axios.post("/api/logout"); // 서버에 요청 } function* logout() { try { yield delay(1000); // const result = yield call(logoutAPI); yield put({ type: "LOG_OUT_SUCCESS", }); } catch (err) { yield put({ type: "LOG_OUT_FAILURE", data: err.response.data, }); } } function* watchLogIn() { yield takeLatest("LOG_IN_REQUEST", login); } function* watchLogOut() { yield takeLatest("LOG_OUT_REQUEST", logout); } export default function* userSaga() { yield all([fork(watchLogIn), fork(watchLogOut)]); } configureStore.js import { applyMiddleware, createStore, compose } from "redux"; import createSagaMiddleware from "redux-saga"; import { createWrapper } from "next-redux-wrapper"; import { composeWithDevTools } from "redux-devtools-extension"; import reducer from "../reducers"; import rootSaga from "../sagas/index"; const configureStore = () => { const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware]; const enhancer = process.env.NODE_ENV === "production" ? compose(applyMiddleware(...middlewares)) : composeWithDevTools(applyMiddleware(...middlewares)); const store = createStore(reducer, enhancer); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === "development", }); export default wrapper;

  • nodejs
  • redux
  • react
  • express
  • Next.js
뽀개즈아 댓글 3 좋아요 0 조회수 694

daily temperatures 문제 질문

미해결

코딩테스트 [ ALL IN ONE ]

안녕하세요! Leetcode daily temperature 문제 해설을 보다 질문이 생겨서 남깁니다! while 문으로 stack을 돌면서 대소 비교를 하는데, 여기서의 시간복잡도가 O(n)이 될 걱정은 안해도 되나요? 어렴풋이 생각하기에, stack에 temperatures의 원소가 들어가기 때문에 n개의 원소가 들어갈 것이고, for문으로 길이가 n인 temperatures를 돌면 결과적으로 worst case로 O(n^2)이 될 수도 있지 않나 ... 라는 생각이 들었습니다. 시간복잡도 개념이 아직 부족해서 헷갈리는 것 같은데 제가 어떤 부분을 간과했을까요?

  • python
  • algorithm
  • 코테 준비 같이 해요!
강욱 댓글 1 좋아요 5 조회수 533

Error: 'app.router' is deprecated!

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

강의와 같은 코드로 도커를 실행하면 아래와 같은 에러가 발생했습니다. Error: 'app.router' is deprecated! 해당 에러는 아래와 같이 코드를 변경해주시면 해결 가능합니다. 변경 전 코드: app.router.get('/', (req, res) => { res.send('Hello World');}) 변경 후 코드: app.get('/', (req, res) => { res.send('Hello World');})

  • deprecated
  • github
  • nodejs
  • docker
  • aws
  • 도커
  • docker
  • cicd
  • travis-ci
  • 데이터 엔지니어링
김기쁨 댓글 1 좋아요 0 조회수 410

건의사항

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

제가 잘못 본건지는 모르겠지만, Node.js API구현 중 퍼사드 패턴 47:31초에서 function getToken() { const myconunt =6 if(mycount === undefined){ console.log("에러발생!!! 갯수를 제대로 입력해주세요!!!") return ~~~ } 좌측 인강화면을 보시면 01-04-token-count-api-facade 폴더에 들어있는 index.js파일에서 function getToken() 함수에서 매개변수를 지우고, const mycount = 6 으로 대체하였습니다. 하지만, 우측 노션에 학습자료 퍼사드 패턴에서는 function getToken(count) { ~~} 라고 해서 count매개 변수가 존재합니다. count를 여전히 매개변수로 사용하고 있습니다. 즉 "노션에 있는 자료가 수정되어야 한다고 생각합니다." 노션 자료 중 호출하는 부분에서 createTokenOfPhone('01012345678', 6); 매개변수 6도 삭제되어야 합니다. "REST-API 실습 강의"에서 postman으로 학습시 "휴대폰 번호 전송"이 안되서 순간적으로 당황했습니다. 확인하시고, 답글 달아주시면 감사하겠습니다. 해당강의는 Node.js API구현 중 퍼사드 패턴 47:31초입니다. 노션은 학습 자료 / 퍼사드 패턴 입니다.

  • tdd
  • nodejs
  • rest-api
  • javascript
  • docker
  • express
  • NestJS
똑같이썼는데안돼 댓글 3 좋아요 1 조회수 664

React 18 버전으로 업그레이드

미해결

웹 게임을 만들며 배우는 React

안녕하세요, 제로초님. react 강의 잘 듣고 있습니다. ReactDOM.render(<LikeButton />, document.querySelector("#root")); 이 코드는 실행되고, ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton />); 이 코드가 안되길래 package.json 에서 react 버전 확인해보니 17이더군요! 구글링 해서 찾은 걸로 터미널에 npm install react@latest react-dom@latest 쳐서 최근버전 설치했는데 변경된 게 없어서 질문드립니다. 감사합니다.

  • react
조유빈 댓글 2 좋아요 0 조회수 1275

수업중 나온 깃허브 저장소가 없는 이유

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

수업중 나온 깃허브 저장소가 없는 이유가 궁금합니다. 현재 스크린샷처럼 되어 있는 주소가 없어요

  • NestJS
  • rest-api
  • javascript
  • express
  • docker
  • tdd
  • nodejs
김형 댓글 1 좋아요 0 조회수 475

강의자료 부탁드립니다

미해결

프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)

안녕하세요 선생님 강의자료 부탁드립니다 b_9108@naver.com 입니다 감사합니다

  • python
댓글 1 좋아요 0 조회수 287

동영상이 흐릿하게 나옵니다

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 넷플릭스 실습을 하면서 iframe을 사용해 유튜브에서 동영상이 나오게 하는거 까지는 완료가 되었습니다. 그런데 재생버튼을 누르고 영상이 시작되면 그림처럼 흐릿하게 나오는데 왜 그런걸까요?

  • react
  • typescript
  • tdd
  • redux
  • Next.js
김규혁 댓글 2 좋아요 1 조회수 676

질문이 있습니다!

해결됨

풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기

4분 21초 에 나오는 아래 코드가 이해가 안됩니다! const startEdit = (index:number) => () => setEditingIndex(index) 제가 이해한 부분은 startEdit은 index를 매개변수로 받아서 () => setEditingIndex(index) 함수를 반환하고 있다는 거로 알고 있는데.. 왜 그런지 이해가 잘 안갑니다.. 개인적인 생각! admin 수정 부분 때문에 props를 3개나 전달해주고 있는 상황인데 recoil로 전역 상태관리를 하면 되는 부분일까요? 만약에 recoil로 상태관리를 하게 되면 컴포넌트에서 boolean값을 비교하기 위해 필요한 idx를 어떻게 넘겨주는건지 궁금합니다

  • firebase
  • graphql
  • react
bj2525 댓글 1 좋아요 0 조회수 342

16분경 onChangeText에 useInput을 사용해도 되지 않나요?

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

[text, setText]와 onChangeText를 만들어놓은 훅 useInput을 사용해서 코딩해도 되지 않나요? 그렇게 하지 않은 이유가 긍금합니다!

  • nodejs
  • redux
  • express
  • react
  • Next.js
뽀개즈아 댓글 1 좋아요 0 조회수 365

정밀도를 100%로 만드는 법

미해결

[개정판] 파이썬 머신러닝 완벽 가이드

1명의 확실한 P 예측과 나머지를 모두 N으로 예측했을 때 정밀도가 100%가 된다고 말씀하셨습니다. 이 경우에 재현율도 1 / 1+0 해서 100%되지 않나요?

  • python
  • 머신러닝 배워볼래요?
  • 통계
Munju Ham 댓글 1 좋아요 0 조회수 300

도커 파일로 도커 이미지 만들기 - failed to solve with fronted dockerfile.v0

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

강의에서 제공된 명령어 docker build ./ 입력했을 때, 아래와 같은 에러가 발생했습니다. 구글링을 통해 아래 명령어를 찾아 실행했고 도커 이미지가 정상적으로 생성되었습니다. 1) 파일명 변경 : DockerFile -> DockerFile.dockerfile (변경하지 않아도 괜찮을꺼 같습니다) 2) 명령어 : docker build . -f DockerFile.dockerfile 3) 터미널 출력 : 4) 출처 : https://stackoverflow.com/questions/64985913/failed-to-solve-with-frontend-dockerfile 더 좋은 방안이 있으면 공유 부탁드립니다. 감사합니다.

  • docker
  • 도커이미지
  • travis-ci
  • 도커파일
  • cicd
  • 데이터 엔지니어링
  • github
  • docker
  • aws
김기쁨 댓글 1 좋아요 1 조회수 3570

error installing "core" component MSI.

미해결

장고 설계철학으로 시작하는 파이썬 장고 입문

안녕하세요 강사님. 어제 시작한 사람입니다! 다름이 아니라, 개발 환경 구축 중에 터미널에서 파이썬 버전 설치 단계가 계속 에러가 뜹니다. PS C:\Users\ped> pyenv install 3.11.1 :: [Info] :: Mirror: https://www.python.org/ftp/python :: [Installing] :: 3.11.1 ... :: [Error] :: error installing "core" component MSI. :: [Error] :: couldn't install 3.11.1 다른 버전도 모두 마찬가지입니다! 공장 초기화를 해도 이렇게 뜹니다.. ++ 그래서 파이썬 공식 홈페이지에 가서 파이썬을 수동 설치했습니다. 이후 다시 따라가려니(글로벌 버전 지정), 또 에러가 뜹니다. PS C:\Users\ped> pyenv global 3.11.1 pyenv specific python requisite didn't meet. Project is using different version of python. Install python '3.11.1' by typing: 'pyenv install 3.11.1' 어떻게 해야 할 까요.. 진도를 못 나가서 답답합니다 ㅠㅠ

  • django
  • python
kjkim 댓글 2 좋아요 0 조회수 1674

크롬 개발자도구로 확인했을 때 key값이 20부터 나오는 경우

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

해당 강의 3분 30초 이후부터 컴포넌트 창에 들어가서 DiaryList 컴포넌트의 DiaryItem들을 확인하는 장면이 나와있습니다. 강사님의 화면에서는 키값들이 0부터 잘 출력되지만 저는 아래와 같이키값들이 20부터 39까지 출력됩니다. useEffect를 건들이기 전 일기를 추가하는 부분에서는 키값들이 0부터 잘 출력되는 것을 보아 이번 강의에서 건들인 부분이 문제인것 같아 강사님이 올려주신 App.js 코드를 복붙하여 실습해보아도 해당 현상이 일어납니다. 그 이유를 알 수 있을까요?

  • react
  • nodejs
  • javascript
이선호 댓글 1 좋아요 3 조회수 664

TabLabel의 Key 관련 문의드립니다.

해결됨

[React 1부] 만들고 비교하며 학습하는 React

안녕하세요. 강사님께서 TabLabel을 아래와 같이 작성하셨는데, Key에 []가 들어가 있는 경우는 처음 보아서요. const TabLabel = { [TabType.KEYWORD]: "추천 검색어", [TabType.HISTORY]: "최근 검색어", }; Key를 배열로 선언하신 것인가요? 이와 관련된 문법은 어디서 찾아볼 수 있을까요?

  • react
  • MVC
JIYEON KIM 댓글 1 좋아요 0 조회수 418

인기 태그

인프런 TOP Writers

주간 인기글