inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

조건문, 반복문, 커스텀 훅 사용 전에 Hook 사용 시 에러 미발생

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요 강사님 조건문, 반복문에서 또는 커스텀 훅을 사용하기 전에 Hook을 사용하였을 때는 함수 컴포넌트 외부에서 호출했을 때 오류가 발생하는 것 처럼 별다른 오류가 발생하지 않는데 말씀하신 내용으로는 권장사항인걸까요? 조건문, 반복만에서 Hook 호출 시 import { useState } from "react"; const HookExam = () => { //const state = useState(); if (true) { const state = useState(); console.log(state); } for (let i=0; i<1; i++) { const state = useState(); console.log(state); } return <div>HookExam</div> }; export default HookExam; 커스텀 훅 만들기 전에 Hook 호출 시 import { useState } from "react"; function getInput() { const [input, setInput] = useState(""); const onChange = (e) => { setInput(e.target.value); console.log(e.target.value); }; return [input, onChange]; } const HookExam = () => { const [input, onChange] = getInput(); return ( <div> <input value={input} onChange={onChange}/> </div> ); }; export default HookExam; 함수 컴포넌트 외부에서 Hook 호출 시

  • javascript
  • react
  • node.js
강프로그래머 댓글 2 좋아요 0 조회수 181

[17-3. Redux로 데이터 관리]에서 Store에 슬라이스 리듀서 추가하기 질문합니다.

미해결

실무 중심! FE 입문자를 위한 React

Redux 공식 사이트의 튜토리얼에 따르면, 슬라이스에서 리듀서를 익스포트 하고 스토어에 리듀서를 다음 예제와 같이 등록하는 데.. // surveySlice.js ... 생략 ... export default surveySlice.reducer; // surveySlice 리듀서를 익스포트 하고서.. // /stores/index.js import surveyReducer from './survey/surveySlice'; export default configureStore({ reducer: { survey: surveyReducer // 리듀서 등록 } }) 강사님 같은 경우는 아래와 같이 리듀서 등록에 직접 surveySlice를 추가했는데 리덕스 튜토리얼과 차이가 뭔가요?? import {surveySlice} from './survey/surveySlice'; export default configureStore({ reducer: { survey: surveySlice // 슬라이스 등록 } })

  • react
  • redux
  • node.js
  • swr
Codingbear 댓글 1 좋아요 0 조회수 208

react-native-safe-area-context & react-native-screens 에러

미해결

맛집 지도앱 만들기 (React Native & NestJS)

이러한 오류가 계속뜨는데 다른 질문에서 버전을 바꾸라고햇을떄 react-native-safe-area-context랑 react-native-screens 이것들의 버전을 바꾸는 방법을 모르겠습니다 오늘 몇시간넘게 해결이 안돼 너무 답답해서 도와주시면 감사하겠습니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
kjm010629 댓글 2 좋아요 0 조회수 253

2일차 종합실습 모델 평가 MAPE 지표

미해결

6일 만에 배우는 파이토치 딥러닝 기초

안녕하세요. 강의 잘 듣고 있습니다. 종합실습에서 모델을 만들고 돌린 후에 모델 평가 코드를 실행했습니다. 다른 지표는 이전 실습(강의)에서 했던 것과 비슷하게 나왔습니다. 하지만 MAPE 지표는 엄청 큰 값이 나왔습니다. 예) MAPE : 352267848908800.0 혹시 몰라서 참조답안 코드도 전체 실행하고 MAPE 지표를 확인했고 마찬가지로 ( MAPE : 380158091460608.0 ) 엄청 큰 값이 나왔습니다. 왜 이렇게 큰 값이 나온 걸까요? chat한테 물어보니까 다음과 같은 답변을 받았습니다. MAPE 값이 매우 큰 것은 비정상적입니다. 일반적으로 MAPE는 100% 미만의 값을 가집니다. 이렇게 큰 MAPE 값은 다음과 같은 이유로 발생할 수 있습니다: 실제값 중 0 또는 0에 매우 가까운 값이 있어 분모가 극히 작아진 경우 데이터 스케일링 문제로 인해 예측값과 실제값의 차이가 극단적으로 큰 경우 계산 과정에서의 오류 이러한 MAPE 값은 신뢰할 수 없으며, 데이터나 모델에 문제가 있을 가능성이 높습니다. MSE와 MAE는 상대적으로 합리적인 값을 보이고 있으므로, MAPE 계산 과정이나 데이터를 재검토해볼 필요가 있습니다.

  • python
  • 딥러닝
  • pytorch
이준철 댓글 1 좋아요 0 조회수 224

[2-3]에뮬레이터 실행 오류

미해결

맛집 지도앱 만들기 (React Native & NestJS)

질문을 계속해서 죄송합니다 네비게이션 설치후 로그인스크린 구현후 에뮬레이터를 실행하려고하니 전까지 잘되던데 계속 에러가 뜨면서 실행이 안됩니다 ㅠㅠ

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
댓글 2 좋아요 0 조회수 244

제네릭을 사용하실 때 콤마

해결됨

[React / VanillaJS] UI 요소 직접 만들기 Part 2

제네릭을 사용하실 때 콤마는 제네릭과 JSX의 혼동방지 제네릭 구문을 명확히 해서 코드의 가독성 높임 TSX 파일에서 사용할 때 하는 일반적인 관례 로 인한 이유가 맞을까요?

  • react
  • typescript
  • dom
  • ui
  • vanilla-js
oridori2705 댓글 2 좋아요 0 조회수 186

airflow 웹서버 페이지 auto-refresh에 대해서 질문드립니다!

미해결

Airflow 마스터 클래스

제가 지금 백엔드 프로젝트와 Airflow를 도커 컴포즈로 EC2에 올려서 테스트를 하고 있습니다. 혹시 airflow 웹페이지에서 DAG 목록 위에 Auto-refresh 버튼이 있는데 이 옵션을 끄면 dag이 정해진 스케줄에 작동하지 않는지 궁금합니다. 제가 검색해본 결과로는 dag 내용과 목록을 자동으로 최신화하는 옵션인 것 같은데 맞을까요..?? dag 실행에 문제만 없다면 리소스 절약을 위해서 이 옵션은 꺼놓는게 좋을 것 같아서요...

  • python
  • 데이터-엔지니어링
  • airflow
이한희 댓글 2 좋아요 0 조회수 162

[2-0] front파일로 옮길떄 에러

미해결

맛집 지도앱 만들기 (React Native & NestJS)

말씀드린대로 front파일을 만들고 그 안에 전부 프로그램을 옮겻을떄 Parsing error: No Babel config file detected for C:\Users\user\Documents\react native-study\MatzipApp\front\index.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. 이러한 에러가 거의 모든 파일에 계속 나는데 왜그러는 걸까요.. ㅠ ㅠ

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
kjm010629 댓글 3 좋아요 0 조회수 149

한글깨짐 해결 설치코드 변경 필요합니다.

미해결

공공데이터와 Folium(Python Library)으로 만드는 제주 오름 지도 안내 서비스

섹션2 첫번째 강의의 한글깨짐 해결 설치코드에 있는 github repository의 master브랜치가 main 브랜치로 바뀐 것 같습니다. @main으로 코드 수정이 필요할 것 같아요.

  • python
  • 웹앱
  • qgis
  • folium
대롱대롱 댓글 1 좋아요 0 조회수 166

특정 API, 특정 IP 허용 (단일경로에 CORS 활성화)

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

https://github.com/expressjs/cors?tab=readme-ov-file#enable-cors-for-a-single-route 참고하여 작성 해 보았습니다. * 제일 하단부에는 전체 코드 첨부 하였습니다. * 문제는 2가지 입니다. 1. 단일 경로에 CORS 활성화를 구현하고 싶었으며 corsOptions 에 methods 를 'POST, OPTIONS'만 추가하였음에도 get은 호출시 허용이 되었습니다. app.get('/users/', cors(corsOptions), function (req, res) { 제가 구현하고 싶었던 코드의 의도는 특정 IP만 사용 허용 이기 때문에 위와 같이 구현하고 싶었습니다. 하지만 아래와 같이 호출하여도 허용이 되었습니다. app.get('/users/', (req, res) => { 나머지 문제는 위와 반대로 POST의 경우에는 app.post('/token/phone', cors(corsOptions), (req, res) => { 위처럼 작성 옵션도 적용되었음에도 불구하고 CORS 가 계속 발생합니다. 아래는 작성한 node 코드입니다. import express from 'express' import { createTokenOfPhone } from '../../../section01/01-03-token-api-facade/index.js' import { swaggerUi, specs } from "./swagger/swagger.config.js"; import cors from 'cors' const app = express() app.use(express.json()) // Swagger API app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(specs, { explorer: true })); // 허용할 IP WhiteList const whitelist = [ 'http://127.0.0.1:5500' ]; const corsOptions = { origin: (origin, callback) => { if (whitelist.indexOf(origin) !== -1 || !origin) { // !origin은 로컬 요청을 허용 callback(null, true); } else { callback(new Error('Not allowed by CORS')); } }, origin: whitelist, methods: 'POST, OPTIONS', }; //CORS 설정 // app.use(cors()) // app.use(cors(corsOptions)) // 특정 IP 허용 app.get('/users/', cors(corsOptions), function (req, res) { // app.get('/users/', (req, res) => { res.json({msg: 'getdms 왜 됨?'}) }) // OPTIONS 요청에 대한 응답 처리 app.options('/users/', cors(corsOptions), (req, res) => { res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); res.setHeader('Access-Control-Allow-Credentials', 'true'); res.sendStatus(204); // No Content }); // app.post('/token/phone', (req, res) => { app.post('/token/phone', cors(corsOptions), (req, res) => { const {phoneNo} = req.body; console.log(`phoneNo ${phoneNo}`) const requestToken = createTokenOfPhone(phoneNo); const resultData = { data: requestToken }; res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); res.send(resultData); }); app.listen(3000); // 포트번호 아래는 get , options, post 를 호출하는데 사용한 코드입니다. 주석 되어있는 get 호출시에는 호출안되게 옵션 설정해도 호출되고 주석 안한 post 호출시에는 정상 호출되어야 할 것 같은데 안됩니다.... <script> let resultToken = ''; const certification = () => { let myPhoneNo = document.getElementById("phoneNo").value; // let api = axios.options("http://localhost:3000/users"); // let api = axios.get("http://localhost:3000/users"); let api = axios.post("http://localhost:3000/token/phone", {phoneNo: myPhoneNo}); }; </script> <body> <div>휴대폰번호: <input type="text" id="phoneNo"> <button onclick="certification()">인증하기</button> <br/> <div>인증상태</div> <button>회원가입하기</button> </div> </body>

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
gkdlsb1234 댓글 2 좋아요 0 조회수 315

[16-2. 설문 리스트 컴포넌트 구현] Table 의 key 설정은 rowKey 속성을 사용합니다.

해결됨

실무 중심! FE 입문자를 위한 React

[16-2. 설문 리스트 컴포넌트 구현] Table 의 key 설정은 rowKey 속성을 사용합니다. rowKey 속성을 사용하여 key로 지정할 컬럼을 지정합니다. // primary key is id return <Table rowKey="id" />; // or return <Table rowKey={(record) => record.id} />;

  • react
  • redux
  • node.js
  • sass
  • swr
Codingbear 댓글 0 좋아요 0 조회수 109

최신버전 node.js 관련 문의

미해결

실무 중심! FE 입문자를 위한 React

최신 버전 node.js 를 설치 하고 진행하니 create-react-app 에서 자꾸 문제가 생기는거 같습니다. 이부분에 대해 어떻게 진행해야하나요??

  • react
  • redux
  • node.js
  • sass
  • swr
dlwhdgus482 댓글 2 좋아요 0 조회수 416

강사님의 계획?

미해결

맛집 지도앱 만들기 (React Native & NestJS)

선생님 준비중인 강의가 혹시 있으실까요? 선생님같은분이 강의를 안한다는건 정말 재능 낭비인것 같습니다. 만족도가 이렇게 높은 강의는 첨음이거든요 그래서 혹시 다른 준비중인 강의가 있는지 묻고싶습니다. 계속 기다리고 있어서 두통이 생깁니다. ㅎㅎ 개인적으로는 next 실무강의를 해주시면 좋겠지만 ㅎㅎ

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
호갱 댓글 1 좋아요 1 조회수 147

Ch15-5. 라우터 적용에서 최근 react-router 설정과 달라서 수정했습니다.

해결됨

실무 중심! FE 입문자를 위한 React

react-router v7을 설치하고 다음과 같이 수정하여 처리하였습니다. function MainLayout() { return ( <Layout style={{ minHeight: '100vh' }}> <Layout> <Sider collapsible> <div className="logo" style={logoStyle} /> <Menu theme="dark" mode="inline" defaultSelectedKeys={['m1']}> <Menu.Item key="m1">설문조사관리</Menu.Item> </Menu> </Sider> <Layout> <Header style={{ padding: 0, background: 'white' }}>HEADER</Header> <Content> <Outlet /> {/* chidren 대신 아울렛 사용 */} </Content> </Layout> </Layout> </Layout> ); } function App() { return ( <> <Routes> <Route path="/" element={<MainLayout />}> <Route index element={<h1>Home Page</h1>} /> <Route path="list" element={<ListPage />} /> <Route path="builder" element={<BuilderPage />} /> </Route> </Routes> </> ); }

  • react
  • redux
  • node.js
  • sass
  • swr
Codingbear 댓글 0 좋아요 0 조회수 214

iTerm으로 폴더 만드는 부분에 대해 질문이 있습니다.

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

안녕하세요 현재 맥북을 사용중이고 강의영상처럼 iTerm으로 명령어를 작성해서 폴더를 만들고 비주얼스튜디오까지 열기부분에서 저는 외장하드를 연결해서 배경화면에 있는 외장하드폴더 안에 짐코딩강의라는 폴더 안에 react-test 라는 폴더를 만들어 사용할려고 하는데 이렇게 되면 명령어를 어떻게 작성하면 되는지 궁금합니다.

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
부드러운 족제비 댓글 1 좋아요 1 조회수 114

PCO는 어떻게 결정되나요?

미해결

[개정판] 딥러닝 컴퓨터 비전 완벽 가이드

그 이미지일 확률은 어떻게 계산되는건가요? PCO * IOU 가 Ci가 되는데 어떻게 결정되는건가요?

  • python
  • 머신러닝
  • 딥러닝
  • keras
  • tensorflow
  • 컴퓨터-비전
Alex 댓글 2 좋아요 0 조회수 98

쿠팡 파트너스 API 키 발급은 어떻게 받나요?

해결됨

파이썬으로 나만의 블로그 자동화 프로그램 만들기

쿠팡 파트너스 API 키 발급은 어떻게 받나요? 확인해보니 파트너로 등록하고 최소 15만원 정도 판매해야 파트너스 API가 발급되는거같은데, 어떻게 해야되는건지 궁금합니다.

  • python
  • wordpress
  • 웹-크롤링
  • selenium
beegizee1220 댓글 1 좋아요 0 조회수 1392

git 명령어를 찾을 수 없다고 하는데 git을 따로 설치해야 하는건가요?

미해결

실무 중심! FE 입문자를 위한 React

PS D:\reactWorkspace\memo-project> git reset --hard git : 'git' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + git reset --hard + ~~~ + CategoryInfo : ObjectNotFound: (git:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\reactWorkspace\memo-project>

  • react
  • redux
  • node.js
  • sass
  • swr
정혜림 댓글 1 좋아요 0 조회수 1112

npx create-react-app mall 에러가 납니다

해결됨

코드로 배우는 React 19 with 스프링부트 API서버

호환성 문제라고 본거같아서 이것저것 google에있는거 해보고 밀고 해보고 밀고 해봤는데도 안됩니다...

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
꾸아앙 댓글 3 좋아요 1 조회수 389

오류

해결됨

한 입 크기로 잘라먹는 Next.js

아직 사용하기 전에 변수들이 있는 경우 아래 사진과 같이 표시되는데 오류가 발생하지 않도록 설정은 어떻게 하나요?

  • react
  • typescript
  • next.js
Full Stack 개발자 댓글 1 좋아요 0 조회수 80

인기 태그

인프런 TOP Writers

주간 인기글