inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

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 조회수 196

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 조회수 106

화면 새로고침 문의

미해결

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

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

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

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 조회수 164

5. SPA와 라우팅에서 history.pushState 관련 문의입니다

해결됨

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

const changePage = page => { history.pushState({page}, `Title`, "/${page}" } 안녕하세요. 위 예제에서 pushState의 두번째 인자에 title이라고 해주셨는데 mdn을 보니 ununsed 로 되어있어서요. 영상을 봐도 title이 변경되진 않더라구요. 여기 수정이 필요할 것 같습니다. 감사합니다.

  • javascript
  • rest-api
  • spa
  • dom
한규민 댓글 2 좋아요 1 조회수 116

선언되었지만 아직 사용하지 않은 함수에 대한 빨간줄

해결됨

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

defined but never used.eslint@typescript-eslint/no-unused-vars 만들고 아직 다른 곳에서 import 하거나 사용하지 않아서 빨간줄이 뜹니다. 문제는 없으나 헷갈리기도 하고 ,, 강의에서 강사님은 빨간줄이 안뜨는데 ESLint 설정을 따로 하신 걸까요? 헷갈리니 설정을 하는 것을 추천하시나요?

  • react
  • typescript
  • next.js
박지성 댓글 4 좋아요 0 조회수 281

useGetMe 함수 관련 질문

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 에러 잘라서 올리시면 안됩니다! (에러 일부만 자르거나 일부만 복사하지말아주세요) useGetMe 함수 만드실 때, useQuery 옵션으로 onSuccess, onError 사용 안하시고, useEffect로 사이드 이펙트를 처리하시는 이유가 궁금합니다!

  • javascript
  • react
  • react-native
  • typescript
  • react-query
김진영 댓글 2 좋아요 0 조회수 163

폰트 적용 관련 오류

해결됨

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

한번씩 폰트 적용이 안되는데 새로고침을 하면 적용이 됩니다. 혹시 관련해서 해결 방법이 정리된게 있을까 해서 글 올려봅니다!

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

싸이월드: Background 이미지 반복

해결됨

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

싸이월드 백그라운드를 만드는 중인데 이미지가 이렇게 반복되는건 어떻게 고치나요? AI로 고치려고 해도 안고쳐지네요.. 감사합니다

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

koreanjson 문제

해결됨

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

안녕하세요 수업따라고 하고 있는중에,인터넷이 잘 연결되어 있는데 koreanjson.com 이 웹브라우저에서 열리지 않습니다.

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

a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요

해결됨

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

30분 30초 패딩 넣었는데 a태그의 클릭가능한 범위가 늘어나나요? 줄어들어야 하는것아닌가요 크기를 키우려면 마진을 넣어야하는 것으로 알고있는데요 ㅠ.ㅠ 또한 강의에서 그 직후에 border를 표시해서 z태그들의 영역이 겹치는것을 말씀하시면서, 그 이유가 인라인 요소이기 때문이라고 말씀하셨는데요, 인라인 요소에 대해 제가 알고있는 것은, 블록요소와 다르게오른쪽으로(?) 쌓일 수 있다는 것만 알고있는데, 이것과 인라인요소가 겹치는 이유가 관련이 있는지, 아니면 제가 모르는 다른 무언가때문인지 어쨌든 인라인요소이기 때문에 겹친다 라는 표현이 이해가 안가네요. 감사합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
김트랙 댓글 2 좋아요 0 조회수 206

2.15)SSG 3. 동적경로에 적용하기

미해결

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

2.15)SSG 3. 동적경로에 적용하기 book/[id].tsx는 "도서 상세 페이지" 라고 가정하겠습니다. 도서를 생성하는 페이지도 있고 생성api도 있다고 가정해볼게요, 도서 생성페이지에서 도서 생성api 성공한 이후, 백엔드 서버로부터 새롭게 생성한 도서 id를 받았다고 가정하고, 도서 상세페이지로 이동 한다고 가정했을때 이때, 강의에서 설정해주신 fallback의 값은 false이기 때문에 페이지를 찾을 수가 없는 것 일까요 ?

  • react
  • typescript
  • next.js
박재호 댓글 2 좋아요 1 조회수 159

userRef와 let 선언 차이

미해결

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

강의 마지막 부분에서 let 으로 count 선언 후, App.jsx에서 <Register/> 를 두 번 호출하면 같은 변수를 쓰면서 같은 Register 함수를 호출하는 것이라 하셨는데 useRef로 선언해도 같은 Register함수를 호출하는 것 아닌가요 ? useRef를 사용하면 const inputRef 로 선언해도 다른 객체로 인식 하는 건지 ..! 궁금합니다.

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

Build 시 img tage Error 문의

미해결

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

안녕하세요 이정한 강사님! 강의를 듣다가 npm run build 를 실행 할 때, 컴파일에 실패하면서 img 태그에서 오류가 나는 상황입니다. 구글링과 여기서 나오는 말에 의하면, next/image의 Image를 사용하라고 나와있습니다. 해당 내용으로 바꿔서 사용하니 이미지 태그에서 이미지가 제대로 나오지 않는 현상이 발생하고 있습니다. 기존 img 태그와 image의 태그의 차이가 무엇이고, 왜 이미지가 잘 안나오는 것 일까요?? 또, ESLint에 대한 규정을 build시 영향을 안받게 할 수는 없을까요?? 두가지 질문 답변해주시면 감사하겠습니다!! 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • react
  • typescript
  • next.js
마누송지혁 댓글 3 좋아요 0 조회수 163

실무에서 tailwind css 사용시 구조 질문드립니다.

해결됨

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

tailwind css가 편해보이기는 한데, 화면 코드의 많은 부분을 css 클래스로 차지하고 가독성을 헤치는것 같은데요. 실무에서도 예제처럼 html 요소 인라인으로 하나하나 class를 넣어두나요? 이러면 중복되는 코드도 많고 구조 파악도 어려울 것 같아서요 만약 html 디자이너가 따로 있을때는 tailwindcss를 사용하지 않나요? 디자이너랑 협업할때는 css를 따로 만들어 줄것 같은데, 리액트 실무 환경에서 디자인 부분에 대해서 어떤식으로 협업하는지 궁금합니다.

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

인기 태그

인프런 TOP Writers

주간 인기글