말씀하신 것을 어떻게 해야 할지 모르겠습니다.api.json 파일을 생성했는데, 이곳에 어떤 데이터를 넣으면 될까요??아래 링크 주신 것들을 하나하나 넣어봤는데, 되지는 않았습니다. ㅠㅠ

안녕하세요 강의 잘 보고 있습니다. 컨텍스트도 많이 사용하면 성능 저하가 생길 것으로 예상됩니다. 그래서 컨텍스트와 프로퍼티 선택 기준이 궁금한데,실무에선 보통 프로퍼티로 우선 사용하고 하위 컴포넌트들이 특정 개수 이상이 되면 컨텍스트로 변경을 하나요?아니면 처음부터 컨텍스트로 정의해 놓고 불필요한 컨텍스트를 프로퍼티로 변경하나요? 감사합니다

확실히 expo 버전으로 프로젝트를 생성하면, 영상처럼 진행이 되지 않습니다 ㅠㅠ 프로젝트 설치 및 실행 과정은 다음과 같습니다.기종: Androidnpx create-expo-app <앱 이름> --template세 번째(blank) :typescript 선택npx expo start를 실행expo 앱에서 QR 코드로 보기강의와 달리, expo로 빌드하셨다면npx expo install expo-location를 설치해주신 다음에 useEffect 함수 부분을 다음과 같이 변경해주면 됩니다.(Expo는 자체 위치 서비스 API를 제공하므로, @react-native-community/geolocation 대신 expo-location을 사용해야 합니다.)useEffect(() => { const getLocation = async () => { try { // 위치 권한 요청 let { status } = await Location.requestForegroundPermissionsAsync(); if (status !== 'granted') { setError('위치 권한이 거부되었습니다'); setLoading(false); return; } // 현재 위치 가져오기 let location = await Location.getCurrentPositionAsync({}); const { latitude, longitude } = location.coords; fetchWeather(latitude, longitude); } catch (err) { setError(err.message); setLoading(false); } }; getLocation(); }, []);다음으로 OpenWeatherMap API는 기본적으로 켈빈 온도를 반환합니다. 따라서 섭씨로 변환하는 코드를 추가해야 합니다.각자 가져오신 API 값 뒤에 &units=metirc 를 추가해주시면 됩니다. 전체 코드는 다음과 같습니다.import { StatusBar } from 'expo-status-bar'; import { useEffect, useState } from 'react'; import { ActivityIndicator, Text, View } from 'react-native'; import styled from 'styled-components/native'; import * as Location from 'expo-location'; const Container = styled.View` align-items: center; margin-top: 40px; background-color: #222222; flex: 1; `; const MainTemp = styled.Text` font-size: 80px; color: white; `; const Addition = styled.View` background-color: #aeaeae; width: 150px; height: 150px; margin: 15px; align-items: center; justify-content: center; border-radius: 15px; `; const App = () => { const [weatherData, setWeatherData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const getLocation = async () => { try { // 위치 권한 요청 let { status } = await Location.requestForegroundPermissionsAsync(); if (status !== 'granted') { setError('위치 권한이 거부되었습니다'); setLoading(false); return; } let location = await Location.getCurrentPositionAsync({}); const { latitude, longitude } = location.coords; fetchWeather(latitude, longitude); } catch (err) { setError(err.message); setLoading(false); } }; getLocation(); }, []); const fetchWeather = async (latitude, longitude) => { try { const response = await fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=<<개인 API값>>&units=metric` ); // <<>>는 지우셔야 합니다. if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); setWeatherData(data); } catch (error) { setError(error.message); } finally { setLoading(false); } }; if (loading) { return ( <Container> <ActivityIndicator size="large" color="#ffffff" /> </Container> ); } if (error) { return ( <Container> <Text style={{ color: 'white', fontSize: 20 }} >{`Error: ${error}`}</Text> </Container> ); } if (!weatherData) { return ( <Container> <Text style={{ color: 'white', fontSize: 20 }}>No data available</Text> </Container> ); } const { main: { temp, feels_like, humidity, temp_max, temp_min }, wind: { speed }, weather, } = weatherData; return ( <Container> <StatusBar /> <Text style={{ fontSize: 20, marginTop: 40, color: 'white' }}> {weatherData.name} </Text> <MainTemp>{Math.round(temp)}℃</MainTemp> <Text style={{ fontSize: 24, color: 'white' }}>{weather[0].main}</Text> <View style={{ flexDirection: 'row' }}> <Addition> <Text style={{ color: 'white', fontSize: 20, marginTop: -40, marginBottom: 30, }} > 체감 온도 </Text> <Text style={{ color: 'white', fontSize: 18 }}> {Math.round(feels_like)}℃ </Text> </Addition> <Addition> <Text style={{ color: 'white', fontSize: 20, marginTop: -40, marginBottom: 30, }} > 습도 </Text> <Text style={{ color: 'white', fontSize: 18 }}>{humidity}%</Text> </Addition> </View> <View style={{ flexDirection: 'row' }}> <Addition> <Text style={{ color: 'white', fontSize: 20, marginTop: -40, marginBottom: 30, }} > 최고/최저 온도 </Text> <Text style={{ color: 'white', fontSize: 18 }}> {Math.round(temp_max)}℃/{Math.round(temp_min)}℃ </Text> </Addition> <Addition> <Text style={{ color: 'white', fontSize: 20, marginTop: -40, marginBottom: 30, }} > 풍속 </Text> <Text style={{ color: 'white', fontSize: 18 }}>{speed} m/s</Text> </Addition> </View> <View></View> </Container> ); }; export default App;  

계산기 앱 개발과 마찬가지로, 다음과 같은 프로젝트 설치 및 실행을 진행하였습니다.<기종 : Android>npx create-expo-app <앱 이름> --template세 번째(blank) :typescript 선택npx expo start를 실행expo 앱에서 QR 코드로 보기이전 강의(레이아웃 구성하기)의 중간(7:23)에 나오는 텍스트 창을 클릭하면 UI가 따라 올라가는 것을 방지하기 위한 설정방법이 제 것에서는 나타나지 않았습니다. 검색 창에 windowsoftinputmode 또는 AndroidManifest를 검색해도 나타나지 않았습니다.(아무래도, 제가 설치를 잘못해서 나타났거나 expo로 빌드했기에 나타나지 않는 것 같습니다. VSCode는 기존에 사용했던 터라 해당되지 않는 것 같습니다.) 이를 해결하기 위해,Picker를 감싸고 있는 View를 Wrapper라고 이름을 변경한 후에, postion: absolute 속성을 부여했습니다. +) 텍스트 입력 글자가 꽤 길어지면, 줄바꿈이 되지 않고 글자가 잘려나가는 현상이 있습니다. 이를 해결하는 방법으로는 multiline={true}를 추가해주면 됩니다.코드는 아래와 같습니다.import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { Text, TextInput, View, Dimensions } from 'react-native'; import Translator from 'react-native-translator'; import styled from 'styled-components/native'; import { Picker } from '@react-native-picker/picker'; const Container = styled.View` background-color: #181818; flex: 1; padding-top: 20px; `; const Wrapper = styled.View` position: absolute; top: 40px; left: 0; right: 0; padding-horizontal: 10px; `; const InputView = styled.View` background-color: #606060; height: 250px; justify-content: left; align-items: start; padding: 10px; border-radius: 10px; margin-bottom: 80px; `; const ResultView = styled(InputView)` background-color: #0084ff; margin-bottom: 10px; `; const App = () => { const [value, setValue] = useState(''); const [result, setResult] = useState(''); const [fromLang, setFromLang] = useState('en'); const [toLang, setToLang] = useState('ko'); return ( <Container> <StatusBar style="light" /> <Translator from={fromLang} to={toLang} value={value} onTranslated={(t) => setResult(t)} /> <Wrapper> <Picker style={{ marginBottom: 10, backgroundColor: '#606060' }} selectedValue={fromLang} onValueChange={(itemValue) => setFromLang(itemValue)} > <Picker.Item label="한국어" value="ko" /> </Picker> <InputView> <TextInput style={{ fontSize: 24, color: 'white' }} value={value} onChangeText={(t) => setValue(t)} multiline={true} placeholder="번역할 텍스트 입력" /> </InputView> <Picker style={{ marginBottom: 10, backgroundColor: '#0084ff' }} selectedValue={toLang} onValueChange={(itemValue) => setToLang(itemValue)} > <Picker.Item label="영어" value="en" /> </Picker> <ResultView> <Text style={{ fontSize: 24, color: 'white' }}>{result}</Text> </ResultView> </Wrapper> </Container> ); }; export default App; ps) 간혹 글자를 입력하면 즉각 번역되지 않고, 번역되는 아래쪽 Picker를 클릭한 후에야 동작하긴 합니다. 이를 해결하기 위해서는 useEffect를 사용하면 해결되지만 강의에서는 다루지 않아 코드에 반영하지 않았습니다. GPT가 잘 알려주니까 궁금하신 분들은 해보시면 좋을 것 같습니다~ ps) 업데이트 하시면서, 영상이 잘못배치된 것 같습니다~ 번역앱 원리와 이해 부분에 코인에 관한 영상이 재생됩니다. 코인 관련, 날씨앱에서는 이상이 없었습니다~ 좋은 강의 감사합니다~!! 덕분에 많은 도움이 되고 있습니다.

제가 설치를 이상하게 했는지, 잘 되지 않아 저는 프로젝트 생성을 다음과 같은 절차로 진행했습니다.npx create-expo-app <앱 이름> --template세 번째(blank) :typescript 선택npx expo start를 실행expo 앱에서 QR 코드로 보기위와 같은 절차를 거쳐, 복붙으로도 진행해봤을 때의 문제점은 안드로이드 기준으로 기호들이 나타나지 않는다는 점이었습니다. 무지성으로 복붙한 것이 문제였는데요. 문제는 margin 값들의 값이 컸기 때문이었습니다. 혹시 저 같이 잘 안 되시는 분들이 있을까 하여, 좀 헤맸던 기록으로 남깁니다~ ps. 아래 별도로 올려주신 코드 중에 const [result, setResult] = useState('') 에서 useState('0')으로 변경이 필요합니다. 그리고 알려주신 코드를 복붙해서 했을 때 제대로 나오지 않아, GPT의 도움을 받아 수정해보았습니다.import React, { useState } from 'react'; import { Text, View } from 'react-native'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import Entypo from 'react-native-vector-icons/Entypo'; import FontAwesome6 from 'react-native-vector-icons/FontAwesome6'; import styled from 'styled-components/native'; import { evaluate } from 'mathjs'; const NumberButton = styled.TouchableOpacity` background-color: #b6b6b6; width: 65px; height: 65px; border-radius: 35px; margin: 8px; align-items: center; justify-content: center; `; const OperatorButton = styled(NumberButton)` background-color: #0084ff; `; const NumberText = styled.Text` font-size: 30px; color: white; `; const ResultText = styled.Text` font-size: 65px; padding: 20px; margin-top: 50px; color: white; text-align: right; `; const App = () => { const [input, setInput] = useState(''); const [result, setResult] = useState('0'); const handlePress = (value) => { const newInput = input + value; setInput(newInput); setResult(newInput); // 입력값을 바로 결과창에 표시 }; const handleOperation = (op) => { if (input && !['+', '-', '*', '/'].includes(input.slice(-1))) { const newInput = input + op; setInput(newInput); setResult(newInput); // 연산자도 바로 결과창에 표시 } }; const calculate = () => { try { const calculatedResult = evaluate(input).toString(); setResult(calculatedResult); setInput(calculatedResult); // 계산 결과를 새로운 입력값으로 설정 } catch (e) { setResult('Error'); setInput(''); } }; const clear = () => { setInput(''); setResult('0'); }; return ( <View style={{ flex: 1, backgroundColor: '#181818' }}> <ResultText>{result}</ResultText> <View style={{ flex: 1, justifyContent: 'flex-end', paddingBottom: 20 }}> <View style={{ flexDirection: 'row', justifyContent: 'center' }}> <View style={{ paddingRight: 20 }}> <View style={{ flexDirection: 'row', flexWrap: 'wrap', width: 250 }} > {[...Array(10).keys()].reverse().map((num) => ( <NumberButton key={num} onPress={() => handlePress(num.toString())} > <NumberText>{num}</NumberText> </NumberButton> ))} <NumberButton onPress={clear}> <MaterialIcons name="restart-alt" size={30} color="white" /> </NumberButton> <NumberButton onPress={() => handlePress('.')}> <Entypo name="dot-single" size={30} color="white" /> </NumberButton> </View> </View> <View style={{ marginTop: -81 }}> <OperatorButton onPress={calculate}> <MaterialCommunityIcons name="equal" size={30} color="white" /> </OperatorButton> <OperatorButton onPress={() => handleOperation('+')}> <Entypo name="plus" size={30} color="white" /> </OperatorButton> <OperatorButton onPress={() => handleOperation('-')}> <Entypo name="minus" size={30} color="white" /> </OperatorButton> <OperatorButton onPress={() => handleOperation('*')}> <Entypo name="cross" size={30} color="white" /> </OperatorButton> <OperatorButton onPress={() => handleOperation('/')}> <FontAwesome6 name="divide" size={30} color="white" /> </OperatorButton> </View> </View> </View> </View> ); }; export default App;

위에 그림이 제가한 코드를 돌렸을떄 나오는 그림인데 강의 실습에서는 버튼이 새로로 정렬되지않고 위에 붙어있는 형식이런 형식으로 나왔는데 코드에 차이점이 아예 없어 뭐가 문제인지 궁금합니다 

섹션 12. Context의 > 11.3 분리하기에 대한 질문입니다.강의에서 처럼 TodoDispatchContext로 분리한 후 함수인 { onCreate, onUpdate, onDelete } 에 대해 useMemo처리를 함으로 재생성이 일어나지 않도록 하는 것에 대해 잘 이해되었습니다.  그런데 궁금한 것은, 그렇다면 위 객체에서 처리한 useCallback은 필요없는 것은 아닌지요? 문의드립니다. 

안녕하세요? 그랩선생님, 수고가 많으십니다.다름이 아니라 강의 [컴포넌트 사용하기] 강의를 진행하던 중 2가지 에러가 발생하여 질문을 하게 되었습니다.첫번째 에러는 아래 사진으로 첨부합니다. 그리고 두번째 에러는 실제 소스 파일 폴더에 가서 App.js 파일을 선택 후 엔터(실행)하니 아래 사진과 같은 에러가 발생하였습니다. --> 이 두가지 에러를 어떻게 하면 해결 할 수 있는지 상세한 설명과 자세한 답변 부탁드립니다.감사합니다.

getTime() 메서드 사용 질문드립니다home pivoteDate -> new Date() startTime, EndTime => getTime()new onSubmit -> onCreate ( input.createdDate.getTime(), input.emotion,input.content ) const [input, setInput] = useState({ createdDate: new Date(), emotionId: 3, content: "", });Edit const onSubmit = (input) => { onUpdate( params.id, input.createdDate.getTime(), input.emotionId, input.content ); }; getTime() 메서드를 썼다 안 썼다 하는 것 같은데 언제 쓰고 안 쓰는지 이유가 궁금합니다. 

로그인 후 개발자 도구 쿠키에 x_auth 정상적으로 확인DB에도 토큰 정상적으로 값 입력된 것 확인로그아웃 버튼을 클릭 시 401 에러 발생, 토큰 삭제 xserver/index.jsapp.post('/api/users/login', async (req, res) => { try { const user = await User.findOne({ email: req.body.email }); if (!user) { return res.json({ loginSuccess: false, message: "제공된 이메일에 해당하는 유저가 없습니다." }); } // 비밀번호가 일치하는지 확인한다. const isMatch = await user.comparePassword(req.body.password); if (!isMatch) { return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다." }); } // 비밀번호가 일치하다면 토큰을 생성한다. const tokenUser = await user.generateToken(); res.cookie("x_auth", tokenUser.token) .status(200) .json({ loginSuccess: true, userId: user._id }); } catch (err) { return res.status(400).send(err); } }); app.post('/api/users/logout', auth, async(req, res) => { try { await User.findOneAndUpdate({ _id: req.user._id }, { token: "" }); res.clearCookie("x_auth"); return res.status(200).send({ logoutSuccess: true }); } catch (err) { return res.json({ logoutSuccess: false, message: err.message }); } });User.jsuserSchema.methods.comparePassword = function(plainPassword, cb) { const user = this; return bcrypt.compare(plainPassword, user.password); }; userSchema.methods.generateToken = function() { var user = this; // jsonwebtoken을 이용해서 토큰을 생성한다. var token = jwt.sign(user._id.toJSON(), 'secretToken'); user.token = token; return user.save(); }; userSchema.statics.findByToken = async function(token) { const user = this; try { // 토큰을 decode합니다. const decoded = jwt.verify(token, 'secretToken'); // 디코딩된 정보를 이용해 유저를 찾습니다. const userData = await user.findOne({ "_id": decoded, "token": token }); return userData; } catch (err) { throw new Error("유효하지 않은 토큰입니다."); } };auth.jsconst { User } = require("../models/User"); function auth(req, res, next) { // 인증 처리한다. // 클라이언트 쿠키에서 토큰을 가져온다. const token = req.cookies.x_auth; if (!token) { return res.status(401).json({ isAuth: false, message: "토큰이 제공되지 않았습니다." }); } // 토큰을 복호화한 후 유저를 찾는다. User.findByToken(token) .then((user) => { if (!user) { return res.status(401).json({ isAuth: false, message: "유효하지 않은 토큰입니다." }); } // 토큰과 유저정보를 다음 단계로 전달한다. req.token = token; req.user = user; next(); }) .catch((err) => { return res.status(401).json({ isAuth: false, message: err.message }); }) }; module.exports = { auth };서버의 경로를 절대 경로로 기입하지 않으면 404 에러 발생5000 포트로 데이터 전송, cors로 3000 포트로 이동하도록 설정const corsOptions = { origin: 'http://localhost:3000', // 클라이언트 주소 credentials: true // 쿠키를 포함하도록 }; app.use(cors(corsOptions));

뭔가 빠트렸나 했더니, isModified() 때문에 비밀번호 변경이 아닌 신규 데이터 저장시에는 next() 를 호출해버리네요에러도 없어서 파악이 좀 오래걸렸네요 if(user.isModified("password") 부분을 !user.isModified("password") 로 수정하고 해결되었네요 ※ 같은 문제 겪으시는분 계시면 참고하세요!

auth.ts에서 //비번이 맞으면 토큰 생성 const token = jwt.sign({username}, process.env.JWT_SECRET) console.log(token) //쿠키 저장 res.set("Set-Cookie", cookie.serialize('token', token)); return res.json({user, token});token은 잘 찍히고 요청 헤더에 포함되어 있는데TypeError serialize 부분에서 에러가 뜨고실제 응답 에러가 납니다.... 쿠키 저장이 안되는 것 같습니다.serialize가 undefine 되었다는데 위에 const token으로 제대로 선언되고 출력까지 잘 되는데 이유를 모르겠습니다...   

아래 질문 관련입니다.server.ts origin 부분을 강사님처럼 다음과 같이 작성하면 header 오류가 납니다.const origin = process.env.ORIGIN; app.use(cors({ origin, credentials: true }))근데 아래처럼 const origin을 다음과 같이 환경변수를 거치지 않고 명시하면 헤더 오류 대신 500 오류가 나면서 토큰이 생성되지 않습니다. (로그인 페이지에서 로그인 시)const origin = 'http://localhost:3000'; app.use(cors({ origin, credentials: true })) 서버에서 process.env.ORIGIN, process.env.JWT_SECRET을 찍어봤을땐 잘 나오는데...이 이유로 //비번이 맞으면 토큰 생성 const token = jwt.sign({username}, process.env.JWT_SECRET)이 명령줄이 제대로 실행되지 않는 걸까 싶어 process.env.JWT_SECRET를 'super_secret'으로 바꿔봐도 똑같은 증상입니다. 확실하진 않지만 이 때문에 토큰 생성에 오류가 생겨서 500 에러가 뜨는 것인가 싶은데 어떻게 해결하면 좋을까요? 

안녕하세요 리액트를 공부하기 위해 어제 처음 등록을 했서 잘 듣고 있습니다. 강의에 대한 질문은 아니지만 수업준비관련해서 비주얼스튜디오 부분에 대해 질문이 있는데 제가 현재 맥북으로 사용하고 외장하드를 연결해서 이 외장하드에 폴더를 만들어 사용하고 있는데 어느순간 파일을 만들거나 리액트를 설치할때 파일명앞에 이미지처럼 ._ 이런식으로 붙더라구요. 삭제하면 또 생겨서 구글링을 통해 찾아봤지만 해결이 되지 않았습니다. 혹시 방법이 없을까요? 

안녕하세요.아듀이노 같은 완전 처음이라최소 보드, 온습도센서, LED는따로 구매해야 하는 거 같은데요한꺼번에 저렴하게 구매하는 법 없을 까요?

postgres 주소는 오프라인 강의 시에만 제공하고 온라인은 제공을 하지 않는다고 이해했는데요.해당 부분으로 대체 가능한 방법과 postgres 없이 graphql만 실행하여 강의를 따라가도 지장이 없는지 궁금합니다.이후 강의에는 데이터 처리하는 부분이 포함되어있는 것 같은데요. 해당부분 확인 바랍니다!

import { createParamDecorator, ExecutionContext } from '@nestjs/common'; //저장된 사용자 정보에 접근 가능 export const User = createParamDecorator( (data: unknown, ctx: ExecutionContext) => { const request = ctx.switchToHttp().getRequest(); console.log('사용자', request.user.id); return request.user; }, );위에있는것은 로그인을 하게되면 유저의 아이디값을 가져오는데 로그인가드쪽을 보면 여기서는 자꾸 false값이 나옵니다.다른쪽 로직도 작업하신 코드 그대로 사용을 했는데 왜자꾸 false값만 나올까요....import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common'; import { Request } from 'express'; import { Observable } from 'rxjs'; @Injectable() export class LoggedInGuard implements CanActivate { canActivate( context: ExecutionContext, ): boolean | Promise<boolean> | Observable<boolean> { const request = context.switchToHttp().getRequest() as Request; console.log('로그인햇니?????????', request.isAuthenticated()); return request.isAuthenticated(); } } 로그인 유지가 안되는거로 보이기는 하는데 해결법이 있을까요?

3.3)Node.js 사용하기강의 3분10초입니다.npm init 을 터미널에 입력하면 사진과 같은 오류가 납니다.

로그인 페이지에서 로그인을 하면 500, 커뮤니티 생성 페이지에서 생성을 하면 401 AxiosError가 뜹니다.    <login.tsx>import axios from 'axios'; import InputGroup from '../components/InputGroup' import Link from 'next/link' import { useRouter } from 'next/router'; import React,{ FormEvent, useState } from 'react' import { useAuthDispatch } from '../context/auth'; axios.defaults.withCredentials = true; const Login = () => { let router = useRouter(); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [errors, setErrors] = useState<any>({}); const dispatch = useAuthDispatch(); const handleSubmit = async (event: FormEvent) => { event.preventDefault(); try{ const res = await axios.post("/auth/login", {password, username}, {headers: {'Access-Control-Allow-Origin': 'http://localhost:3000'}}) dispatch("LOGIN", res.data?.user); } catch(error: any){ //console.log(error); setErrors(error.response?.data || {}) } } return ( <div className='bg-white'> <div className='flex flex-col items-center justify-center h-screen p-6'> <div className='w-10/12 mx-auto md:w-96'> <h1 className='mb-2 text-lg font-medium'>로그인</h1> <form onSubmit={handleSubmit}> <InputGroup placeholder='Username' value={username} setValue={setUsername} error={errors.username} /> <InputGroup placeholder='Password' value={password} setValue={setPassword} error={errors.password} /> <button className='w-full py-2 mb-1 text-xs font-bold text-white uppercase bg-gray-400 border border-gray-400 rounded'> 로그인 </button> </form> <small> 아직 아이디가 없으신가요? <Link href="/register" legacyBehavior> <a className='ml-1 text-blue-500 uppercase'>회원가입</a> </Link> </small> </div> </div> </div> ) } export default Login<create.tsx>import axios from "axios"; import { GetServerSideProps } from "next"; import InputGroup from "../../components/InputGroup" import {useState, FormEvent} from "react"; import {useRouter} from "next/router" axios.defaults.withCredentials = true; const SubCreate = () => { const [name, setName] = useState(""); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [errors, setErrors] = useState<any>({}); let router = useRouter(); const handleSubmit = async (event: FormEvent) => { event.preventDefault(); try { const res = await axios.post("/subs", {name, title, description}, {headers: {'Access-Control-Allow-Origin': 'http://localhost:3000'}}) router.push(`/r/${res.data.name}`); } catch (error: any) { // console.log(error); setErrors(error.response?.data || {}); } } return ( <div className="flex flex-col justify-center pt-16"> <div className="w-10/12 mx-auto md:w-96"> <h1 className="mb-2 text-lg font-medium"> 그룹 만들기 </h1> <hr /> <form onSubmit={handleSubmit}> <div className="my-6"> <p className="font-medium">Name</p> <p className="mb-2 text-xs text-gray-400"> 그룹 이름은 변경할 수 없습니다. </p> <InputGroup placeholder="이름" value={name} setValue={setName} error={errors.name} /> </div> <div className="my-6"> <p className="font-medium">Title</p> <p className="mb-2 text-xs text-gray-400"> 주제를 입력해 주세요. </p> <InputGroup placeholder="주제" value={title} setValue={setTitle} error={errors.title} /> </div> <div className="my-6"> <p className="font-medium">Description</p> <p className="mb-2 text-xs text-gray-400"> 그룹에 대한 설명을 입력해주세요. </p> <InputGroup placeholder="설명" value={description} setValue={setDescription} error={errors.description} /> </div> <div className="flex jstify-end"> <button className="px-4 py-1 text-sm font-semibold rounded text-white bg-gray-400 border" > 그룹 만들기 </button> </div> </form> </div> </div> ) } export default SubCreate<subs.ts>import {Router, Request, Response} from "express"; import jwt from "jsonwebtoken" import { User } from "../entities/User"; import userMiddleware from "../middlewares/user" import authMiddleware from "../middlewares/auth" import { AppDataSource } from "../data-source"; import Sub from "../entities/Sub"; import { isEmpty } from "class-validator"; const createSub = async (req: Request, res: Response, next) => { const {name, title, description} = req.body; try { let errors: any = {}; if (isEmpty(name)) errors.name = "이름은 비워둘 수 없습니다."; if (isEmpty(title)) errors.title = "제목은 비워둘 수 없습니다."; const sub = await AppDataSource.getRepository(Sub) .createQueryBuilder("sub") .where("lower(sub.name) = :name", { name: name.toLowerCase() }) .getOne(); if (sub) errors.name = "서브가 이미 존재합니다."; if (Object.keys(errors).length > 0) { throw errors; } } catch (error) { console.log(error); return res.status(500).json({ error: "문제가 발생했습니다." }); } try { const user: User = res.locals.user; const sub = new Sub(); sub.name = name; sub.description = description; sub.title = title; sub.user = user; await sub.save(); return res.json(sub); } catch (error) { console.log(error); return res.status(500).json({ error: "문제가 발생했습니다." }); } }; const router = Router(); router.post("/", userMiddleware,authMiddleware, createSub); export default router; <server.ts>import express, { response } from "express"; import morgan from "morgan"; import { AppDataSource } from "./data-source"; import authRoutes from './routes/auth' import subRoutes from './routes/subs' import cors from 'cors'; import dotenv from 'dotenv'; import cookieParser from "cookie-parser"; const app = express(); const origin = process.env.ORIGIN; const corsOption = { origin: "http://localhost:3000", credentials: true } app.use(cors(corsOption)) app.use(express.json()); app.use(morgan('dev')); app.use(cookieParser()); dotenv.config(); app.get("/", (_, res) => {res.send("running")}); app.use("/api/auth", authRoutes) app.use("/api/subs", subRoutes) console.log(process.env.ORIGIN) let port = 4000; app.listen(port, async () => { console.log('server running at http://localhost:${port}'); AppDataSource.initialize().then(async () =>{ console.log("database initialized") }).catch(error => console.log(error)) }) 아무리 구글링해봐도 기본 지식이 부족해서 도저히 해결이 안되네요ㅠㅠ 조금 급하게 만들어야 하는 상황이라.... 도와주세요...! 

npm run dev로 서버는 성공적으로 올라갔는데 localhost:3000 접속 시 연결이 거부되었다고 뜹니다.이것저것 많이 찾아보긴 했는데 해결이 안되네요 ㅠㅠwindows, 크롬에서 실행했습니다. 해결 방법을 알 수 있을까요?// index.js const express = require("express"); const path = require("path"); const bodyParser = require("body-parser"); const app = express(); const config = require("./server/config/keys"); // const mongoose = require("mongoose"); // mongoose.connect(config.mongoURI, { useNewUrlParser: true, useUnifiedTopology: true }) // .then(() => console.log('MongoDB Connected...')) // .catch(err => console.log(err)); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.use('/api/dialogflow', require('./server/routes/dialogflow')); // Serve static assets if in production if (process.env.NODE_ENV === "production") { // Set static folder app.use(express.static("client/build")); // index.html for all page routes app.get("*", (req, res) => { res.sendFile(path.resolve(__dirname, "client", "build", "index.html")); }); } const port = process.env.PORT || 5000; app.listen(port, () => { console.log(`Server Running at ${port}`) });  //package.json { "name": "chatbot-app", "version": "1.0.0", "description": "chatbot-app", "main": "index.js", "engines": { "node": "18.20.5", "npm": "10.9.0" }, "scripts": { "start": "node index.js", "backend": "nodemon index.js", "frontend": "npm run front --prefix client", "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"" }, "author": "Jaewon Ahn", "license": "ISC", "dependencies": { "actions-on-google": "^3.0.0", "body-parser": "^1.20.3", "dialogflow": "^1.2.0", "dialogflow-fulfillment": "^0.6.1", "dotenv": "^16.4.5", "express": "^4.21.1", "mongoose": "^8.8.1", "node": "^18.20.5", "punycode": "^2.3.1" }, "devDependencies": { "@ant-design/icons": "^5.5.1", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "concurrently": "^9.1.0", "nodemon": "^3.1.7" } }  client쪽//package.json { "name": "client", "version": "0.1.0", "private": true, "dependencies": { "antd": "^4.24.16", "axios": "^1.7.7", "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-redux": "^9.1.2", "react-router-dom": "^6.28.0", "react-scripts": "5.0.1", "redux": "^5.0.1", "redux-promise": "^0.6.0", "redux-thunk": "^3.1.0", "uuid": "^11.0.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "http-proxy-middleware": "^3.0.3" } }