묻고 답해요

502에러

해결됨

만들면서 배우는 리액트 : 기초

말씀해주신 소스코드를 다운로드 받고 Live Server를 켰는데 502 에러가 납니다 어떻게 할까요?

• react
• javascript

useQuery refetch

미해결

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

제로초님 제가 react-query useQuery Hook을 사용하여 데이터를 받아왔습니다. 이 데이터 값들을 버튼 onClick 함수를 만들어서 버튼을 클릭할 때마다, useQuery api 요청을 콜을 해 주고 싶습니다. 그래서 찾아보니 useQuery refetch 를 알게되었고, refetch 함수를 onClick 함수에 넣어주었는데, 동작을 하지 않네요 ㅠㅠ. useQuery api를 버튼을 클릭할 떄 마다 api call 을 해주고 싶은데 어떻게 해줘야 할까요...

• Next.js
• express
• nodejs
• redux
• react

실무에서도 styled component를 해당 컴포넌트에 다 작성하나요?

해결됨

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

antd같은 ui 컴포넌트를 사용안하면 한 컴포넌트 안에서 styled component가 차지하는 코드량이 상당히 많을 것 같은데 실무에서도 styled component의 코드길이에 상관없이 해당 컴포넌트에 다 적는지 아니면 따로 폴더에 분리해서 import하는지 궁금합니다.

• redux
• nodejs
• react
• express
• Next.js

PyCharm으로 본강의를 구동가능한가요..?

해결됨

파이썬 동시성 프로그래밍 : 데이터 수집부터 웹 개발까지 (feat. FastAPI, async, await)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강사님 안녕하세요~! 6번째 챕터 FastAPI로 웹크롤링하는 것을 잘 보고 있습니다!! 궁금한 점이 VS Code로 강의를 진행하셨는데, 혹시 파이참으로도 구동이 가능한가요..? 답변 꼭 부탁드리겠습니다~!^^

• pycharm
• python
• vscode
• 동시성
• FastAPI

Ex3번 주석

미해결

모두를 위한 파이썬 : 필수 문법 배우기 Feat. 오픈소스 패키지 배포 (Inflearn Original)

# Ex3 c = 40 def foobar(): # c = c + 10 # UnboundLocalError # c = 10 # c += 100 print('Ex3 > ', c) foobar() 여기서 c = 10은 값 수정이 아닌 값 할당으로 내부에서 10 그대로 출력하기 때문에 문제없지않나요??

• python

useEffect mount 문의

해결됨

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

안녕하세요. 강사님, 강의 잘 듣고 있습니다. 다름이 아니라, useEffect 부분 따라하고 있는데 다르게 작성한 부분이 없는데 useEffect 부분이 항상 2번씩 호출되서 콘솔에 찍힙니다. 다른 예제 할때도 이게 계속 반복되는데 혹시 왜 그런걸 까요?

• nodejs
• react
• javascript

개발자 도구 에러메세지 표기 화면 문의

해결됨

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

안녕하세요. 이제 막 React를 시작한 초보 개발자 입니다. 강의 11분에 리스트를 undefined 했을때 어떤 부분에서 에러가 나는지 강사님과 같은 화면을 보고싶으면 어떻게 해야하나요? 저는 위와 같은 화면이 뜨지 않고 빈 화면만 표기가 됩니다. 그리고 콘솔에 에러 표기도 DiaryList.js 가 아닌 bundle.js 로 표기가 되는데ㅠ 강사님처럼 상세 에러 화면을 보려면 어떻게 해야 하나요? 궁금합니다!

• react
• javascript
• nodejs

py manage.py runserver 오류

미해결

cmd에서 파이썬 관련 명령어 입력시 python이라는 문구만 출력되고 실행이 되지않습니다. 왜이러는건가요??

• django
• cmd
• python

디폴트 프롭스 관련 부분 질문드립니다.

해결됨

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

안녕하세요. 강의 잘 보고 있습니다. 다름 아니라 defaultProps 부분과 관련해서 여쭤보고 싶은 게 있어서요. 지금 강의에서는 props가 undefined으로 올 때 등을 대비해서 defaultProps을 지정해주시는데, 혹시 이 방법 말고 diaryList에 바로 디폴트 값(빈 배열)을 할당하면 안 될까요? (ex. {diaryList = []}) => {...} ) 기본값 매개 변수로 지정할 수도 있을 것 같아서 여쭤봅니다. 아니면 혹시 차이점이 있을까요? 감사합니다!

• javascript
• nodejs
• react

onCreate emotion undefined 문의

해결됨

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

안녕하세요. 강의 보면서 기초 개념 다지는 중인 학생입니다 :) 다름이 아니라 일기 작성 시 제목과 내용 본문 입력 후, 점수를 별도로 선택하여(이벤트 발생) 저장하면 데이터가 잘 넘어가는데, default로 설정한 점수에서 점수를 별도로 선택하지 않고 제목과 내용만 입력 후 저장하면 데이터가 넘어가지 않은 채 undefined로 콘솔에 확인이 됩니다.ㅠㅠ 간략하게는 제목, 내용, 점수 모두 지정해서 저장하면 잘 나옴. A 제목, 내용만 쓰고 디폴트 점수로 저장하면 점수가 undefined로 됨. 입니다! B 어디가 문제인지 하루종일 들여다봐도 문제를 찾을 수가 없어서 질문드려요ㅠㅠ

• react
• javascript
• nodejs

axios Unauthorized 에러 관련 질문 드립니다.

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

강사님~ 안녕하세요~~!! 강의 수강 중 - Suggestion 목록 API 및 화면 구현 - useAxios 훅을 통한 보다 손쉬운 조회 API 요청 해당 강의의 실습 중 에러가 생겨서 질문을 드립니다. 먼저, 아래는 SuggestionList.js 의 코드입니다. 아래는 Suggestion.js의 코드입니다. 리액트 페이지에서 suggetstions for you 부분에 친구 목록이 뜨지 않고, 다음과 같은 error가 보여집니다. (이전에는 되었던 것 같은데 컴퓨터를 재부팅 한 이후로 되지 않는 것 같습니다...ㅠㅠ) 해결을 어떻게 해야할 지 강사님의 조언을 구하고 싶습니다..! 그럼 미리 감사 인사를 드립니다 ㅠㅠ !!

• axios
• docker
• react
• react
• 401
• unauthorized
• python
• django

csv 파일로 저장까지 되는데 한칸에 한글자씩 나옵니다

미해결

[신규 개정판] 이것이 진짜 크롤링이다 - 기본편

현재 m1맥북 사용중인데 csv 파일로 저장할경우 셀 한칸에 한글자씩 입력이되고 데이터가 neme, price, link 가 아닌 name price link name price link 이렇게 아래로 데이터가 저장됩니다. 어떻게 해야할까요?

• 웹-크롤링
• python

안녕하세요~ 질문드립니다

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

안녕하세요 캐시수업도 매우 유익하네요 ... 수업듣고 사이트를 보다가 궁금한점이 생겼는데요~ 질문1. HTML 상단 메타태그에 <meta http-equiv="Cache-Control" content="no-cache"> 를 주면 서버에서 설정하지 않아도 예제에서 사용한거랑 같이 해당 HTML이 변경될 때만 다운로드할까요 ? (이러면 request header의 캐시컨트롤에 노캐시가 붙나요?) 질문2. 예제에선 HTML을 제외하고 CSS JS Image의 max-age를 길게주고 소스 변경시에만 hash를 다르게 붙여 변경된 리소스만 새 파일을 다운로드 하게 했는데요 HTML CSS JS Image를 모두 no-cache로 주면 어떻게 작동할까요 ?

• devtools
• react

왜 저한테는 답변 안해주시는거죠;;

미해결

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

https://www.inflearn.com/questions/499562 이 글에 저만 빼고 답변해주시는데 이유가 뭘까요.

• 머신러닝 배워볼래요?
• 통계
• python

궁금한점이 있습니다.

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

좋은 강의 너무 잘 듣고 있습니다. 번외지만 배포에대해 궁금한점이 있습니다. 지금 강의 예제로 사용하는 프로젝트와 같이 서버와 클라이언트 코드가 같이 있는 경우에는 어떻게 배포해야하는지 궁금합니다. 개발할때는 npm run serve 와 같이 수동으로 서버를 켜서 작동시킬 수 있지만 그렇지 않을때는 어떻게 작동시킬 수 있나요? 실제로는 서버용 레포, 클라용 레포 따로 개발해서 배포해야하는 건가요?

• react
• devtools

RPN conv 연산 질문

미해결

[개정판] 딥러닝 컴퓨터 비전 완벽 가이드

안녕하세요. 먼저 기본적인 질문 드리는 것 같아서 죄송합니다.. 6:39에서 40x50x512 와 1x1x9이 연산핸서 어떻게 40x50x9가 나오는건가요? 채널이 어떻게 줄었는지 이해가 안갑니다.. 미리 감사드립니다.

• 머신러닝 배워볼래요?
• 컴퓨터-비전
• 딥러닝
• tensorflow
• keras
• python

파일입출력 영상

미해결

파이썬 무료 강의 (기본편) - 6시간 뒤면 나도 개발자

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 파일입출력 영상 코드대로 썼는데 계속 오류가 떠요 다른 질문에 답변하신거 보니까 버전이 달라서 그렇다고 하셨는데 제거는 최신버전이거든요... 3.몇이상 인데 만약에 버전이 다른거면 뭐라고 입력해야 하나요

• python

강의자료

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

강사님 강의자료는 어디서 받을 수 있나요?? 아무리 찾아봐도 없어서 질문드립니다.

• devtools
• react

"더미데이터와 포스트폼 만들기" 강의순서 관련 코드 작성 뒤, 로그인에서 게시판으로 넘어가지 않는 문제로 질문 드립니다!

해결됨

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

안녕하세요. 제로초님의 강의에 큰 도움을 받고 있음에 감사의 말씀을 드립니다. 여러 검색결과도, 질문답변도, 해당강의 반복재생으로 찾아보았으나 해결치 못한 부분이 있어 이렇게 직접 질문을 하게 됐네요! [ 마주한 문제점 & 상황 ] 은 다음과 같습니다. 1. ( 이전 상황) 로그인폼(Id, Pwd)에 텍스트를 입력해 "로그인" 버튼을 누르면 정상적으로 로그인이 됐고, Redux 역시 정상작동해 개발자도구에서 확인이 가능했습니다. 2. ( 현재 상황) 섹션3(Redux) "더미데이터와 포스트폼 만들기" 강의를 들으며 문제에 마주했습니다. 3. ( 더미데이터와 포스트폼 만들기 강의 후 ) 잘 넘어가던 로그인 화면에서 데이터는 넘어가 콘솔에 찍히지만, 화면 페이지는 게시판으로 넘어가지 않는 상황에 직면했습니다. [ 콘솔에 찍히는 Error ] 는 다음과 같습니다. [정상적으로 넘어가는 로그인 데이터] -> 그러나 로그인이 되지 않고 화면이 넘어가질 않습니다! [ 소스코드 ] 1. package.json { " name " : " react-nodebird-front " , " version " : " 1.0.0 " , " description " : "" , " main " : " index.js " , " scripts " : { " dev " : " next -p 3060 " , " build " : " next build " }, " author " : "jj " , " license " : " ISC " , " dependencies " : { " @ant-design/icons " : " ^4.7.0 " , " antd " : " ^4.19.0 " , " next " : " ^9.5.5 " , " next-redux-wrapper " : " ^6.0.2 " , " prop-types " : " ^15.8.1 " , " react " : " ^16.14.0 " , " react-dom " : " ^16.14.0 " , " react-redux " : " ^7.2.8 " , " redux " : " ^4.1.2 " , " redux-devtools-extension " : " ^2.13.9 " , " styled-components " : " ^5.3.3 " }, " devDependencies " : { " eslint " : " ^8.10.0 " , " eslint-plugin-hooks " : " ^0.4.2 " , " eslint-plugin-import " : " ^2.25.4 " , " eslint-plugin-react " : " ^7.29.3 " } } 2. LoginForm.js 파일 import React , { useState , useCallback , useMemo } from ' react '; import { Form , Input , Button } from ' antd '; import Link from ' next/link '; import styled from ' styled-components '; import { useDispatch , useSelector } from ' react-redux '; import useInput from " ../hooks/useInput "; import { loginAction } from ' ../reducers/user '; const ButtonWrapper = styled . div ` margin-top: 10px; ` ; const FormWrapper = styled (Form) ` padding: 10px; ` ; const LoginForm = ({ setIsLoggedIn }) => { const dispatch = useDispatch () ; const [ id , onChangeId ] = useInput ( '' ) ; const [ password , onChangePassword ] = useInput ( '' ) ; const onSubmitForm = useCallback ( () => { console . log ( id , password ) ; dispatch ( loginAction ( { id , password } )) ; }, [ id , password ]) ; return ( < FormWrapper onFinish ={ onSubmitForm } > < div > < label htmlFor = " user-id " > 아이디 </ label > < br /> < Input name = " user-id " value ={ id } onChange ={ onChangeId } required /> </ div > < div > < label htmlFor = " user-password " > 비밀번호 </ label > < br /> < Input name = " user-password " type = " password " value ={ password } onChange ={ onChangePassword } required /> </ div > < ButtonWrapper > < Button type = " primary " htmlType = " submit " loading ={ false } > 로그인 </ Button > < Link href = " /signup " >< a >< Button > 회원가입 </ Button ></ a ></ Link > </ ButtonWrapper > </ FormWrapper > ) ; } export default LoginForm ; 3. index.js import React from ' react '; import { useSelector } from " react-redux "; import AppLayout from " ../components/AppLayout "; import PostForm from ' ../components/PostForm '; import PostCard from ' ../components/PostCard '; const Home = () => { const { isLoggedIn } = useSelector ( ( state ) => state . user ) ; const { mainPosts } = useSelector ( ( state ) => state . post ) ; return ( < AppLayout > { isLoggedIn && < PostForm /> } { mainPosts . map ( ( post ) => < PostCard key ={ post . id } post ={ post } /> ) } </ AppLayout > ) ; } export default Home ; 4. configureStore.js import { createWrapper } from ' next-redux-wrapper '; import { applyMiddleware , compose , createStore } from ' redux '; import { composeWithDevTools } from ' redux-devtools-extension '; import reducer from ' ../reducers '; const configureStore = () => { const middlewares = [] ; const enhancer = process . env . NODE_ENV === ' production ' ? compose ( applyMiddleware ( ... middlewares )) : composeWithDevTools ( applyMiddleware ( ... middlewares )) ; const store = createStore ( reducer , enhancer ) ; return store ; }; const wrapper = createWrapper ( configureStore , { debug : process . env . NODE_ENV === ' development ' , } ) ; export default wrapper ; 5. post.js // [ initialState ] export const initialState = { mainPosts : [ { id : 1 , User : { id : 1 , nickname : ' jj ' , }, content : ' 첫 번째 게시글 #해시태그 #익스프레스 ' , Images : [ { src : ' https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832 ' , }, { src : ' https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832 ' , }, { src : ' https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNjExMjFfMjM2%2FMDAxNDc5NjY5MjEyOTEz.13R8uiaA0T8rJnLPJICAib4oVtrAzA424jbDMC9a3ckg.m0QoHt-5MdR0MH501npcL8aJof3Eu1h_9Zp0ceNm8e4g.PNG.guri4you%2F%25BB%25F6%25B1%25F2_%25BD%25C9%25B8%25AE%25C5%25D7%25BD%25BA%25C6%25AE1.png&type=sc960_832 ' , } ] , Comments : [ { User : { nickname : ' jj4 ' , }, content : ' redux를 학습 중입니다. ' , }, { User : { nickname : ' jj3 ' , }, content : ' 다음은 sage를 학습 예정임. ' , } ] } ] , imagePaths : [] , postAdded : false , } const ADD_POST = ' ADD_POST ' ; export const addPost = { type : ADD_POST , } const dummyPost = { id : 2 , content : ' 더미데이터입니다. ' , User : { id : 1 , nickname : ' jj1 ' , }, Images : [] , Comments : [] , }; const reducer = ( state = initialState , action ) => { switch ( action . type ) { case ADD_POST : return { ... state , mainPosts : [ dummyPost , ... state . mainPosts ] , postAdded : true , }; default : return state ; } }; export default reducer ; 6. PostForm.js import React , { useCallback , useState , useRef } from ' react '; import { Form , Input , Button } from ' antd '; import { useSelector , useDispatch } from ' react-redux '; import { addPost } from ' ../reducers/post '; const PostForm = () => { const { imagePaths } = useSelector ( ( state ) => state . post ) ; const dispatch = useDispatch () ; const imageInput = useRef () ; const [ text , setText ] = useState ( '' ) ; const onChangeText = useCallback ( ( e ) => { setText ( e . target . value ) ; }, []) ; const onSubmit = useCallback ( () => { dispatch ( addPost ) ; setText ( '' ) ; }, []) ; const onClickImageUpload = useCallback ( () => { imageInput . current . click () ; }, [ imageInput . current ]) ; return ( < Form style ={{ margin : ' 10px 0 20px ' }} encType = " multipart/form-data " onFinish ={ onSubmit } > < Input.TextArea value ={ text } onChange ={ onChangeText } maxLength ={ 140 } placeholder = " 어떤 신기한 일이 있었나요? " /> < div > < input type = " file " multiple hidden ref ={ imageInput } /> < Button onClick ={ onClickImageUpload } > 이미지 업로드 </ Button > < Button type = " primary " style ={{ float : ' right ' }} htmlFor = " submit " > 짹짹 </ Button > </ div > < div > { imagePaths . map ( ( v ) => ( < div key ={ v } style ={{ display : ' inline-block ' }} > < img src ={ v } style ={{ width : ' 200px ' }} alt ={ v } /> < div > < Button > 제거 </ Button > </ div > </ div > )) } </ div > </ Form > ) }; export default PostForm ; 7. PostCard.js import React from ' react '; const PostCard = () => { return ( < div > PostCard </ div > ) ; }; export default PostCard ; 8. user.js import { HYDRATE } from ' next-redux-wrapper '; // initialState 부분 const initialState = { user : { isLoggedIn : false , user : null, signUpData : {}, loginData : {}, }, post : { mainPosts : [] , } }; // [로그인] action creator export const loginAction = ( data ) => { return { type : ' LOG_IN ' , data , } }; // [로그아웃] action creator export const logoutAction = ( data ) => { return { type : ' LOG_OUT ' , } }; // reducer const rootReducer = ( state = initialState , action ) => { switch ( action . type ) { case HYDRATE : console . log ( ' HYDRATE ' , action ) ; return { ... state , ... action . payload }; case ' LOG_IN ' : return { ... state , user : { ... state . user , isLoggedIn : true , user : action . data , }, }; case ' LOG_OUT ' : return { ... state , user : { ... state . user , isLoggedIn : false , user : null, }, }; default : return state ; } }; export default rootReducer ; 다소 많은 양의 글 내용이지만, 시간이 허락되실 때 답변 주시면, 참 감사할 것 같습니다! 오늘 하루도 고생많으셨고, 이번 한 주도 파이팅입니다! 늘 양질의 강의 감사합니다 ^^

• react
• redux
• nodejs
• express
• Next.js

메일발송이 되지 않습니다 ㅠㅠ // form.save()에 대하여 질문입니다.

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

안녕하세요? 1.이전에는 됐는데, 왜 다시할때는 안되는건지 모르겠네요 ㅠㅠ 11분경에 보내시는 메일이 발송이 되지 않습니다. 다음과 같이 1이 출력되면 메일이 발송성공한 것으로 알고 있는데, 기다려 보아도 메일이 오지를 않네요 강의 후반부에 회원가입과 동시에 메일을 보내는 부분도 메일이 발송되지가 않습니다 ㅠㅠ 2. 14분경에 views.py에서 signup함수 내부에 form.save()를 signed_user = form.save()로 바꿔주시는데, form.save()라는 함수가 값들을 실질적으로 db에 저장하는 것으로 알고 잇습니다. 그러면 signed_user = form.save()로 받아주는 부분은 해당 데이터를 db에 저장하는 동시에 저장된 그 유저 인스턴스(데이터 한행)를 변수에 담는 것인가요? 좋은 강의 감사합니다

• python
• docker
• django
• react