inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

axios 1.1.2 버전 issue ( SyntaxError: Cannot use import statement outside a module)

미해결

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

혹시나 에러가 나신다면, package.json폴더에 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"", "eject": "react-scripts eject" }, 로 변경 후 test를 종료 후 재 실행시키면 됩니다. 방법은 test에서 직접 스크립트 수정하거나 jest.config.js파일을 만들어 moduleNameMapper을 사용하시면 됩니다! 참고 https://stackoverflow.com/questions/73958968/cannot-use-import-statement-outside-a-module-with-axios https://jestjs.io/docs/configuration#modulenamemapper-objectstring-string--arraystring

  • jest
  • 웹앱
  • react
  • React-Context
손서연 댓글 5 좋아요 4 조회수 2253

엑셀 자동 줄 바꿈 추가 질문입니다.

미해결

[신규 개정판] 이것이 진짜 크롤링이다 - 실전편 (인공지능 수익화)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 파이썬을 이용해 엑셀에서 자동줄바꿈 되는 코드를 알려주셔서 정말 감사하게 잘 활용하고 있는데요. 추가적으로 질문 드리고 싶은 부분은 자동 줄 바꿈의 경우는 원하는 위치에서 개행이 되지 않는데요. 원하는 위치에서 개행이 되게하는 코딩도 있을까요? 아래의 이미지는 자동줄바꿈을 했을 경우인데요. 위의 이미지처럼 자동줄바꿈을 해주려면 아래와 같은 코딩으로 해결이 됐는데요. ws['d1'].alignment = Alignment(wrap_text=True) 저는 아래의 이미지 처럼 줄바꿈을 하고 싶어서요 위와 같이 줄바꿈을 하려면 각각 아래처럼 변수에 넣고 코딩을 해주면 될까요? a= '12345' b='6789' 코딩을 어떻게 하면 좋을지 궁금해서 문의 드립니다. 구글링을 해봤는데, 자동줄바꿈 코딩은 있는데 수동 줄바꿈과 관련한 코딩은 못찾겠습니다.ㅠ

  • python
  • 웹-크롤링
moonchoh 댓글 3 좋아요 2 조회수 2201

채널 생성시 channelData.map is not a function

미해결

Slack 클론 코딩[실시간 채팅 with React]

채널생성 클릭하면 channeldata.map is not a function이라고 에러가 뜨는데 channelData뿌려지는곳에 ?옵셔널도 줬고.. 아래처럼 잘 작성한것같은데 어딜 놓쳤는지 모르겠습니다. 새로고침하면 추가된 채널명이 출력됩니다. workspace import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { FC, useCallback, useState } from 'react'; import { Navigate, useParams } from 'react-router-dom'; import useSWR from 'swr'; import { AddButton, Channels, Chats, Header, LogOutButton, MenuScroll, ProfileImg, ProfileModal, RightMenu, WorkspaceButton, WorkspaceModal, WorkspaceName, Workspaces, WorkspaceWrapper, } from './styles'; import gravatar from 'gravatar'; import Menu from '@components/menu'; import { Link } from 'react-router-dom'; import { IChannel, IUser, IWorkspace } from '@typings/db'; import { Button, Input, Label } from '@pages/signup/styles'; import useInput from '@hooks/useInput'; import Modal from '@components/modal'; import { toast } from 'react-toastify'; import CreateChannelModal from '@components/createChannelModal'; const Workspace: FC = ({ children }) => { const { workspace, channel } = useParams<{ workspace: string; channel: string }>(); const { data: userData, error, mutate } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000 }); const { data: channelData } = useSWR<IChannel[]>(userData ? `/api/workspaces/${workspace}/channels` : null, fetcher); if (!userData) { return <Navigate to="/login" />; } const [showUserMenu, setShowUserMenu] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); const [showWorkspaceModal, setShowWorkspaceModal] = useState(false); const [showCreateChannelModal, setShowCreateChannelModal] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); //functions const onLogout = useCallback(() => { axios .post('/api/users/logout', null, { withCredentials: true, }) .then((res) => { mutate(res.data); }); }, []); const onClickUserProfile = useCallback(() => { setShowUserMenu(!showUserMenu); }, [showUserMenu]); const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal(true); }, []); const onCreateWorkspace = useCallback( (e) => { e.preventDefault(); if (!newWorkspace || !newWorkspace.trim()) return; if (!newUrl || !newUrl.trim()) return; //trim ->띄어쓰기 하나도 통과 돼버리는걸 막는다. axios .post( '/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }, ) .then((res) => { mutate(res.data); setShowCreateWorkspaceModal(false); setNewWorkspace(''), setNewUrl(''); }) .catch((err) => { console.dir(err); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, [newWorkspace, newUrl], ); const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); setShowCreateChannelModal(false); }, []); const toggleWorkspaceModal = useCallback(() => { setShowWorkspaceModal(!showWorkspaceModal); }, [showWorkspaceModal]); const onClickAddChannel = useCallback(() => { setShowCreateChannelModal(true); }, []); return ( <div> <Header> <RightMenu> <span onClick={onClickUserProfile}> <ProfileImg src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} /> {showUserMenu && ( <Menu style={{ right: 0, top: 38 }} onCloseModal={onClickUserProfile} show={showUserMenu}> <ProfileModal> <img src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} /> <div> <span id="profile-name">{userData.nickname}</span> <span id="profile-active">Active</span> </div> </ProfileModal> <LogOutButton onClick={onLogout}>로그아웃</LogOutButton> </Menu> )} </span> </RightMenu> </Header> <WorkspaceWrapper> <Workspaces> {userData.Workspaces?.map((ws: IWorkspace) => { return ( <Link key={ws.id} to={`/workspace/${123}/channel/일반`}> <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton> </Link> ); })} <AddButton onClick={onClickCreateWorkspace}>+</AddButton> </Workspaces> <Channels> <WorkspaceName onClick={toggleWorkspaceModal}>Sleact</WorkspaceName> <MenuScroll> <Menu show={showWorkspaceModal} onCloseModal={toggleWorkspaceModal} style={{ top: 95, left: 80 }}> <WorkspaceModal> <h2>Sleact</h2> {/* <button onClick={onClickInviteWorkspace}>워크스페이스에 사용자 초대</button> */} <button onClick={onClickAddChannel}>채널 만들기</button> <button onClick={onLogout}>로그아웃</button> </WorkspaceModal> </Menu> {channelData?.map((v, idx) => ( <div key={idx}>{v.name}</div> ))} </MenuScroll> </Channels> <Chats> {children}</Chats> </WorkspaceWrapper> <Modal show={showCreateWorkspaceModal} onCloseModal={onCloseModal}> <form onSubmit={onCreateWorkspace}> <Label id="workspace-label"> <span>워크스페이스 이름</span> <Input id="workspace" value={newWorkspace} onChange={onChangeNewWorkspace} /> </Label> <Label id="workspace-url-label"> <span>워크스페이스 url</span> <Input id="workspace" value={newUrl} onChange={onChangeNewUrl} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> <CreateChannelModal show={showCreateChannelModal} onCloseModal={onCloseModal} setShowCreateChannelModal={setShowCreateChannelModal} /> </div> ); }; export default Workspace; createChannelModal import Modal from '@components/modal'; import useInput from '@hooks/useInput'; import { Button, Input, Label } from '@pages/signup/styles'; import { IChannel, IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { useCallback, VFC } from 'react'; import { useParams } from 'react-router-dom'; import { toast } from 'react-toastify'; import useSWR from 'swr'; interface Props { show: boolean; onCloseModal: () => void; setShowCreateChannelModal: (flag: boolean) => void; } const CreateChannelModal: VFC<Props> = ({ show, onCloseModal, setShowCreateChannelModal }) => { const [newChannel, onChangeNewChannel, setNewChannel] = useInput(''); const { workspace, channel } = useParams<{ workspace: string; channel: string }>(); const { data: userData } = useSWR<IUser | false>(`/api/users`, fetcher); const { data: channelData, mutate } = useSWR<IChannel[]>( userData ? `/api/workspaces/${workspace}/channels` : null, fetcher, ); const onCreateChannel = useCallback( (e) => { e.preventDefault(); axios .post( `/api/workspaces/${workspace}/channels`, { name: newChannel, }, { withCredentials: true }, ) .then((res) => { setShowCreateChannelModal(false); mutate(res.data); setNewChannel(''); }) .catch((err) => { console.dir(err); toast.error(err.response?.data, { position: 'bottom-center' }); }); }, [newChannel], ); return ( <Modal show={show} onCloseModal={onCloseModal}> <form onSubmit={onCreateChannel}> <Label id="channel-label"> <span>채널</span> <Input id="channel" value={newChannel} onChange={onChangeNewChannel} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> ); }; export default CreateChannelModal;

  • 웹팩
  • typescript
  • react
  • Socket.io
  • babel
  • 클론코딩
soh308 댓글 3 좋아요 0 조회수 609

bs4 활용 2-1 질문합니다.

미해결

파이썬 무료 강의 (활용편3) - 웹 스크래핑 (5시간)

코드 실행시 정보가 오지 않고 반응이 없습니다!

  • 웹 스크래핑
  • python
  • selenium
  • 웹-크롤링
2 Cushion 댓글 2 좋아요 0 조회수 517

tailwindcss 적용이 안 됩니다

미해결

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

따라 치면서 실습하는데 적용이 안 되길래 삽질 하다가 혹시나 싶어서 강의 자료를 다운 받아 npm run start 해 보았는데요 그것도 이렇게 적용이 안 되게 보이네요... 뭐가 문제일까요? ㅜ.ㅜ

  • typescript
  • tdd
  • react
  • redux
  • Next.js
김가희 댓글 5 좋아요 0 조회수 1976

여러번 계속 돌려보고했는데 오류를 못찾겠습니다 ㅜㅜ

미해결

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

이거는 reple 입니다. 리플 모델입니다. 이거는 댓글 입력했을때 들어오는 값이랑 맨위에 사진17번째줄 콘솔입니다. 포스트아이디가 없습니다.. 포스트 area 에서 postInfo 를 콘솔한것이 이것 이며 여기서 props.postID 를 가져오지를 못해서.. 값이 안들어가는것 같습니다. 혹시 강의가 업데이트 되거나 제가 잘못한 부분이있을까요..? PostArea.js 에서 댓글지역으로 프롭이렇게 보냈습니다 영상과같이.

  • nodejs
  • express
  • firebase
  • mongodb
  • react
댓글 1 좋아요 1 조회수 572

CommandError: You must set settings.ALLOWED_HOSTS if DEBUG is False. 오류가 뜹니다.

해결됨

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

강의내용대로 쭉 따라가면서 askcomapny경로에서 settings 폴더를생성 cd askcompany로 경로 이동후 git add .를 한뒤 git mv settings.py settings/common.py 로 파일이동 그 상태로 runserver를 해봤더니 CommandError: You must set settings.ALLOWED_HOSTS if DEBUG is False. 오류가 뜸 원래 경로에 settings.py파일을 다시 만들어 보고 runserver를 해봤더니 오류가 사라짐 옮기는 과정에서 문제가 있는건지는 모르겠네요 DEBUG = True 이고 ALLOWED_HOSTS = ['*'] 설정까지도 해봤는데 왜 저런 오류가 뜨는걸까요?

  • react
  • django
  • python
  • docker
yezi9733 댓글 1 좋아요 0 조회수 1616

ReactDom is not defined

미해결

만들면서 배우는 리액트 : 기초

안녕하세요~ 수업 잘 듣고 있습니다. 처음 react, reactdom script 및 babel script 를 추가하고 서버를 보니 ReactDom 오류가 나네요. 추가해야 할 부분이 있을까요? Uncaught ReferenceError: ReactDom is not defined at <anonymous>:13:1 at i (babel.min.js:24:29679) at r (babel.min.js:24:30188) at o (babel.min.js:24:30596) at u (babel.min.js:24:30969) at f (babel.min.js:1:1812) at babel.min.js:1:6287

  • react
  • javascript
smile 댓글 1 좋아요 3 조회수 1577

Invalid href passed to next/router

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 94강 13:55초를 보면 콘솔 창에 next-dev.js?3515:20 Invalid href passed to next/router: /u//r/ test02/043hzrH/test44 , repeated forward-slashes (//) or backslashes \ are not valid in the hre 와 같은 에러가 떠있습니다. [username].tsx에서 <Link href={`/u/${comment.post?.url}`}> 을 불러 올때 url에 '/r/test02/043hzrH/test44'가 담겨 오면서 슬래쉬(//)가 2번 입력되어 생기는 에러 같습니다. 제공된 소스코드에도 위와 같이 입력되어 있어요. 아래와 같이 '/'를 지우고 링크를 href에 넣어주면 에러가 사라지는데 이게 맞을까요? <Link href={`/u${comment.post?.url}`}>

  • nodejs
  • typescript
  • postgresql
  • docker
  • react
  • Next.js
  • 클론코딩
heonpage 댓글 1 좋아요 1 조회수 991

import { User } from "../entities/User"

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 백엔드 entities에서 Post, Sub, Comment는 아래와 같이 import Post from "../entities/Post" import Sub from "../entities/Sub" import Comment from "../entities/Comment" 처럼 불러올 수 있게 작성하셨는데 User만 import {User} from "../entities/User" 중괄호를 넣어서 불러와야 합니다. export default class User extends BaseEntity 가 아닌 export class User extends BaseEntity 로 작성한 이유가 있을까요?

  • nodejs
  • postgresql
  • docker
  • typescript
  • react
  • Next.js
  • 클론코딩
heonpage 댓글 1 좋아요 0 조회수 233

cnt = members.find({"email": email}).count() 관련 질문입니다 !

미해결

남박사의 파이썬으로 실전 웹사이트 만들기

안녕하세요 강의 잘 보고있습니다. cnt = members.find({"email": email}).count() 관련해서 질문이 있는데요, 저번 강의에서도 find().count()에 버전 관련 오류가 발생했었고 이번에도 당연히 [AttributeError: 'Cursor' object has no attribute 'count’] 오류가 발생했는데요, 그래서 구글링을 통해 cnt = members.collection.estimated_document_count({"email": email}) if cnt > 0: flash("중복된 이메일 주소입니다.") return render_template("join.html") collection.estimated_document_count({"email": email}) 를 찾아서 적용했고 커서 오류를 해결했습니다. 이렇게 회원가입 db를 members로 잘 넘겼는데요, 이메일 주소 중복 부분에서 시크릿키 적용을 한 후에도 이메일이 중복돼도 회원가입이 되고 db가 넘어가더라구요. 그래서 또 구글링을 했고 cnt = members.count_documents({"email": email}) if cnt > 0: flash("중복된 이메일 주소입니다.") return render_template("join.html") count_documents({"email": email}) 코드로 문제 해결을 하기는 했는데요, 여기서 'count_documents'와 'collection.estimated_document_count'의 차이를 알고싶습니다. 아무리 찾아봐도 차이점을 못찾겠어요. 차이점 알려주시면 감사하겠습니다 ! 부탁드려요 !

  • python
Victoria 댓글 1 좋아요 2 조회수 359

4강 코드 오류메세지 관련 질의

미해결

단 두 장의 문서로 데이터 분석과 시각화 뽀개기

4r강 마지막에 연산자 적용관련하여 df[df.b == 7] | df[df.a == 5] 라고 코드를 똑 같이 했는데 unsupported operand type(s) for |: 'float' and 'bool' 라고 오류메세지가 나옵니다. 왜이렇게 나오는지가 궁금합니다.

  • pandas
  • python
ryandct 댓글 2 좋아요 1 조회수 413

주피터 노트북 실행에 질문있습니다.

미해결

초보자도 간단히 단숨에 배우는 파이썬 프로그래밍

처음에 주피터 노트북을 실행할 때 cmd에 jupyter notebook--notebook-dir='저장경로'를 입력해서 실행을 했는데, 주피터를 종료하고 다시 실행하려 할 때에도 동일하게 접근해야 하는지, 아니면 더 편리한 방법이 있는지 궁금합니다.

  • 인프런 신규강의 (무료)
  • python
  • 인프런 신규강의 (무료)
  • 인프런 신규강의 (무료)
fhdshsey 댓글 1 좋아요 0 조회수 472

깃에 나와있는 내용을 볼 수가 없습니다.

해결됨

파이썬 동시성 프로그래밍 : 데이터 수집부터 웹 개발까지 (feat. FastAPI, async, await)

안녕하세요. 강사님 현재 강사님 강의 듣고 있는 수강생 입니다. Python의 패키지 매니저 PIP 명령어 정리와 사용 해당 파트 에서 0:30초에 나오는 필수적인 명령어 정리되어 있는 페이지가 강사님 git 에서 보이지 않아서요. 어디서 찾아 볼 수 있는 것 인가요 ? 확인 부탁드리겠습니다. 감사합니다.

  • python
  • FastAPI
  • 동시성
soulrist 댓글 1 좋아요 0 조회수 319

post?.voteScore undefined

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 81강을 수강중입니다. src/pages/r/[slug]/[identifier]/[slug].tsx 작성중 {post.voteScore} 를 콘솔로 찍어보면 undefined가 나와서 페이지에 노출되지 않습니다. 타입을 voteScore? : number 로 한게 문제인가해서 ?를 지워보았지만, 증상은 동일했고 api를 불러오면서 voteScore는 0으로 초기화되지 않은채 받는것 같아요. 그러던 중 백엔드의 Post.ts를 살펴보았더니 get voteScore()를 get V oteScore()로 오타 아닌 오타를 가져가서 초기화 되지 않았단걸 알아내었습니다. 누군가에게 도움이 되시길 바라며

  • 클론코딩
  • Next.js
  • typescript
  • nodejs
  • docker
  • postgresql
  • react
heonpage 댓글 1 좋아요 0 조회수 345

Training dataset 관련

미해결

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

안녕하세요 강사님, 항상 좋은 수업 잘 듣고있습니다. mmdetection으로 Mask-RCNN + Resnet-101 model Training중 Training Dataset 구성 관련하여 질문있습니다. 제가 기존 model을 학습시키는데 사용된 모든 이미지 데이터는 1280x720 해상도였습니다. 그러나 이번에 수집한 데이터는 2208x1242 해상도입니다. Q1. 각기 다른 해상도로 촬영된 이미지들을 하나의 데이터셋으로 만들고, 네트워크에 학습시켜도 문제가 없을까요? 당연히 COCO dataset이나 PASCAL dataset을 살펴봐도 다양한 해상도의 이미지를 annotation하여 구성하였기 때문에 문제될 건 없다고 생각하는데 일반적으로, 1280x720 해상도 이미지를 추론하는 경우, 동일한 해상도의 데이터셋으로 학습된 모델이 성능이 더 우수한지 궁금해서요. ex) 1280x720 이미지 추론시, 1280x720 해상도만으로 이루어진 데이터셋으로 학습된 model 사용 1920x1080 이미지 추론시, 1920x1080 해상도만으로 이루어진 데이터셋으로 학습된 model 사용 2208x1242 이미지 추론시, 2208x1242 해상도만으로 이루어진 데이터셋으로 학습된 model 사용 만약 일반적으로 이렇게 한다면, 새로 획득한 데이터가 아닌 라벨링되지 않은 1280x720해상도 데이터들을 더 annotation 작업 진행하려 합니다.

  • dataset
  • 딥러닝
  • tensorflow
  • 머신러닝 배워볼래요?
  • python
  • keras
  • 컴퓨터-비전
윤도현 댓글 1 좋아요 0 조회수 367

css font-face unicode-range

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

안녕하세요 선생님, 정말 좋은 강의 감사합니다. 선생님이 설명해주신 폰트 사이즈 줄이기 (Unicode Range) 를 테스트 해보려고 했습니다. 제가 진행한 Nextjs, React 두가지 프로젝트 환경에서 Unicode range없이 네트워크를 살펴보았는데요, 알아서 그 페이지에서 사용하는 폰트만 불러오는 것을 확인했습니다. 혹시 react 프로젝트는 Unicode-range 를 해주지도 않았는데 알아서 최적화를 해주는 것인가요...??.....

  • react
  • devtools
빅픽쳐팀SI사업팀 댓글 1 좋아요 1 조회수 391

woff2 포멧 IE에서 사용가능 여부

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

안녕하세요 선생님. 이번에 폰트 포멧에 대해서 공부를 해봤는데, woff2 가 인터넷 익스플로러에서 사용불가하다고 알고 있었는데 사용이 가능한가요?! https://caniuse.com/?search=woff2

  • react
  • devtools
빅픽쳐팀SI사업팀 댓글 2 좋아요 1 조회수 464

3-3 이미지 지연 로딩 코드 어디서 보나요?

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

3-3 이미지 지연 로딩을 하면서 밑에 TwoColumns의 이미지도 지연 로딩하는걸 적용했습니다. 강사님 코드와 비교하고 싶은데 어디에서 코드를 확인할 수 있나요?

  • devtools
  • react
댓글 1 좋아요 1 조회수 351

인기 태그

인프런 TOP Writers

주간 인기글