inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

색션1 예제 코드 질문드립니다.

해결됨

Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

안녕하세요, Next.js 라우팅은 어떻게 구현 했을까? 색션에서 예제코드 주소를 알 수 있을까요?

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

클린업 JavaScript: 점프업! / 6. 클로저(Closure), 클로저 대상 / 2:25

미해결

클린업 JavaScript: 점프업!

const setPoint=function(){ let one =100; const two = 200; var five=500; if(one){ let seven=700; var nine = 900; }; return function(){ console.log(one+two+nine); // one + two + nine; debugger // one + two + nine; // one, two, nine variable 없음 debugger // seven; }; }; const getPoint =setPoint(); getPoint(); debugger로 변수를 개발자도구 콘솔에 찍으니깐요 변수를 추적못합니다. 신기해서 질문합니다 웹브라우저에서는 변수를 찾지 못하고 자바스크립트에서는 클로저로 할당된 변수를 찾아서 콘솔에 찍어주는 건가 싶기도하고요 언제 변수를 찾느냐의 차이인가요? 웹브라우저에서 직접 변수를 찾으면 못찾는다고 하네요 이유가 무엇인지 알고 계신가요?

  • javascript
bigger 댓글 2 좋아요 0 조회수 118

rem 단위를 쓰는 이유

해결됨

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

'전체 레이아웃 잡기' 강의에서 7분 쯤 내용에 css 단위를 rem을 사용하시는데, 픽셀 대신 rem을 쓰는 이유가 무엇인가요?

  • react
  • aws
  • Google-Analytics
  • cloudflare
  • adsense
  • 수익화
김성희 댓글 2 좋아요 0 조회수 282

리액트를 선택한 이유

해결됨

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

'수익형 웹사이트 사이트' 강의에서 여러가지 프론트엔드 프레임워크 중, 리액트를 선택하신 이유를 알고 싶습니다.

  • react
  • aws
  • Google-Analytics
  • cloudflare
  • adsense
  • 수익화
김성희 댓글 2 좋아요 0 조회수 153

Promise 객체 출력

해결됨

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

영상 [4:12]에서 console.log() 로 delay(3000) 의 반환값인 Promise 객체를 출력했는데 어떻게 "3초가 지났습니다."라는 문구가 출력되는 건가요?

  • javascript
  • rest-api
  • spa
  • dom
godeka 댓글 3 좋아요 1 조회수 201

서버 컴포넌트의 등장 배경에 대한, 추가적인 질문이 있습니다.

해결됨

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

강의 이외에, 추가적으로 서버 컴포넌트에 대해 궁금증이 생겨 여러 블로그를 참고 하는 와중, 하나 헷갈리는 개념이 있어 여쭤 보려고 합니다. <알고 싶은 내용> 서버 컴포넌트의 등장 배경 중 "waterfall 문제" 라는 내용이 알맞는 내용인 지 궁금합니다. <과정> 제가 참고했던 여러 블로그에서 공통적으로 언급한 내용 중 하나가 "서버 컴포넌트의 등장 배경 중 하나로 클라이언트 컴포넌트의 waterfall 문제 " 라는 내용이 있었습니다. 그리고, 위의 문제는 서버 컴포넌트 도입 이후, 데이터 요청을 서버에서 사전에 처리하여 해결 되었다고 간단히 설명하고 마치는 내용이었습니다. <제가 헷갈리는 부분> 그렇다면 waterfall 문제는 결국, 서버 컴포넌트 이전의 SSR 방식으로도 해결 수 있는 문제가 아닐까? " 라는 의문이 들었습니다. 이유는 SSR 방식 역시 서버에서 데이터를 미리 가져와 HTML을 생성한 후 클라이언트에 전달하기 때문에, 서버 컴포넌트가 waterfall 문제를 해결했다면 기존 SSR 방식으로도 해결할 수 있지 않을까 하는 생각이 들었습니다. <결과> 위의 내용을 알아보기 위해 아래의 내용을 바탕으로 검색을 해봤지만, 확실한 대답을 찾지 못해 질문을 남겨봅니다. SSR 렌더링 방식에서 waterfall 문제가 발생하는 지의 여부 SSR과 RSC의 차이

  • react
  • typescript
이준구 댓글 2 좋아요 0 조회수 163

rafce 기본 템플릿 적용 및 폴더 파일 대소문자 관련 부분

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

기본 템플릿 생성 rafce 적용할 때 파일명 기준으로 객체 변수(NavBar) 생성 되는데 오타 때문에 삭제하고 재생성(Navbar)하면 처음 만들었던 이름 그대로 유지되는 습성이 있는데 삭제 하고 다시 만들때 바로 적용 되도록 환경 설정 따로 하는게 있는지 궁금합니다. Components 및 Page 폴더 파일 대소문자 구분 생성 이유가 따로 있는지 아니면 개인적인 개발 습관인지 답변 부탁드립니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
창범 댓글 2 좋아요 0 조회수 147

nextjs 15버전 사용 가능할까요?

미해결

[리뉴얼] React로 NodeBird SNS 만들기

영상하고 15버전하고 차이가 좀 있는거 같습니다

  • react
  • redux
  • node.js
  • express
  • next.js
ik5334 댓글 1 좋아요 0 조회수 175

20:34초에 await이 아무 효과가 없다고 뜨는데 사용하신 이유가 궁금합니다

해결됨

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 안녕하세요! 로펀님 강의 잘 보고 있습니다 ㅎㅎ 다름이 아니고 TodoList에서 할일 CRUD 기능을 구현할 때 20:34초에서 onChange 함수에 async, await를 걸어주셨는데, hover 하니까 await이 아무 효과가 없다고 뜨더라구요 혹시 그럼에도 await를 달아주신 이유가 있나요? 이전에 같이 일하던 동료분도 가끔 이렇게 쓰셨었는데.. 그때는 제가 await가 아무런 작용을 안하는데 왜 쓰지? 하면서 다 뺐었거든요.. 😂 그러면 안됐을까요... 🥲 궁금합니다!!

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
xiwnwls5034 댓글 2 좋아요 0 조회수 193

[9.2 투두리스트 업그레이드] id undefined

미해결

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

안녕하세요. 투두리스트 업그레이드 중 "UPDATE" 에서 질문있습니다. 업그레이드 하며 체크박스를 선택했을 때 다음과 같은 오류가 발생합니다. 업그레이드 이전까지는 잘 돌아가서 업그레이드 하며 오타 문제가 아닐까 하는데 원인을 찾기가 어려워 질문 드립니다.. ㅜ APP.jsx 와 List.jsx 코드 올려드립니다. - APP.jsx import "./App.css"; import Header from "./components/Header"; import Editor from "./components/Editor"; import List from "./components/List"; import { useState, useRef, useReducer } from "react"; const mockData = [ { id: 0, isDone: false, content: "Study React.js", date: new Date().getTime(), }, { id: 1, isDone: false, content: "do laundry", date: new Date().getTime(), }, { id: 2, isDone: false, content: "wanna go home", date: new Date().getTime(), }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => { item.id === action.targetId ? { ...item, isDone: !item.isDone } : item; }); case "DELETE": return state.filter((item) => item.id !== action.targetId); default: return state; } } function App() { const [todos, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = (content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }; const onUpdate = (targetId) => { dispatch({ type: "UPDATE", targetId: targetId, }); }; const onDelete = (targetId) => { dispatch({ type: "DELETE", targetId: targetId, }); }; return ( <div className="App"> <Header /> <Editor onCreate={onCreate} /> <List todos={todos} onUpdate={onUpdate} onDelete={onDelete} /> </div> ); } export default App; List.jsx import "./List.css"; import TodoItem from "./TodoItem"; import { useState } from "react"; const List = ({ todos, onUpdate, onDelete }) => { const [search, setSearch] = useState(""); const onChangeSearch = (e) => { setSearch(e.target.value); }; const getFilteredData = () => { if (search === "") { return todos; } return todos.filter((todo) => todo.content.toLowerCase().includes(search.toLowerCase()) ); }; const filteredTodos = getFilteredData(); return ( <div className="List"> <h4>Todo List 🎈</h4> <input value={search} onChange={onChangeSearch} placeholder="검색어를 입력하세요" /> <div className="todos_wrapper"> {filteredTodos.map((todo) => { return ( <TodoItem onDelete={onDelete} onUpdate={onUpdate} key={todo.id} {...todo} /> ); })} </div> </div> ); }; export default List;

  • javascript
  • react
  • node.js
yanna 댓글 4 좋아요 0 조회수 199

ConfigService.get<string>() 반환값이 string | undefined로 처리되어 TS 오류가 발생합니다

미해결

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

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://inf.run/54jjz - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 환경변수 적용하기 -1 듣고 있는데 async registerWithEmail(user: RegisterUserDto) { const hash = await bcrypt.hash( user.password, parseInt(this.configService.get<string>(ENV_HASH_ROUNDS_KEY)), ); const newUser = await this.usersService.createUser({ ...user, password: hash, }); return this.loginUser(newUser); } this.configService.get<string>(ENV_HASH_ROUNDS_KEY 에서 string| undefined 형식의 인수는 string 형식의 매개 변수에 할당될 수 없습니다라는 에러가 뜹니다.강의에서는 위 코드에서 타입 에러가 발생하지 않던데, NestJS 버전 차이로 인해 타입 정의가 바뀐 걸까요? 해결방법이 궁금합니다.

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

ISR on-demand 사용해서 전체 새로고침 없이 새로운 추천도서 받아오기

해결됨

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

안녕하세요! ISR on-demand 활용해서 인덱스 페이지에서 전체 페이지 새로고침 없이 "새로 추천 받기" 버튼 을 눌렀을 때 추천 도서(recoBooks) 만 새롭게 받아오도록 구현하고 싶습니다. getStaticProps 를 통해 전달된 recoBooks 가 useState 의 초기값으로 들어갈 때, 해당 데이터도 여전히 빌드 타임에 fetch되어 정적 HTML과 함께 포함되는지 궁금합니다. 개발자 도구를 보면 정적으로 렌더링되는 것 같은데, useState 로 상태를 만들었기 때문에 초기 렌더링이 정적인지 아니면 클라이언트 측에서 동적으로 할당되는건지 헷갈립니다. // CSS Module import SearchableLayout from '@/components/searchable-layout'; import style from './index.module.css'; import { ReactNode, useState } from 'react'; import BookItem from '@/components/book-item'; import { InferGetStaticPropsType } from 'next'; import fetchBooks from '@/lib/fetch-books'; import fetchRandomBooks from '@/lib/fetch-random-books'; 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>) { const [recommended, setRecommended] = useState(recoBooks); const revalidate = async () => { try { const response = await fetch('/api/revalidate'); const result = await response.json(); // console.log(result); if (result.revalidate) { //페이지 갱신이 됐을 때 const rebooks = await fetchRandomBooks(); setRecommended(rebooks); } else { //페이지 경신 안됐을 때 } } catch (err) { //에러처리 console.error(err); } }; // console.log(recoBooks); return ( <div className={style.container}> <section> <h3>지금 추천하는 도서</h3> <button onClick={revalidate}>새로 추천 받기</button> {recommended.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 조회수 177

2.7 글로벌 레이아웃 질문

해결됨

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

강사님 영상대로 했는데 왜 저부분이 왜 적용이 안되는걸까요 혹 index.module.css 해도 배경을 하얀색으로 해야 하나요 강의 내용에는 별 말씀이 없으셨는데

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

데모사이트 기능이 동작 오류

미해결

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

알려주신 완성본 (완성본) 데모사이트 링크 https://inf.run/fBsfH 가서 경험해보려고 가니 검색기능도 안되고 상품 클릭해도 정보가 안나오네요

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

해결은 못했습니다만...

미해결

코드로 배우는 React 19 with 스프링부트 API서버

거듭된 질문에 한결같이 답변을 해주셔서 감사합니다. 교재 9장까지는 문제없이 잘 진행되어서, 10장 부터 새로 작성한, 엔티티, DTO, Repository 싹 다 지우니, 앞서 작성한 테스트는 그나마 제대로 실행이 되는군요. 다시 엔티티부터 하나씩 깔면서, 동시에 테스트를 다시 진행해봐야 겠습니다.

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
hee woong Yoo 댓글 1 좋아요 0 조회수 67

화면 새로고침 문의

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 제로초님 ! 강의보고 따라해보고 있는데 화면 새로고침할때 깜빡거리는걸 없애고 싶은데 getServerSideProps을 사용해서 상태값을 변경해주면 가능한걸까요??

  • react
  • redux
  • node.js
  • express
  • next.js
ᅵᅵ 댓글 1 좋아요 0 조회수 142

testInsertByProduct() 와 관련된 에노테이션은 교재하고 똑같이 했고, log.info만 남기고 나머지 코드는 다 지웠는데도, 여전히 Test Failed가 뜨고, testInsertProduct() 메소드로 진입조차 안되는 군요.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

testInsertByProduct() 와 관련된 에노테이션은 교재하고 똑같이 했고, log.info 만 남기고 나머지 코드는 다 지웠는데도, 여전히 Test Failed가 뜨고, testInsertProduct() 메소드로 진입조차 안되는 군요.

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
hee woong Yoo 댓글 1 좋아요 0 조회수 53

aaaaaa

해결됨

[코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습

<img src=x onerror=alert(1)>

  • javascript
댓글 1 좋아요 0 조회수 106

querySelector로 가져온 요소를 출력한 결과에 대한 질문

해결됨

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

let $animalInfo = document.querySelector("div.animal-info"); let ageElement = document.querySelector("div#age"); console.log($animalInfo); console.log(ageElement); 다음과 같은 예제 코드를 실행했을 때, 이렇게 출력이 되는데요. 강의에서는 다음과 같이 태그와 함께 출력되는데 제 크롬 브라우저에서는 왜 다르게 나오는지 궁금합니다!

  • javascript
  • dom
cho766 댓글 1 좋아요 2 조회수 166

인기 태그

인프런 TOP Writers

주간 인기글