173만명의 커뮤니티!! 함께 토론해봐요.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
안녕하세요. 좋은 강의 잘 듣고 있습니다. 2강에서 express 공식 문서에서 긁어와서 Index.js로 붙여넣는 과정에서 강사님은 port 숫자가 달라도 상관없다고 하셨습니다. 처음에는 강사님 따라서 저도 port를 5000으로 지정했는데 오류가 발생하여 기존 문서에 있던대로 3000으로 지정했더니 잘 작동했습니다. port가 어떤 것을 의미하는지, 왜 3000만 되는지가 궁금하여 질문드립니다. 감사합니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
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]
제로초님 안녕하세요 강의 재밌게 수강하고 있습니다! 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 로 해주기때문에 조금 헷갈립니다,,
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useMemo 강의 잘 듣고 있습니다. 그런데, useMemo(() => { //생략 }, [data.length]); 한 것과 useEffect(() => { //생략 }, [data.length]); 한 것과 차이가 있을까요? 제가 생각했을때는 둘이 같이 작동할 것 같은데.. 어떻나요?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
const dataId = useRef(0) 질문입니다. 강의 들을 때는 그냥 음~ 하면서 들었는데 나중에 생각해보니.. 왜 useRef를 쓰는 건지 잘 모르겠습니다. 그냥 const [dataId, setDataId] = useState(0); 해도 문제 없을 것 같은데.. 어떨까요??
미해결
만들면서 배우는 리액트 : 기초
안녕하세요, 유림님의 친절하고 상세한 설명에 쉽게 완강할 수 있었습니다. 다 듣고 나서 궁금증이 생겨서 질문을 드리게 되었습니다. 현재 강의 기준(37 빌드한 결과물 github page로 배포하기) 후에 제가 추가로 소스를 수정하게 되면 예를들어 생성버튼의 이름을 생성123으로 변경했다고 가정했을 시 main branch를 통해서 소스 수정한 부분을 github에 배포를 하고서 cat-jjal-maker-cra 폴더로 가서 npm run build, npm run deploy를 실행해주면 되는걸까요? 소스 배포를 안하더라도 수정 이후에 npm run build, npm run deploy를 했을 경우 제 페이지에서 수정되는게 확인은 가능해서 위 질문을 드리게 되었습니다. ( commit, push를 안해도 페이지의 내용은 변경되지만 그럼 결국 main branch 와는 상이한 소스가 되니 변경된 소스를 commit, push를 해주는 걸까요? )
해결됨
실전 리액트 프로그래밍
안녕하세요~ 코린이입니다. 제가 코드를 그대로 따라하며 공부중인데 버젼이 바뀌면서 route를 쓰는 방식이 변한것같은데 component가 element로 바뀌었나요?? 그리고 혹시 match.url은 버젼이 바뀌면서 사라진건가요?? 올려주신 코드를 복붙하니 오류가 나오네요ㅠ 혹시 그렇다면 <Route path={`${match.url}/:roomId`} component={Room} />은 현재 어떻게 써야될까요?? useParams를 써서 해야되나요?? ``` import React from " react "; import { Route , Link , Routes } from " react-router-dom "; export default function Rooms () { return ( < div > < h2 > 여기는 방을 소개하는 페이지입니다. </ h2 > < Link to = " bludRoom " > 파란 방입니다 </ Link > < br /> < Link to = " greenRoom " > 초록 방입니다 </ Link > < br /> < Routes > < Route exact path = " rooms " render = {() => < h3 > 방을 선택해 주세요. </ h3 > } /> < Route path = " /:roomId " element = { < Room /> } /> </ Routes > </ div > ) ; } function Room () { return < h2 >{ ` 방을 선택하셨습니다. ` }</ h2 > ; } ``` 이것저것 수정해가며 시도하고있는데 여기서 막혔네요 ㅠㅠ 다른 페이지는 작동하는데 http://localhost:3000/rooms/bludRoom 처럼 :roomId로 처리하려고 했던 페이지가 No routes matched location "/rooms/bludRoom" 라는 오류가 발생합니다ㅠ
미해결
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
꼭 이것이 문제는 아닐수 있습니다 (저는 이렇게 해결됐습니다..!) 2일차를 마추고나니 GET_CART가 새로고침 후 최초 1회만 작동하는 문제가 생기더라고요 1. src/graphql/cart.ts 이 부분 코드가 같은지 확인해주세요 영상에서 편집된것 같습니다(제가 집중안할걸수도..?) 이거를 수정해도 최초 1회만 GET_CART가 작동하는 것은 동일하더라고요 강사님 github(https://github.com/roy-jung/livecode-study_mall) 3일차 commit 코드를 보니 2. src/pages/cart/index.tsx useQuery에서 staleTime, cacheTime을 추가하니 정상작동 하는군요! 제가 앞에서 놓쳤던 부분들이 있어 이러한 문제가 생겼을 수도 있습니다. 혹시 2일차 장바구니에서 오류가 난다면 그저 참고만 해주세요! 제가 삽질을 많이해서 글을 남깁니다,.ㅎㅎ
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
컴포넌트 preload 는 원하는 시점에 import만 해오면 preload 되지만 이미지 preload는 image객체의 src프로퍼티를 통해 네트워크로 이미지를 불러와서 브라우저에 캐싱되는 단계까지 이루어져야 이미지 preload라고 할 수 있는건가요...??
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
22강을 들으면서 하고 있다가 에러났는데 다른걸 다 수정해봐도 이런 에러가 뜨는 이유는 무엇일까요ㅜㅜㅜ setupProxy코드도 업데이트 된 코드 썼고 package.json에 proxy URL 추가해보고 밑에 저랑 같은 에러 나신 분들 좀 계신 거 같아서 밑에 있는 해결방식 다 따라해봤는데도 여전히 이 에러가 나오네용,,,,,,,,
해결됨
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
1일차까지는 강의를 잘따라가고 있었는데요. 2일차 들어서 에러가 발생합니다. yarn run dev를 실행하면 아래와 같은 메시지가 나옵니다. > Local: http://localhost:3000/ > Network: use `--host` to expose ready in 725ms. X [ERROR] Expected ";" but found "client" src/queryClient.ts:20:15: 20 │ retrun client │ ~~~~~~ ╵ ; Build failed with 1 error: src/queryClient.ts:20:15: ERROR: Expected ";" but found "client" 참고로 아래는 강의 따라가고 있는 깃허브 주소입니다. https://github.com/ucoder-git/vowing-live/blob/main/shopping-mall/src/queryClient.ts import { QueryClient } from 'react-query' type AnyOBJ = { [ key : string ]: any } export const getClient = (() => { let client : QueryClient | null = null return () => { if (! client ) client = new QueryClient ({ defaultOptions : { queries : { cacheTime : 1000 * 60 * 60 * 24 , staleTime : 1000 * 60 , refetchOnMount : false , refetchOnReconnect : false , refetchOnWindowFocus : false , }, }, }) retrun client } })() const BASE_URL = "https://fakestoreapi.com"
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
const fetcher = async ( method : METHOD , url : string , ... rest : { [ key : string ] : any } [] ) => { const res = await axios[method](url , ... rest) return res . data } export default fetcher 위에 ...rest 에 대한 타입이 궁금해서 질문드립니다! 글을 새로 생성하거나 수정했을때 아래와 같이 객체로 정보가 담기게 되는데요! 1. key값은 id, text, timestamp, userId 라고 생각하면 되는건가요? 2. any는 response에 대한 타입인건가요? 3. Array 안에 Object로 감싸져 있어서 { [key: string]: any} []로 타입을 지정해준건가요? 위에 3가지 질문이 궁금합니다.. ㅜ { id : "36e1a2bc-177b-4743-9152-d7423c7b9e18" text : "asd" timestamp : 1654591409339 userId : "jin" }
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
# 의문 - 리액트에서 배열 사용하기 1 - 리스트 렌더링 (조회) 강의 중 12분 쯤 - 리액트에서 props를 내려줄 때 undefined 값일 수도 있는데 그 때 defaultProps 문법을 사용해도 되지만 ? 문법을 사용해도 코드가 동작합니다. 두 개 중 선택할 때 뭘 기준으로 선택하는지 궁금합니다. - 참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining ```javascript= {<h4>{diaryList ? diaryList.length : 0}개의 일기가 있습니다.</h4>} DiaryList.defaultProps = { diaryList: [], } ```
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
관련해서 검색해보며 찾아봤는데 도저히 짐작가는 곳이 없어서 여쭤보게되었습니다. 강사님의 github코드 보면서 오타 확인도 했는데 제가 임의로 timeStamp라고 쓴 변수를 제외하고는 똑같은 걸 확인했습니다ㅠㅠ 캡쳐를 보면 resolver/message에서 30:19번째가 문제라고 나오는데 여기가 unshift를 사용한 곳입니다. 혹시나 해서 push 를 사용해봤는데 역시 같은 문제가 있었습니다. 그래서 messages에 옵셔널 체이닝으로 messages?.unshift를 사용했을 때 createMessage는 실행이 되지만 db에 변경되지는 않는 것을 확인했습니다. 추가적으로 어떤 부분을 확인하면 좋을까요?
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
오늘도 강의 잘 들었습니다. 개발을 하는 과정에서 주로 replit 을 사용했었는데, rgrok 를 사용하면 번거로움 없이 바로 포트포워딩을 통해 가상 배포? 를 진행할 수 있었군요. :) 혹시 다음 강의도 계획이 있으신지 여쭙고 싶습니다. 감사합니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
User모델에 Post모델을 넣어서 로그인 오류를 해결한건 이해했습니다. 근데 왜 User모델에 들어간 이름이 Posts인가요..? 아무곳에서도 Posts라고 안쓰지않았나요?
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
linkSchema 안에 default 값 주는 부분에서 type을 boolean으로 주는 이유가 있을까요???
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요! 강의 잘 듣고 있었는데요 저도 윗 분들 처럼 일기 작성 후에 네비게이트로 페이지 이동까지는 되는데 작성한게 업데이트가 안됩니다 ㅠㅠ https://codesandbox.io/s/blazing-sun-kyl8yt?file=/src/components/EmotionItem.js
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
3-4 브랜치로 체크아웃을 하여 테스트해봐도 source의 srcset 속성에 {props.webp + 's'}를 줬을 때 이미지가 엑박이 뜹니다. previousSibling.srcset = previousSibling.dataset.srcset; 위 소스 한 줄을 지울 때는 정상동작 되는데 이유가 있을까요?
