inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

Context 질문입니다.

해결됨

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

첫번째 context Provider 에 {data} 두번째 context Provider 에 {onCreate,onUpdate,onDelete} 이렇게 2개를 사용해야 하는건가요? 1개로 value 에 {data, onCreate,onUpdate, onDelete} 이렇게는 안되는건가요? 안되는 거라면 이유가 있을 런지요? 복잡한 상태 관리가 필요한 경우에 종류별로 많이 사용된다면 코드가 복잡해질거 같은데요 ㅠ 그리고 실무에서 상태관리를 위해서 Redux를 많이 사용하는 거 같더라구요? 현재 react 강좌에는 Redux 내용은 없는거 같아요 ㅠㅠ 추가 보충설명 공유주시면 감사할거 같아요 ~~

  • javascript
  • node.js
babi9005 댓글 2 좋아요 1 조회수 174

overload 에러

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

import {Router, Request, Response} from "express"; import {User} from "../entities/User"; import { validate, Validate } from "class-validator"; const register = async (req: Request, res: Response) => { const {email, username, password} = req.body; try{ let errors: any = {}; //이메일/유저이름 단일성 확인 const emailUser = await User.findOneBy({email}); const usernameUser = await User.findOneBy({username}); //이미 있으면 erros 객체에 넣음 if(emailUser) errors.email = "이미 해당 이메일 주소가 사용되었습니다." if(usernameUser) errors.username = "이미 사용자 이름이 사용되었습니다." //에러가 있으면 return으로 에러를 response 보내줌 if(Object.keys(errors).length > 0){ return res.status(400).json(errors) } const user = new User(); user.email = email; user.username = username; user.password = password; //엔터티에 정해 놓은 조건으로 user 데이터 유호성 검사를 해줌 errors = await validate(user); //유저 정보를 user table에 저장 await user.save() return res.json(user); } catch(error){ console.error(error); return res.status(500).json({error}) } } const router = Router(); router.post("/register", register); export default router 맨 위 코드(auth.ts)에서 사진과 같이 overload 에러가 뜹니다. 유저이름/이메일 중복 및 에러 처리하는 코드 중 return으로 응답을 반환하는 중 타입이 맞지 않아서 생기는 오류 같은데 어떻게 해결할 수 있을까요??

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
마곡동김두팔 댓글 1 좋아요 0 조회수 220

coolsms statuscode 2000 인데 전송안돼는 경우 확인.

해결됨

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

coolsms statuscode 2000 인데 폰에 메시지가 안오면 번호도용문자차단 서비스 사용중인지 확인해보세요. 이게 인터넷 문자메시지를 막는 모양입니다. 해지신청하고 3~7일 정도 시간이 걸려 적용된답니다. 저도 신청하고 대기중...

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
Junee 댓글 1 좋아요 0 조회수 180

소스코드 요청

미해결

이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)

혹시 강의 소스코드 받아 올 수 있을까요? 제가 백엔드는 다 작성 했는데 프론트 쪽 하시는 분이 외국 분이라 설명하기에는 어렵고 해서 요청드립니다.

  • react
  • node.js
  • aws
  • mongodb
  • express
  • lambda
shinjaeo 댓글 1 좋아요 0 조회수 205

vercel 배포

해결됨

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

배포는 잘 된 것 같은데요...? 계속 데이터 로딩중 페이지만 떠서 여쭤봅니다. 제 생각에는 받아올 데이터가 없어서 빈배열이라서 문제가 되는걸까 싶었지만, 선생님 강의에서도 동일하게 빈배열이지만 Header가 잘 나오는거보면 랜더링이 정상적으로 되는 것 같아서 받아올 데이터가 없는건 문제가 아닌듯하여 질문하게되었습니다. 혹시나 권한 오류일까 싶어 질문답변 글 참고하여 적용해봤으나 아닌 것 같습니다.

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

검색 결과 페이지네이션 1페이지(일단해결)

해결됨

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

결론부터 말하면 검색할 때 페이지네이션 현재 페이지가 1로 안 바뀌어서 바꿔봤습니다. 예를 들어 ‘철’이라는 검색어를 입력했더니 페이지가 2페이지까지 있음. 2페이지를 클릭해 2페이지가 보이는 상태에서 검색어를 ‘철수’로 바꾸니 게시글 수가 1페이지까지밖에 없었는데, 1페이지가 현재 activedPage가 아니게 됨(없어진 2페이지 그대로). 검색한 게시글 목록 refetch는 제대로 이루어지기에 1페이지의 내용이 보이는 것은 맞지만 현재 페이지 숫자가 제대로 표시되지 않음. 또한 ‘안녕하세요’의 12페이지를 보고 있었는데 ‘안녕’으로 검색어를 바꾸니 당연히 refetch를 통해 1페이지 게시글 목록을 보여주지만, 페이지네이션은 그대로 11, 12 , ..., 20임 검색어가 바뀌면 페이지네이션의 activedPage와 startPage를 1로 변경해주도록 Paginations01.container에서 useEffect 실행시켜 해결 useEffect(() => { setStartPage(1); setActivedPage(1); }, [props.count]); 검색어를 바꾸면 검색된 총 게시글 수도 보통 달라질 거라는 생각에 props.count를 의존성으로 써본건데 검색어를 바꿔도 우연히 검색된 총 게시글 수가 똑같을 경우 useEffect 실행 안 되니 정말로 검색어가 달라질 때를 기준으로 하려고 BoardList에 있는 keyword를 pagination 컴포넌트에 props로 넘겨줘서 사용 // BoardList.presenter.tsx <Paginations01 refetch={props.refetch} count={props.count} keyword={props.keyword} /> // keyword 전달 // Paginations01.container.tsx useEffect(() => { setStartPage(1); setActivedPage(1); }, [props.keyword]); // Paginations01.types.ts export interface IPaginations01Props { ... keyword?: string; ... } 고쳐지긴 했는데 일단 useEffect에서 setState를 하고 있다는 점(여기선 크게 상관이 없는건지?)과 페이지네이션 컴포넌트인데 keyword라는 걸 받아온다는 것 자체가 검색 컴포넌트의 영향을 받는다는 뜻 아닌가 싶어서(keyword는 검색 기능이 있을 때만 존재하니까) 제대로 된 컴포넌트 분리에 대한 고민(keyword?로 하면 페이지네이션 컴포넌트 쓸 때 keyword 써도 되고 안 써도 되니까 이대로 해도 괜찮을지...?) 다른 방법은 있는지? 의견 있으시면 알려주시면 감사하겠습니다. 그외 궁금한 점 저는 이거 하는 과정에서 yarn dev 해놓은 상태에서 코드들을 저장 계속 하면서 고쳤는데 그럼 원래 바로바로 반영이 되잖아요. 코드에는 문제가 없어서 제대로 작동해야 했는데 페이지네이션 컴포넌트에서 props.keyword가 자꾸 undefined인 바람에 useEffect도 작동 안해서 코드가 문젠줄 알고 한참 삽질 후 그냥 vscode와 크롬 등등 다 끄고 좀 나중에 그대로 다시 켜보니까 잘 작동하게 됐는데 (yarn dev를 끊었다 다시 하는 거로는 아마 해결 안됐음) 이게 처음이 아니고 저번에도 한 번 포기하고 결국 다음날 켜보니까 코드는 그대로인데 갑자기 잘 되었는데 정확히 무엇때문에 이런 문제가 생기는건지 모르겠네요!!! (캐시? .next? 뭐 그런 거 때문인가요?)

  • react
  • node.js
  • seo
  • graphql
  • next.js
희주 댓글 2 좋아요 0 조회수 185

로그인 후에 화면 변화가 없습니다

미해결

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

로그인 로그아웃까지는 되는데 포스트 부분이 화면이 안뜹니다. html 문제인가요? 아니면 JS 문제인가요? 제가 작성한 코드를 올리고 싶은데 올릴 수 있는 방법이 있을까요? 여기에는 파일도 올릴 수 없고 이미지도 안올라가져서 어떻게 질문을 해야할지 모르겠어요

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
민지영 댓글 3 좋아요 0 조회수 320

React.memo 메서드관련 질문드립니다.

해결됨

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

10.3) 해당 강의에서 TodoItem 컴퍼넌트 리렌더링 실행 조건을 memo 메서드를 이용하여 커스터마이징할 때, if (prevProps.isDone !== nextProps.isDone) return false; 이 문구에서 prevProps.isDone 값은 기존값이니 이해가 되었는데 nextProps.isDone 값은 해당 TodoItem 함수 내에 onCangeCheckbox 함수가 선행으로 실행이 되어야 알 수 있는 값 아닌가요? 그 전에 실행이 안 되도록 memo 메서드로 TodoItem의 리렌더링을 막고 있는데 어떻게 isDone 값이 바꼈다고 판단해서 리렌더링이 되는건지 모르겠습니다.

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

react app 생성하기에서 npm i 오류

미해결

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

안녕하세요 section04 폴더로 react 앱 만들기 실습에서 라이브러리들을 다운받기 위해 npm i 를 하려고 했는데, 아래 이미지와 같은 오류들이 발생합니다. 인터넷을 찾아보니 권한 문제때문이라고 하던데 단순하게 sudo npm i를 하면 되는 걸까요?

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

for in for of 강의에서 starter() 함수가 starter is not defined

해결됨

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

const messageContainer = document.querySelector("#d-day-message"); const container = document.querySelector("#d-day-container"); container.style.display = 'none' messageContainer.innerHTML = "<h3>D-Day를 입력해 주세요</h3>"; const dateForMaker = function () { const inputYear = document.querySelector("#target-year-input").value; const inputMonth = document.querySelector("#target-month-input").value; const inputDate = document.querySelector("#target-date-input").value; //const dateFormat = inputYear + "-" + inputMonth + "-" + inputDate; const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`; return dateFormat; // console.log(inputYear, inputDate, inputMonth); }; const counterMaker = function () { const targetDateInput = dateForMaker(); // console.log(targetDateInput); const nowDate = new Date(); const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0); const remaining = (targetDate - nowDate) / 1000; // 만약 remaining이 0이라면 , 타이머가 종료 되었습니다 출력 (수도코드) console.log(remaining); if (remaining === 0 || remaining < 0) { // console.log("타이머가 종료되었습니다"); messageContainer.innerHTML = "<h3>타이머가 종료되었습니다</h3>"; } else if (isNaN(remaining)) { // 만약 잘못된 날짜가 들어왔다면, 유효한 시간대가 아닙니다 출력 // console.log("유효한 시간대가 아닙니다"); messageContainer.innerHTML = "<h3>유효한 시간대가 아닙니다</h3>"; } // const remainingDate = Math.floor(remaining / 3600 / 24); //Math. floor 소숫점 제거 // const remaingHours = Math.floor(remaining / 3600) % 24; // const remaingMin = Math.floor(remaining / 60) % 60; // const remaingSec = Math.floor(remaining) % 60; const remaingObj = { remainingDate: Math.floor(remaining / 3600 / 24), remaingHours: Math.floor(remaining / 3600) % 24, remaingMin: Math.floor(remaining / 60) % 60, remaingSec: Math.floor(remaining) % 60, }; // const days = document.getElementById("days"); // const hours = document.getElementById("hours"); // const min = document.getElementById("min"); // const sec = document.getElementById("sec"); // const documentObj = { // days: document.getElementById("days"), // hours: document.getElementById("hours"), // min: document.getElementById("min"), // sec: document.getElementById("sec"), // }; const documentArr = ['days', 'hours', 'min' , 'sec'] // const docKeys = Object.keys(documentObj); const timeKeys = Object.keys(remaingObj); // Object.keys : 객체의 키를 가져와 배열로 반환f let i = 0; for (let tag of documentArr) { // 배열로 이용한다 document.getElementById(tag).textContent = remaingObj[timeKeys[i]] i++ } const starter = function () { container.style.display ='flex' messageContainer.style.display = 'none' counterMaker() } // for (let i = 0; i < timeKeys.length; i = i + 1) { for문 // documentObj[docKeys[i]].textContent = remaingObj[timeKeys[i]]; // // console.log(timeKeys); // // console.log(timeKeys[i]); // } // let i = 0; // for (let key in documentObj) { // 객체로 이용한다 for in // documentObj[key].textContent = remaingObj[timeKeys [i]] // i++; // } // documentObj['days'].textContent = remaingObj["remainingDate"]; // documentObj['hours'].textContent = remaingObj["remaingHours"]; // documentObj['min'].textContent = remaingObj["remaingMin"]; // documentObj['sec'].textContent = remaingObj["remaingSec"]; // console.log("클릭"); // console.log(remainingDate, remaingHours, remaingMin, remaingSec); }; <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./main.css" /> <!-- <script src="./script.js" defer></script> --> <title>Document</title> </head> <body> <h1>D-Day</h1> <div id="d-day-container"> <div class="d-day-child-container"> <span id="days">0</span> <span>일</span> </div> <div class="d-day-child-container"> <span id="hours">0</span> <span>시간</span> </div> <div class="d-day-child-container"> <span id="min">0</span> <span>분</span> </div> <div class="d-day-child-container"> <span id="sec">0</span> <span>초</span> </div> </div> <div id="d-day-message"></div> <div id="target-selector"> <input type="text" id="target-year-input" class="target-input" / size="5"> <input type="text" id="target-month-input" class="target-input" / size="5"> <input type="text" id="target-date-input" class="target-input" / size="5"> </div> <button onclick="starter()" id="start-btn">카운트 다운 시작</button> <script src="./script.js"></script> </body> </html> 아무리 호출하고 수정해도 계속 오류가 납니다 이유 좀 알려주세요 ㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
이 규성 댓글 3 좋아요 0 조회수 226

TodoItem 컴포넌트에서 todos를 props로 받았는데 렌더링이 되지 않습니다.

해결됨

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

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 강의 4분정도에서 나오는 내용에 TodoItem컴포넌트에서 List로부터 todos를 받았는데 렌더링이 제대로 되지 않습니다. 오타도 확인해봤지만 모르겠습니다ㅠㅠ

  • javascript
  • react
  • node.js
박보경 댓글 2 좋아요 0 조회수 304

섹션8. ▶ openWeatherMap API 부분 질문있습니다.

해결됨

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

const weatherSearch = function (position) { fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&exclude={part}&appid=b53e0e301571ed81576201a2a4fee23b` ); }; const accessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, longitude: position.coords.longitude, }; weatherSearch(positionObj); console.log(position.latitude); }; const askForLocation = function () { navigator.geolocation.getCurrentPosition(accessToGeo, (err) => { console.log(err); }); }; askForLocation(); 위 코드 13번째 줄에서 console.log(position.latitude);를 하면 저는 undefined가 출력되고, console.log(position.coords.latitude);를 해야 위도 값이 나오는데... 강사님께서는 console.log(position.latitude); 라고 코드를 작성하셨는데, 위도 값이 잘 나오더라고요.. 이게 왜 그런지 별건 아니지만 궁금해서 질문남깁니다!

  • react
  • node.js
  • seo
  • graphql
  • next.js
jihun6548 댓글 1 좋아요 0 조회수 151

Edit page onUpdate 질문

해결됨

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

onUpadate를 주석처리하면 home으로 잘 돌아오는데, onUpadate를 실행하면 위 사진 같은 상태가 됩니다. 매번 오탈자로 질문드려서 죄송하지만 코드를 계속 살펴보고 다시 작성해봐도 같아서 질문드립니다... import Header from "../components/Header"; import Button from "../components/Button"; import Editor from "../components/Editor"; import { useParams, useNavigate } from "react-router-dom"; import { useContext } from "react"; import { DiaryDispatchContext } from "../App"; import useDiary from "../hooks/useDiary"; const Edit = () => { const params = useParams(); const nav = useNavigate(); const { onDelete, onUpdate } = useContext(DiaryDispatchContext); const curDiaryItem = useDiary(params.id); const onClickDelete = () => { if (window.confirm("일기를 정말 삭제할까요? 다시 복구되지 않아요!")) { //일기 삭제 로직 //console.log(params.id); onDelete(params.id); nav("/", { replace: true }); } }; const onSubmit = (input) => { if (window.confirm("일기를 정말 수정할까요?")) { onUpdate( params.id, input.createdDate.getTime(), input.emotionId, input.content ); } nav("/", { replace: true }); }; return ( <div> <Header title={"일기 수정하기"} leftChild={<Button onClick={() => nav(-1)} text={"< 뒤로 가기"} />} rightChild={ <Button onClick={onClickDelete} text={"삭제하기"} type={"NEGATIVE"} /> } /> <Editor initData={curDiaryItem} onSubmit={onSubmit} /> </div> ); }; export default Edit;

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

mac에서 mongo download 하는 방법도 알려주시면 안되나요..?

미해결

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

강의 내용과 달라서 따라하기 어렵습니다... https://www.mongodb.com/ko-kr/docs/manual/tutorial/install-mongodb-on-os-x/ mongoDB 매뉴얼 보고 설치를 시도했는데요 잘 설치가 된 건지 잘 모르겠습니다...

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
민지영 댓글 2 좋아요 0 조회수 347

12.15강의 10분 Edit페이지에서 삭제하기(onDelete) 기능 질문

해결됨

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

TypeError: onDelte is not a function onDelete를 함수로 인식하지 못하고 있다고 합니다. 오탈자가 문제인건지 잘 모르겠습니다.... import "./App.css"; import { useReducer, useRef, createContext } from "react"; import { Route, Routes } from "react-router-dom"; import Home from "./pages/Home"; import Diary from "./pages/Diary"; import New from "./pages/New"; import Notfound from "./pages/Notfound"; import Edit from "./pages/Edit"; // 1. "/" : 모든 일기를 조회하는 Home 페이지 // 2. "/new" : 새로운 일기를 작성하는 New 페이지 // 3. "/diary" : 일기를 상세히 조회하는 Diary 페이지 const mockData = [ { id: 1, createdDate: new Date("2024-11-04").getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createdDate: new Date("2024-11-03").getTime(), emotionId: 2, content: "2번 일기 내용", }, { id: 3, createdDate: new Date("2024-10-07").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.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(4); //기본 일기 추가 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}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App; import Header from "../components/Header"; import Button from "../components/Button"; import Editor from "../components/Editor"; import { useParams, useNavigate } from "react-router-dom"; import { useContext } from "react"; import { DiaryDispatchContext } from "../App"; const Edit = () => { const params = useParams(); const nav = useNavigate(); const { onDelte } = useContext(DiaryDispatchContext); const onClickDelete = () => { if (window.confirm("일기를 정말 삭제할까요? 다시 복구되지 않아요!")) { //일기 삭제 로직 //console.log(params.id); onDelte(params.id); nav("/", { replace: true }); } }; return ( <div> <Header title={"일기 수정하기"} leftChild={<Button onClick={() => nav(-1)} text={"< 뒤로 가기"} />} rightChild={ <Button onClick={onClickDelete} text={"삭제하기"} type={"NEGATIVE"} /> } /> <Editor /> </div> ); }; export default Edit;

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

개발자 모드 질문입니다

해결됨

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

디버그 모드가 되는 것 같은데 이유를 모르겠습니다. 뭐라 검색해봐야할까요? 아님 제가 코드 오타가 난걸까요? 이전에 components탭에서 볼 수 있던 값들이 안 보여서 질문드립니다.

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

그랩선생님, 질문 답변 부탁 드립니다.vscode에서 npm install -g create-react-app 입력 후 에러 입니다.

해결됨

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

(* nodejs 설치를 https://nodejs.org/en/download/ 에 들어가서 Prebuilt Installer 메뉴에서 v22.11.0(LTS)를 설치하였습니다.) 안녕하세요, 수고가 많으십니다. 강의 잘 듣고 공부하다 모르는 부분이 있어 에러사항은 아래에 요약하여 적었습니다. 일단 react 시작하기 강의를 듣고 있던 중 처음 부분에서 vscode 터미널에서 명령어 npm install -g create-react-app 입력 후 아래 에러가 발생하여 어떻게 해야 해결 할 수 있는지 답을 알고 싶어서 글을 쓰게 되었습니다. 1.첫번째로 vscode 실행 후 npm install -g create-react-app 명령어 입력하니 에러 요약: 경로를 확인하라는 문제가 발생하였습니다. 첫번쨰 에러 발생 한 후 vscode를 종료하고 다시 시작하니 또 다시 이번엔 새로운 에러가 발생 하였습니다. 에러 요약: 자세한 내용은 마이크로소프트 링크 주소 참조하라는 메시지 에러가 발생하였습니다. 현재까지 2가지 에러가 순서대로 나타내고 있는데요, 어떻게 하면 해당 사항을 해결 할 수 있을까요? 상세하고 자세한 답변 부탁드립니다. 감사합니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
isbcom1004 댓글 2 좋아요 0 조회수 554

eslint

미해결

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

PS C:\Users\Master\inflearn\lecture-frontend-dev-env> npx eslint --init You can also run this command directly using 'npm init @eslint/config@latest'. @eslint/create-config: v1.4.0 √ How would you like to use ESLint? · problems √ What type of modules does your project use? · esm √ Which framework does your project use? · none √ Does your project use TypeScript? · javascript √ Where does your code run? · browser The config that you've selected requires the following dependencies: eslint, globals, @eslint/js √ Would you like to install them now? · No / Yes √ Which package manager do you want to use? · npm ☕ Installing... npm WARN idealTree Removing dependencies.eslint in favor of devDependencies.eslint added 2 packages, changed 1 package, and audited 799 packages in 2s 111 packages are looking for funding run npm fund for details 설치가 됐는데 .eslintrc.js파일에 아무것도 안 뜨고 eslint.config.mjs파일이 설치됐어요

  • node.js
  • 웹팩
  • babel
  • eslint
dkswndus6988 댓글 3 좋아요 0 조회수 447

도와주세요!

미해결

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

PS C:\Users\Master\inflearn\lecture-frontend-dev-env> npm run build > lecture-frontend-dev-env@1.0.0 build > webpack --progress 70% building 0/0 modules 0 activeC:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\babel-loader\lib\cache.js:22 const findCacheDirP = import("find-cache-dir"); ^ TypeError: Invalid host defined options at Object.<anonymous> (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\babel-loader\lib\cache.js:22:23) at Module._compile (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) at Module.load (node:internal/modules/cjs/loader:1119:32) at Module._load (node:internal/modules/cjs/loader:960:12) at Module.require (node:internal/modules/cjs/loader:1143:19) at require (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at Object.<anonymous> (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\babel-loader\lib\index.js:19:15) at Module._compile (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:192:30) at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) at Module.load (node:internal/modules/cjs/loader:1119:32) at Module._load (node:internal/modules/cjs/loader:960:12) at Module.require (node:internal/modules/cjs/loader:1143:19) at require (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at loadLoader (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\loader-runner\lib\loadLoader.js:18:17) at iteratePitchingLoaders (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\loader-runner\lib\LoaderRunner.js:169:2) at runLoaders (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\loader-runner\lib\LoaderRunner.js:365:2) at NormalModule.doBuild (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModule.js:295:3) at NormalModule.build (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModule.js:446:15) at Compilation.buildModule (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\Compilation.js:739:10) at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\Compilation.js:981:14 at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:409:6 at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:155:13 at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1) at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:138:29 at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:346:9 at process.processTicksAndRejections (node:internal/process/task_queues:77:11) Node.js v18.18.2

  • node.js
  • 웹팩
  • babel
  • eslint
dkswndus6988 댓글 2 좋아요 0 조회수 231

docker compose up 오류

해결됨

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

postgres 강의 중 docker compose up을 실행하면 아래와 같이 오류가 뜹니다. version: "3" services: db: image: postgres: latest container_name: postgres restart: always ports: - "5432:5432" environment: POSTGRES_USER: "${DB_USER_ID}" POSTGRES_PASSWORD: "${DB_USER_PASSWORD}" volumes: - ./data:/var/lib/postgresql/data yml 파일은 수업 그대로 위/아래와 같이 작성했는데 4번쨰 줄 postgres 부분이 인식이 안되는것 같아서 이것 때문인지... 구글링을 해봐도 해결 방법을 모르겠습니다!

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
마곡동김두팔 댓글 1 좋아요 0 조회수 276

인기 태그

인프런 TOP Writers

주간 인기글