inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

명언 설정하는데 위치설정 오류가 있어요!

해결됨

웹 프론트엔드를 위한 자바스크립트 첫걸음

⚠ 질문 작성법 세션 7 - 4.API를 사용해 명언 강사님처럼 명언을 검색바 밑으로 보여지게 출력하고 싶은데요, 저는 오른쪽으로 명언이 출력되요! 명언바 위치 설정을 어떻게 해야 하는 지 궁금해요?! const API_URL = "https://random-quote.hyobb.com/"; const quoteElement = document.getElementById("quote"); const quoteItem = localStorage.getItem("quote"); const nowDate = new Date(); const month = nowDate.getMonth() + 1; const date = nowDate.getDate(); const setQuote = (result) => { let quote = { createDate: `${month}-${date}`, quoteDate: result }; localStorage.setItem("quote", JSON.stringify(quote)); quoteElement.textContent = result; }; const getQuote = async () => { try { const data = await fetch(API_URL).then((res) => res.json()); const result = data[1].respond; setQuote(result); } catch (err) { console.log(`err:${err}`); setQuote("작은 기회로 부터 종종 위대한 업적이 시작된다. - 데모스테네스"); } }; getQuote();

  • javascript
  • dom
안연수 댓글 2 좋아요 0 조회수 176

깃허브 버셀연동

미해결

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

선생님~ 커서에서 코드 수정하고 연동된 깃허브에 커밋도 시켜주었는데, 버셀에 최종 마스터가 뜨지 않는데 왜 이런걸까요? ㅠㅠ 어제 저녁 이것땀시 너무 #&!@ 해서 ㅠㅠ 커서에 '최종1'이 마스터로 된 화면이고요.. 깃허브에 최종1이 master 로 되어 있는것 같구요? 근데 버셀에서는 그전단계로만 되어 있어서요 ㅠㅠ (근데 사실 이것도 어제 저녁에 계속 마스터로 안되 있어서 버셀에 있는 프로젝트 계속 지우면서 최신 깃허브 가져온거거든요?) 깃허브에 버셀에 제대로 업뎃이 안되는데, 어디부터 봐야할지 좀 도움 좀 주세요~

  • react
  • 웹앱
  • next.js
  • cursor
  • 인공지능(ai)
kelo 댓글 2 좋아요 0 조회수 440

검색을 하면 데이터가 나오지 않습니다..

해결됨

한 입 크기로 잘라먹는 Next.js

index.tsx에 getStaticProps로 변경하고 검색을 하면 데이터가 나오질 않습니당..!ㅠ0ㅠ 검색을 한 뒤 페이지를 이동하면 오류 내용은 아래와 같습니다. 챗지피티한테 물어봐도 감이 안 와서 질문 올려봅니다.. import SearchableLayout from "@/components/searchable-layout"; import style from "./index.module.css"; import { ReactNode } from "react"; import BookItem from "@/components/book-item"; import { InferGetStaticPropsType } from "next"; import fetchBooks from "@/lib/fetch-books"; import fetchRandomBooks from "@/lib/fetch-random-book"; export const getStaticProps = async () => { console.log("인덱스 페이지"); const [allBooks, recoBooks] = await Promise.all([ fetchBooks(), fetchRandomBooks(), ]); return { props: { allBooks, recoBooks, }, }; }; export default function Home({ allBooks, recoBooks, }: InferGetStaticPropsType<typeof getStaticProps>) { return ( <div className={style.container}> <section> <h3>지금 추천하는 도서</h3> {recoBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> <section> <h3>등록된 모든 도서</h3> {allBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> </div> ); } Home.getLayout = (page: ReactNode) => { return <SearchableLayout>{page}</SearchableLayout>; };

  • react
  • typescript
  • next.js
지수 댓글 2 좋아요 0 조회수 108

getStringedDate month , date 변환 질문

해결됨

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

안녕하세요! 이정환님 강의 정말 재미있게 잘 보고 있습니다. 😊 New 페이지 구현하기 2.기능 강의 중에 const getStringedDate = (targetDate) => { let year = targetDate.getFullYear(); let month = targetDate.getMonth() + 1; let date = targetDate.getDate(); if(month < 10) { month = `0${month}`; } if(date < 10) { date = `0${date}`; } return `${year}-${month}-${date}`; } 로 날짜 변환 함수로 강의에서 언급 해주셨는데요! 혹시 이건 어떨까요? const getStringedDate = (targetDate) => { return `${targetDate.getFullYear()}-${String(targetDate.getMonth() +1).padStart(2,0)}-${String(targetDate.getDate()).padStart(2,0)}`; } 결과는 동일하게 나올 수 있을 것 같아 상관은 없지만 보통 저런 경우에는 조건문을 애용하시는 편이실까요? 어떤 방식으로 짜는 것을 더 선호 하시는지 정말 호기심에 질문을 드립니다! 😆

  • javascript
  • react
  • node.js
오락가락끼리까락 댓글 1 좋아요 0 조회수 97

기존 mock data는 그룹이 따로 만들어지는데 뭔가 잘못된 건가요?

해결됨

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

이게 제 console인데요 아래 mock data는 자기들끼리 따로 그룹지어서 나오는데 선생님 콘솔에는 그냥 다 개별로 나오거든요... 뭐가 문제일까요? import { useReducer, useRef } from "react"; const mockData = [ { id: 1, createDate: new Date().getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createDate: new Date().getTime(), emotionId: 2, content: "2번 일기 내용", }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; } } function App() { const [data, dispatch] = useReducer(reducer, [mockData]); const idRef = useRef(3); const onCreate = (createDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createDate, emotionId, content, }, }); }; return ( <> <button onClick={() => { onCreate(new Date().getTime(), 1, "Hello"); }}> 일기 추가 테스트 </button> </> ); } export default App; 제 코드도 첨부해봅니다,,,

  • javascript
  • react
  • node.js
green 댓글 2 좋아요 0 조회수 102

카운터앱 기능구현하기 - 스테이트 리프팅이 헷갈립니다.

해결됨

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

강의 설명 중 10분06초 부분 에서 설명해주신 " State Lifting (State끌어올리기 ) " 이라는 개념이 아직 애매모호해서 좀더 확실하게 설명 부탁드려도 될까요 ? 부모컴포넌트에서 state관리 해야하는 건 인지하고 있습니다. ( 단방향으로 흘러가는 React의 특성 때문에 ) 끌어올린다? 라는 키워드가 확실하게 팍! 하고 이해하기가 조금 어렵네요 ...

  • javascript
  • react
  • node.js
정예은 댓글 2 좋아요 0 조회수 123

Header 컴포넌트에 div 말고 애초에 button은 안 되나요?

해결됨

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

궁금한 점이 2가지 있는데요 1. Header 컴포넌트에 div 말고 애초에 button를 넣으면 안 되나요? Header.jsx const Header = ({ title, leftChild, rightChild }) => { return ( <header className="Header"> <button className="header_left">{leftChild}</button> <div className="header_center">{title}</div> <button className="header_right">{rightChild}</button> </header> ); }; App.jsx <Header title={"Header"} leftChild={"Left"} rightChild={"Right"} /> 이런 식으로 헤더 컴포에 처음부터 버튼 태그를 넣으면 될 것 같은데 왜 div로 감싸는 건가요? 음.. 그냥 css 편의상 이유일까요? 2. 저는 css를 배울 때 처음에 charset "utf-8"; 을 항상 입력하라고 배웠는데 리액트 강의에서는 항상 안 사용하시더라구요. 리액트에서는 원래 안 쓰는건가요, 아니면 그냥 강의에서는 굳이 필요없어서 쓰지 않는건가요?

  • javascript
  • react
  • node.js
green 댓글 1 좋아요 0 조회수 113

회원 가입 이메일 문의

미해결

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

안녕하세요 선생님.. 선생님 강의를 따라하다가, 회원 가입한 사람 모두가 글을 쓸수 있는 낚서장 같은 블로그를 만들었는데, 회원 가입 페이지나 등록 등을 커서에서 만들어서 잘 동작하는것 같고, 수파베이스에서도 세팅을 해주었는데, 회원가입에서 이메일과 비번을 입력하면 제게 확인 메일이 와야 하는데 오질 않네요. 이거 혹시 smtp 서비스를 추가해야 되는건가요?

  • react
  • 웹앱
  • next.js
  • cursor
  • 인공지능(ai)
kelo 댓글 1 좋아요 0 조회수 76

npx prisma db push 문제 완전 해결!

미해결

한 입 크기로 잘라먹는 Next.js

아래 동일한 문제로 고통받는 분들이 계시는 것 같아서 깔끔하게 정리해서 올려드립니다. 1.운영체제 및 환경설정 -맥북 m1, 윈도우 11 2.이슈발생 -터미널 내 npx prisma db push 입력 시, 아래 오류 발생 -오류코드 : 아래 문자열 3.해결방안 -여러가지 해결방안이 있겠지만, 저는 아래와 같이 해결했습니다. -prisma 폴더 > schema.prisma 파일 > 14번째 줄, directUrl 삭제 (*아래처럼) 변경 전 변경 후 -.env 파일 > directURL 설정하지 않기 (*아래처럼!!! / 단, keyword는 본인 키워드로 변경 필수!) 그리고, npx prisma db push 입력 시, 문제없이 실행!! 4.원인분석 -아마도 DATABASE_URL과 DIRECT_URL을 둘 다 사용할 때, 뭔가 문제가 발생했던 것 같습니다. 물론 .env 파일 내 DIRECT_URL 키 생성 후 정상적인 값을 입력해보기도 했지만, 저는 계속 동일한 문제가 발생했기 때문에 그냥 서버 연결 방식을 1개만 선택했는데, 이 방법으로는 잘 되었습니다. 혹시나 저와 동일한 문제로 고민하실까 해서 완벽하지는 않지만, 공유드립니다. 감사합니다.

  • react
  • typescript
  • next.js
Json 댓글 3 좋아요 0 조회수 289

[크로스브라우징] safari에서 동영상 영역 미노출

미해결

애플 웹사이트 인터랙션 클론!

안녕하세요. 공유해주신 자료를 보다가 보니 사파리 브라우저에서는 첫번째 동영상 영역이 크롬 브라우저와 다르게 영상이 없거나, 화면 스타일이 다르게 노출되는 것 같아서요. 오류인지 문의드립니다. apple-clone-v11/@simple-version/index.html apple-clone-v11/@ipad-stroke-effect/index.html

  • HTML/CSS
  • javascript
  • 웹-디자인
  • svg
  • 인터랙티브-웹
  • 클론코딩
hi 댓글 1 좋아요 0 조회수 141

projects rules type

미해결

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

최신 cursor에는 project rules 작성 시에 타입을 정할 수 있는데 4가지 중에 어떤 타입으로 하면 되는지, 패턴 "app/**/*.{ts,tsx}"은 어디에 넣어야할지도 같이 업데이트 해주시면 좋을 것 같습니다 !

  • react
  • 블로그
  • next.js
  • cursor
  • cursorai
냐냐 댓글 2 좋아요 0 조회수 131

[02-03] 모바일 레이아웃 헤더

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

안녕하세요 ~ 해당 수업 그대로 했는데 실행시 헤더만 보이고 page.tsx 에 작성된 <div>내용입니다 ~</div> 네 줄 내용이 안나옵니다. 수업 두세번 보면서 점검을 했는데 ..어디를 수정해야 할지 모르겠습니다. 아래는 제 코드 캡처해서 올립니다. 실행시는 아래처럼 내용이 안뜹니다.

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
댓글 2 좋아요 0 조회수 80

싸이월드 만들기 1탄 피드백 부탁드립니다.

해결됨

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

안녕하세요! 싸이월드 만들기 1탄 피드백 부탁 드립니다. 과제 완성 후 레퍼런스 코드를 참고해서 확인도 하였는데 궁금한 점이 있습니다. figma에 있는 '오늘의 기분' select 박스 화살표 모양을 따라해 보고 싶어 아이콘을 사용했는데 아래 코드에서 select 태그 위에 아이콘이 잘 겹치도록 하는 부분이 어려운 것 같습니다. 이렇게 두 요소를 겹치도록 할 때 크기, 위치 같은 요소를 어떻게 계산하여 맞게 지정할 수 있을까요? <!DOCTYPE html> <html lang="ko"> <head> <title>정현아님의 미니홈피 :: 사이좋은 사람들, 싸이월드</title> <link href="./styles/index.css" rel="stylesheet"> <script src="https://kit.fontawesome.com/f9748babc2.js" crossorigin="anonymous"></script> </head> <body> <div class="background"> <div class="outerbox"> <div class="wrapper"> <div class="wrapper__left"> <div class="wrapper__left__header"> <div class="today"> <!-- 각각의 span 박스를 만들어서 관리 --> <span>TODAY</span> <span>0</span> <span> | TOTAL</span> <span>12345</span> </div> </div> <div class="wrapper__left__body"> <div class="left__body__header"> <div class="left__body__header__gray"></div> <div class="left__body__header__line"></div> </div> <div class="left__body__profile"> <div class="left__body__profile__content"> <i class="fa-regular fa-face-smile"></i> 이름 </div> <div class="left__body__profile__content"> <i class="fa-solid fa-envelope"></i> Phone </div> <div class="left__body__profile__content"> <i class="fa-solid fa-phone"></i> E-mail </div> <div class="left__body__profile__content"> <i class="fa-solid fa-star"></i> 인스타그램 </div> </div> <div class="left__body__body"></div> <div class="left__body__footer"> <div class="left__body__footer__title"> 오늘의 기분 </div> <div class="left__body__footer__box"> <select class="left__body__footer__select"> <option selected="true">기쁨 😊</option> <option>슬픔 😢</option> <option>화남 😠</option> <option>행복 🥰</option> </select> <span class="left__body__footer__icon"><i class="fa-regular fa-square-caret-down"></i></span> </div> </div> </div> </div> <div class="wrapper__right"></div> </div> </div> </div> </body> </html> * { box-sizing: border-box; margin: 0px; /*위 옆 공백 제거*/ } .background { width: 1024px; height: 600px; /* background-color: bisque; */ background-image: url("../images/background.png"); padding: 20px 0px 0px 20px; /*위 오른쪽 아래 왼쪽 - 시계방향*/ } .outerbox { width: 808px; height: 544px; /* background-color: tomato; */ background-image: url("../images/outerbox.png"); } .wrapper{ display: flex; flex-direction: row; /* background-color: rebeccapurple; */ padding: 32px 0px 0px 32px; } .wrapper__left { width: 208px; height: 472px; /* background-color: bisque; */ display: flex; flex-direction: column; } .wrapper__left__header { width: 100%; height: 30px; /* background-color: aqua; */ display: flex; flex-direction: row; justify-content: center; align-items: center; } .today { font-size: 9px; } .wrapper__left__body { width: 100%; height: 100%; /*형제 속성을 제외한 나머지만 가져감*/ /* background-color: steelblue; */ border: 1px solid grey; border-radius: 15px; background-color: white; display: flex; flex-direction: column; align-items: center; padding: 20px 30px; } .left__body__header { width: 100%; display: flex; flex-direction: column; } .left__body__header__gray { width: 148px; height: 133px; background-color: grey; } .left__body__header__line { border-top: 1px dotted black; margin: 12px 0px; /*상하여백 좌우여백*/ } .left__body__profile { width: 100%; display: flex; flex-direction: column; } .left__body__profile__content { height: 12px; font-size: 10px; /* margin: 0px 0px 8px 0px; */ margin-bottom: 10px; color: #999999; } .left__body__footer { /* padding: 110px 0px 0px 0px; */ width: 100%; margin-top: 100px; } .left__body__footer__title, .left__body__footer__select { font-size: 11px; } .left__body__footer__box { position: relative; margin-top: 5px; } .left__body__footer__select { width: 141px; appearance: none; } .left__body__footer__icon { position: absolute; width: 18px; height: 18px; top: 2px; right: 2px; pointer-events: none; /* 아이콘을 클릭해도 뒤의 select가 반응하도록 설정 */ } .wrapper__right { width: 524px; height: 472px; /* background-color: violet; */ }

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

실무에서 서버/클라이언트 컴포넌트를 구분하는 방법

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요, 강의 정말 잘 수강하고 있습니다. 강의 수강 중에 궁금한 점이 생겨 질문 드립니다. 강사님께서 말씀하신 것처럼 규모가 크고 복잡한 프로젝트의 경우는 컴포넌트의 양이 많아, 개발자가 이를 인지하지 못 하고 클라이언트 컴포넌트 아래에 서버 컴포넌트를 사용하는 경우가 자주 발생할 수 있을 것 같다는 생각이 들었습니다. 그렇다면 혹시 큰 프로젝트 내에서 이를 방지하기 위해 특별히 조치를 취하셨던 경험이나 팁이 있는지 알고 싶어서 질문드립니다. 예를 들면, 서버 컴포넌트와 클라이언트를 다른 폴더로 구분해서 분류하는 등 실무에서 실제로 사용되는 방법이 있는지 알려주시면 감사하겠습니다!

  • react
  • typescript
  • next.js
서랑 댓글 1 좋아요 0 조회수 165

3 강의 질문

해결됨

바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기

3강의에서 사용하는 코드 에디터는 어떤건가요?

  • next.js
  • FastAPI
  • whisper
  • openai-whisper
하이영 댓글 2 좋아요 0 조회수 98

@nestjs/serve-static

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

안녕하세요 강사님, 'Static File Serving에서 옵션 추가하기' 강좌에서 @nestjs/serve-static 설치하는 과정에서 버전 문제 때문인지 의존성 충돌 문제가 일어나는 것 같습니다. 혹시라도 다른 분들도 저와 같은 문제 겪으실까봐 글 작성합니다. ----------------------------------- npm add @nestjs/serve-static 실행 ----------------------------------- - 오류: npm add @nestjs/serve-static npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: cf_sns@0.0.1 npm error Found: @nestjs/common@10.4.17 npm error node_modules/@nestjs/common npm error @nestjs/common@"^10.0.0" from the root project npm error npm error Could not resolve dependency ----------------------------------- 2. npm install @nestjs/serve-static@4.0.0 // 버전 맞춰서 설치 ----------------------------------- - 브라우저 오류 발생: {"message":"Cannot GET /public/44f57f3f-7afa-4262-b2a3-13ee7053f920.jpg","error":"Not Found","statusCode":404} - npm run start: dev 오류 : no such file directory ~~\.index.html // 정확하지는 않지만 index.html 파일까지 찾아서 jpg 파일을 찾는 것 같아서 claude에게 물어봤더니... ----------------------------------- - 해결: @Module({ // 다른 모듈을 불러올 때 사용 imports: [ PostsModule, ServeStaticModule.forRoot({ rootPath: PUBLIC_FOLDER_PATH, serveRoot: '/public', serveStaticOptions: { index: false } }), 이렇게 하니 해결 됐습니다... 이게 맞는건지 궁금합니다!! 일단 브라우저 요청했더니 jpg 사진은 잘 나옵니다!! 코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
댓글 2 좋아요 0 조회수 135

고차 함수 작성법과 수업 진도 관련한 질문

미해결

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

안녕하세요. 저는 이전 수업 기초 개념을 다 들었다고 생각했는데, 함수가 함수를 리턴하는 고차함수, 그 함수 호출한 내용을 변수에 넣는 것, 그걸 리턴값으로 대체하고.. 등등 내용 이해하기가 어렵습니다. 이 장에서 새롭게 배우는 내용이니 학습을 하면 되는걸까요 아니면 제가 이전 진도에서 뭔가 놓치는게 있는걸까요? 후자라면 어떻게 학습을 해야할까요? 감사합니다.

  • javascript
kbsuffer4166 댓글 3 좋아요 0 조회수 121

index page에서 이미 모든 SSG 경로 생성

미해결

한 입 크기로 잘라먹는 Next.js

강의 파트 : 2.16)SSG 4.폴백옵션 설정하기. 질문 : SSG경로 생성은 /books/[id] 페이지 요청이 발생했을 경우 생성되어야 하는걸로 이해했지만, index page만 접속해도 index page에 노출되는 id 값을 가진 데이터들이 전부 /books/[id] 에 해당하는 SSG 파일이 생성되었습니다. (지금 추천하는 도서, 등록된 모든 도서) (위의 사진은 빌드 후, 인덱스 페이지 요청 시 생성된 SSG파일들 입니다.) (인덱스에서 스크롤 해보니 생성되는것을 확인했습니다.) 이 상황은 next의 LInk컴포넌트 frefetch와 연관있는 경우일까요?

  • react
  • typescript
  • next.js
이윤재입니다. 댓글 2 좋아요 0 조회수 69

서버 액션의 적절한 사용

해결됨

한 입 크기로 잘라먹는 Next.js

서버 액션을 사용하면 api 설정을 좀 더 간단하게 해줄 수 있다는 것은 이해했습니다. 근데 그럼 이러한 서버 액션은 AppRouter에서 대부분의 api를 완전히 대체할 수 있는 걸까요? 아니면 상황에 따라서 서버 액션을 사용하기도 하고 api를 따로 만들어서 사용하기도 하고 그런건가요? 프로젝트를 만드려고 하는데 어떤 부분에서 서버 액션을 사용해야할지 정확히 감이 안잡혀서 질문 드립니다..!

  • react
  • typescript
  • next.js
jhp009 댓글 1 좋아요 0 조회수 102

vercel에 등록 중...

해결됨

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

버셀에 등록하는데 계속 에러가 나는데.. 어떤 방법으로 이 에러를 확인 할 수 있을까요?

  • react
  • 웹앱
  • next.js
  • cursor
  • 인공지능(ai)
kelo 댓글 2 좋아요 0 조회수 132

인기 태그

인프런 TOP Writers

주간 인기글