inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

msw patch

미해결

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

안녕하세요 msw patch 관련해서 여쭤보고싶은게 있습니다! 제로초님 강의를 응용해서 프로젝트에 msw로 데이터들을 테스트 하고있습니다 handler에서 /users란 엔드포인트로 get요청후 데이터들을 받아온뒤 다시 수정이 필요해 patch handler를 생성했습니다. mutation을 통해서 patch 요청은 성공한거같은데 기존의 get으로 받아온 user데이터들을 수정하고 싶다면 어떻게 할수있을지 여쭤보고싶습니다 ! const mutation = useMutation({ mutationFn: async (e: FormEvent) => { e.preventDefault(); const updatedUser = { userId: product.userId, nickName: product.nickName, userFileUrl: product.userFileUrl, techStack: product.techStack, position: product.position, employmentStatus: product.employmentStatus, year: product.year, links: product.links, alarmStatus: product.alarmStatus, content: product.content, softSkill: product.softSkill, }; fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/users`, { method: "PATCH", body: JSON.stringify(updatedUser), }); }, }); import { bypass, http, HttpResponse } from "msw"; import { hotPeople, peoples, users } from "./peopleData"; export const handlers = [ http.get("/peoples/hot/:tag", () => { return HttpResponse.json(hotPeople); }), http.get("/peoples", ({ request, params }) => { return HttpResponse.json(peoples); }), http.get("/users", () => { return HttpResponse.json(users); }), http.patch("/users", async ({ request }) => { return HttpResponse.text("success?"); }), ]; export default handlers;

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

item의 값을 어디서 얻어오는지 모르겠습니다..

미해결

처음 만난 리액트(React)

안녕하세요 onClickItem에서 (item) 이 데이터를 어디서 가져오는지 이해가 가지 않아서요,, item이라고 명시된 값이 없는데 item을 어떻게 사용하는 건가요..???

  • HTML/CSS
  • javascript
  • react
댓글 2 좋아요 0 조회수 267

피벗테이블 열 추가

미해결

[리뉴얼] 처음하는 파이썬 데이터 분석 (쉽게! 전처리, pandas, 시각화 전과정 익히기) [데이터분석/과학 Part1]

section 9 듣다가 피벗테이블 질문있어요 코드 : doc_covid2 = pd.pivot_table(doc_covid, index=['Country_Region'], values=['Confirmed'], aggfunc={'Confirmed': 'sum'}, fill_value=0, margins=True, margins_name='Total' ) 같은 경우 말그대로 doc_covid 에서 피벗테이블을 만드는데 Country_Region 에 대해서 Confirmed 를 더한 값을 컬럼으로 만드는 내용이잖아요 혹시 여기서 열을 추가 하는게 가능한 건가요?? Confirmed의 median 값을 컬럼으로 만드는 열을 추가 하고 싶은데 가능한건지요 ... 라고 질문글을 썼는데 혹시 몰라 그냥 구글에 검색하니까 aggfunc=['sum','median'] 이라 쓰면 됐었네요... 다른 분들에게도 도움 되시라고 그냥 남깁니다.

  • pandas
  • python
  • pivot
러시안블루 댓글 1 좋아요 0 조회수 251

chapter6 실습 그대로 했는데 오류가 납니다.

미해결

처음 만난 리액트(React)

index.js NotificationList.jsx 에러코드 화면 오타 확인도 해봤는데 아무리봐도 에러가 왜 나는지 못찼겠습니다.

  • HTML/CSS
  • javascript
  • react
노인자 댓글 2 좋아요 1 조회수 672

css 슬라이드 애니메이션(크로스페이드 슬라이드)

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

이미지가 4개이면 키프레임 구간을 어떻게 나누며 @keyframes slide { 0% { opacity: 0; } 0% {} 0% {} 0% {} 100% {} } 그리고 애니메이션 딜레이는 어떻게 주나요? .slide div a:nth-child(1) { animation-delay: 0s; .slide div a:nth-child(2) { animation-delay: 0s; .slide div a:nth-child(3) { animation-delay: 0s; .slide div a:nth-child(4) { animation-delay: 0s; 가로 슬라이드와 세로 슬라이드는 이해도 되고 이미지 4개로 작업도 해보았습니다. 그런데 크로스페이드는 도저히 응용이 안돼요

  • HTML/CSS
  • jquery
  • 웹-디자인
bimil1121 댓글 1 좋아요 1 조회수 535

A-3 유형 코드

미해결

웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)

header nav li .lnb{position: absolute; width: 200px; background: #000; height: 0; overflow: hidden; transition: .3s; z-index: 5;} 안녕하세요? 선생님. 다름이 아니오라 실습하면서 A-3 유형 코드에 z-index 속성이 빠져 있어서 제가 추가 해보니 슬라이드 위로 메뉴가 보입니다. 확인 부탁 드립니다.

  • HTML/CSS
  • jquery
sy4562 댓글 2 좋아요 0 조회수 233

로그인 모달창 새로고침 시 배경 메인 페이지 사라지는 현상

미해결

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

로그인 버튼을 클릭하면 우선 '/login' 주소로 이동했다가 'i/flow/login'으로 이동하기 때문에 이때 '/login'에서 배경이 메인 컴포넌트를 보여줘야 메인 페이지가 바탕이 되고로그인 모달 창을 띄운다는 점은 이해했습니다. 따라서 app/(beforeLogin)/login/page.tsx 에서 Main 컴포넌트를 보여주도록 했습니다. export default function Login() { const router = useRouter(); router.replace("/i/flow/login"); return <Main />; } 문제는 '/i/flow/login' 에서 새로고침하면 모달 창은 그대로지만 배경은 메인 페이지가 아닙니다. 이때 아래와 코드와 같이 따로 Main 컴포넌트를 불러오면 새로고침 시, 배경은 메인 페이지로 잘 나옵니다.그런데 강의와 깃허브 코드를 보니 LoginModal 컴포넌트만 보여주고 있습니다. LoginModal 컴포넌트만 있어도 app/(beforeLogin)/page.tsx에서 Main 컴포넌트를 보여주고 있으므로 app/(beforeLogin)/layout.tsx에서 Main 컴포넌트가 {children}에 할당된다고 생각했습니다. 따라서 아래 코드에서 Main 컴포넌트가 없어도 배경은 메인 페이지가 나온다고 생각했습니다. 아래 코드와 같이 Main 컴포넌트가 있으면 새로고침 시, 메인 페이지가 배경이 되고 그 위에 로그인 모달창이 띄워지지만 Main 컴포넌트가 없으면 새로고침 시, 메인 페이지가 빈 페이지가 나옵니다. 여기서 Main 컴포넌트를 넣어서 해결해도 되는건지 의문이 들었습니다. 아래 코드에서 Main 컴포넌트를 넣지 않으면 Main 페이지가 어떻게 배경으로 보여지는 건지 알고 싶습니다! import LoginModal from "@/app/(beforeLogin)/@modal/(.)i/flow/login/page"; import Main from "@/app/(beforeLogin)/_component/Main"; export default function Page() { return ( <> <LoginModal /> <Main /> </> ); }

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

로그인 폼 CSS 디자인 코드 질문 있습니다.

미해결

중상급 퍼블리싱을 위한 CSS3의 모든 것

선생님, 제가 괄호 사용 코드에 대해 아직 지식이 부족해서 이 부분을 이해를 못한 것 같아 질문 드립니다. input에 공통적인 css를 입력하는건데 [] 를 써서 각각의 이름을 입력 해야 하는 이유가 있을까요? 뒤에 대괄호를 사용하지 않아도, 라이브창에 보이는 효과는 같은 것 같아서요!

  • HTML/CSS
tnrud2668 댓글 1 좋아요 1 조회수 272

font-weight가 적용이 안 되는데 어떻게 하나요?

미해결

입문자를 위한 CSS 기초 강의

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>회사 웹 페이지 만들기</title> <style> body{ font-weight: 30px; } img{ display: flex; float: left; width: 130px; height: 30px; margin: 10px 0px 0px 8px; } img:hover{ cursor: pointer; } img, .menu_bar{ margin-right: 50px; } .menu_bar{ width: 100%; height: 70px; border: 2px solid black; text-align: center; display: flex; float: left; } input{ width: 110px; height: 45px; margin-right: 10px; margin-top: 12px; background-color: white; font-family: "돋움"; font-size: 15px; border: none; border-radius: 5px; } input:hover{ background-color: #f8f9fa; cursor: pointer; } #event, #freeStart{ width: 170px; } #freeStart{ color: white; background-color: #ff6464; } #freeStart:hover{ background-color: #DB4455; } #login{ margin-left: 100px; } div > #seeMore{ width: 20px; height: 20px; padding: 12px; } #seeMore:hover{ background-color: #f8f9fa; } </style> </head> <body> <div class="menu_bar"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/NHN_COMMERCE_CI.png/1600px-NHN_COMMERCE_CI.png" alt="회사로고"> <input type="button" name="쇼핑물" id="shop" value="쇼핑몰"> <input type="button" name="스토어" id="store" value="스토어"> <input type="button" name="마케팅" id="marketing" value="마케팅"> <input type="button" name="고객지원" id="customer" value="고객지원"> <input type="button" name="이벤트" id="event" value="혜택 ● 이벤트"> <input type="button" name="엔터프라이즈" id="enterprise" value="엔터프라이즈"> <input type="button" name="이전센터" id="center" value="이전센터"> <input type="button" name="로그인" id="login" value="로그인"> <input type="button" name="무료로 시작하기" id="freeStart" value="무료로 시작하기"> <img src="/image/메뉴바.png" id="seeMore" alt=""> </div> </body> </html>

  • HTML/CSS
  • Visual Studio Code
장동현 댓글 1 좋아요 0 조회수 1193

npm start출력 시 미출력됩니다.

미해결

처음 만난 리액트(React)

<Book.jsx> <Library.jsx> <index.js> 입력 후 출력 시 오류값이 나오는데 설명부탁드립니다.

  • HTML/CSS
  • javascript
  • react
이양욱 댓글 3 좋아요 1 조회수 803

7회 기출문제 원핫인코딩 관련 질문입니다.

해결됨

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

원핫인코딩 시, 만약에 test 데이터에 train에서 포함하지 않은 값이 있어 컬럼이 하나 더 생기는 상황이 발생한다면 레이블인코딩으로 진행해야 하나요?

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

강의에 사용하는 예제 코드 자료 있나요?

미해결

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

안녕하세요. 강의에 사용하는 예제 코드 자료 있나요? PPT( https://www.inflearn.com/course/lecture?courseSlug=%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%9E%85%EB%AC%B8-%EC%9D%B8%ED%94%84%EB%9F%B0-%EC%98%A4%EB%A6%AC%EC%A7%80%EB%84%90&unitId=51363 )자료만 있는 게 맞나요? 감사합니다.

  • HTML/CSS
  • javascript
defoogle 댓글 1 좋아요 0 조회수 414

아주 기초적인 질문입니다.

해결됨

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

현재 next.js 를 생성시킨후, 서버 start를 시킨후, 화면을 수정하면, 화면이 리로딩되고 있지 않습니다. 계속 새로 빌드를 해야지만, 화면 소스가 바꼈을 경우, 리로딩이 되는건가요?

  • seo
  • next.js
  • vercel
  • csr
  • ssg
  • ssr
이민혜 댓글 1 좋아요 1 조회수 355

코드 작성 순서

미해결

인터랙티브 웹 개발 제대로 시작하기

안녕하세요 선생님~ 수업 잘 듣구있습니다 ㅎㅎㅎ door-opened 클래스를 add하고 remove하는 순서로 생각했는데 코드 작성 흐름이 거꾸로 역순으로 가는 이유가 있을까요...?^^;;;

  • HTML/CSS
  • 인터랙티브-웹
  • javascript
Hyeyeon Kim 댓글 1 좋아요 0 조회수 299

a태그한 것들이 라이브화면에서 일자로 배치가 안되요

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

이미지파일이랑 텍스트랑 다같이 해보고 싶어서 이렇게 만들었는데 강의처럼 일렬로 예쁘게 배치가 안되고 유투브는 아래로 내려가 있습니다. 혹시 어떤게 잘못된걸까요??

  • HTML/CSS
  • jquery
부드러운 종다리 댓글 5 좋아요 1 조회수 443

JSX인지 어떻게 알 수 있나요?

미해결

처음 만난 리액트(React)

JavaScript 코드와 XML/HTML 코드가 결합된 JSX라는걸 어떻게 알 수 있나요? 자료형이나 변수를 통해 할 수 있는건가요?

  • HTML/CSS
  • javascript
  • react
윤하 댓글 1 좋아요 0 조회수 396

100vw 관련 질문

미해결

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

모던 웹을 위한 모던 CSS 단위 이해 및 정리 14:10에서 100vw를 하면 전체가 차지 되야 하는데 흰색 테두리가 있는 걸로 보아 100%꽉 채우지 않은 것 같아서요. 제가 예전에 어디서 배운 것 같기는 한데 정확하게 개념이 기억이 안나서 설명 부탁드립니다...!

  • HTML/CSS
  • javascript
  • es6
temp12312 댓글 2 좋아요 0 조회수 367

sum(), len(), count() 각각 언제 사용되는지 차이가 궁금합니다

해결됨

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

합계, 길이, 개수 이런식으로 문제에 명시되지 않고 데이터 수를 구하여라 이런 식으로 적혀있을 때, sum이 사용된 적도 있고 len이 사용된 적도 있는데 sum(), len(), count() 각각 언제 사용되는지 궁금합니다 수치형, 범주형에 따른 사용 가능 여부 차이도 있나요??

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

값에 0대신 입력을 안해도 문제없나요?

미해결

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

border: 2px solid blue; box-shadow: inset 0 0 100px #000 이렇게 여러 값 한번에 쓰는 속성에서 기본정보를 사용할때 0이나 black같은거는 입력안해도 라이브화면에서 원하는대로 보이는데 나중에 오류가 나거나 그러지않으면 아예 안적어도 되나요?

  • HTML/CSS
  • jquery
부드러운 종다리 댓글 1 좋아요 1 조회수 178

node js 설치 문의

미해결

처음 만난 리액트(React)

node js 설치 후 파워쉘에서 검색하면 이렇게 나와요. 파워쉘 최신 버전 설치하라는 글씨도 보이는데, 파워쉘 최신 버전을 설치해야하나요?

  • HTML/CSS
  • javascript
  • react
이진화 댓글 1 좋아요 1 조회수 259

인기 태그

인프런 TOP Writers

주간 인기글