안녕하세요 강의를 들은 이후 나름 열심히 과제를 수행중이었는데, 도저히 해결되지 않는 문제도 있고, 피드백을 받고 싶어 질문을 남깁니다! 여성, 남성 선택 박스의 가운데 공백이 아무리 해도 생기질 않습니다.2. 이용 약관 아래에 <hr> 태그가 먹히지 않습니다. 입력하면 줄이 생겨야하는데 생기지 않고 있어요. (정확한 위치는 사진 속 주석 참고 부탁드립니다.) 3. 아래쪽 전체적 간격이 뭔가 어정쩡한 느낌입니다..4. 코드를 보시고 혹시 제가 고쳐야 할 점이나, 공부가 필요한 부분이 있을까요? 

프로젝트 전체 다운 받아서 보려고 하는데 git 주소 알려주세요

PS C:\boiler-plate> npm run dev> boiler-plate@1.0.0 dev> concurrently "npm run backend" "npm run start --prefix client"[0] [0] > boiler-plate@1.0.0 backend[0] > nodemon server/index.js[0] [1] [1] > client@0.1.0 start[1] > node server/index.js[1] [1] node:internal/modules/cjs/loader:1042[1] throw err;[1] ^[1] [1] Error: Cannot find module 'C:\boiler-plate\client\server\index.js'[1] at Module._resolveFilename (node:internal/modules/cjs/loader:1039:15)[1] at Module._load (node:internal/modules/cjs/loader:885:27)[1] at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)[1] at node:internal/main/run_main_module:23:47 {[1] code: 'MODULE_NOT_FOUND',[1] requireStack: [][1] }[1][1] Node.js v18.13.0[1] npm run start --prefix client exited with code 1[0] [nodemon] 3.0.1[0] [nodemon] to restart at any time, enter rs[0] [nodemon] watching path(s): .[0] [nodemon] watching extensions: js,mjs,cjs,json[0] [nodemon] starting node server/index.js[0] node:internal/modules/cjs/loader:1042[0] throw err;[0] ^[0][0] Error: Cannot find module '../models/User'[0] Require stack:[0] - C:\boiler-plate\auth.js[0] - C:\boiler-plate\server\index.js[0] at Module._resolveFilename (node:internal/modules/cjs/loader:1039:15)[0] at Module._load (node:internal/modules/cjs/loader:885:27)[0] at Module.require (node:internal/modules/cjs/loader:1105:19)[0] at require (node:internal/modules/cjs/helpers:103:18)[0] at Object.<anonymous> (C:\boiler-plate\auth.js:1:16)[0] at Module._compile (node:internal/modules/cjs/loader:1218:14)[0] at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)[0] at Module.load (node:internal/modules/cjs/loader:1081:32)[0] at Module._load (node:internal/modules/cjs/loader:922:12)[0] at Module.require (node:internal/modules/cjs/loader:1105:19) {[0] code: 'MODULE_NOT_FOUND',[0] requireStack: [ 'C:\\boiler-plate\\auth.js', 'C:\\boiler-plate\\server\\index.js' ][0] }[0][0] Node.js v18.13.0[0] [nodemon] app crashed - waiting for file changes before starting... 다 찾아보고 적용하는데 해결이 안되고 있습니다.

Section 50 결제처리 레벨업 추가 학습 주제에서 포인트 충전 관련하여 문의드립니다. createPointTransactionsOfLoading에 API를 요청 했는데 404에러가 나옵니다!아임포트(테스트용)로 결제 성공하였고 응답받은 impUid도 잘 추가하였고, accessToken도 헤더에 포함시켰습니다. 무슨 문제일까요?ㅠㅠ  요청 mutationmutation { createPointTransactionOfLoading(impUid: "imp_618843313239") { amount } }error메세지{ "errors": [ { "message": "Request failed with status code 404", "locations": [ { "line": 2, "column": 3 } ], "path": [ "createPointTransactionOfLoading" ], "extensions": { "code": "INTERNAL_SERVER_ERROR", "exception": { "stacktrace": [ "Error: Request failed with status code 404", " at Object.callErrorProcessor (/codecamp_backend_api/dist/common/libraries/errorProcessor.js:8:11)", " at CreatePointTransactionOfLoadingService.fetchPaymentFromImpUid (/codecamp_backend_api/dist/api/pointTransaction/services/mutation/createPointTransactionOfLoading.service.js:42:36)", " at runMicrotasks (<anonymous>)", " at processTicksAndRejections (internal/process/task_queues.js:93:5)", " at async target (/codecamp_backend_api/node_modules/@nestjs/core/helpers/external-context-creator.js:76:28)", " at async /codecamp_backend_api/node_modules/@nestjs/core/helpers/external-proxy.js:9:24" ] } } } ], "data": null 

안녕하세요! React로 NodeBird SNS 만들기섹션1 프로필 페이지 만들기까지 수강한 수강생입니다!제로초님 강의와 트위터 클론 깃허브를 확인해도 원인을 알 수 없어 질문 글 올립니다!항상 강의 잘 보고 있습니다! 제로초님 항상 감사합니다! 사전에 antd 4버전, ant-design icons 4버전을 설치하였습니다.import { StopOutlined } from '@ant-design/icons'; 위처럼 ant-design icons를 설치했지만 앤트 디자인 아이콘이 뜨지 않습니다.버전 문제라고 생각해 사이트에서 4버전의 StopOutlined 아이콘을 가져와다시 시도했으나 같은 결과가 나타났습니다.FollowList.jsFollowList 컴포넌트의 return 코드 중 의심되는 부분의 코드를 올립니다. renderItem={(item) => { <List.Item style={{ marginTop: 20 }}> <Card actions={[<StopOutlined key="stop" />]}> <Card.Meta description={item.nickname} /> </Card> </List.Item> }}

{ "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "add": "^2.0.6", "axios": "^1.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.16.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "node server/index.js", "backend": "nodemon server/index.js", "test": "react-scripts test", "dev": "concurrently \"npm run backend\" \"npm run start --prefix client" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } 이게 클라이언트쪽입니다

20번째 다이어리를 삭제하는 경우 data 가 바뀌기에onRemove 함수가 재랜더링이 되기에 => DiaryItem 컴포넌트 내부에 있는 props 가 변경되는 원리로 이해가 되어요 ㅜㅜ onEdit 도 마친가지구요. onCreate 함수는 에디터와만 상관이 있어서 다이어리아이템과 상관이 없다는게 이해 갑니다.  

프리캠프 css정렬강의에서자식 box들을 정렬하기 위하여, 부모 box의 속성 및 값으로 display: flex을 먼저 쓰고,flex-direction : row로 할건지, flex-direction : column으로 할건지 결정하고.이어 justify content나 align itmes등을 사용하던데그럼, display: flex의 기능은 무엇인가요?display : flex 라는 코드 없이 위의 flex기능들을 구사하면 문제가 생기나요??시험삼아 display : flex 라는 코드 없이 뒤이어flex-direction : row;justify items : center;align items : center; 라고 적고 확인해보니. 부모 박스 안에 자식 박스가 마치 flex-direction : column ; 만 실행된 것과 같은 효과가 나타났습니다.   

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.수업도중 예제 화면을 보면서 작업중이였는데갑자기 이미지가 뜨지 않습니다;;https://cataas.com/ 여기 도메인이 죽어서 이미지가 보이지 않습니다 ㅠ 확인 부탁드립니다.

import React, { useState } from 'react'; import {Form, Row, Col, Button} from 'react-bootstrap' import { useDispatch, useSelector } from 'react-redux'; const SearchBox = () => { let [keyword, setKeyword] = useState(''); let dispatch = useDispatch() const { contact } = useSelector((state) => state); const searchByName = (event) => { event.preventDefault(); dispatch({ type: "SEARCH_BY_USERNAME", payload: { keyword } }); }; return ( <Form onSubmit={searchByName} className='search-box'> <Row> <Col lg={8}> <Form.Control type="text" placeholder="이름을 입력해주세요" onChange={(event) => setKeyword(event.target.value)} \ /> </Col> <Col lg={4}> <Button variant="dark">찾기</Button> </Col> </Row> </Form> ) } export default SearchBox 위의 코드는 search-box 코드이고const initialState = { contact: [], keyword: "", } const reducer = (state = initialState, action) => { let { type, payload } = action; switch (type) { case "ADD_CONTACT": state.contact.push({ name: payload.name, phoneNumber: payload.phoneNumber, }); break; case "SEARCH_BY_USERNAME": state.keyword = payload.keyword; break; } return { ...state }; }; export default reducer;위의 코드는 reducer.js 코드 import React, { useEffect, useState } from "react"; import SearchBox from "./SearchBox"; import ContactItem from "./ContactItem"; import { useSelector } from "react-redux"; const ContactList = () => { const { contact, keyword } = useSelector((state) => state); let [filteredList, setFilteredList] = useState([]); useEffect(() => { if (keyword !== "") { let list = contact.filter((item) => item.name.includes(keyword)); setFilteredList(list); } else { setFilteredList(contact); } }, [keyword]); return ( <div> <SearchBox /> <div className="contact-list"> num:{filteredList.length} {filteredList.map((item, idx) => ( <ContactItem item={item} key={idx} /> )) } </div> </div> ); }; export default ContactList위코드는 contactList 코드입니다.너무 안되서 선생님 코드를 그대로 복붙하고 아무리 찾아봐도 다른 부분이 없는데 검색 버튼을 눌러도 작동하지 않습니다. 왜 안되는걸까요? 선생님? 이걸로 밤새고 있습니다.

안녕하세요!강의를 어느정도 진행하고 프론트를 바꿔서 저만의 페이지를 구현하고 있습니다.구현하던 중 LOAD_FOLLOWERS_REQUEST 요청을 보내면 계속 500 에러가 뜹니다. 프론트의 saga, Redux action 만드는 부분 확인했고, 백엔드 쪽에 routes확인했는데, 특별한 이상한 점을 못찾았습니다.* Front- redux/user* Front-saga/user* Back-routes* console*redux error log. 어디 부분에서 에러가 나는것일까요?감사합니다.

안녕하세요.포트폴리오를 만들던 도중 제 스스로 해결되지 않아 질문드립니다.import { useForm } from "react-hook-form"; import { wrapFormAsync } from "../../../../../../commons/libraries/asyncFunc"; import { yupResolver } from "@hookform/resolvers/yup"; import { productRegisterSchema } from "../../../../../commons/validation/Main"; import InputLong from "../../../../../commons/Input/long"; import Textarea01 from "../../../../../commons/Input/textarea"; import Button01 from "../../../../../commons/button/01"; import InputLongNormal from "../../../../../commons/Input/longNormal"; import { gql, useMutation } from "@apollo/client"; import type { IMutation, IMutationCreateUseditemArgs, } from "../../../../../../commons/types/generated/types"; import { useRouter } from "next/router"; import ImageUpload01 from "../../../../../commons/imageUpload/imageUpload"; interface IFormData { name: string; remarks: string; contents: string; price: number; images: string[]; } export const CREATE_USED_ITEM = gql` mutation createUseditem($createUseditemInput: CreateUseditemInput!) { createUseditem(createUseditemInput: $createUseditemInput) { _id } } `; export default function ProductRegisterBody(): JSX.Element { const { register, handleSubmit, formState } = useForm<IFormData>({ resolver: yupResolver(productRegisterSchema), mode: "onChange", }); const router = useRouter(); const [createUseditem] = useMutation< Pick<IMutation, "createUseditem">, IMutationCreateUseditemArgs >(CREATE_USED_ITEM); const onClickSubmit = async (data: IFormData): Promise<void> => { console.log(data); await createUseditem({ variables: { createUseditemInput: { name: data.name, remarks: data.remarks, contents: data.contents, price: data.price, images: data.images, }, }, }); void router.push("/markets"); }; return ( <form onSubmit={wrapFormAsync(handleSubmit(onClickSubmit))}> <InputLong register={register("name")} tag="상품명" /> <div>{formState.errors.name?.message}</div> <InputLong register={register("remarks")} tag="한줄요약" /> <div>{formState.errors.remarks?.message}</div> <Textarea01 register={register("contents")} tag="상품설명" /> <div>{formState.errors.contents?.message}</div> <InputLong register={register("price")} tag="판매가격" /> <div>{formState.errors.price?.message}</div> <InputLongNormal tag="태그입력" /> <div>거래위치</div> <div> <p>사진첨부</p> <ImageUpload01 register={register("images")} /> </div> <button> 테스트</button> <Button01 title="등록하기" isActive={formState.isValid} onClick={onClickSubmit} /> </form> ); } import { useMutation } from "@apollo/client"; import { useState, type ChangeEvent, useRef } from "react"; import { UPLOAD_FILE } from "../upload01/Upload01.queries"; import type { IMutation, IMutationUploadFileArgs, } from "../../../commons/types/generated/types"; import * as S from "./styles"; import type { UseFormRegisterReturn } from "react-hook-form"; interface IInputProps { register: UseFormRegisterReturn; } export default function ImageUpload01(props: IInputProps): JSX.Element { const [image, setImage] = useState(""); const [images, SetImages] = useState(""); const fileRef = useRef<HTMLInputElement>(null); const [uploadFile] = useMutation< Pick<IMutation, "uploadFile">, IMutationUploadFileArgs >(UPLOAD_FILE); const onChangeImageFile = async ( event: ChangeEvent<HTMLInputElement>, ): Promise<void> => { const file = event.target.files?.[0]; const result = await uploadFile({ variables: { file } }); console.log(result.data?.uploadFile.url); SetImages(result?.data?.uploadFile?.url ?? ""); }; console.log(images); const onClickFile = (): void => { fileRef.current?.click(); }; return ( <> <S.Wrapper> <S.Image src={`https://storage.googleapis.com/${images}`} alt="" /> <S.ImageClick onClick={onClickFile}> +</S.ImageClick> <S.HiddenInput onChange={onChangeImageFile} type="file" ref={fileRef} /> <S.HiddenInput value={images} {...props.register} autoFocus name="images" /> </S.Wrapper> </> ); } 일단 요령이 없어서 아래 처럼 만들었습니다.사진을 올리면 register를 위해 value값이 변경되는 input창을 만들었으나 등록하기를 누르면 graphql에 업로드되지가 않습니다.{price: 333, contents: '3333', remarks: '333', name: '333', images: ''} 허나 저 빨간 v표시 친 부분을 한번 클릭한다면 {price: 33, contents: '3333', remarks: '333', name: '3333', images: 'codecamp-file-storage/2023/9/17/Vector.png'}다음처럼 images가 잘 입력됩니다. 클릭하지 않아도 자동으로 변경되면 images를 업로드 시킬 수 있는 방법이 있을까요? 아니면 참고할만한 다른 방법들이 있을까요?

집단지성을 이용한 담당자찾기 서비스 프로젝트를 만들고 있는데, 자동완성 기능이 동작이 안되네요 ; 그리고 서버폴더를 제 프로젝트 하위 폴더에 넣고 실행 시키려고 시도하고있는데 이 방법이 맞을까요? 그리고 세팅 아이콘이 자꾸 맨 아래쪽으로 내려오네요 .;;; 어느부분에서 에러나는지 못찾겠어서 소스는 구글 드라이브에 올려놓았습니다. (https://drive.google.com/drive/folders/1ThZfVwOzZka00678_2zo0iLUBIiwOunV?usp=drive_link)

섹션6까지 끝낸 상태입니다기능에는 문제가 없는데웹사이트 첫 방문으로 로그아웃 상태로 프로필 페이지에 들어가면 아래와 같은 경고가 뜹니다.찾아보니 컴포넌트에서 setState나 dispatch를 useEffect나 이벤트 함수 없이 컴포넌트에서그냥? 실행해서 생기는 경고인 듯한데 제 코드에는 그런게 없어서 오리무중입니다. 이 경고가 왜 뜨는건지, 무시해도 되는지, 어떻게 해결해야하는지 몰라서 질문 남깁니다.(수정-배포버전에서는 안 뜹니다)(참고로 쓰로틀링을 5초로 설정해서 페이지 이동 시간이 5초 걸렸을때는 페이지 이동시 종종Cannot update a componet (`AppLayout`) ~~~ inside `Nodebird 와 같은 경고도 발생했습니다쓰로틀링을 없애니 발생하지 않네요)_app.jsximport PropTypes from 'prop-types'; import Head from 'next/head'; import { Provider } from 'react-redux'; import wrapper from '../store/configureStore'; const NodeBird = ({ Component, ...rest }) => { const { store, props } = wrapper.useWrappedStore(rest); return ( <Provider store={store}> <Head> <meta charSet="utf-8" /> <link rel="shortcut icon" href="favicon.ico" /> <title>NodeBird</title> </Head> <Component {...props.pageProps} /> </Provider> ); }; NodeBird.propTypes = { Component: PropTypes.elementType.isRequired, }; export default NodeBird;profile.jsximport Head from 'next/head'; import { useEffect, useState, useCallback } from 'react'; import { useSelector } from 'react-redux'; import Router from 'next/router'; import axios from 'axios'; import { END } from 'redux-saga'; import useSWR from 'swr'; import AppLayout from '../components/AppLayout'; import NicknameEditForm from '../components/NicknameEditForm'; import FollowList from '../components/FollowList'; import { LOAD_MY_INFO_REQUEST } from '../reducers/user'; import wrapper from '../store/configureStore'; import { backUrl } from '../config/config'; const fetcher = (url) => axios.get(url, { withCredentials: true }).then((result) => result.data); const Profile = () => { const { me } = useSelector((state) => state.user); const [followersLimit, setFollowersLimit] = useState(3); const [followingsLimit, setFollowingsLimit] = useState(3); const { data: followersData, error: followerError } = useSWR(`${backUrl}/user/followers?limit=${followersLimit}`, fetcher); const { data: followingsData, error: followingError } = useSWR(`${backUrl}/user/followings?limit=${followingsLimit}`, fetcher); useEffect(() => { if (!me?.id) { // 로그아웃했을때 Router.replace('/'); } }, [me?.id]); const loadMoreFollowers = useCallback(() => { setFollowersLimit((prev) => prev + 3); }, []); const loadMoreFollowings = useCallback(() => { setFollowingsLimit((prev) => prev + 3); }, []); if (!me) { return null; } if (followerError || followingError) { console.error(followerError || followingError); return <div>팔로잉/팔로워 로딩 중 에러가 발생합니다</div>; } return ( <> <Head> <title>내 프로필 | NodeBird</title> </Head> <AppLayout> <NicknameEditForm /> <FollowList header="팔로잉" data={followingsData} onClickMore={loadMoreFollowings} loading={!followingsData && !followingError} /> <FollowList header="팔로워" data={followersData} onClickMore={loadMoreFollowers} loading={!followersData && !followerError} /> </AppLayout> </> ); }; export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => { axios.defaults.headers.Cookie = req?.headers.cookie; store.dispatch({ type: LOAD_MY_INFO_REQUEST, }); store.dispatch(END); await store.sagaTask.toPromise(); }); export default Profile;

import React from 'react'; import Axios from 'axios'; class EpisodeList extends React.Component { state = { episodeList: [], }; componentDidMount() { const apiUrl = 'https://www.tvmaze.com/api'; const params = { q: 'mr-robot', embed: 'episodes', }; Axios.get(apiUrl, { params }) .then((response) => { console.log(response); }) .catch((error) => { console.error(error); }); } render() { const { episodeList } = this.state; return ( <div> <h1>EpisodeList</h1> {JSON.stringify(episodeList)} </div> ); } } export default EpisodeList;위 코드와 같이 실행하면 다음의 에러가 뜹니다.Access to XMLHttpRequest at 'https://www.tvmaze.com/api?q=mr-robot&embed=episodes' from localhost/:1 origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.사이트의 api가 바뀌어서 url과 쿼리는 현재 작동하는 방식으로 바꾸었을 뿐 이외에는 동일하게 따라했는데, 이렇게 되는 이유를 모르겠습니다.참고로 다음을 실행하였을 때 정상적으로 응답이 오는 것을 확인하였습니다.http https://www.tvmaze.com/api q==mr-robot embed==episodes 

강의에서처럼 이미지를 클릭해도오른쪽 하단에 css 정보가 안보여요..

인강 한바퀴 다 듣고 이제 제 개인 프로젝트를 하나 해보고싶어 다시 들으면서 조금 변형시키면서 만드는 중입니다.객체 안에 배열을 하나 넣어뒀는데, 그것을 반복문으로 배열의 요소 만큼 태그를 생성시키고 싶어 이중for문을 사용했는데, characters의 다음요소가 들어가버려서 모양이 이상하게 됩니다.... 이렇게는 아예 못쓰는건가요?character-tag에 css를 설정해두어 없애면 안됩니다.사진이 넘치는건 overflow: hidden을 안했습니다.   

구글링을 해서 폐쇄망에 react 프로젝트를 어찌어찌 설치를 했습니다.정상적으로 실행도 되고 프로그래밍도 가능합니다.근데, 중간에 패키지를 추가하려고 인터넷이 가능한 곳에서 패키지를 추가해서옮겨보려 했으나 잘 안되더군요.폐쇄망에서 패키지 추가는 어떻게 해야 하는지 도움 부탁드립니다.

지금 바로 React 시작하기 heart 추가/제거 연습문제1:39초 15번째라인 div안 span 태그속에{heart}라고만 써도 되나요? 동작은 똑같이 됩니다.let heart로 정의가 되어있는데span에서도 다시 정의해서 써야하는건지 궁금합니다!

두 번 질문해서 답변대로 수정하였더니 일기가 작성이 되었다가..수정 기능을 강의를 보면서 구현을 하였고갑자기 또 일기 작성이 되지 않습니다..다시 여러 번 강의를 보면서 따라했으나 해결하지 못하였습니다..죄송합니다ㅠㅠ코드 샌드박스 링크입니다https://codesandbox.io/s/late-morning-d483sv?file=/src