묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 리액트 A-Z
mousedown과 touchstart에 대한 질문입니다
안녕하세요 좋은 강의 잘 듣고있습니다. 감사합니다. useOnClickOutside 함수에서 document.addEventListener("mousedown", listener); document.addEventListener("touchstart", listener); 를 이용해서 모달 창 외부를 클릭했는지 감지하는 것으로 이해했습니다. 그래서 저는 mousedown과 touchstart 대신에 document.addEventListener("click", listener) 을 써도 되지 않을까 싶어서 해봤는데 이렇게 하니까 모달창이 아예 나타나지 않더라구요. 'touchstart' 이벤트 리스너는 없어도 동일하게 동작하는 것 같은데 'click' 'mousedown' 이벤트는 어떤 차이가 있는 것인지 궁금합니다. 감사합니다.
-
미해결처음 만난 리액트(React)
styled-components를 적용하려면
styled-components를 적용하려면 꼭 스타일을 위한 component를 만든다음에 그걸로 감싸야하나요? 그렇게 사용하다보면 리액트 콤포넌트와 스타일 콤포넌트가 섞여서 헷갈리지 않을까요?
-
미해결따라하며 배우는 리액트 A-Z
[id].tsx 에서 params 빨간줄 부분 괜찮나요?
여기서 41번째줄 params 빨간줄 지나가도 괜찮나요 실행은 잘되는데 이유가 궁금합니다 undefine이라고 하는데... 잘모르겠네요
-
미해결풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
useRef를 선호하시는 이유가 궁금합니다!
지금까지 input 관리를 컴포넌트로 빼서 useCallback과 useState, onChange 메서드를 사용하여 써왔는데 useRef로 관리할 수 있다는 걸 보고 깜짝 놀랐습니다. 개인적인 선호라고 하셨지만 특별히 이유가 있을까 하여 useRef에 대해 찾아보니 useRef는 input value의 상태가 바뀌어도 리렌더링이 안 되는 이점이 있더라구요. 그렇다면 input이 많은 회원가입 같은 form을 만들 때 useRef를 사용한다면 굳이 useCallback이나 useMemo를 쓰거나 여러 개의 useState 를 만들지 않아도 될 것 같다는 생각에 이르더라구요 이러한 이점 때문에 useRef를 쓰시는 것인지 궁금합니다
-
미해결따라하며 배우는 리액트 A-Z
Requests에 들어가는 주소들은 어떤 기준으로 정해지나요??
사이트에 나와있다면 어디에 나와있는지 알려주시면 감사하겠습니다 !
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
혹시 계획하고 있으신 후속강의가 있을까요?
안녕하세요 강사님? 정말 오랜만에 질문 드립니다 ㅎㅎ 0. 우선 하나 여쭙고 싶은 게, 혹시 멘토링을 진행하시나요? -괜찮으시다면 강의외적으로 몇가지 질문을 드리고 싶어서, 혹시 인프런에서 진행되는 멘토링 처럼, 따로 어디선가 멘토링을 진행하고 계시다면 신청하고 싶어서 여쭤봅니다 ㅎㅎ 1. 혹시 후속강의가 있을까요? 해당 강의에서의 DRF의 기능들은 대체로 기본적인 몇가지 기능들에 대해서 소개해주시는 느낌이 강해서, 백엔드/DRF쪽으로 심화된 강의를 준비하시는 게 있을지 궁금합니다. 2. DRF나 장고관련해서, 강의에는 나오지 않았지만 현업에서 필요한 몇가지 학습 키워드나 책을 추천해주실 수 있으실까요? 마지막으로 감사합니다~ 선생님 강의 덕분에 부트캠프기간이나 끝나고 나서도 장고라는 프레임워크에는 늘 자신이 있더라구요. 감사인사를 꼭한번 드리고 싶었습니다! 감사합니다~
-
미해결따라하며 배우는 리액트 A-Z
banner가 여러 번 실행됩니다
https://github.com/kkyu0718/react-study/tree/main/react-netflix-clone 코드는 위에 있습니다. 일단은 app.js 가 한번 렌더링되면서 banner도 한번 렌더링 되어야하는데 이렇게 8번이 실행됩니다. 1번 때문에 실행이 안되고 있는 걸수도 있는데 useEffect() 에서의 fetchData가 실행이 되고 있지않아 Uncaught TypeError: Cannot read properties of undefined (reading 'results') 가 발생하는거 같습니다. 코드를 다시 아무리봐도 문제는 없어보이는데 혹시 어떻게 해결해야될까요?
-
미해결
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 에러가 발생했습니다.
현재 웹개발중인 초급 개발자입니다. 현재 개발이 마무리 단계에서 웹서버랑 통신?!이 안되는 듯합니다. 로컬서버에서는 오류없이 실행이 되는데 웹서버에서는 현재 실행이 안되고 있습니다. Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 라고 콘솔창에 이렇게 오류가 표시됩니다. 원인을 모르겠습니다. 어디를 수정해야하는지... 현재 apache2로 웹서버를 연동하고 있습니다.
-
미해결풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
react-query 4.0.0 버전에선 에러가 납니다
1:00 에서 return null 을 한 뒤 돌려보니 위와 같은 에러가 떠서 확인해보니, react-query: 4.0.0 과는 호환이 안 되는 것을 확인했습니다. 강사님 깃허브에서 버전 확인 후 react-query를 "^3.17.2" 으로 낮춘 뒤 돌려보니 잘 뜹니다... 4.0.0 을 사용하려면 `yarn add @tanstack/react-query`를 따로 설치 후, ` import { QueryClient, QueryClientProvider } from "@tanstack/react-query";` 이렇게 바꿔사용하라는데 이렇게 하면 맞을까요?
-
미해결따라하며 배우는 리액트 A-Z
안녕하세요 선생님~~
useEffect(() => { first return () => { second } }, [third]) useEffect를 사용할때 first는 처음 렌더링이 된후에 실행 second는 앱이 종료될때 실행되고 third는 어떠한 state가 변경될때 useEffect를 다시 실행할것인가? 로 이해를 했습니다 여기서 질문이 있는데 nav.js에서는 처음 렌더링후 우리가 스크롤을 하였을때 추가적인 렌더링이 필요하기에 useEffect로 이벤트를 만들었다 라고 이해를 하였는데 Banner.js에서는 백그라운드이미지 경로에 movie.backdrop_path를 넣는데 렌더링 되기전에 useEffect가 먼저 실행이 된것인가요? 먼저 실행이 안되면 movie안에는 아무것도 없지 않나요? 실력이 없어 질문이 일목요연하지 못한점 죄송합니다 추가로 console.log()로 찍어보니 렌더가 되고 useEffect()가 실행이 되어서 setmovie로 스테이트를 set해주고 그래서 스테이트가 바뀌니 다시 렌더가 되고 근데 문제는 처음에 렌더가 될때 movie가 비었기 때문에 에러가 떠야하는데 순서가 위와 같이 나옵니다 렌더 에러 이펙트 렌더가 맞지 않나요?
-
미해결풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
gql 백틱 안에 색깔 입혀지는 확장프로그램이 어떤건지 알 수 있을까요?
안녕하세요, 사소한 질문인데요, 백틱을 열면 오타 찾기도 힘들고 가독성이 떨어져서 강사님처럼 백틱 뒤에 색깔을 따로 입히고 싶은데 확장프로그램이 뭔지 알 수 있을까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요! useParams에서 막혀서 질문 남깁니다 ㅠㅠ
우선 웹라이브러리 파트의 Link태그 적용 강의에서 후반부에 useParams 를 사용하게 되는데, 이부분부터 무언가 오류가 발생하네요.. 1. 메인화면 들어갔을때 오류화면 2. 상품클릭했을때 콘솔로그 상품을 클릭했을때 변경된 주소까지는잘 적용 되고, useParams 를 사용하기 전까지는 정상 작동 했는데, product 폴더의 index.js 에 useParams 만 넣으면 위처럼 오류가 발생합니다 이전에 소스에서는 문제가 안생겼군요 ㅠㅠ import { useParams } from "react-router-dom"; function ProductPage() { const { id } = useParams(); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage; 오타가 있나 싶어서 소스자료 복붙해도 마찮가지여서 문의로 남깁니다... react-router-dom 설치 할때 버전을 확인 못하고 그냥 설치했다가 나중에 확인해서 5.2 버전으로 다시 설치했는데, package.json 에는 5.2버전으로 정상적으로 보여지긴 하는데 오류내용이 버전이 충돌이 나서 그런건가 싶기도 하고.. 해결 방법이 있을까요? ㅠㅠ
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
PasswordChangeForm 재정의 관련 질문
안녕하세요 강사님, PasswordChangeForm 을 재정의 하는 부분에서 질문이 있어 글 남깁니다. 1. PasswordChangeForm은 SetPasswordForm을 상속받기 때문에 clean_new_password2를 오버라이딩하여 해당 함수가 기존 대로 실행 될때 단순히 old_password와 같은지 비교하는 로직을 추가한게 맞나요? 2. clean_new_password2를 오버라이딩 할 때, super().clean_new_password2()를 하지 않고 self.cleaned_data.get('new_password2')를 하게 기존의 pw1==pw2 확인하는 로직이 사라져 버리기 때문에 문제가 생기는 것이 맞나요? (실험결과 new_pw1, new_pw2 를 다르게 넣으면 new_pw1 으로 변경이 됩니다). 즉 super()... 를 적어줘야 기존 로직을 지킬 수 있는 것이죠? 3. clean_new_password1은 새로운 함수를 정의한 것인데 clean_ 이 앞에 붙었기 때문에 PasswordChangeForm의 로직이 동작할 때 무조건 해당 함수가 실행이 되는 것이 맞나요? 이 함수가 실행되는 시점이 궁금합니다. 감사합니다.
-
미해결
styled component 오류
styled component 적용하는 거에서 Invalid hook call. 와 Cannot read properties of null 이라는 에러가 뜹니다. 버전은 "styled-component": "^2.8.0", 인데 대체 뭐가 문제일까요???
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
에러가 납니다ㅜㅜ
강의를 보며 그대로 따라했는데 const query = req.query; console.log("QUERY : ", query); 를 추가했을때 터미널에 node server.js를 하면 에러가 납니다ㅜㅜ
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
오류를 이해를 못하겠습니다.
AssertionError at /post/ The `.create()` method does not support writable nested fields by default. Write an explicit `.create()` method for serializer `instagram.serializers.PostSerializer`, or set `read_only=True` on nested serializer fields.저 오류로 프로젝트 2번 갈아 엎었는데 똑같은 곳에서 계속 막히네요.
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
선생님 안녕하세요. 렌더링 질문있습니다.
Counter 함수를 정의하고 상태가 변화하면서 리렌더링 되는지 확인하려고 console을 찍어봤는데 영상과 다르게 두 번 찍히더라구요. App.js에서 Counter 컴포넌트를 두 번 정의하지도 않았는데 console이 두 번 찍히는 경우는 어떤게 잘못된걸까요? 소스 코드는 선생님과 동일합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
Auth()를 처리하는 다른방식.
export default Auth(LandingPage, null) 저 같은 경우는 위 코드가 안먹혀서 다른 방법을 생각해봤는데요. auth 부분을 export default function _auth(option, adminRoute = null) { const navigate = useNavigate() const dispatch = useDispatch() dispatch(auth()).then((response) => { console.log(response) //로그인 하지 않은 상태 if (!response.payload.isAuth) { if (option) { navigate("/") } } else { //로그인 한 상태 if (adminRoute && !response.payload.isAdmin) { navigate("/") } else { if (option === false) { navigate("/") } } } }) } 이렇게 수정해주고.. LandingPage 기준으로 Auth(null) 이 코드를 넣어준 후 export default LandingPage 이렇게 export해주시면 정상적으로 작동합니다. 다른 페이지도 같은 방식으로 적용해주시면 돼요!
-
미해결Slack 클론 코딩[실시간 채팅 with React]
Proxy 설정 시 502 에러, [HPM] Error occurred while proxying request 에러
제로초님 안녕하세요 강의 재밌게 수강하고 있습니다! webpack.config에서 proxy 설정을 따라하던 중 에러를 마주하여 회원가입 진행을 못하고 있습니다. [진행 방법] - back 폴더 app에서 cors쪽 코드 주석처리하였습니다. 1. 백 서버 잘 띄운 상태에서 webpack.config에서 코드 수정할 때마다 프론트서버 재실행하였습니다. 2. 회원가입 진행하였습니다. 3. 아래와 같은 에러를 마주합니다. 아래 에러이미지, 작성중인 코드, package.json쪽 코드 사진 첨부합니다. 제가 봤을 땐 proxy 설정이 제대로 이루어지지 않은 것으로 보입니다. 회원가입시 api요청을 보내는 프론트 포트가 3090이고 백포트는 3095이기 때문에 cors정책에 벗어나서 위와 같은 에러가 뜨는 것이 당연하다고 봅니다. 그래서 proxy 설정이 되지 않는 것 위주로 구글링하며 이것 저것 많이 시도해봤는데 3시간째 해메고 있어서 질문 남깁니다ㅠㅠ
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
웹팩 한가지 질문이 있습니다.
안녕하세요! 웹팩설정에서 질문이있습니다. 알거같다가도 헷갈려서 질문드려요! "webpack.config.ts 파일 내에서 const require 방식이 아닌 Import를 사용가능한 이유"가 어느부분때문인가요? tsconfig.json 에서 module을 esnext로 최신으로 쓰겠다고 설정했으므로 tsconfig를 웹팩이 먼저 읽어서, 웹팩 파일내부에서도 commonjs방식이아닌 import 방식이 가능한것이라고 이해하면 맞을지 궁금합니다. 그런데 이렇게 이해하면 tsconfig-for-webpack-config 파일에서는 또 module을 commonJs 로 해주기때문에 조금 헷갈립니다,,