inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

"Validation failed (numeric string is expected)" 400 에러와 함께 유저 프로필 / 게시글을 불러오지 못합니다

해결됨

Next + React Query로 SNS 서비스 만들기

해당 오류와 함께 유저 프로필 페이지 접속시 게시글을 불러오지 못합니다...!! 콘솔창에서는 해당 메시지와 함께 오류가 출력되는데 맨 밑에 d는 UserPosts.tsx 컴포넌트에서 찍어본 useQuery로 패칭한 데이터 찍어본것 입니다. getUserPosts.ts에서 받아온 res 값을 콘솔에 찍어봤습니다 제로초님 코드와 동일한데 어떤 이유에선지 유저 프로필 페이지 게시글을 못불러오는지 잘 모르겠어서 낑낑대다가 질문 드렸습니다...ㅠㅠ 감사합니다

  • react
  • next.js
  • react-query
  • next-auth
  • msw
천하무적박정권 댓글 1 좋아요 0 조회수 427

Encountered two children with the same key

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

Multer 이용하여 이미지 업로드 하면 다음 오류가 뜹니다 import React from 'react' import Dropzone from 'react-dropzone' import axiosInstance from '../utils/axios'; import PropTypes from 'prop-types'; const FileUpload = ({ onImageChange, images }) => { const handleDrop = async (files) => { let formData = new FormData(); const config = { header: { 'content-type': 'multipart/form-data' } } formData.append('file', files[0]); try { const response = await axiosInstance.post('/products/image', formData, config); onImageChange([...images, response.data.fileName]); } catch (error) { console.error(error); } } return ( <div className='flex gap-4'> <Dropzone onDrop={handleDrop}> {({ getRootProps, getInputProps }) => ( <section className='min-w-[300px] h-[300px] border flex items-center justify-center' > <div {...getRootProps()}> <input {...getInputProps()} /> <p className='text-3xl'>+</p> </div> </section> )} </Dropzone> {images.map((image, index) => ( <div key={image+index}> {/* image 이름과 index를 조합하여 고유한 키를 생성 */} <img className='min-w-[300px] h-[300px]' src={`${import.meta.env.VITE_SERVER_URL}/${image}`} alt={image} /> </div> ))} </div> ) } FileUpload.propTypes = { // onImagesChnage: PropTypes.bool.isRequired, onImageChange: PropTypes.any, images: PropTypes.any, }; export default FileUpload

  • react
  • redux
  • node.js
  • 웹앱
  • mongodb
volcano1122 댓글 1 좋아요 0 조회수 234

컴포넌트 만들때에는 jsx를 사용하는 이유?

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

안녕하세요. 강의를 수강중인 수강생입니다. 혹시 컴포넌트들을 만들때엔 타입스크립트 tsx가 아닌 jsx를 사용하시는데, 이러한 이유가 있을까요? 추가적으로 React.FC에 대해 공부하다보니 지양한다는 글들이 많은데, 어떻게 생각하시는지 궁금합니다. 감사합니다.

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
minji 댓글 1 좋아요 1 조회수 425

포토 모달의 인터셉팅 라우터

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요, 제로초님. 사진 크게보기 modal을 보던 중 궁금한게 있어서 질문 드립니다. 사진을 크게 보기 위해 페러렐 라우터와 인터셉팅 라우터를 사용한다고 하셨는데 인터셉팅 라우터를 사용하기 위해선 @modal/[username]이 아니라 @modal/(.)[username] 이 되어야 하는게 아닌지 질문 드려요! 뿐만 아니라 위에 같이 (.)을 붙이지 않았을 경우에 http://localhost:3000/elonmusk/status/1/photo/1 위 URL에서 새로고침을 하게되면 인터셉팅 되지 않은 (afterLogin)/[username]/status/[id]/photo/[photoId]/page.tsx 가 나타나야 하고 이는 Home 화면을 보여주기로 하였는데 이 부분도 동작하고 있는 것 같지 않습니다. 혹시 원래 동작하는데 제가 놓친 부분이 있는걸까요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
베레가모 댓글 3 좋아요 0 조회수 495

파이참에서 외부 파이썬 함수 수행하기

해결됨

Airflow 마스터 클래스

안녕하세요. 외부 파이썬 함수 수행하기가 안되어서 문의드리게 되었습니다. 저는 Pycharm이 익숙해서 Pycharm으로 하고 있었는데, Pycharm의 경우 .env파일이 인식이 안되는 걸까요..? common 모듈을 발견하지 못하네요... .env파일을 아래와 같이 설정하였고 dags_python_import_ func.py 에서도 Enable EnvFile에 체크표시를 하였는데 여전히 해당 모듈을 읽지 못하네요...ㅠㅠ 혹시 Pycharm의 경우 .env파일을 다르게 설정해야하는 걸까요...?

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

선생님이랑 똑같이 적었는데 저는 왜 오류가 날까요?ㅠ

미해결

실습으로 끝장내는 웹 크롤링과 웹 페이지 자동화 & 실전 활용

안녕하세요! 차근차근 잘 보고 있습니다. 선생님이랑 똑같이 따라하고 있는데 저는 자꾸 에러가 나서요ㅠㅠ ".logo_naver"가 없어진거 같아서 다른걸 붙여서 했는데도 오류가 나는데 뭐가 잘못된 걸까요ㅠㅠㅠㅠ 답변이 선생님이랑은 다르게 이렇게 나와서요ㅠㅠ 똑같이 따라하는데 뭐가 잘못된 건지 모르겠어요ㅠㅠ

  • python
  • 웹-크롤링
  • selenium
  • beautifulsoup
댓글 2 좋아요 0 조회수 383

뉴스기사 크롤링 css선택자 선정의 어려움......도와주세요....

미해결

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

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 쌤 인프런, 유튜브 강의 보면서 잘 만들어 가고 있었는데 현재 코드에서 아무리 수정을 해도 css를 잘못 가져오는건지 오류가 생겨서 답답해서 질문 들고 왔습니다 현재 css 코드 찾기 좀 부탁드릴게요ㅠㅠ 안되는 항목 ✔ 연예뉴스 -> 내용을 못 가져옴 ✔ 스포츠뉴스 -> 제목, 날짜, 내용 다 못 가져옴 css를 여러개 바꿔서 넣어봐도 저는 자꾸 찾을 수 없다고 크롤링 됩니다 도와주세요,,,,,,, #네이버기사 크롤링 엑셀저장 import requests from bs4 import BeautifulSoup import time import pyautogui from openpyxl import Workbook #사용자입력 keyword = pyautogui.prompt("검색어를 입력하세요") lastpage = int(pyautogui.prompt("몇 페이지까지 크롤링 할까요?")) #엑셀 생성 wb = Workbook() #엑셀시트 생성 ws = wb.create_sheet(keyword) #열 너비 조절 ws.column_dimensions['A'].width = 60 ws.column_dimensions['B'].width = 30 ws.column_dimensions['C'].width = 60 ws.column_dimensions['D'].width = 150 #행 번호 row = 1 #페이지 번호 pageNum = 1 for i in range(1, lastpage*10, 10) : print(f"{pageNum}페이지 크롤링중입니다 =================") response = requests.get(f"https://search.naver.com/search.naver?where=news&query={keyword}&sm=tab_opt&sort=1&photo=0&field=0&pd=3&ds=2024.04.11&de=2024.15.20&news&query={keyword}&start={i}") html = response.text soup = BeautifulSoup(html, 'html.parser') articles = soup.select("div.info_group") #뉴스기사 div 10개 추출 for article in articles: links = article.select("a.info") #리스트 time.sleep(0.7) if len(links) >= 2: #링크가 2개 이상이면 url = links[1].attrs['href'] #두번째 링크의 href를 추출 response = requests.get(url, headers={'User-agent': 'Mozilla/5.0'}) html = response.text soup_sub = BeautifulSoup(html, 'html.parser') content = soup_sub.select_one("#newsct_article") if content: content_text = content.get_text(separator="\n") else: content_text = "내용을 찾을 수 없습니다." title = None date = None #만약 연예 뉴스라면 if "entertain" in response.url: title = soup_sub.select_one(".end_tit") date = soup_sub.select_one("div.article_info > span > em") content = soup.select_one("#articeBody") #만약 스포츠 뉴스라면 elif "sports" in response.url: title = soup_sub.select_one(".Main_article_title") content = soup.select_one("._article_content") else: title = soup_sub.select_one(".media_end_head_headline") date = soup_sub.select_one("span.media_end_head_info_datestamp_time._ARTICLE_DATE_TIME") #본문 내용안에 불필요한 div, p제거 divs = content.select("div") for div in divs: div.decompose() paragraphs = content.select("p") for p in paragraphs: p.decompose() print("=======제목======= \n", title.text.strip() if title else "제목을 찾을 수 없습니다.") print("=======날짜======= \n", date.text if date else "날짜를 찾을 수 없습니다.") print("=======URL======= \n", url) print("=======내용======= \n", content.text.strip() if content else "내용을 찾을 수 없습니다") # 'else' 블록에서 'date' 변수 정의는 여기서 끝나도록 수정 ws['A1'] = '제목' ws['B1'] = '날짜' ws['C1'] = 'URL' ws['D1'] = '내용' ws[f'A{row}'] = title.text.strip() if title else "제목을 찾을 수 없습니다." ws[f'B{row}'] = date.text.strip() if date else "날짜를 찾을 수 없습니다." ws[f'C{row}'] = url ws[f'D{row}'] = content_text.strip() if content else "내용을 찾을 수 없습니다." row=row+1 #마지막 페이지 여부 확인하기 next_button = soup.select_one("a.btn_next") if next_button: isLastPage = next_button.attrs.get('aria-disabled', None) if isLastPage == 'true': print("마지막 페이지 입니다.") break pageNum = pageNum+1 wb.save(f"{keyword}_4월_뉴스기사_크롤링(4)_내용까지_0411~0415(3).xlsx")

  • python
  • 웹-크롤링
댓글 3 좋아요 0 조회수 442

Next.js에 Custom hook 디자인 패턴을 사용하는 것에 대해 어떻게 생각하시나요?!

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 ! Next.js에 Custom hook 디자인 패턴을 사용하는 것에 대해 어떻게 생각하시나요 ?! hooks 폴더를 페이지 단위로 두어 RCC 컴포넌트 내부 로직을 hooks으로 관리하는 Custom hook 패턴과 아토믹을 함께 사용하려고 하고 RSC 컴포넌트에서는 아토믹 패턴을 사용하려고 하는데 이렇게 hooks을 next에서 사용해도 괜찮은 건지 고민이 들어서 질문 드립니다 ! (정답이 없는 문제인 건 알지만 어떻게 생각하시는지 궁금하여 질문드립니다.)

  • react
  • next.js
  • react-query
  • next-auth
  • msw
ReKoding 댓글 1 좋아요 0 조회수 371

GET 오류

미해결

Next + React Query로 SNS 서비스 만들기

dependencies에 next-auth버전입니다 "next-auth": "^4.24.7", 오류를 보면 import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; import { NextResponse } from "next/server"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), } ); if (!authResponse.ok) { return null; } const user = await authResponse.json(); console.log("user", user); return { email: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], }); 이게 제 코드인데 제 코드에서는 credentials 속성이 없다고 뜨는데 실행해보면 Unhandled Runtime Error Error: Cannot read properties of undefined (reading 'GET') Source src/auth.ts (6:14) @ GET 4 | 5 | export const { > 6 | handlers: { GET, POST }, | ^ 회원가입시 이런 오류가 뜹니다 오류와 대조를 하여 공식문서를 보면 현재 여기 credentials의 코드가 바뀐것같은데 제 코드에서 어떻게 수정을 해줘야할지 모르겠습니다. vscode자체 오류로도 credentials' 속성이 '{ authorize(credentials: Record | undefined): Promise; }' 형식에 없지만 'Pick>, "credentials" | "authorize"> 형식에서 필수입니다. 라고 뜨는것으로 보아 제 생각에도 공식문서에있는 credentials 속성을 넣어줘야하는것같은데 어떤식으로 해야할지 잘 모르겠습니다. route.ts 역시 // api auth와 관련된 주소는 전부 nextauth가 관리 export { GET, POST } from "@/auth"; 이런식으로 잘 넣어주었구요. 어떤식으로 수정을해야 GET오류가 나지 않을까요 ?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
욱희 댓글 2 좋아요 0 조회수 351

map 함수에서 cannot read properties of undefined 에러 발생

미해결

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

강사님이 알려주신 대로 작성했는데 해당 부분에서 Cannot read properties of undefined (reading 'map') 이라는 오류가 발생합니다.ㅠㅠ 오타가 있는것 같지는 않은데..어디가 문제일까요..?

  • javascript
  • react
  • node.js
이화영 댓글 2 좋아요 0 조회수 428

context provider에 관한 질문

미해결

Next + React Query로 SNS 서비스 만들기

Tab.tsx에서 "추천"과 "팔로우 중"을 클릭하면 상태가 "rec", "fol"로 변경되는 것을 확인했습니다. 이후 TabProvider.tsx 파일을 만들고 <TabProvider>로 상태를 공유할 하위 컴포넌트를 감싸는 것 까지 되었습니다. TabProvider.tsx에 있는 state를 하위 컴포넌트가 구독하여 상태 공유를 할 수 있는 것으로 알고있습니다. 여기서 질문입니다. TabProvider.tsx로 감싼 하위 컴포넌트인 Tab.tsx에서 상태가 변경되었을 때, TabProvider에 변경된 상태를 공유할 수 있는지 궁금합니다. (자식 컴포넌트에서 상태가 변경되면, Provider 상태도 변경할 수 있는지) Post.tsx에서 상태공유 확인하는데, Tab.tsx에서 상태가 변경되어도 Provider에서는 변경되지 않아 질문 올립니다.. import { TabContext } from "../home/_component/TabProvider"; const Post = () => { const { tab } = useContext(TabContext); return ( <> <div>TabContext Value = {tab}</div> </> ); };

  • react
  • next.js
  • react-query
  • next-auth
  • msw
hwuiinn 댓글 1 좋아요 0 조회수 334

Hot reload 오류 문의 드립니다.

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

안녕하세요 강사님은 코드 수정 후 브라우저에서 바로바로 확인이 되는 것 같은데 저는 코드를 수정할 때 마다 아래의 오류가 발생해서 매번 다시 yarn dev를 해줘야 수정한 내역이 확인이 되다 보니 강의를 따라 진행 하는대 집중이 되질 않네요. 혹시 아래의 에러가 발생 되지 않게 하는 방법이 있는 것인지 문의 드립니다. 감사합니다. 수고하세요. =================================================================== ⨯ [Error: UNKNOWN: unknown error, open 'D:\study\react\workspace\yt-music-clone-next\.next\static\chunks\app\layout.js'] { errno: -4094, code: 'UNKNOWN', syscall: 'open', path: 'D:\\study\\react\\workspace\\yt-music-clone-next\\.next\\static\\chunks\\app\\layout.js' ===================================================================

  • react
  • 인터랙티브-웹
  • 클론코딩
  • next.js
  • tailwind-css
  • zustand
itdeveloper 댓글 2 좋아요 1 조회수 697

프라이빗 폴더에 관한 질문입니다.

미해결

Next + React Query로 SNS 서비스 만들기

강의를 듣던 중에 프라이빗 폴더에 관한 궁금증이 생겼습니다. 단순 중복 제거 컴포넌트를 모아두는 폴더로 사용한다. 클라이언트 컴포넌트만 넣어두는 폴더로 사용한다. 1번과 2번의 용도로만 사용하면 되는 것인가요?? 그리고 View마다 프라이빗 폴더를 생성해서 파일을 정리해도 괜찮을까요??

  • react
  • next.js
hwuiinn 댓글 1 좋아요 0 조회수 220

안녕하세요 선생님

미해결

모두의 한국어 텍스트 분석과 자연어처리 with 파이썬

안녕하세요 선생님 대학교에서 캡스톤디자인을 수행하고 있는 학생입니다. 판결문에서 사건의 원인,판결 결과,가중·감소 처벌 요소,키워드를 추출하고 싶은데 어떤 기술을 사용해야할지 막막하여 질문올리게 되었습니다. 거대언어모델은 지양하라고 교수님께서 말씀하셨습니다..ㅜ 조언을 주신다면 감사하겠습니다.

  • python
  • 머신러닝
  • 빅데이터
  • NLP
  • 텍스트마이닝
  • data-clustering
  • 데이터-리터러시
큐펀치 댓글 1 좋아요 0 조회수 332

leftSectionWrapper와 rightSectionWrapper 중앙 정렬 방법에 관하여

미해결

Next + React Query로 SNS 서비스 만들기

양 사이드에 flex-grow : 1; 씩 주는 방법을 처음 알게되었습니다. 이전에는 현재 구현하고자 하는 레이아웃처럼 중앙정렬 할 때, 아래 코드처럼 요소 전체를 감싸는 컨테이너에 justify-content : center;를 지정해서 정렬했었습니다. (아래 코드 첨부) 레이아웃을 정확하게 중앙에 놔둘 때에는 flex-grow 및 justify-content를 선택해서 사용할 수 있을 것 같고, flex-grow는 비대칭적인 레이아웃을 구성할 때, 더 유용할 수 있겠다. 라고 생각하는데 올바른 접근일까요?? .container { display: flex; align-items: stretch; background-color: #fff; justify-content: center; }

  • react
  • next.js
  • react-query
  • next-auth
  • msw
hwuiinn 댓글 2 좋아요 0 조회수 235

Graphql-codegen 설치중에 에러

해결됨

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

Graphql-codegen 설치중에 에러가 계속 나서 node-module 과 yarn.lock 을 삭제 한후 다시 yarn install 실행 후 yarn add --dev typescript @graphql-codegen/cli 에러가 났습니다 내친구 쳇에게 물어봤더니 제가 한거처럼 하라고 하네요 매번 환경설정시 긴장의 연속!!! 왜이러는 걸까요?? 혹시 yarn add -D typescript ts-node @graphql-codegen/cli @graphql-codegen/client-preset @parcel/watcher 요걸 해줘야되는지 ?? :~/codecamp/class$ yarn add --dev typescript @graphql-codegen/cli yarn add v1.22.22 [1/4] Resolving packages... error AggregateError at internalConnectMultiple (node:net:1102:18) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) at internalConnectMultiple (node:net:1160:5) info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

  • react
  • node.js
  • seo
  • graphql
  • next.js
S S 댓글 0 좋아요 0 조회수 201

다들 마우스 hover시에 포인터가 제대로 변경되시나요?

미해결

Next + React Query로 SNS 서비스 만들기

private 폴더까지 강의를 보면서 진행하다가 문득 로그인이나 계정 만들기, 모달 close button에 마우스를 가져다 대니 커서 변경이 되지 않네요. 속성이 없는건가? 싶어서 보니 cursor : pointer; 는 제대로 들어가있는 것 같은데 마우스 포인터가 잘 변경되지 않아서 다른 분들은 잘 변경되시는지 궁금하네요

  • react
  • next.js
  • react-query
  • next-auth
  • msw
hwuiinn 댓글 1 좋아요 0 조회수 358

show_templates() 함수의 키워드 아규먼트 질문

해결됨

Airflow 마스터 클래스

안녕하세요 강사님! dags_python_with_ templates.py 파일에서 show_templates 함수를 아무 인자도 넣지 않고 실행을 시키는데요, dag 실행시 출력되는 키워드 인자들은 에어플로우 태스크 객체에 기본으로 입력되는 값들인가요? 정확한 원리가 궁금하여 여쭤봅니다

  • python
  • 데이터-엔지니어링
  • airflow
방효석 댓글 2 좋아요 0 조회수 336

오픈그래프 태그

미해결

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

배포 후 링크 공유하는데 오픈 그래프 태그가 나타나지 않습니다.ㅜㅜ

  • javascript
  • react
  • node.js
우다슬 댓글 5 좋아요 0 조회수 957

Apollo-Client 설치 에러

미해결

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

안녕하세요, 섹션 7 듣고 있습니다. Apollo-Client를 설치하고 yarn dev 실행하니 저렇게 뜨네요. 해당 파일을 지우거나 해도 이번엔 그 파일이 없다는 이유로 에러가 뜹니다. Node.modules랑 package.lock.json 삭제 후 재설치해도 똑같고요. 조속한 해결 부탁 드리겠습니다.

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

인기 태그

인프런 TOP Writers

주간 인기글