inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

'정의되지 않음'일 수 있는 개체를 호출할 수 없습니다 오류 질문

해결됨

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

안녕하세요 과제 중 궁금한 점이 있어 질문 남깁니다 pages - index 파일 export default function DetailBoardPage(): JSX.Element { return ( <> <DetailBoard></DetailBoard> <CommentWrite></CommentWrite> <CommentList></CommentList> </> ); } board list presenter 파일 export default function CommentListItemUI( props: ICommentListItemUI ): JSX.Element { // 수정 아이콘 클릭 시 수정 화면으로 전환 const [isEdit, setIsEdit] = useState(false); const onClickUpdateIcon = (): void => { setIsEdit(true); return ( <> {!isEdit && ( . . . )} {isEdit && ( <CommentWrite item={props.item} isEdit={true} setIsEdit={setIsEdit} ></CommentWrite> )} </> ); } CommentWrite 컴포넌트를 두 곳에서 사용하고 있습니다 1번에서는 아무런 props 인자를 넘겨주지 않고 있고요 2번에서는 3가지 props 인자를 넘겨주고 있습니다 types 파일 export interface ICommentWrite { item?: IBoardComment; isEdit?: boolean; setIsEdit?: Dispatch<SetStateAction<boolean>>; } 이에 맞춰 작성한 interface 입니다 setIsEdit state에 ? 기호를 붙이니 CommentWrite 파일(바로 아래 파일)의 props.setIsEdit state 사용 구간에서 '정의되지 않음'일 수 있는 개체를 호출할 수 없다는 오류가 뜹니다 export default function CommentWrite(props: ICommentWrite): JSX.Element { const onClickUpdate = async (): Promise<void> => { . . . props.setIsEdit(false); }; const onClickCancel = (): void => { props.setIsEdit(false); }; return ( . . . ); } 찾아보니 undefined / null 값을 제대로 다루지 못할 때 생기는 오류라고 하는데요 해당 state는 한 곳에서만 props 인자로 전달하고 있기 때문에 undefined 값이 나오는 경우가 필연적입니다 이런 경우 해결할 수 있는 방법이 있을까요? 만약 타입 지정과 관련된 방법으로 해결할 수 없는 문제라면 props 인자를 한 곳에서만 받도록 파일을 합칠까 합니다

  • react
  • node.js
  • graphql
  • next.js
zero.1.0.one.xx 댓글 1 좋아요 0 조회수 982

git hub 연결에 4시간 썼는데 안됩니다ㅜ,,

해결됨

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

Github 연결하려 하는데 마지막 단계에서 오류가 자꾸 떠요ㅜㅠ 홈페이지에서 precamp 파일을 지웠다가 다시 만들어도 보고 했는데 계속 저런 알 수 없는 오류가 뜨네요,, 어떻게 다시 연결할 수 있을까요? ㅜㅅㅜ

  • react
  • node.js
  • seo
  • graphql
  • next.js
현준인뒈요 댓글 2 좋아요 0 조회수 534

css basic transfrom+transition 레퍼런스 코드 질문있어요

해결됨

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

안녕하세요 쇼핑몰 레퍼런스 css 코드 104줄에 있는 .item .imgBox img는 왜 들어가있는지 알수있을까요? transition하고 아무 상관 없지 않나요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
nimbus 댓글 1 좋아요 0 조회수 270

logit 이나 ols 사용할때 앞에 C( )를 붙이는 이유?

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

ANOVA를 배울때는 ols 사용할때 독립변수 앞에 C()를 붙이는것이 분산분석은 범주형 분석이기에 앞에 C를 붙인다고 생각했는데요~ 로지스틱 회귀분석은 독립변수가 수치형, 종속변수가 이산/명목형으로 알고있는데.. Gender 앞에 C를 붙이는 이유가 있을가요? 오히려 Gender은 수치로 바꿔줘야할것 같은데.. 혹시 C 의 의미가 수치형->범주형, 범주형->수치형으로 양쪽 모두 바꿔주는 역할인건지 궁금합니다.

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
hello4298 댓글 1 좋아요 1 조회수 941

macro

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

다중분류에서 쓰는 average = 'macro'가 무슨 의미일까요??

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
apollon3110 댓글 1 좋아요 0 조회수 241

cypress 를 사용해 modal 에 접근하는 방법을 모르겠습니다

미해결

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

상품등록 페이지를 cypress 를 통해 test 해보던 도중 kakao map 을 사용해 주소입력 하는 부분에서 문제가 발생하고 있습니다. 개발자 도구를 사용해서 kakao map 의 input 의 class 확인해 해당 class name 으로 get()요청을 했지만 인식을 못하고 있습니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
kyb1208tg 댓글 1 좋아요 0 조회수 473

dbms의 기출문제를 보고싶습니다.

해결됨

윤파고의 정보처리기사 DB/프로그래밍 All-In-One

혹시 기출문제 올인원은 어디서 볼 수 있나요?

  • python
  • java
  • c
  • dbms/rdbms
  • 정보처리기사
댓글 2 좋아요 0 조회수 765

예시문제 작업형2(신 버전)

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 질문과 관련된 영상 위치를 알려주면 더 빠르게 답변할 수 있어요 먼저 유사한 질문이 있었는지 검색해보세요 문제 지문에서알려주는 제출 CSV 파일 형식은 0, 1, 1, 0 ... 이런 predict 결과값인데 0.11385 와 같이 predict_proba 확률값으로 결과를 제출해도 괜찮은 이유가 궁금합니다! roc_auc가 predict_proba 로 해야한다면 predict_proba로 모형 성능테스트를 하고 제출은 predict로 해야하는 것이 아닌가... 라는 의문이 들어서 문의드립니다

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
댓글 2 좋아요 0 조회수 521

TextEncoder is not defined 에러가 발생합니다

해결됨

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

FAIL __test__/test/index.test.ts ● Test suite failed to run ReferenceError: TextEncoder is not defined 1 | // 하드코딩된 미니 백엔드 > 2 | import { graphql } from "msw"; | ^ 다음과 같은 에러가 뜨는 이유가 뭘까요? 찾아보니 node 18을 사용하지 않아 발생하는 문제라는데 node -v 을 확인해보면 제대로 18버전을 이용하고 있습니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
kyb1208tg 댓글 2 좋아요 0 조회수 1951

Next 14 강의

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요, 슬랙 채널에서 Next 14 강의 업로드 예정이시라는 글을 봤습니다. 해당 강좌의 리뉴얼 버전이라고 보면 될까요? 차이점이 궁금합니다. 감사합니다.

  • react
  • redux
  • node.js
  • express
  • next.js
jaeyeonjung 댓글 1 좋아요 0 조회수 422

미리보기가 보이지 않습니다

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

//app.js app.use('/', express.static(path.join(__dirname, 'uploads'))); //PostForm.js import { Button, Form, Input } from 'antd'; import React, { useCallback, useEffect, useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; import useInput from '../hooks/useInput'; import { ADD_POST_REQUEST, REMOVE_IMAGE, UPLOAD_IMAGES_REQUEST, addPost, } from '../reducers/post'; const FormWrapper = styled(Form)` margin: 10px 0 20px; `; const ButtonStyle = styled(Button)` float: 'right'; `; const PostForm = () => { const { imagePaths, addPostLoading, addPostDone } = useSelector( (state) => state.post ); const dispatch = useDispatch(); const imageInput = useRef(); const [text, onChangeText, setText] = useInput(''); useEffect(() => { if (addPostDone) { setText(''); } }, [addPostDone]); const onSubmitForm = useCallback(() => { if (!text || !text.trim()) { return alert('게시글을 작성하세요.'); } const formData = new FormData(); imagePaths.forEach((p) => { formData.append('image', p); }); formData.append('content', text); return dispatch({ type: ADD_POST_REQUEST, data: formData, }); }, [text, imagePaths]); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); const onChangeImages = useCallback((e) => { console.log('images', e.target.files); //배열모양을 띄는 객체 const imageFormData = new FormData(); [].forEach.call(e.target.files, (f) => { imageFormData.append('image', f); }); dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData, }); }, []); const onRemoveImage = useCallback( (index) => () => { dispatch({ type: REMOVE_IMAGE, data: index, }); }, [] ); return ( <FormWrapper encType='multipart/form-data' onFinish={onSubmitForm}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder='어떤 신기한 일이 있었나요?' /> <div> <input onChange={onChangeImages} type='file' name='image' hidden multiple ref={imageInput} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <ButtonStyle type='primary' htmlType='submit'> Twit </ButtonStyle> </div> <div> {imagePaths.map((item, i) => ( <div key={item} style={{ display: 'inline-block' }}> <img src={`http://localhost:3065/${item}`} style={{ width: '200px' }} alt={item} /> <div> <Button onClick={onRemoveImage(i)}>제거</Button> </div> </div> ))} </div> </FormWrapper> ); }; export default PostForm; //post.js const multer = require('multer'); const path = require('path'); const fs = require('fs'); const { Post, Image, Comment, User } = require('../models'); const { isLoggedIn } = require('./middlewares'); const router = express.Router(); try { fs.accessSync('uploads'); } catch (error) { console.log('uploads 폴더가 없으므로 생성합니다.'); fs.mkdirSync('uploads'); } //이미지나 동영상처리는 웬만하면 프론트에서 클라우드로 바로 올리는게 좋다. const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, 'uploads'); }, //배포때는 s3로 , 개발에는 드라이브에 filename(req, file, done) { const ext = path.extname(file.originalname); //확장자 추출 const basename = path.basename(file.originalname, ext); done(null, basename + '_' + new Date().getTime() + ext); //이나당151817842.png }, }), limits: { fileSize: 20 * 1024 * 1024 }, //20MB }); router.post('/', isLoggedIn, upload.none(), async (req, res, next) => { // POST /post try { const post = await Post.create({ content: req.body.content, UserId: req.user.id, }); if (req.body.image) { if (Array.isArray(req.body.image)) { const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); } else { const image = await Image.create({ src: req.body.image }); await post.addImages(image); } } console.log('POST', post); const fullPost = await Post.findOne({ where: post.id, include: [ { model: Image, }, { model: Comment, include: [{ model: User, attributes: ['id', 'nickname'] }], }, { model: User, //작성자 attributes: ['id', 'nickname'], }, { model: User, //좋아요 누른 사람 as: 'Likers', attributes: ['id'], }, ], }); res.status(201).json(fullPost); } catch (error) { console.error(error); next(error); } }); router.post( '/images', isLoggedIn, upload.array('image'), async (req, res, next) => { //POST /post/images try { console.log(req.files); res.json(req.files.map((v) => v.filename)); } catch (error) { console.error(error); next(error); } } ); 안녕하세요 제로초님! 질문이 있습니다.. 파일은 제대로 올라가서 uploads 폴더안에 있는데 화면에서 이미지를 가져오지 못하고있습니다.. 프론트-백 api통신도 잘 되는데, 왜 개발자도구-네트워크에서 이미지를 가져올 수 없는지 이유를 모르겠습니다 ㅠㅠ

  • react
  • redux
  • node.js
  • express
  • next.js
ina9377 댓글 1 좋아요 0 조회수 337

await에 대해 약간 헷갈리게되버렸어요

해결됨

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

수업에서 async await를 쓰게 되면, await 뒤쪽 함수가 실행 된 후, await를 보자마자 어? 오래걸리겟네? 하면서 스레드가 해당 async함수를 통째로 마이크로큐에 넣어버린다고 말씀하셨는데요. 만약 await뒤의 함수가 Promise를 반환하게 되면, 해당 Promise를 반환하는 함수가 먼저 큐에 쌓이고, 그 뒤에 async함수가 들어가서 pipo구조에 따라, promise가 반환된 후 async함수가 실행되면서 기다리는것처럼 보인다고 말해주셨습니다. 근데... 이 말 대로라면, await 함수 뒤에 굳이 Promise가 올 필요가 있나요? XMLHttpRequest()가 오더라도, 콜스택에서 해당요청이 실행된 후, 결과값을 가진 상태에서 마이크로큐로 들어가니까, 똑같이 await가 되는게 아닌지요? 분명 순차적으로 수업을 들으면서 다 이해햇다고 생각햇는데 갑자기 헷갈립니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
신지환 댓글 2 좋아요 0 조회수 379

pd.get_dummies(train[cols])와 (train, columns=cols) 차이가 궁금합니다.

해결됨

[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)

원핫 인코딩 코드에서 괄호 안에 [cols]를 쓸 때와 columns=cols를 쓸 때의 차이가 궁금합니다. 3-4 Feature engineering에서와 3-6 Regression에서 작성법이 달라서요. 3-6 Regression에서는 train[cols]로 썼더니 에러가 나네요ㅠ # 3-4 Feature engineering c_train[col] = le.fit_transform(c_train[col]) c_test[col] = le.transform(c_test[col]) # 3-6 Regression train = pd.get_dummies(train, columns=cols) test = pd.get_dummies(test, columns=cols)

  • python
  • 머신러닝
  • 빅데이터
  • pandas
  • 빅데이터분석기사
kimx2725 댓글 1 좋아요 0 조회수 446

서버사이드 렌더링을 할 때, 서버는 어디에 있는 건가요?

해결됨

Next.js 시작하기(feat. 지도 서비스 개발)

선생님, 안녕하세요. 너무 기초적인 질문일 수 있지만, 갑자기 궁금해져서 질문드립니다. 서버사이드 렌더링의 경우, 서버에서 pre-render된 코드를 만들어서 보내주고, 클라이언트에서 hydrate를 해서 페이지를 만든다고 알고 있습니다. 클라이언트 사이드 렌더링의 경우는 html코드와 js코드를 함께 보내서, 클라이언트에서 페이지를 만들구요. 서버사이드 렌더링을 할 때, pre-render된 코드를 만드는 서버는 각 클라이언트들의 컴퓨팅 자원을 사용하는 건지(클라이언트의 컴퓨터에서 만드는 건지), 아니면 배포하는 중앙(?)서버(aws ec2 또는 이 강의에서 처럼 vercel)의 컴퓨팅 자원을 사용하는 건지(서버에서 만드는 건지) 궁금합니다. 클라이언트 측에서 다 계산을 한다고 하면, 중앙(?)서버의 부담이 적을테지만, 중앙(?)서버에서 한다고 하면, 부담이 갈 수 있을 것 같아서요. 최근 next.js 14버전이 되면서 디비와 직접 통신하는 등 기능이 많이 생겼는데, 이 통신하는 등의 역할은 client side가 아닌 server side에서만 가능하더라구요. 그래서 server side라는 게 중앙서버 하나에만 있다면, 계산이 오래걸린다거나 트래픽이 늘어나거나 한다면 다른 사용자들에게도 영향을 끼치지 않을까 궁금했습니다.(자동 확장이 되지 않을때) 또, 이런식으로 간다면 따로 백엔드 서버가 필요없게 될 수도 있겠다라고도 생각해봤는데, 어떻게 보고계시는지도 궁금합니다.

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
google_user 댓글 2 좋아요 1 조회수 1213

구글 콘솔로그 오류창이 계속 떠요

해결됨

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

구글 웹에서 콘솔창을 켜면 계속 이 오류 화면이 뜨는데, 처음에는 무시하고 진행했는데 몇 달간 계속 뜨고 타이머 실습할 때 조금 끊기는 것 같기도 해요ㅜㅠ GPT에 물어보니까 권한이 적절치 않다고 하는데 어떻게 해결할 수 있는 건가요??ㅜㅜ

  • react
  • node.js
  • seo
  • graphql
  • next.js
현준인뒈요 댓글 2 좋아요 0 조회수 381

[공유] Next.js 12버전 redirect

해결됨

[리뉴얼] React로 NodeBird SNS 만들기

import { useRouter } from 'next/router'; const Profile = () => { ... const router = useRouter(); if (!me) { router.push('/'); return null; } ... } 이런식으로 하면 잘 동작해요~

  • react
  • redux
  • node.js
  • express
  • next.js
욱둥이 댓글 0 좋아요 0 조회수 317

체크박스 클릭 구현 함수에 대해서 질문드립니다.

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

input checkbox 에서 onChange ={() => this.handleCompleChange ( data .i d)} 함수를 실행하게끔하는데 () => 는 왜들어가는걸까요? 예를들어 같은 방식의 함수중에 onChange={this.handleChange} 함수의경우엔 () => 가 없더라구요. 구현 부분은 똑같이 함수이름 = (파라미터) => {} 로 구현되어 있습니다.

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
ultimates 댓글 1 좋아요 0 조회수 322

영화 나열을 위한 Row 컴포넌트 생성하기

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

8분 47초 까지 따라했는데, 오류가 뜹니다. import React, { useEffect } from 'react' import axios from '../api/axios' export default function Row({ isLargeLow, title, id, fetchUrl }) { useEffect (() => { fetchMovieData(); }, []); const fetchMovieData = async () => { const request = await axios.get(fetchUrl); console.log('request', request); }; return ( <div> </div> ) } 터미널에서는 아래와 같은 오류가 뜨고, WARNING in ./src/components/Banner.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/components/Banner.css) Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning (75:5) autoprefixer: start value has mixed support, consider using flex-start instead WARNING in [eslint] src/components/Row.js Line 7:8: React Hook useEffect has a missing dependency: 'fetchMovieData'. Either include it or remove the dependency array react-hooks/exhaustive-deps webpack compiled with 2 warnings 아래는 크롬에서 뜨는 오류입니다. Uncaught runtime errors: × ERROR Cannot read properties of undefined (reading 'fetchNetflixOriginals') TypeError: Cannot read properties of undefined (reading 'fetchNetflixOriginals') at App (http://localhost:3000/static/js/bundle.js:46:61) at renderWithHooks (http://localhost:3000/static/js/bundle.js:20698:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23984:17) at beginWork (http://localhost:3000/static/js/bundle.js:25280:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10290:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:10334:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:10391:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:30265:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29512:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:29435:9) ERROR Cannot read properties of undefined (reading 'fetchNetflixOriginals') TypeError: Cannot read properties of undefined (reading 'fetchNetflixOriginals') at App (http://localhost:3000/static/js/bundle.js:46:61) at renderWithHooks (http://localhost:3000/static/js/bundle.js:20698:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23984:17) at beginWork (http://localhost:3000/static/js/bundle.js:25280:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10290:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:10334:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:10391:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:30265:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29512:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:29435:9) ERROR Cannot read properties of undefined (reading 'fetchNetflixOriginals') TypeError: Cannot read properties of undefined (reading 'fetchNetflixOriginals') at App (http://localhost:3000/static/js/bundle.js:46:61) at renderWithHooks (http://localhost:3000/static/js/bundle.js:20698:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:23984:17) at beginWork (http://localhost:3000/static/js/bundle.js:25280:20) at beginWork$1 (http://localhost:3000/static/js/bundle.js:30243:18) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:29512:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:29435:9) at renderRootSync (http://localhost:3000/static/js/bundle.js:29408:11) at recoverFromConcurrentError (http://localhost:3000/static/js/bundle.js:28900:24) at performConcurrentWorkOnRoot (http://localhost:3000/static/js/bundle.js:28812:26)

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
Pumpkin-man 댓글 2 좋아요 0 조회수 331

섹션 13에 타입스크립트 실행관련

해결됨

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

타입스크립트 본수업은 문제없이 진행했는데 freeboard 부분을 진행하다가 api 관련 타입스크립트 설치 과정을 하는데 에러가 보입니다.. 이부분 혹시 뭐때문에 발생하는건지 확인 해주실 수 있으실까요ㅠㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
서나현 댓글 3 좋아요 0 조회수 450

모달 창 외부 클릭 시 모달 닫게 만드는 Custom Hooks 생성 이 강의 오타부분

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

모달 창 외부 클릭 시 모달 닫게 만드는 Custom Hooks 생성 이 강의에서 useOnClickOutside custom hooks부분에서 event listener해제하는 부분이 addEventListener로 잘못되어 있내요

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
황영롱 댓글 1 좋아요 0 조회수 289

인기 태그

인프런 TOP Writers

주간 인기글