묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit ssr 질문
계속 똑같은 부분을 질문하고있는데 혹시 똑같은 오류가 발생하고 이 부분 코드는 양이 적고 코드 양이 적어서 오류의 원인을 아는데 용이 할꺼 같아 질문드립니다pages/about.js import React from "react"; import { useSelector } from "react-redux"; import Head from "next/head"; import { Avatar, Card } from "antd"; import AppLayout from "../components/AppLayout"; import wrapper from "../store/configureStore"; import { loadUserInfo } from "../reducers/user"; const Profile = () => { const { userInfo } = useSelector((state) => state.user); return ( <AppLayout> <Head> <title>ZeroCho | NodeBird</title> </Head> {userInfo ? ( <Card actions={[ <div key="twit"> 짹짹 <br /> {userInfo.Posts.length} </div>, <div key="following"> 팔로잉 <br /> {userInfo.Followings.length} </div>, <div key="follower"> 팔로워 <br /> {userInfo.Followers.length} </div>, ]} > <Card.Meta avatar={<Avatar>{userInfo.nickname[0]}</Avatar>} title={userInfo.nickname} description="노드버드 매니아" /> </Card> ) : null} </AppLayout> ); }; export const getStaticProps = wrapper.getStaticProps( (store) => async ({ req }) => { console.log("getStaticProps"); await store.dispatch(loadUserInfo(1)); } ); export default Profile; reducers/user.js export const loadUserInfo = createAsyncThunk( "/user/LoadUserInfo", async (data) => { const response = await axios.get(`/user/${data}`, data); return response.data; } ); const userSlice = createSlice({ name: "user", initialState, reducers: { addPostToMe(draft, action) { // 값을 하나만 전달해서 값이 바로 payload에 저장이된다 // 내가 만든 포스트를 me state에 저장하는 reducer draft.me.Posts.unshift({ id: action.payload }); }, removePostOfMe(draft, action) { draft.me.Posts = draft.me.Posts.filter((v) => v.id !== action.payload); }, }, // 외부에서 action을 만든것은 extraReducers로 가져와서 사용한다 주로 createAsyncThunk로 action을 만들 때 사용한다 extraReducers: (builder) => builder .addCase([HYDRATE], (state, action) => ({ ...state, ...action.payload.user, })) // 다른유저정보 가져오는 리듀서 .addCase(loadUserInfo.pending, (state, action) => { state.loadUserInfoLoading = true; state.loadUserInfoError = null; state.loadUserInfoDone = false; }) .addCase(loadUserInfo.fulfilled, (state, action) => { state.loadUserInfoLoading = false; state.me = action.payload; state.loadUserInfoDone = true; }) .addCase(loadUserInfo.rejected, (state, action) => { state.loadUserInfoLoading = false; state.loadUserInfoError = action.error; }) .addDefaultCase((state) => state), });이런 코드인데 // 다른유저정보 가져오는 리듀서 .addCase(loadUserInfo.pending, (state, action) => { state.loadUserInfoLoading = true; state.loadUserInfoError = null; state.loadUserInfoDone = false; }) .addCase(loadUserInfo.fulfilled, (state, action) => { state.loadUserInfoLoading = false; state.me = action.payload; state.loadUserInfoDone = true; }) .addCase(loadUserInfo.rejected, (state, action) => { state.loadUserInfoLoading = false; state.loadUserInfoError = action.error; })제가 이것저것 하다가 알게된거 action에 이부분을 전부 주석처리하게 되면 에러가 안난다는 겁니다 그래서 결정적으로 initalstate에 있는 변수들을 변경하는 과정이 브라우저의 정보와 서버의 정보를 다르게만드는 일을 하는것 같은데 혹시 의심가시는거 있으신가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
노션 강의자료
노션에 있는 자료들이랑 실제 강의에서 쓰이는 자료들이랑 차이가 좀 있네요. 강의에 들어있는 내용이 다 들어있는 것도 아니고요... 혹시 추후에 보강되거나 강의에 나오는 자료가 제공되진 않을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Section 50 퀴즈 관련 질문입니다.
backend playground를 보고 작업하고 있으나 추가로 질문 드려야만 해결할 수 있는 부분이 있어 여쭤봅니다.loading 페이지에서 createPointTransactionOfLoading을 사용하여 이것을 complete 페이지에서 fetch해서 가져와야할 거 같은데 fetch 할 때 필요한 api를 모르겠어서 임시로 fetchPointTransactionsOfSelling로 했습니다. createPointTransactionOfLoading 부분에서 id는 사용자 아이디인데 impUid는 뭘 의미하나요? 회원가입 하면 id가 발급되는 것처럼 해당 api에서 자체적으로 발급되는 걸까요?amount가 포인트 양인 것 같아서 기존의 포인트에 포인트를 중첩하려면 loading과 complete에 동일한 api를 fetch해서 Selected를 더하는 게 맞나요?createPoint와 fetchPoint할 때 필요한 요소는 뭐가 더 있는지 궁금합니다.complete 페이지에서 'IPointTransaction[]' 형식에 'amount' 속성이 없습니다. 라고 뜨는데 어떻게 해결하나요? 작성한 코드입니다.complete ({data?.fetchPointTransactionsOfSelling.amount}에 amount 속성이 없다는 빨간 줄) import { gql, useQuery } from "@apollo/client" import type { IQuery, IQueryFetchPointTransactionsOfSellingArgs } from "../../../../src/commons/types/generated/types" const FETCH_POINT = gql` query { fetchPointTransactionsOfSelling { _id impUid amount } } ` export default function CompletePage():JSX.Element { const { data } = useQuery<Pick<IQuery,"fetchPointTransactionsOfSelling">,IQueryFetchPointTransactionsOfSellingArgs>(FETCH_POINT) return <>충전한 포인트는 {data?.fetchPointTransactionsOfSelling.amount}원</> }loading (Number(amount)에 이름 찾을 수 없다는 빨간 줄)import { gql, useQuery, useMutation } from "@apollo/client" import type { IQuery } from "../../../../src/commons/types/generated/types" import { loginCheck } from "../../../../src/components/commons/hocs/withAuth" import { useRouter } from "next/router" import type { ChangeEvent } from "react" import { useState } from "react" const FETCH_USER_LOGGED_IN = gql` query { fetchUserLoggedIn { email name } } ` const CREATE_POINT = gql` mutation createPointTransactionOfLoading($impUid:ID!){ createPointTransactionOfLoading(impUid:$impUid){ _id impUid amount } } ` declare const window: typeof globalThis & { IMP: any } function LoadingPage():JSX.Element { const router = useRouter() const { data } = useQuery<Pick<IQuery,"fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN) const [ myFunction ] = useMutation(CREATE_POINT) const selectList = [0,500,1000,2000,5000]; const [Selected, setSelected] = useState(0); const handleSelect = (e:ChangeEvent<HTMLSelectElement>):void => {setSelected(Number(e.target.value));}; const onClickPayment = ():void => { if (Selected === 0) { alert("금액을 선택해주세요."); return; } const IMP = window.IMP; IMP.init("imp27255777"); IMP.request_pay({ // param pg: "kakaopay", pay_method: "card", // merchant_uid: "ORD20180131-0000011", name: `Section 50-${Selected}원 결제`, amount: Selected, buyer_email: data?.fetchUserLoggedIn.email, buyer_name: data?.fetchUserLoggedIn.name, buyer_tel: "", buyer_addr: "", buyer_postcode: "", m_redirect_url:"" }, async (rsp:any) => { if (rsp.success === true) { await myFunction({ variables:{ impUid : data?.fetchUserLoggedIn._id, amount: Number(amount) + Selected } }) const {Modal} = await import("antd") Modal.success({content:"등록 성공"}) void router.push("/z_quiz/section50/complete") } else { alert("결제 실패") } }); } return (<> <div>{data?.fetchUserLoggedIn.name}님 환영합니다.</div> <select onChange={handleSelect} value={Selected}> {selectList.map((item) => ( <option value={item} key={item}>{item}</option> ))} </select> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" /> <script src="https://cdn.iamport.kr/v1/iamport.js" /> <button onClick={onClickPayment}>충전하기</button> </>) } export default loginCheck(LoadingPage);loginimport { gql, useMutation } from "@apollo/client" import { type ChangeEvent, useState } from "react" import type { IMutation, IMutationLoginUserArgs } from "../../../../src/commons/types/generated/types" import { useRecoilState } from "recoil" import { accessTokenState } from "../../../../src/commons/stores" import { useRouter } from "next/router" import { wrapFormAsync } from "../../../../src/commons/libraries/asyncFunc" const LOGIN_USER =gql` mutation loginUser($email:String!, $password:String!){ loginUser(email:$email,password:$password){ accessToken } } ` export default function LoginPage():JSX.Element { const router = useRouter() const [email, setEmail] = useState('') const [password, setPassword] = useState('') const [loginUser] = useMutation<Pick<IMutation,"loginUser">,IMutationLoginUserArgs>(LOGIN_USER) const [, setAccessToken] = useRecoilState(accessTokenState) const onChangeEmail = (event: ChangeEvent<HTMLInputElement>):void => { setEmail(event.currentTarget.value) } const onChangePassword = (event: ChangeEvent<HTMLInputElement>):void => { setPassword(event.currentTarget.value) } const onClickLogin = async ():Promise<void> => { try { const result = await loginUser({variables: { email, password }}) const accessToken = result.data?.loginUser.accessToken if (accessToken=== undefined) { alert("로그인 실패") return ;} setAccessToken(accessToken) localStorage.setItem("accessToken", accessToken) void router.push("/z_quiz/section50/loading") } catch(error) { if (error instanceof Error ) alert(error.message) } } return ( <form onSubmit={wrapFormAsync(onClickLogin)}> 이메일: <input type="text" onChange={onChangeEmail} /> 비밀번호: <input type="password" onChange={onChangePassword} /> <button>로그인</button> </form> ) }
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
추가 질문
https://www.inflearn.com/questions/961239/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EB%A7%88%EC%B9%98%EB%A9%B0-%EB%B0%B0%ED%8F%AC-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C-%EC%97%85%EB%A1%9C%EB%93%9C-%EC%9E%91%EB%8F%99%EC%9D%B4-%EC%95%88%EB%90%A8"프로젝트를 마치며 배포 페이지에서 업로드 작동이 안됨"이라는 제목의 질문글의 추가 질문입니다.=====================이전 질문 내용==========================================상품 업로드에 관한 이슈과정을 다 마치고, fly.io와 vercel.com을 통하여 배포한 페이지 중에서 상품 업로드가 제대로 이뤄지지 않습니다.github 주소 :https://github.com/arominddo/Inflearn_full_stack_boot_campvercel을 통해 배포된 web 어플리케이션 url :https://grab-market-client-ashen.vercel.app/ grab_market_web > src > upload > index.js에 코드 내용이 작성되어 있습니다. 배포된 페이지의 DB 초기화 문제프로젝트를 전부 마치면서, 다시 한번 fly.io에 최신 코드로 재배포를 해보고 실험을 해보았는데도, web에서 특정 상품을 업로드하거나(오류가 나지 않았을 당시), 상품 구매하기 기능을 통하여 soldout 값을 1로 바꿔줬음에도,약 5분이 지나면 DB가 배포 됐을 당시의 내용으로 계속 초기화가 됩니다.해결 방안이 궁금합니다.ex) A라는 물건 업로드 -> 5분 지남 -> 새로고침 해보면 A라는 물건이 리스트에서 삭제ex) B라는 물건 구매 하기 버튼 클릭 -> soldout 값 1로 변경 -> 약 5분 지남 -> 다시 soldout 값 0으로 복귀=================================================================================== 위와 같은 이전 질문 내용에서 1번에 해당하는 답변으로, 어떤 오류 로그가 뜨냐고 물어보셔서 여기 다시 남겨봅니다. 위 사진은 vercel을 통해 배포 된 Web에서 upload를 시도하면 나오는 오류 로그입니다. upload 시도 시에 fly.io 모니터화면에서 볼 수 있는 오류입니다.참고로, Local 환경에서 같은 코드로 npm start로 실행된 서버와 web에서는 업로드 기능이 잘 작동됩니다. 재부팅에 관련된 로그라고 생각되는 부분 캡쳐해서 보내드립니다. 이와 같은 로그가 뜨면서 배포된 서버의 내용이 배포 시점으로 돌아가는 것 같습니다.그런데 로그를 보자면 reboot라는 것이 단순히 서버를 죽였다가 다시 올리는 것으로 생각 되는데, 배포된 서버가 돌아감에 있어서 업로드 되거나 값이 변했던 내용들이 다 사라지는 것이 이해가 되지 않습니다ㅠㅠ
-
미해결웹 게임을 만들며 배우는 React
웹팩 설정을 마쳤는데 npx webpack 했을 때 원하는 결과가 안 나옵니다.
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/ ERROR in main Module not found: Error: Can't resolve './src' in 'C:\study\zerocho\lecture' resolve './src' in 'C:\study\zerocho\lecture' using description file: C:\study\zerocho\lecture\package.json (relative path: .) Field 'browser' doesn't contain a valid alias configuration using description file: C:\study\zerocho\lecture\package.json (relative path: ./src) no extension Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src is not a file .js Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src.json doesn't exist .wasm Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src.wasm doesn't exist as directory existing directory C:\study\zerocho\lecture\src using description file: C:\study\zerocho\lecture\package.json (relative path: ./src) using path: C:\study\zerocho\lecture\src\index using description file: C:\study\zerocho\lecture\package.json (relative path: ./src/index) no extension Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src\index doesn't exist .js Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src\index.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src\index.json doesn't exist .wasm Field 'browser' doesn't contain a valid alias configuration C:\study\zerocho\lecture\src\index.wasm doesn't exist webpack 5.88.2 compiled with 1 error and 1 warning in 196 ms처음에 위와 같은 에러코드가 나와서 lecture안에 src폴더를 만들고 그안에 index.js, index.json, index.wasm 파일을 직접 생성해주었습니다.그 다음에는 아래와 같은 에러코드가 나오면서 main,js 파일이 생성됐는데 안에는 아무 내용도 없습니다.asset main.js 0 bytes [emitted] [minimized] (name: main) ./src/index.js 1 bytes [built] [code generated] WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/ webpack 5.88.2 compiled with 1 warning in 212 ms PS C:\study\zerocho\lecture> npx run Need to install the following packages: run@1.4.0 Ok to proceed? (y) y Found 0 argument(s). Expected one or more. Usage: runjs [SIGNAL] somecode.js [--args] Ex: runjs somecode.js --args runjs SIGUSR2 somecode.js --args그리고 webpack.config.js에 보면 강의에서 했던대로 mode: "development",라고 이미 적용되어있는 상태입니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[라이브러리 아이콘 실습] 강사님께는 보이지 않는 ts에러 빨간 줄이 보입니다.
MyIcon으로 이모션을 통해 만들어도, 그냥 Antd에서 복사붙여넣기해서 프레그먼트안에 넣어도 같은 오류가 발생해요.구글에 검색해도 해결방법이 나오지 않네요ㅠ
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
마지막 onSubmit 에러체크 문제
에러체크할 때 나머지값이 없어도 submit이 되는 문제가 있습니다.<InfoContext.Provider value={{ value: info, setValue: setInfo, error, setError: (e) => setError({...error, ...e}) }}> <Form onSubmit={onSubmit}> <TextField source="name" label="이름" validate={[minLength(3), maxLength(6)]} /> <TextField source="password" label="패스워드" validate={[minLength(6), maxLength(12)]} /> <CheckboxField source="confirm" label="위 내용이 제출됩니다 동의하십니까?" validate={[checked]} /> </Form> </InfoContext.Provider>위 코드에서 setError update해주는 로직을 // before setError: (e) => setError({...error, ...e}) // after setError: (e) => setError(prev => ({...prev, ...e}))아래와 같은 형식으로 바꿔주면, 리팩토링 이전과 같이 동작을 하게됩니다.batch의 문제인지, 불변성의 문제인지 정확히 모르겠네요. 설명해주시면 감사감사!
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
toolkit을 사용 ssr설정 질문입니다
https://github.com/ZeroCho/react-nodebird/blob/master/toolkit/front/pages/index.js여기 코드를 가져와서 ssr을 설정했습니다front 코드 에러로 Error: Hydration failed because the initial UI does not match what was rendered on the server.Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.이렇게 두개가 나오는데 이걸 어떻게 해결할지 잘 모르겠습니다 initaial UI 에러라길레initialState: { user: { ...userInitialState, me: myInfo, }, post: { ...postInitialState, mainPosts: posts, hasMorePosts: posts.length === 10, }, },주석 처리 되어있는 이부분을 어떻게 해야되는거 같은데 잘 모르겠습니다
-
미해결
Next.js GCP App Engine 배포 시 환경변수 분기
Next.js로 Google Cloud Platform에 App Engine 서비스 배포를 진행하고 있습니다.문제는 production ( 실 서비스 )와 development ( 개발용 )으로 나누어서.env.development, .env.production의 두개의 환경변수를 가지고있습니다.배포 시 실서비스 에서는 .env.production을 사용하도록개발용 에서는 .env.development를 사용하도록 설정하려는데 이것저것 만져보아도 production만 사용하는 문제가 발생해버리네요. 현재 프로젝트구조와 설정코드는 이렇습니다.project ├── local └── Dockerfile └── docker-compose.yml ├── resource └── .next └── ... (Next.js 빌드 파일) └── node_modules └── package.json └── dev_app.yaml └── prd_app.yaml └── .env.development └── .env.production └── next.config.js └── ... (기타 Next.js 프로젝트 파일) 여기서 package.json의 script설정은 다음과 같습니다.{ dev: "next dev", start: "next start", lint: "next lint", deploy: "npm run build && gcloud app deploy --project='production' -q --appyaml=prd_app.yaml", deploy:dev: "npm run build:dev && gcloud app deploy --project='development' -q --appyaml=dev_app.yaml", build: "dotenv -e .env.production next build", build:dev: "dotenv -e .env.development next build" } next.config.js는 특별히 건드리지 않았습니다.dev_app.yaml, prd_app.yaml파일은 서비스명만 각각 설정해 주었습니다.runtime: nodejs20 # or another supported version service: development 질문 1.현재 app engine 업로드된 용량, 로직을 보니 빌드파일이 아닌 프로젝트 그대로 들어가는 것 같습니다.빌드는 환경변수파일도 정상적으로 분기되는데 앱엔진에서 해당문제가 발생하는 것으로보아혹시 Next.js에서 빌드된 파일로 app engine에 배포할 수 있는지 궁금합니다.질문 2.빌드파일만 올릴수 없다 라고 하더라도 프로젝트 그대로 올리면서 환경변수를 분기할 방법이 있는지 궁금합니다.정말 문서건 블로그건 구글서칭, 깃허브검색, GPT 모두 끈질기게 시도해봤지만능력부족 탓인지 성공하지 못했습니다..능력자분들께서 도움주시면 잊지않겠습니다!!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
중고마켓 이메일 찾기부분
중고마켓 피그마에서 로그인부분에 이메일 찾기가 있는데, 플레이그라운드에 없는 것 같아서 문의 드립니다. 비밀번호는 resetUserPassword를 사용하면 될 것은데, 이메일찾기는 제가보기엔 보이지 않아서요!
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onRemove 원리 질문
안녕하세요! useReduce를 사용하고 최적화를 한 단계에서 onReduce() 함수가 어떻게 최적화 되는지 원리에 의문이 생겨 질문 드립니다. const [data, dispatch] = useReducer(reducer, []); //reducer 생략 case "REMOVE": return state.filter((it) => it.id !== action.targetId); 해당 코드에서 REMOVE를 실행하면 data 배열이 새로운 배열로 업데이트가 됨 -> 2. 그러면 data를 prop으로 받고 있는 DiaryList.js에서 이를 감지하고 처음부터 끝까지 DiaryItem.js를 다시 생성함. ->3. 그런데 DiaryItem은 React.memo로 prop를 비교하는데, 얕은 비교를 하기에 data에 새로 생성된 배열과는 주소가 달라 새로운 컴포넌트를 다시 생성. 이 되어야 하지 않을까요? 혹시 저의 논리에서 어디 부분이 잘못되었는지 모르겠어서 질문합니다... ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
useMutation에러
Server ErrorInvariant Violation: Argument of undefined passed to parser was not a valid GraphQL DocumentNode. You may need to use 'graphql-tag' or another method to convert your operation into a documentThis error happened while generating the page. Any console logs will be displayed in the terminal window. 이러한 에러가 뜨는데 왜 발생하는 걸까요.const [contents, setContents] = useState(""); 18 | > 19 | const [나의함수] = useMutation(나의그래프큐엘셋팅) | ^ 20 | 21 | const onClickSubmit = async () => { 22 | const result = await 나의함수({ import { useState } from "react" import {나의그래프큐엘셋팅} from './BoardWrite.queries' // export는 골라서 가져오기 import BoardWriterUI from "./BoardWrite.presenter"; // export-default로 한 개만 가져오기 import { useMutation } from "@apollo/client"; // import BoardWriterUI from "./BoardWrite.presenter"; // export-default로 한 개만 가져오기 // import BoardWriterUI, {apple} from "./BoardWrite.presenter"; // export-default와 export 함께 가져오기 // import * as S from './BoardWrite.styles' // 모든 export를 가져와줘 // S.BlueButton // S.RedInput export default function BoardWrite() { const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); const [contents, setContents] = useState(""); const [나의함수] = useMutation(나의그래프큐엘셋팅) const onClickSubmit = async () => { const result = await 나의함수({ variables : { // variables 이게 $ 역활을 함 writer : writer, title : title, contents : contents } }) console.log(result) } const onChangeWriter = (event) => { setWriter(event.target.value) } const onChangeTitle = (event) => { setTitle(event.target.value) } const coChangeContents = (event) => { setContents(event.target.value) } return ( <BoardWriterUI aaa={onClickSubmit} bbb={onChangeWriter} ccc={onChangeTitle} ddd={coChangeContents}/> ) }-컨테이너import { gql } from "@apollo/client" const 나의그래프큐엘셋팅 = gql` mutation createBoard($writer : String, $title : String, $contents: String) { createBoard(writer : $writer, title : $title, contents : $contents) { _id number message } } ` -쿼리
-
미해결처음 만난 리액트(React)
7강 실습
react-create-app이 안돼서 vite를 사용해서 실습하고 있는데 코드를 똑같이 작성했지만 빈화면만 뜹니다. 무엇이 문제인지 모르겠어요
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
컴포넌트 부모 태그
안녕하세요! 좋은 수업 잘 듣고 있습니다 :)props로 컴포넌트를 받는 Container 컴포넌트에 대해 질문이 있습니다!JSX 규칙 중에 모든 컴포넌트는 부모 태그를 가지고 있어야 한다고 말씀해주셨는데 아래 코드처럼 Container는 부모 태그가 없이도 잘 동작하기에 이유가 무엇인지 궁금합니다!function App() { const counterprops = { a : 1, b : 2, c : 3, d : 4, initialVaule : 5, }; return ( // HTML을 반환 <Container> <div className="App"> <Counter {...counterprops}/> </div> </Container> ); }또한 function App() { const counterprops = { a : 1, b : 2, c : 3, d : 4, initialVaule : 5, }; return ( // HTML을 반환 <div className="App"> <Container> <Counter {...counterprops}/> </Container> </div> ); }이렇게 코드를 짜면 동작하지 않더라구요! 왜 첫번째 코드는 동작하고, 두번째 코드는 동작하지 않는지 궁금합니다!감사합니다.
-
미해결프로젝트로 배우는 React.js
renderBlogList 함수는 순수함수가 아니어도 괜찮은가요?
React 진영에서 functional component나 hook 등은 순수 함수로 작성하도록 권장되는 것으로 알고 있는데요,renderBlogList 함수는 외부 스코프에 있는 loading, posts값에 의존성을 가지기 때문에 순수함수가 될 수 없는 것으로 보이는데이를 순수함수로 변경하는 것이 더 나은 코드를 작성하는 방법일까요? 아니면 굳이 그렇게 할 필요까지는 없을지 궁금합니다.
-
미해결처음 만난 리액트(React)
(실습) 직접 리액트 연동하기 js 질문
안녕하세요. 리액트 연동하기 강의에서 MyButton.js 의 적용이 안 되어 페이지에 버튼이 나타나지 않습니다. 다른 분들 질문도 보고 @17에서 @17.0.0 으로도 해보고 버전의 문제인가 싶어 18.2.0 으로도 해 봤는데 안 되네요... 어떤 점이 문제인지 알려주시면 감사하겠습니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 27번은 문제가 저만 있는건가요?
라우팅을 넘어갈수가 없습니다Application error: a client-side exception has occurred (see the browser console for more information). 이런 오류가 뜨네요
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
컴파일 에러
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. const movieId = request.data.result[Math.floor(Math.random() * request.data.results.length)].id; 부분 작성 후 컴파일 시 리액트에서 Cannot read properties of undefined 에러가 발생합니다. 하나가 아니라 여러개 발생하는데 조치방법이 있을까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
index.js React 17, React 18 버전 질문
안녕하세요. 강의를 계속 듣다가 App.js가 자꾸 두번 실행되어 index.js를 제외한 모든 코드를 강사님의 sandbox 코드를 복붙하였는데 계속 코드가 두번 실행이 되었습니다.그리하여 이렇게 dataId가 20부터 실행되는 문제가 발생하였는데요, 그래서 index.js를 강사님 버전(React 17)로 바꾸었더니 이 문제가 해결되었습니다. React18버전으로 하면 이런 문제가 발생하는 이유가 무엇인가요?? 다음은 저의 index.js 코드입니다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; const rootNode = document.getElementById("root"); ReactDOM.createRoot(rootNode).render( <React.StrictMode> <App /> </React.StrictMode> ); reportWebVitals();
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
코드샌드박스 주소
강의하시는 예제를 코드샌드박스에서 열고싶은데 링크가 어디있나요??
