개발자 도구로 보면 섭씨에 값 입력 시 화씨 input에도 값이 담기고 변하는데 텍스트는 보이지 않습니다...찾아보니 <input value="{props.temperature}"> 대신 <input defaultValue="{props.temperature}"> 를 쓰면 된대서 defaultValue를 쓰면 텍스트가 잘 나옵니다...아래 사진은 <input defaultValue={props.temperature}>으로 수정했을 때 입니다. 왜 <input value=""> 대신 <input defaultValue="">를 사용해야 정상적으로 나오는지 궁금합니다.  TemperatureInput.jsxconst scaleNames = { c: "섭씨", f: "화씨", }; function TemperatureInput(props) { const handleChange = (event) => { props.onTemperatureChange(event.target.value); }; return ( <fieldset> <legend>온도를 입력해주세요(단위: {scaleNames[props.scale]})</legend> <input vaule={props.temperature} onChange={handleChange} /> </fieldset> ); } export default TemperatureInput;  Calculator.jsximport React, { useState } from "react"; import TemperatureInput from "./TemperatureInput"; function BoilingVerdict(props) { //물 끓음 감지 if (props.celsius >= 100) { return <p>물이 끓습니다.</p>; } return <p>물이 끓지 않습니다.</p>; } function toCelsius(fahrenheit) { //화씨 계산 함수 return ((fahrenheit - 32) * 5) / 9; } function toFahrenheit(celsius) { //섭씨 계산 함수 return (celsius * 9) / 5 + 32; } function tryConvert(temperature, convert) { const input = parseFloat(temperature); if (Number.isNaN(input)) { return ""; } const output = convert(input); //섭씨 or 화씨로 변환 const rounded = Math.round(output * 1000) / 1000; return rounded.toString(); } function Calculator(props) { const [temperature, setTemperature] = useState(""); const [scale, setScale] = useState("c"); const handleCelsiusChange = (temperature) => { setTemperature(temperature); setScale("c"); }; const handleFahrenheitChange = (temperature) => { setTemperature(temperature); setScale("f"); }; const celsius = scale === "f" ? tryConvert(temperature, toCelsius) : temperature; const fahrenheit = scale === "c" ? tryConvert(temperature, toFahrenheit) : temperature; return ( <div> <TemperatureInput scale="c" temperature={celsius} onTemperatureChange={handleCelsiusChange} /> <TemperatureInput scale="f" temperature={fahrenheit} onTemperatureChange={handleFahrenheitChange} /> <BoilingVerdict celsius={parseFloat(celsius)} /> </div> ); } export default Calculator;

몽고db로 주소 경로로 알려주세요... 순서가 하려고 했는데...다른 경로 나와서 알려주세요

안녕하세요! section 26 포트폴리오 수행중, Invariant Violation이라는 에러가 떠서 이렇게 질문 드립니다.

import React from 'react'; const EmotionItem = ({ emotion_id, emotion_img, emotion_descript, onClick, }) => { return ( <div onClick={() => onClick(emotion_id)} className="EmotionItem"> <img src={emotion_img} alt="감정 이미지" /> <span>{emotion_descript}</span> </div> ); }; export default EmotionItem; DiaryEditor에서 EmotionItem 부분에 onClick 프롭스를 전달해주고 있는데요. div 부분에 onClick을 받는 건 알겠는데 중괄호 안에 또 onClick을 받는 건 왜인가요? 코드 문법이 잘 이해가 되지 않아 질문 드립니다.

04-04-graphql-mutation-input 파트에서gql세팅에서 백틱을 사용하는데 백틱 내부 내용이 저는 문자열 처리되어서 강의와 같이 문자열이 아닌 함수 형태로 만들 수 있는 플러그인이 무엇일까요?동작은 똑같이 동작하기는 합니다

errors?.email 에서 ?. 의 의미가 뭔가요?

강의 듣으면서.... 몽고db 가 강의랑 틀려서...못했습니다....포스트맨 했는데... 안됩니다...https://github.com/leechangseop71/leechangseop71.github.io제 깃 허브 주소 입니다 무엇이 잘못된 것인지 모르겠습니다실행 시키면 이렇게 되네요

조건문 업그레이드에서 6분 가량 10번째 줄에meal[mealType] || "굶기" 가 있습니다.여기에서 console.log(getMeal("한식"))의 결과가 "불고기"가 나오는것은 이해가 갑니다.만약 meal.mealType으로 코드를 수정했을 때도 "불고기"가 나와야할 것 같은데 "굶기"가 나옵니다.잘 이해가 가지 않아서 설명 가능하시다면 부탁드립니다.

 강의에서 scroll view를 따라 하려했는데 잘안됩니다.원인을 찾아보니 안드로이드에서는 스크롤뷰 안에 스크롤뷰 는 적용이 안되는 것 같습니다. 그래서 찾아본결과 중첩 스크롤 뷰는 nestedScrollEnabled={true}이걸 적용해야 하는것 같은데 이것 을 써도 잘 안됩니다 코드는 아래와 같습니다import {View, Text, ScrollView} from 'react-native'; import React from 'react'; const Stories = () => { return ( <ScrollView horizontal={true} nestedScrollEnabled={true} // showHorizontalScrollIndicator={false} style={{paddingVertical: 20}}> <View style={{flexDirection: 'row'}}> <Text style={{margin: 10}}>Story 1</Text> {/* ...more stories */} </View> </ScrollView> ); }; export default Stories;

안녕하세요, section 26 수업을 따라가던 도중, 이러한 error가 발생하였습니다. error message를 확인해보면, CreateProductInput에 문제가 있는 것 같은데 해결하기가 어려워 질문을 남깁니다 !

(사진)

 calling synchronize methods on native modules is not supported in chromeError: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4 from C:\Users\SSAFY\Desktop\CLI0830\RNInsta/.:   

serve를 실행하면 console에 다음과 같은 오류메세지만 나옵니다. 어떻게 해결해야할까요?추가로 Chart.js를 install 해서 사용하던중이었습니다.

안녕하세요 이번에 '따라하며 배우는 React Testing' 강의를 수강중인 박동준이라고 합니다. 이번 강의에서 여행상품 앱 만들기 파트에서 진행하는 방법들을 정리하여 개인 포트폴리오로서 활용하고 싶습니다.모든 소스코드를 올리는것이 아니라, 방법적인 부분들을 정리하고 회원가입 또는 게시글 작성 및 댓글 등 간단한 CRUD 로직으로 배운 개념을 적용하여 코드 및 방법들에 대해서 올리고자 합니다.혹시 이런 방법으로 제 개인 github에 업로드 해도 되는지 궁금합니다!

안녕하세요.현재 npm i react-router-dom 으로 설치를 하여 라우터로 페이지 이동을 사용하려고 하는데요 터미널에서 계속 에러가 나서 질문드립니다.. 설치할때 --force, or --legacy-peer-deps 사용해봤지만 전부 아래 에러 나오고 리액트 버전을 낮추려고 npm uninstall react react-dom 를 하고 npm install react@^17.0.2 react-dom@17.0.2 까지 해봤지만 전부 아래 에러가 나옵니다.. 리액트 버전 관련 종속성 문제 인 것 같은데 npm start를 제외한 명령어를 치면 아래 에러가 나오는데 어떻게 해결을 해야 할까요??아래 에러 말고 --legacy-peer-deps 이걸 포함해서 명령어를 작성하라고 한 에러도 있어서 항상 그렇게 설치를 해왔지만 아래 에러는 처음입니다.. npm ERR! code EOVERRIDE npm ERR! Override for @types/react@^18.2.20 conflicts with direct dependency npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\gmltn\AppData\Local\npm-cache\_logs\2023-09-01T15_46_00_408Z-debug-0.log package.json{ "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", "@types/jest": "^29.5.3", "@types/node": "^20.5.1", "@types/react": "^18.2.20", "@types/react-dom": "^18.2.7", "axios": "^1.4.0", "http-proxy-middleware": "^2.0.6", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.45.4", "react-icons": "^4.10.1", "react-scripts": "5.0.1", "typescript": "^5.1.6", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "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" ] }, "overrides": { "@types/react": "^17.0.38" } }  

안녕하세요 선생님 !props를 잘 쓰다가, return문 첫 번째 줄에 넣었는데 두 번쨰 이미지처럼 에러가 뜨더라구요 . 근데 첫 번째 이미지처럼 위에 부모 태그를 달아주면 괜찮아지던데 이유가 혹시 뭔지 알 수 있을까요 ??

npx gatsby-cli new "[프로젝트 명] 하고 실행하는 지 알고 싶습니다

리덕스, 사가를 사용할때는  리덕스 -> 사가 -> 리덕스 순으로 값이 전해져서 게시글을 추가할때마다  게시글 개수가 올라가는 흐름을 툴킷을 적용해서 하려고 하니깐 막혀서  어떻게 해야할지 질문드립니다.   코드는 다음과 같이 post.ts // post.ts export const addPostAction = createAsyncThunk('/post', async (data: string) => { const addPost = dummyPost(data); await delay(1000); return addPost; }); // 게시글 삭제 export const removePostAction = createAsyncThunk( '/post/delete', async (data: string) => { await delay(1000); return data; } ); // 게시글 추가 .addCase(addPostAction.pending, (draft) => { draft.addPostLoading = true; draft.addPostDone = false; draft.addPostError = null; }) .addCase(addPostAction.fulfilled, (draft, action) => { draft.addPostLoading = false; draft.addPostDone = true; draft.mainPosts.unshift(action.payload); }) .addCase(addPostAction.rejected, (draft, action) => { draft.addPostLoading = false; draft.addPostError = action.error.message; }) // 게시글 삭제 .addCase(removePostAction.pending, (draft) => { draft.removePostLoading = true; draft.removePostDone = false; draft.removePostError = null; }) .addCase(removePostAction.fulfilled, (draft, action) => { draft.removePostLoading = false; draft.removePostDone = true; draft.mainPosts = draft.mainPosts.filter( (v) => v.id !== action.payload ); }) .addCase(removePostAction.rejected, (draft, action) => { draft.removePostLoading = false; draft.removePostError = action.error.message; })  user.ts  // user.ts const dummyUser = (data: LoginData): DummyData => ({ ...data, nickname: '제로초', id: 1, Posts: [{ id: 1 }], Followings: [ { id: 2, nickname: '김' }, { id: 3, nickname: '이' }, { id: 4, nickname: '박' }, ], Followers: [{ nickname: '김' }, { nickname: '박' }, { nickname: '이' }], }); const userSlice = createSlice({ name: 'user', initialState, reducers: { addPostTome(draft, action) { draft.me?.Posts.unshift({ id: action.payload }); }, removePostOfMe(draft, action) { if (draft.me) { draft.me.Posts = draft.me?.Posts.filter((v) => v.id !== action.payload); console.log(draft.me); } }, }, 로 구분을 했고  게시글 추가, 삭제는 정상적으로 작동하는데  이때 user.ts의 dummyUser 값을 어떻게 변경해줘야 할지를 잘 모르겠어서 질문드립니다.

이유 알 수 있을까요

일단...여러가지 배포 오류가 많이떠서 거의 2주간 배포에 시간 썼는데 여찌저찌 배포가 되긴 했어요..!이번엔 질문이 좀 많아요..ㅎ서버 api와 통신은 제대로 잘 되는데 자꾸 웹소켓 오류가 뜨는데 이거 무시해도 괜찮은 건가요?서비스 동작하는데는 문제 없는 것 같은데 이런 오류가 계속 떠요.백엔드와 데이터베이스 연결 pdf 파일 내용은 영상으로 안다뤄 주신거죠? 제가 도커쪽과 배포쪽은 정말 아예 처음 써보는거라 지식이 많이 부족한데, 제가 영상보고 이해하기로는 현재 ec2에서 깃 클론으로 모든 client와 server소스코드와 도커 컴포즈 파일까지 가져와서 거기서 pm2로 클라이언트랑 서버 모두 백그라운드로 실행하는 것으로 이해했거든요. 2-1. 왜 도커 파일을 client와 server에 각각 만들어줘서 도커컴포즈로 이미지 생성하도록 만드는건지 이해를 못했어요. 도커 파일에는 여러 패키지 설치하는 명령어(?)와 client를 실행시키는 명령어가 있던데 이 과정이 왜 필요한건지 이해를 못했습니다.ㅠㅠ 사실 저는 '백엔드와 데이터베이스 연결하기'라는 pdf에 있는 도커 파일로 변경했을때 배포 실패했다가 도커파일 싹 다 지우고 decker-compose.yml파일을 원래 기존 로컬에서 작성했던대로 냅두고, data-source.ts 파일의 host 부분도 그냥 "localhost"로 놔둔채 배포에 성공했거든요.그래서 저 pdf 파일대로 client와 server에 도커파일을 만들고 도커 컴포즈 파일까지 변경한 후 도커 컴포즈 명령어 실행했을 때와 도커파일 없이 기존의 도커컴포즈 파일대로 배포했을 때와는 어떤 부분이 다른건지 궁금합니다. ec2 인스턴스에서 깃 클론으로 가져온 client를 다시 npm run build:production하는 빌드과정을 보여주셨는데, 어짜피 pm2로 ecosystem.config파일을 백그라운드로 실행시킬거면 (이 파일에서 script: "npm run start:production"라는 명령어를 실행하도록 설정해줬으므로) client의 빌드 폴더 만드는 과정이 필요 없는거 아닌지요? (무지한 소리면 죄송합니다..ㅠ) 마지막으로, 인스턴스를 종료하고 컴퓨터를 끄더라도 도커가 종료되지 않고 계속 동작하는 것 같더라고요. 로그인 로그아웃이 동작하고 유효한 토큰인지 확인하는 api도 잘 동작했어요. 제가 생각했을 떄는 pm2로 서버와 클라이언트는 백그라운드로 실행시켰지만 도커는 포어그라운드로 동작시켜서 인스턴스 종료하면 데이터베이스와는 연결이 끊겨 제대로 동작을 안할 것이라 생각했는데 예상과는 달리 잘 동작하더라고요. 이건 도커의 특징인건지, 아니면 저희가 작성한 파일에 백그라운드로 동작하도록 하는 설정이 포함되어 있는건지.. 알려주시면 감사하겠습니다.질문이 길고 갯수가 많은데 답변 기다리겠습니다..! 감사합니다.