172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[CSS&JS Master] - 트렌디한 감정기록 일기장 만들기
rem을 폰트 말고 width랑 height에서도 쓰셨는데, vw와 vh와의 차이가 궁금합니다.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요, 진행하다가 여러 이슈가 발생해서 한 번에 묶어 여쭤보고자 합니다! 오류가 계속 발생해서 강사님 코드도 보았는데도 잘 모르겠습니다. Q: Hydration Mismatch 에러가 발생합니다. 서버와 클라이언트에서 렌더링되는 HTML이 다르다는데 어떻게 해결하면 될까요? Q: Next.js 15.3.0에서 remarkGfm과 rehype 플러그인들이 호환성 문제가 발생합니다. "Cannot read properties of undefined (reading 'inTable')" 에러 // app/blog/[slug]/page.tsx <MDXRemote source={markdown} options={{ mdxOptions: { remarkPlugins: [remarkGfm], rehypePlugins: [withSlugs, rehypeSanitize, rehypePrettyCode], }, }} /> Q: next-mdx-remote에서 rehype 플러그인 사용 시 타입 에러가 발생합니다. "Type 'Transformer<Root, Root>' is not assignable to type 'Transformer<any, any>'" 에러 // app/blog/[slug]/page.tsx (164번째 줄) rehypePlugins: [withSlugs, rehypeSanitize, rehypePrettyCode], Failed to compile. ./app/blog/[slug]/page.tsx:164:62 Type error: Type '(options?: Options | undefined) => void | Transformer<Root, Root>' is not assignable to type 'Pluggable<any[]>'. 162 | mdxOptions: { 163 | remarkPlugins: [remarkGfm], > 164 | rehypePlugins: [withSlugs, rehypeSanitize, rehypePrettyCode], | ^ Next.js build worker exited with code: 1 and signal: null Q: react-day-picker와 date-fns 버전 충돌이 발생합니다. react-day-picker@8.10.1은 date-fns@^2.28.0 || ^3.0.0을 요구하는데, 현재 date-fns@4.1.0이 설치되어 있어서 충돌합니다. // package.json { "dependencies": { "date-fns": "^4.1.0", "react-day-picker": "^8.10.1" } } Error: Command "npm install" exited with 1 npm error code ERESOLVE npm error ERESOLVE could not resolve npm error While resolving: react-day-picker@8.10.1 npm error Found: date-fns@4.1.0 npm error Could not resolve dependency: npm error peer date-fns@"^2.28.0 || ^3.0.0" from react-day-picker@8.10.1
미해결
[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
EXPLOPER에서 파일을 삭제하는 방법을 알려주세요 ㅜㅜ 부업이라고 적힌 파일을 삭제하고 완전히 새로운 파일로 다시 하려고 하는데요 저 부업이라는 부분을 마우스 오른쪽으로 눌려봐도 Delete 키가 없고 아무리 해도 삭제가 안되네요 ㅠ 저 부업이라는 파일을 삭제하는 방법 좀 알려주세요...
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
앞으로 나오는 put 요청은 모두 patch에 해당하고 수정하는 부분이 있다는데 언제쯤 나오나요? 지금 typeorm까지 들었는데도 계속 다른설명으로 나오고 수정되는 부분이 없는듯해요 쌩기초입문자라 너무 헷갈리는데.. 그럼 put요청의 설명은 없었던건가요? typeorm의 updatePost의 save기능에서 1) 만약 데이터 존재하지않는다면 새로생성 2) 데이터 존재한다면 (같은 id)값을 변경 이라곤 하지만 NotFoundException() 처리를 하는걸로봐서 새로생성하지 않는 것 같은데요.. 이것도 단순히 값만 변경하는 patch요청에 해당하는거 아닌가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
figma 에 들어가도 css 코드가 안나오고 과제 정답 과 해설이 있으면 좋을거같은데 피그마에서 아무 코드 정보없이 혼자 다 만드려는게 처음 강의를 듣고 과제를 하려는데 있어서 응용해서 뚝딱 만들기가 너무 어렵고 힘들어요 ㅠ
해결됨
한 입 크기로 잘라먹는 Next.js
지금 강의에서 리뷰 리스트를 조회하는 api를 서버액션으로 작성해도 상관없는건가요? 예를 들어 직접 리뷰 리스트 DB에 접근해서 데이터를 가져오고 반환해주고, 페이지 컴포넌트에서는 단순히 const data = await getReview(); 를 작성해서 불러오는 방법처럼 말이죠 이 질문의 의도는 어떤 상황에서 서버액션을 써야하고, 어떤 상황에서 fetch를 써야하는지 아직 감이 잡히지 않아 질문드립니다! 강의를 보면서 서버액션은 Form에만 사용해야하는구나..라고 생각이들어서 혼란이 생겼던 것 같습니다.
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
navList.forEach((li, index)=>{ const roma = ['I', 'II', 'III']; const arabic = ['1','2','3'] const linkAddr = ['naver.com','google.com','inflearn.com']; // button 링크 주소 li.addEventListener('click',()=>{ if(!playing) { next = index; if(li.classList.contains('active')) return; for(let i=0;i < navList.length; i++) { navList[i].classList.remove('active'); } li.classList.add('active'); const addr = /*html*/`location.href='http://${linkAddr[next]}'`; // button 속성 값 const tl = gsap.timeline() .add(leave[current].play()) .add(titleLeave.play(),'-=1') .set('.title h1',{text:`toystory ${roma[index]}`}) .set('.title p',{text:`토이스토리 시즌 ${arabic[index]}`},'<') .add(enter[next].play()) .add(titleEnter.play()) tl.eventCallback('onComplete',()=>{ const btnLink = document.querySelector('.title button'); // button 요소 가져오기 btnLink.setAttribute('onclick',addr); // button의 onclick 속성 추가 current = next; playing = false; }) playing = true; } }) }) window.addEventListener('load',()=>{ const tl = gsap.timeline() .add(enter1.play()) // enter 타임라인 실행 .add(titleEnter.play()) tl.eventCallback('onComplete', () => { const btnLink = document.querySelector('.title button'); //처음 실행시 button에 속성값 추가 btnLink.setAttribute('onclick',"location.href='http://naver.com'"); //처음 실행시 button에 속성값 추가 playing = false; }) // page03()[1].play() // leave 타임라인 실행 })
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.02
안녕하세요. 4강 토이스토리 practice에서 강의 중 선생님께서 "WATCH NOW" 버튼의 href?값을 페이지에 따라 변경할 수 있다고 하셨는데요. gsap을 이용해서 변경할 수 있는 방법이 있는 건지요? 아님 자바스크립트 함수 안에서 직접 세팅하는 걸까요?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
이런 화면만 계속 뜨는데 뭐가 문제일까요?..
미해결
부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 단축키도 중간에 이야기 해주시면 안될까요? 물론 직접 찾아보면서 하긴하지만 잘 안나오는 경우도 있고 그때마다 영상 멈추고 찾아보는거보다 강사님께서 알려주시면 좋을듯해서요..
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
function solution(m, arr) { arr.sort((a, b) => a[0] + a[1] - (b[0] + b[1])); let answer = 0; for (let discount = 0; discount < arr.length; discount++) { //할인이 적용되는 상품 let discountPrice = arr[discount][0] / 2 + arr[discount][1]; let budget = m - discountPrice; let temp = 1; for (let undiscount = 0; undiscount < arr.length; undiscount++) { //할인이 적용된 상품은 제외 if (discount === undiscount) continue; let price = arr[undiscount][0] + arr[undiscount][1]; budget -= price; //예산을 초과하는 경우 if (budget >= 0) temp++; if (budget < 0) budget += price; } answer = Math.max(answer, temp); } return answer; }
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
function solution(n, arr) { let answer = 0; //모든 학생이 짝이 되는 경우 for (let mento = 1; mento <= n; mento++) { for (let mentee = 1; mentee <= n; mentee++) { //자기자신과 짞을 될수 없음 if (mento === mentee) continue; //시험별 멘토 멘티 등수 let mentoGrade, menteeGrade; let isPossible = true; //시험별 멘토 멘티 등수 비교 for (let test = 0; test < arr.length; test++) { mentoGrade = arr[test].indexOf(mento); menteeGrade = arr[test].indexOf(mentee); if (mentoGrade >= menteeGrade) { isPossible = false; break; } } //모든 시험에서 멘토 등수가 멘티 등수보다 낮은 경우 가능한 경우 if (isPossible) answer++; } } return answer; }
해결됨
한 입 크기로 잘라먹는 Next.js
중첩된 라우팅에서 다른 레이아웃 혹은 레이아웃을 사용하고싶지 않을 때 어떻게 제어할 수 있는지 궁금합니다. 현재 소스를 보면 (with-searchbar) search book ... 와 같은 형태로 되어있는 것을 알 수 있는데요 만약에 search가 1 depth 라고 했을 때, search 페이지 아래에 예를 들어 detail-search 라는 주소를 가진 페이지가 있다고 가정할 때 (with-serachbar) serach detail-search 파일 구조 및 중첩된 라우터 구조가 위와 같이 되잖아요? 이 때 detail-search는 with-searchbar 대신 가령 with-detail-serachbar 라던가, 아예 with-searchbar 레이아웃을 사용하고 싶지 않을 수 있잖아요? 이럴 때 어떻게 해야하는지 궁금합니다 😀
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요~ 강의에서 사용하는 api 2개 다 접속이 안되네요 1번은 외부 서버라 안될수 있는데, 2번은 서버가 죽은 건가요? koreanjson.com http://main-example.codebootcamp.co.kr/graphql
미해결
한 입 크기로 잘라먹는 Next.js
안녕하세요! 좋은 Next.js 강의 덕분에 열심히 배워나가고 있는 학생입니다. 😀 다름이 아니라 revalidateTag를 사용했을 때, 첫 번째 인수로 전달한 태그 값을 가지는 데이터 캐시가 재검증된다고 이해했는데요! 제가 revalidateTag의 인수와 data fetch에 사용되는 옵션의 태그 값을 다르게 세팅해봤는데도 갱신이 되어서요. 제가 잘못 이해한 걸까요..?? 이 부분이 이상해서 질문 남깁니다. 아래는 제가 작성한 코드입니다! createReviewAction export async function createReviewAction(formData: FormData) { const bookId = formData.get('bookId')?.toString(); const content = formData.get('content')?.toString(); const author = formData.get('author')?.toString(); if (!bookId || !content || !author) { return; } // JSON.stringify 객체를 문자열 형태로 직렬화 해서 보내줘야 함 try { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/review`, { method: 'POST', body: JSON.stringify({ bookId, content, author }), }, ); revalidateTag(`revew-${bookId}`); // 일부로 오타 냄 } catch (error) { console.error(error); return; } } ReviewList 컴포넌트 async function ReviewList({ bookId }: { bookId: string }) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/review/book/${bookId}`, { next: { tags: [`review-${bookId}`] } }, ); if (!response.ok) { throw new Error(`Review fetch faild: ${response.statusText}`); } const reviews: ReviewData[] = await response.json(); return ( <section> {reviews.map((review) => ( <ReviewItem key={`review-item-${review.id}`} {...review} /> ))} </section> ); }
해결됨
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
안녕하세요 프로그래밍 시작하기 : 웹 입문 (Inflearn Original) 강의를 듣고 있는 수강생입니다. 혹시 출처를 남기고 공부한 내용을 요약해서 블로그에 게시해도 될까요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 강의를 구매 후 듣다가 일이 생겨서 오랜만에 다시 공부하려고 하는데 커리큘럼을 다시 보니 처음에 html, css 강의 순서대로 나오다가 js가 나오고 또 섹션04부분에서 다시 css가 나오고 또 js가 나오더라구요 그래서 이 부분이 헷갈리는데 그냥 처음부터 순서대로 강의를 들으면 될까요?
미해결
Vue.js 시작하기 - Age of Vue.js
해당 강의 덕분에 vue에 대해 알아가고 있는 중입니다. vue composition api는 어느 강좌에서 확인이 가능할까요~?
해결됨
비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE
현재 수강 진도를 함께 알려주세요! "1주차 3강까지 완료" 또는 "2주차 실습 중"처럼 어디까지 들으셨는지 적어주시면 맞춤형 답변을 드릴 수 있어요 2-3강 구체적인 상황과 함께 질문해주세요! "AI가 안 된다"보다는 "Cursor에서 이런 프롬프트를 입력했는데 이런 에러가 나와요"처럼 상세하게 적어주시면 더 정확한 답변을 드릴 수 있어요 스크린샷이나 코드를 첨부해주세요. 에러 화면, 현재 진행 상황을 보여주시면 문제 해결이 10배 빨라집니다! 마크다운 코드 블록(```)을 활용하면 더 깔끔하게 정리할 수 있어요 커뮤니티 검색을 먼저 해보세요. 같은 문제로 고민하신 분들이 이미 해결책을 찾았을 수도 있어요. 검색 후 못 찾으시면 언제든 새로 질문해주세요! 서로 도우며 함께 성장해요. 나도 모르는 건 "저도 궁금해요!"라고 댓글 달아주시고, 아는 건 적극적으로 공유해주세요. 가르치면서 더 잘하게 됩니다 바이브코딩 관련 질문은 환영, 기술 세부사항은 GPT 활용! 프롬프트 작성법, AI 도구 사용법은 여기서, 복잡한 코딩 문법은 ChatGPT에게 물어보시는 게 더 빨라요 진도나 과제 관련 문의는 1:1 문의를 이용해주세요. 개인적인 학습 계획, 환불, 수강 기간 연장 등은 따로 문의해주시면 더 자세히 상담드릴게요 실패 사례도 공유해주세요! "이렇게 했더니 망했어요" 같은 경험담도 다른 수강생들에게 큰 도움이 됩니다. 실패도 소중한 학습 자료예요 좋은 질문 예시 [진도] 2주차 5강 - React 컴포넌트 생성까지 완료 [질문] Cursor에서 버튼 컴포넌트 생성 시 에러 발생 상황: 2주차 실습 중 버튼 컴포넌트를 만들려고 하는데 프롬프트: "빨간색 버튼 컴포넌트 만들어줘" 에러 메시지: [스크린샷 첨부] 시도해본 것: GPT에게도 물어봤는데 같은 에러 발생 어떻게 해결하면 될까요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요! 지금까지 수업을 윈도우 노트북으로 듣고 있었습니다. 그런데 노트북에 문제가 생겨 새로운 노트북으로 구매 후 파일을 옮기려고 하는데 이번에 구매한 노트북 운영체제 맥os입니다. 간편하게 옮기고 빠르게 실행 할 수 있는 방법이 있을까요?? 일단 node, npm, yarn까지 다운 받은 상태 입니다.
