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 조회수 209

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

제네릭을 사용하실 때 콤마

해결됨

[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 조회수 163

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

미해결

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

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

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

[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

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

안녕하세요. 이 로드맵 과정은 스프링 부트를 주로 활용하나요?

미해결

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) - 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) - 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 아니오 [질문 내용] 여기에 질문 내용을 남겨주세요. 제가 친형걸로 이걸 들으려고 하는데 이 로드맵 전반적인 과정은 스프링인지 스프링부트인지 알고 싶어서 이렇게 질문드립니다.

  • java
  • spring
  • mvc
  • spring-boot
[SQL 실전반 13기] Toby 댓글 1 좋아요 0 조회수 75

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

해결됨

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

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

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

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 조회수 1114

ArgumentResolver가 Service레이어 클래스, DB접근에 접근하는 클래스에 의존하도록 설계해도 괜찮나요?

미해결

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

문제 상황을 설명드리겠습니다. page 정보를 받아서 게시글 리스트, 페이지 정보를 View로 전달하는 Controller 코드 입니다. @GetMapping("/posts") public String getPosts(@RequestParam("page") String page, Model model) { // 사용자가 입력한 page문자열과 모든 post의 개수를 매개변수로 받아서 page 정보 생성 // 사용자가 입력한 page값을 검증 후 올바른 Page 정보를 반환한다. // "@#$", "hello" 같은 이상한 page값이 들어오면 모두 1로 변경한다. Page page = Page.validateAndCreate(page, postService.getPostsCount()); // page 정보를 사용하여 해당 page에 속하는 post들을 반환한다. List<Post> posts = postService.getPostList(page); // view로 데이터를 전달한다. model.addAttribute("page", page); model.addAttribute("posts", posts); } 처음에는 위 방식으로 코드를 작성했습니다. 그런데 page정보 뿐 아니라, 다른 sorting정보, searching정보 등 여러 매개변수들이 들어오다 보니, Controller 코드가 복잡해진다고 느꼈습니다. 간단한 예시 코드는 아래와 같습니다. @GetMapping("/posts") public String getPosts(@RequestParam("page") String page, @ModelAttribute("sort") Sort sort, @ModelAttribute("search") Search search, .... 등등 , Model model) { // 여러가지 전처리 로직들 Page page = Page.validateAndCreate(page, postService.getPostsCount()); Sort sort = Sort.validateAndCreate(sort, ... ) Search search = Search.validateAndCreate(search, ...) ....등등 // 위에서 생성한 정보들을 바탕으로 DB에 쿼리를 날려 posts 데이터를 받아온다. List<Post> posts = postService.getPostList(page, sort, search, ...등등); // view에 필요한 데이터를 전달한다. model.addAttribute("page", page); model.addAttribute("posts", posts); model.addAttribute("sort", sort); ... 등등 } 예시 코드는 문제상황 설명을 위해서 깔끔하게 작성했으나, 실제로는 제 부족한 실력 탓에 지저분합니다. 저는 Controller 코드를 지저분하게 만드는 원인으로 여러가지 전처리 로직들 (ex. Page.validateAndCreate(...) 코드들) View에 필요한 데이터들을 전달하는 model.addAttribute(...) 코드들 때문이라고 생각했습니다. 위 문제에 대한 해결방안으로 저는 ArgumentResolver를 사용하는 것을 떠올렸습니다. page에 대해서 @PageInfo라는 애노테이션을 정의하고, 이 애노테이션이 달린 매개변수에 대해서 1.여러가지 전처리 로직들을 수행해주고, 2.View에 자동으로 데이터들을 전달해주는, ArgumentResolver를 만들어주었습니다. Page에 대한 ArgumentResolver 코드는 다음과 같습니다. @RequiredArgsConstructor @Component public class PageRequestArgumentResolver implements HandlerMethodArgumentResolver { // 이 부분이 걱정입니다! ArgumentResolver가 특정 Service클래스에 의존해도 될까요? private final QuestionService questionService; @Override public boolean supportsParameter(MethodParameter parameter) { // @PageInfo를 가지고 있는 경우만 적용. boolean hasPageInfoAnnotation = parameter.hasParameterAnnotation(PageInfo.class); // 타겟변수가 Page 타입인 경우만 적용. boolean isPageClass = parameter.getParameterType().equals(Page.class); return hasPageInfoAnnotation && isPageClass; } @Override public Object resolveArgument(MethodParameter parameter, ModelAndViewContainer mavContainer, NativeWebRequest webRequest, WebDataBinderFactory binderFactory) throws Exception { // url에서 page문자열 정보를 추출. String pageString = webRequest.getParameter("page"); // page문자열 정보를 검증 및 생성. Page page = Page.validateAndCreate(pageString, questionService.provideAllQuestionsCount()); // mavContainer에 해당 정보를 넣어서 View로 자동전달. if (mavContainer != null) mavContainer.addAttribute("page", page); // 컨트롤러의 매개변수에 page정보를 바인딩. return page; } } 위 처럼 page정보 뿐 아니라, 다른 자주쓰는 매개변수들에도 ArgumentResolver를 정의하고 적용하면, 아래와 같이 Controller코드가 굉장히 깔끔해진다고 느꼈습니다. @GetMapping("/posts") public String getPosts(@PageInfo Page page, @SortInfo Sort sort, @SearchInfo Search search, ... 등등, Model model) { // 여러가지 전처리 로직들은 ArgumentResolver가 해주기 때문에 코드가 사라집니다. // 비즈니스 로직을 수행합니다. List<Post> posts = postService.getPostList(page, sort, search, ...등등); // View에 필요한 데이터도 ArgumentResolver의 mavContainer를 통해서 자동 전달됩니다. // 컨트롤러에서 관심이 있는 posts 정보만 전달합니다. model.addAttribute("posts", posts); } 그런데 이게 정말 좋은 코드인지 판단이 잘 서질 않습니다. 그리고 ArgumentResolver가 다른 Service 클래스에 의존을 해도 되는지가 의문입니다. AI에게 물어보니, 순환참조 문제가 발생할 수 있기 때문에 웬만해서는 하지 말라고하는데...

  • spring
  • mvc
dyl0115 댓글 1 좋아요 0 조회수 148

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

name을 넣지 않을 경우 input에 입력되지 않는 이유

해결됨

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

안녕하세요 강사님 수업 도중에 input 태그에 name을 넣지 않을 경우 아무런 입력이 되지 않는걸 확인했습니다. 그래서 onChange 함수에서 에러가 발생해서 이벤트가 도중에 끊겼을 것이라고 예상하고 try catch로 감았는데도 exception이 발생하지 않더라구요. 혹시 왜 입력이 되지 않는 것인지 알 수 있을까요? 감사합니다~~! import { useState } from "react"; const Register = () => { const [input, setInput] = useState({ name: "", birth: "", country: "", bio: "" }) const onChange = (e) => { try { setInput({ ...input, [e.target.name]: e.target.value }) } catch (err) { console.log(err); } // setInput({ // ...input, // [e.target.name]: e.target.value // }) } //const onChangeName = (e) => { // setInput({ // ...input, // name: e.target.value // }) //}; //const onChangeBirth = (e) => { // setInput({ // ...input, // birth: e.target.value // }) //}; //const onChangeCountry = (e) => { // setInput({ // ...input, // country: e.target.value // }) //}; //const onChangeBio = (e) => { // setInput({ // ...input, // bio: e.target.value // }) //}; return ( <div> <div> <input // name="name" value={input.name} //onChange={onChangeName} onChange={onChange} placeholder={"이름"} /> {input.name} </div> <div> <input name="birth" value={input.birth} //onChange={onChangeBirth} onChange={onChange} type="date" /> {input.birth} </div> <div> {/* <select value={input.country} onChange={onChangeCountry}> */} <select value={input.country} name="country" onChange={onChange}> <option value=""></option> <option value="kr">한국</option> <option value="us">미국</option> <option value="uk">영국</option> </select> {input.country} </div> <div> {/* <textarea value={input.bio} onChange={onChangeBio} /> */} <textarea value={input.bio} name="bio" onChange={onChange} /> {input.bio} </div> </div> ); }; export default Register;

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

ResponseStatusException 질문 (강의 13분 54초)

미해결

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

[질문 내용] ResponseStatusException에 세개의 파라미터가 담기는데, 세번째 파라미터가 무엇인지 정확히 이해가 가지 않습니다. 실제로 /api/response-status-ex2가 호출 되었을 때, IlleagalArgumentException이 발생한다면, 그 대신에 HttpStatus.NOT_FOUND(404)를 내보내주고, "error.bad"를 메시지로 내보내준다는 뜻이 맞나요?

  • spring
  • mvc
Michael Scott 댓글 1 좋아요 0 조회수 146

39:33 res 리턴값

해결됨

(2026 최신!) 일주일만에 합격하는 정보처리기사 실기

너무 잦은 질문 죄송합니다. 몇번을 돌려봐도 리턴이 헷갈리네요 재귀함수를 통해 int res = 15 를 구한다음 메인함수에 int sum=nSum(n)에 들어 가는거 같은데 res가 갑자기 nSum에 리턴이 되는걸 어떻게 이해해야 될지 모르겠습니다. 첫번째 호출->자기자신 호출까지는 이해했는데 결과값이 리턴하는 순서? 공식?이 잘 정립이 안되네요 ㅠㅠ

  • python
  • java
  • c
  • 정보처리기사
dbgud85 댓글 2 좋아요 0 조회수 153

인기 태그

인프런 TOP Writers

주간 인기글