inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

사전세팅 코드 다운

해결됨

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

깃에서 코드 다운받는데 프리즈마 폴더가 없고 수파베이스에도 아무것도 안올라와있는데 맞나요 ㅠ 강의랑 다르게 다운받았는데 폴더가 엄청 많고 프리즈마 파일은 없고 ..어떤걸 열어서 작업해야하나요?

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

15강 오류질문

해결됨

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

15강 객체 강의 6분 let name = person . name ; 블록 범위 변수 'name'을 다시 선언할 수 없습니다 라고 나옵니다

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

12.11 ) Home에서 getMontlyData 작성 중 오류 / 개발자도구 hooks Context 에서 객체가 아닌 함수로 출력됩니다

해결됨

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

안녕하세요, 강의 잘 듣고있습니다! 16분 쯤에 montlyData를 만들어서 호출하는 부분인데 개발자도구로 체크해봤을때 hooks가 선생님처럼 나오지 않고 저런 함수 형태?로 출력이 되어서 그런지 오류가 나서 진행이 되지 않습니다ㅜ 눈알빠지게 찾아봤는데도 잘 모르겠어서 글을 씁니다ㅠㅠ 한번 체크 부탁드립니다 //App.jsx 파일입니다 const mockData = [ { id: 1, createdDate: new Date("2024-09-30").getTime(), emotionId: 1, content: '1번 일기' }, { id: 2, createdDate: new Date("2024-09-29").getTime(), emotionId: 2, content: '2번 일기' }, { id: 3, createdDate: new Date("2024-08-02").getTime(), emotionId: 3, content: '3번 일기' } ]; function reducer(state, action) { switch (action.type) { case 'CREATE': return [action.data, ...state]; case 'UPDATE': return state.map((item) => String(item.id) === String(action.data.id) ? action.data : item); case 'DELETE': return state.filter((item) => String(item.id) !== String(action.id)); default: return state; } } export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = (createdDate, emotionId, content) => { dispatch({ type: 'CREATE', data: { id: idRef.current++, createdDate, emotionId, content, }, }); }; const onUpdate = (id, createdDate, emotionId, content) => { dispatch( { type: "UPDATE", data: { id, createdDate, emotionId, content, } }) } const onDelete = (id) => { dispatch( { type: "DELETE", id } ) } return ( <> <DiaryStateContext.Provider value={data}> <DiaryStateContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />}></Route> <Route path="/new" element={<New />}></Route> <Route path="/diary/:id" element={<Diary />}></Route> <Route path="/edit/:id" element={<Edit />}></Route> <Route path="*" element={<Notfound />}></Route> </Routes> </DiaryStateContext.Provider> </DiaryStateContext.Provider> </> ) } export default App

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

리액트로 로그인 부분 처리하는데 질문이 있습니다.

해결됨

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

리액트 강의를 듣고 스프링부트랑 연동해서 리액트 코드를 짜고 있습니다. 지금 로그인 부분 처리하다가 막혀서 정말 구글링도 해보고 며칠째 하다가 도저히 해결이 안돼서 질문 드립니다. 지금 로그인처리가 되면 sessionStorage에 로그인 회원 정보를 담고 navigate함수를 이용해 Main컴포넌트로 보냈습니다. 근데 다른 컴포넌트들에서도 이 로그인회원 정보를 사용하기 위해 최상위컴포넌트인 App컴포넌트에서 sessionStorage.getItem()해서 state값에 저장하고 그걸 context로 하위 컴포넌트들에게 제공했는데 로그인되고 navigate함수로 Main컴포넌트로 가면 context로 저장한 state값이 null이 되고 새로고침해보면 state값이 잘 들어오더라고요ㅠㅠ 비동기함수인것과 관련있을까요?? 새로고침없이 컴포넌트에서 바로 state값을 이용하고 싶으면 어떻할까요? state값 이용해서 바로 화면에도 렌더링도 해야하는 상황입니다 ㅠㅠ 강의와 관련된 내용은 아니지만 프로젝트를 혼자 만들다보니 잘 안되는 부분이 많아 질문드립니다 !

  • javascript
  • react
  • node.js
황지호 댓글 2 좋아요 0 조회수 313

cookie samesite

미해결

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

login 시 let setCookie = response.headers.get('Set-Cookie'); 가져오려고 할 때 response.headers에는 뜨는데 samesite 때문에 cookie를 가져올 수 없습니다. 개발자도구에서 samesite 에러 어떻게 해결할 수 있을까요?? 아래와 같이 수정했는데 같은 오류가 발생합니다. if (setCookie) { const parsed = cookies.parse(setCookie); cookies().set('connect.sid', parsed['connect.sid'], { sameSite: 'None', secure: true }); }

  • react
  • next.js
  • react-query
  • next-auth
  • msw
개발 댓글 2 좋아요 0 조회수 154

option usecreateindex is not supported 오류 나면은

미해결

mongoDB 기초부터 실무까지(feat. Node.js)

await mongoose.connect(MONGO_URL); // 제거 하시고 사용 하세요 // 버전6부터 해당 옵션을 사용하지 않아도 돼요 https://mongoosejs.com/docs/migrating_to_6.html (공식문서) 보세요. 참고하세요

  • javascript
  • node.js
  • aws
  • mongodb
  • rest-api
  • dbms/rdbms
  • 데이터-엔지니어링
이관용 댓글 1 좋아요 0 조회수 181

오류 질문

해결됨

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

안녕하세요 강사님 강의를 보면서 따라하는 도중에 오타가 없는거같은데 오류가 발생해서 질문드립니다. value값을 onChange 있는곳에 써야하는데 쓰지 않아서 발생하는 문제인거 같은데 해당 오류 때문에 TextArea도 정상적으로 css부분이 적용되지 않습니다.

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

2.1) 맨 처음 next app 생성할 때 에러 질문드립니다!

해결됨

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

안녕하세요 선생님~ 2.1 강의 5분 30초부터 질문드립니다! 작업 파일에 새로운 폴더를 하나 만들고, 그 폴더를 열어서 선생님과 모든 것을 똑같이 했는데 저는 ` npx create-next-app@14 section02 `라고 치니까 맨 아래 제가 첨부한 것과 같은 에러가 떴어요! gpt 검색해서 `mkdir C:\Users\wlgp1\AppData\Roaming\npm` 경로를 수동으로 하나 만들고 다시 하니까 터미널에서 "뭐 설치해야 하는데 계속할거냐"고 질문해서 y 눌렀더니 그 다음부터 다시 선생님과 동일하게 타입스크립트 사용할 거냐고 질문이 나왔습니다~ (이후 동일) 문제는 해결되었지만, 무엇이 달라서 선생님과 차이가 난 것인지가 궁금합니다! ```PS C:\workspace\onebite-next> npx create-next-app@14 section02 npm error code ENOENT npm error syscall lstat npm error path C:\Users\wlgp1\AppData\Roaming\npm npm error errno -4058 npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\wlgp1\AppData\Roaming\npm' npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: C:\Users\wlgp1\AppData\Local\npm-cache_logs\2024-09-30T04_18_06_975Z-debug-0.log```

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

PPR 적용 한 후 에러가 났습니다.

해결됨

손에 익는 Next.js - 블로그 만들기

안녕하세요. 조은님, 강의 잘 듣고 있습니다 :) PPR 적용하기 전에는 서버에 문제가 없었는데, PPR 적용 후 예상치 못한 현상이 발생하여 여러 가지 방법으로 해결해보려고 이것저것 시도하고 있는데 아직 해답이 없네요. PPR 커밋하고 푸쉬한 것을 취소하고 이전 상태로 되돌렸지만, 여전히 에러가 납니다. T_T 지금도 찾아보는 중입니다. 같이 고민해주시면 감사하겠습니다. { "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { "@types/node": "20.11.17", "@types/react": "18.2.55", "@types/react-dom": "18.2.19", "@vercel/analytics": "^1.1.3", "@vercel/postgres": "^0.10.0", "@vercel/speed-insights": "^1.0.9", "geist": "1.2.2", "next": "^14.2.13", "next-mdx-remote": "^4.4.1", "react": "18.2.0", "react-dom": "18.2.0", "sugar-high": "^0.6.0", "typescript": "5.3.3" }, "devDependencies": { "autoprefixer": "^10.4.20", "postcss": "^8.4.35", "tailwindcss": "3.4.13" } }

  • react
  • 블로그
  • next.js
댓글 2 좋아요 1 조회수 334

실전 반응형 웹사이트

미해결

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

안녕하세요! 항상 강의 재밌게 듣고 있습니다~ 제가 강의를 따라하며 제작한 실전 반응형 웹사이트(넷플릭스와 크롬 사이트)를 포트폴리오에 넣으려고 합니다. 그런데 현재 실제 사이트들과 디자인에 차이가 있어서, 강의에서 배운 이전 디자인으로 포트폴리오에 포함해도 괜찮을지 고민이 됩니다…

  • HTML/CSS
  • javascript
  • jquery
디디 댓글 2 좋아요 1 조회수 172

코드를 수정하고 브라우저의 Vue로 넘어가면 다운이 됩니다.

미해결

Vue.js 시작하기 - Age of Vue.js

코드 반영 후에 Vue.devtool을 사용하기 위해 개발자 도구창을 키면 devtool의 기능들을 클릭할 수 없습니다. (프로그램 다운 느낌입니다) 그래서 창을 닫고 새로고침으로 다시 진행해야 정상적으로 되는데 이 문제 해결방법이 없을까요?

  • javascript
  • vue.js
강프로그래머 댓글 1 좋아요 0 조회수 275

버튼을 클릭해도 event가 발생하지 않습니다.

미해결

Vue.js 시작하기 - Age of Vue.js

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <app-header></app-header> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var appHeader = { // template: '<button>click me</button>' template: '<button v-on:click="passEvent">click me</button>', methods: { passEvent: function() { this.$emit('pass'); } } } new Vue({ el: '#app', components: { 'app-header': appHeader } }); </script> </body> </html>

  • javascript
  • vue.js
강프로그래머 댓글 1 좋아요 0 조회수 341

6강 프록시 서버 테스트 관련하여

미해결

Node.js로 웹 크롤링하기

안녕하세요.. 프록시 사이트 ( http://spys.one/free-proxy-list/KR/ ) 에 있는 프록시 사이트에 대한 정보를 가져와서, sqlite에 저장하는 코드로 테스트 하고 있습니다. 두가지 문제 현사잉 발생하고 있습니다. 관련 크롤러 함수를 실행했는데, puppeteer의 브라우저 화면이 안나나나지만, 프록시 사이트 정보를 클로링은 합니다. 현재 headless:false로 해서 브라우저를 기동시키고 있는데, 왜 이런 형상이 발생할 까요? 인터넷 정보를 서치하다 보니, 브라우저 실행시 '--no-sandbox'를 해보하고 해서 해봤더니, 페이지 보이기는 합니다. (이 옵션의 의미는 무엇인지 궁금합니다.) 강의 동영상에서 알려주신대로 크롤링 된 사이트에서 latency가 가장 작은 ip를 이용해서 브라우저 실행시 --proxy-server=fastestProxy 로 설정한 후 네이버 IP 확인 페이지를 호출했는데, Error: net::ERR_TIMED_OUT at https://search.naver.com/search.naver?where=nexearch&ssc=tab.nx.all&query=%EB%82%B4%EC%95%84%EC%9D%B4%ED%94%BC%EC%A3%BC%EC%86%8C&sm=tab_she&qdt= 0 가 발생하는데, 이는 네이버에서 Proxy서버에서 접근하는 것을 막아서 발생하는 것인가요? 프록시 서버를 사용하지 않고 브라우저를 생성하면, 정상적으로 접근되어서 제 IP 주소를 확인할 수 은 있습니다. 강의 처럼 변경된 프록시 서버의 ip를 확인할 수 있는 방법이 무엇인지 알려주시면 좋겠습니다.

  • javascript
  • node.js
  • 웹-크롤링
  • puppeteer
산마로 댓글 2 좋아요 0 조회수 425

강의에서 인덱스 페이지는 정적 페이지인 건가요 동적 페이지인 건가요?

해결됨

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

처음에 인덱스 페이지는 정적 페이지인데 그 안에 있는 useSearchParams 훅을 사용해서 오류가 난 걸 해결했잖아요 근데 그 후 빌드를 실행하고 결과를 보니 not found 페이지 외에는 다 동적 페이지로 나오는데 그럼 인덱스 페이지는 정적 페이지인 건가요 동적 페이지인 건가요?

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

콜백함수에서 value() 가 갑자기 어디서 나온걸까요?

해결됨

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

function main(value) { value(); } function sub() { console.log("sub"); } main(sub); 여기서 main() 을 호출하면 main 함수를 호출하게 되고, main 함수에서는 매개변수로 value를 받고 있는데 main(sub)를 호출하게 되면 main() 함수가 실행이 되고, 여기서 main 함수 안에 있는 value()는 매개변수로 받은 값이 value라서 value()이렇게 매개변수로 받은 이름으로 함수를 호출하는걸까요? 그럼 만약 매개변수로 aaa를 받았다면 main 함수 안에서 aaa()를 호출하게 되면 동일하게 sub() 함수가 호출되는걸까요? main 함수 안에서 매개변수로 받은 value()를 호출하는것과 함수 sub()를 바로 호출하는것과의 장단점이 있을까요? 그리고 main 함수 안에서 value를 호출하는것과 value()를 호출하는것의 차이가 어떤게 있을까요?? value()를 호출할때는 매개변수로 받은 콜백함수를 호출해서 실행을 하는걸로 이해를 하고 있는데 value를 호출을 하면 아무런 변화가 없는데 value를 호출하는 경우도 자주 보이던데 이렇게 호출을 하는 이유가 무엇일까요?

  • javascript
  • react
  • node.js
인프러너 댓글 1 좋아요 0 조회수 307

저는 강의와 다르게 prisma를 사용하고 있는데

미해결

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

ConfigModule의 envFilePath에 '.env.development' 을 줬음에도 불구하고 Nest.js가 계속 .env 의 환경변수를 참조하는 현상이 발생하고 있습니다. NODE_ENV=development도 줬구요. 제 생각엔 Prisma가 .env를 참조하기 때문에 해당 설정이 무시되는 거 같은데 어떻게 해결하면 좋을까요? 아무리 검색해도 명쾌한 해결법이 안나와서 이렇게 질문드립니다 ㅠㅠ

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

컴포넌트 생성할때 React가 없습니다 type error질문입니다.

해결됨

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

컴포넌트를 새로 만들때 자꾸 React가 없습니다란 TS에러가 납니다... 그래서 React를 import해주면 TS에러가 해결되는데 검색해봐도 모르겠어서 질문남깁니당 import React from 'react' const Loading = () => { return( <div> Loading... </div> ) } export default Loading;

  • react
  • typescript
  • next.js
박혀누 댓글 2 좋아요 0 조회수 245

Live Server

해결됨

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

코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요! + 오류 메세지도 함께 올려주시면 좋아요 🙂 console.log('hello'); 안녕하세요. 혹시 Live Server 질문도 같이 올려도 될까요..? 효빈님께서 라이브 서버 실행하실 때 127.0.0.1:5000 으로 실행이 되시는데 저는 제 아이피 주소 뒤로 공부하는 폴더의 경로가 전부 찍히게 되어서 window.location.pathname 이 콘솔 창에 안찍히게 되더라구요.. VSC에서 Live Server Extensions을 싹 다 지우고 다시 설치해도 초기화가 안되네요..(전에 한 번 Live Server 설정을 건들인 적이 있습니다ㅜㅜ)

  • javascript
  • rest-api
  • spa
  • dom
  • vsc
안지훈 댓글 2 좋아요 1 조회수 166

페이스북 로그인 로그아웃 자동화관련

미해결

Node.js로 웹 크롤링하기

안녕하세요.. 5-1 페이스북 로그인/로그아웃 관련 강의를 따라 하고 있습니다. puppeteer의 page를 이용해서 로그인 버튼까지는 클릭해서 실행까지는 되는 것 같습니다. 그래서 로그인 버튼 클릭후에 사용자에게 로그인 승인 알람 메시지를 처리해야 실질적인 로그인 페이지로 넘어가고 있는 상황입니다. 이럴경우 강의 시간에 알려주신 방법들은 대부분이 타임아웃 오류가 발생합니다. 이 부분을 어떻게 해결해야 할지 방법을 알려 주시면 좋겠습니다. 강의 내용의 모습이랑. 현재시점의 페이스북이 달라서 수정하는 것이 초보자에게는 어렵네요..

  • javascript
  • node.js
  • 웹-크롤링
  • puppeteer
산마로 댓글 2 좋아요 0 조회수 352

투두 필터링

해결됨

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

import "./List.css"; import TodoItem from "./TodoItem"; import { useState } from "react"; const List = ({ todos, deleteTodo, updateTodos }) => { const [filtered, setFiltered] = useState(""); const onChange = (e) => { setFiltered(e.target.value.toUpperCase()); }; const getfiteredData = () => { return todos.filter((todo) => { return todo.content.toUpperCase().includes(filtered); }); }; const filteredTodos = getfiteredData(); return ( <div className="list"> <h4>Todo List 🌱</h4> <input type="text" placeholder="검색어를 입력하세요" onChange={onChange} /> <div className="todoWrapper"> {filtered ? filteredTodos : todos.map((todo) => { return ( <TodoItem {...todo} key={todo.id} deleteTodo={deleteTodo} updateTodos={updateTodos} /> ); })} </div> </div> ); }; export default List; 이렇게 하니까 Uncaught Error: Objects are not valid as a React child (found: object with keys {id, isDone, content, date}). If you meant to render a collection of children, use an array instead. at throwOnInvalidObjectType (react-dom_client.js?v=6a67398a:9932:17) at updateSlot (react-dom_client.js?v=6a67398a:10153:15) at reconcileChildrenArray (react-dom_client.js?v=6a67398a:10249:30) at reconcileChildFibers2 (react-dom_client.js?v=6a67398a:10557:24) at reconcileChildren (react-dom_client.js?v=6a67398a:14290:37) at updateHostComponent (react-dom_client.js?v=6a67398a:14805:11) at beginWork (react-dom_client.js?v=6a67398a:15933:22) at beginWork$1 (react-dom_client.js?v=6a67398a:19751:22) at performUnitOfWork (react-dom_client.js?v=6a67398a:19196:20) at workLoopSync (react-dom_client.js?v=6a67398a:19135:13) 콘솔에 이런 오류가 뜨더라구요... 객체를 보내지도 않았는데 이렇게 하면 안되는 이유가 있나요?

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

인기 태그

인프런 TOP Writers

주간 인기글