묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결실무 중심! FE 입문자를 위한 React
반복문 사용법은 안알려주고 주의사항만 알려주시는거군요
뭔가 편집오류인거같네요12초정도에 반복문 사용시 주의사항만 나오고 방복문 사용방법은 안알려줍니다.저야 뭐 대충알아들었는데 초보자분들은 당황스러울듯하네요
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
무료/프리미엄 동시 소유 시 질문
다른 분들의 질문에 답변을 달아주신 내용을 보니까 사용자 계정에 등록된 도메인의 0번째에서 type 값을 사용하여 무료/프리미엄을 구분하는 답변을 예시로 준 것을 봤습니다.프로젝트 환경에서 하나의 사용자가 같은 도메인에 무료/프리미엄 비밀 키를 중복하여 발급 받을 수도 있고 비밀 키를 다수 발급받을 수도 있는데요 이 경우 도메인은 여러개가 조회될 것인데 이런 경우에는 어떻게 처리를 해야하나요?헤더에 비밀 키를 담아서 요청을 보내서 어떠한 비밀 키를 통한 요청인지를 특정하는 방법도 생각해봤습니다.서버 비밀 키는 어차피 클라이언트에게는 노출될 우려가 없고 클라이언트 용 비밀 키는 어차피 클라이언트에게 노출될 것을 염두해둔 비밀 키니까 노출이 되어도 크게 문제가 없을거라 생각했었습니다.하지만 이게 보안에 문제가 되는 방법은 아닌지 모르겠어서 검색을 좀 해봤지만 쉽게 판단이 서질 않습니다.아니면 일단 현재 수준에서는 보안 측면까지 이렇게 고민하기 보다 서버/클라이언트용과 무료/프리미엄용을 분리함에 의의를 두고 이런 강의를 진행하는 것이 옳은걸까요?ㅜㅜ[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
비주얼 스튜디오 코드로 계속 진행해도 괜찮을까요?
여태까지 비주얼 스튜디오 코드로 하시다가 웹스톤으로 바꾸셨던데혹시 비주얼 스튜디오 코드로 계속 진행해도 프로그램 실행에는 문제없을까요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
10강 cors에러 localhost:4000으로 접속했을때 에러
에러로 의심되는 코드 올릴게요.아래는 nodebird-api 의 routes/index 파일과 middlewares/index.js코드의 corsWhenDomainMaches 모듈인데 뭐가문제인지 모르겠습니다. cors모듈은 사용했는데 말이죠 module.exports = router; exports.corsWhenDomainMatches = async (req, res, next) => { const domain = await Domain.findOne({ where: { host: new URL(req.get('origin')).host }, }); if (domain) { cors({ origin: req.get('origin'), credentials: true, })(req, res, next); } else { next(); } }; const express = require('express'); const { verifyToken, apiLimiter, corsWhenDomainMatches } = require('../middlewares'); const { createToken, tokenTest, getMyPosts, getPostsByHashtag } = require('../controllers/v2'); const router = express.Router(); router.use(corsWhenDomainMatches); // POST /v2/token router.post('/token', apiLimiter, createToken); // POST /v2/test router.get('/test', apiLimiter, verifyToken, tokenTest); // GET /v2/posts/my router.get('/posts/my', apiLimiter, verifyToken, getMyPosts); // GET /v2/posts/hashtag/:title router.get('/posts/hashtag/:title', apiLimiter, verifyToken, getPostsByHashtag);
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
버그 어떻게 고치는지 아시나요?
플레이그라운드 쓸때 저 상자가 계속 유지되고 없어지지 않습니다 ㅠㅠ방법있나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
감정일기장 날짜 필터적용안됨
(사진)
-
미해결하루만에 배우는 express with AWS
postgres select 함수만들기의 51초에 await getNotes() 실행하면
다음과 같은 양식으로 남겨주세요.질문을 한 배경 :질문내용 : postgres select 함수만들기의 51초에 await getNotes() 실행하면Restarting 'database.js'/project/workspace/database.js:39await getNotes();^^^^^SyntaxError: await is only valid in async functions and the top level bodies of modules이런에러가 뜨고 다른곳에서도 펑션밖에서 바로 await를 사용하면 해당에러가 뜨는데 왜 선생님은 에러가 안뜨고 제쪽에서만 뜨는건가요??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
6.2 강의에 관해 질문 드립니다.
안녕하세요 현재 리액트 강의 6.2) UI 구현하기를 수강 중 문제가 발생해서 질문 드립니다. App.css에서 스타일을 정의하고 적용을 하니 요소들이 오히려 우측으로 치우치고 화면을 축소 및 확대를 시켜도 중앙 정렬이 이루어지지 않습니다. 원인을 모르겠어서 질문 드립니다.
-
미해결리액트로 나만의 블로그 만들기(MERN Stack)
npm run dev-watch 오류
--ignore 공백 ./client' ", 에서공백을 해놨는데도 왜 에러가 뜨는지 그 이유를 잘 모르겠습니다
-
해결됨[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
안드로이드 구글 로그인 에러
iOS로 구글 로그인하는거는 잘됩니다!근데 aos로 로그인하면 이런 에러가 떠요,,, 학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)
-
해결됨[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
'register' value관련 에러
이 에러는 무슨 에러인가요? 학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)
-
해결됨[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
MMKV 사용시 에뮬레이터에서 실행이 불가능한 이슈
이런식으로 실제 앱에서만 사용이 가능하다고 뜹니다ㅠ찾아보니까 디버깅을 끄라는데 개발자 도구를 켜봐도(ctrl+m /cmd+m켜서 들어가는,,) Debugging을 끄는 부분이 안보여요,,,+ Debug JS Remotely라는 부분을 끄라고 구글링을 하니까 나오는데 이 부분이 아예 개발자도구에서 안보입니다.. 학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
12.11 강의 ) export 후 경고 문구 & 콘솔창 데이터 출력 안됨
'12.11) Home 페이지 구현하기 2. 기능' 강의의 9분 17초에서 App 컴포넌트의 context를 Home 컴포넌트로 보내주기 위해 DiaryStateContext와 DiartDispatch를 익스포트 해주는데요.문제 1) 저는 익스포트하게 되면 아래 사진과 같이 오류가 뜨고 [문제 2]에서 설명드린 부분도 실행이 되지 않습니다. (Home 컴포넌트에서 임포트 후 다시 App 컴포넌트로 돌아와 익스포트를 작성해주긴 했습니다 => 작성 순서 바뀜)이미지의 오류 문구 (refresh only works when a file exports components. Move your react context to a separate file.) 문제 2) 그리고 강의 영상에선 익스포트 후 Home 컴포넌트에 App 컴포넌트에서 익스포트한 것 들을 import 해주고 필터를 통해 각 달에 해당하는 일기 데이터를 추출 후 콘솔창에 출력해줍니다. (강의 16:07)하지만 저는 아래 사진과 같이 콘솔창에 현재 월에 대한 데이터가 아무것도 뜨지 않습니다. 위에서 설명드린 익스포트가 제대로 되지 않은 문제로 인해 안 뜨는 것일까요? + 추가로 context들을 파일을 따로 만들고 App 컴포넌트에 임포트하고 새로고침해봤더니 아무것도 뜨지 않았습니다.. 이 내용은 깃허브에 업로드 되어있습니다.App과 Home 컴포넌트의 코드는 아래에 남겨두었습니다.(깃허브 : https://github.com/hsyo830/Section12.git )[App.jsx]import "./App.css"; import { useReducer, useRef, createContext } from "react"; import { Routes, Route } from "react-router-dom"; // /입력 시 Home, /new new, /diary diary 각각의 페이지를 가져오도록 하기 위함 import Diary from "./pages/Diary"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Notfound from "./pages/NotFound"; const mockData = [ { id: 1, createDate: new Date("2025-03-14").getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createDate: new Date("2025-03-13").getTime(), emotionId: 2, content: "2번 일기 내용", }, { id: 3, createDate: new Date("2025-02-25").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; } } // 일기 데이터를 공급할 Context export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); 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, }, }); }; // 기존 일기 수정 const onUpdate = (id, createDate, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createDate, 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; [Home.jsx]import { useState, useContext } from "react"; import { DiaryStateContext } from "../App"; import Header from "../components/Header"; import Button from "../components/Button"; import DiaryList from "../components/DiaryList"; import { data } from "react-router-dom"; const getMonthlyData = (pivotDate, data) => { const beginTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth(), 1, 0, 0, 0 ).getTime(); const endTime = new Date( pivotDate.getFullYear, pivotDate.getMonth() + 1, 0, 23, 59, 59 ).getTime(); return data.filter( (item) => beginTime <= item.createdDate && item.createdDate <= endTime ); }; const Home = () => { const data = useContext(DiaryStateContext); const [pivotDate, setPivotDate] = useState(new Date()); const monthlyData = getMonthlyData(pivotDate, data); console.log(monthlyData); const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1)); }; const onDecreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() - 1)); }; return ( <div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth() + 1}월`} leftChild={<Button onClick={onDecreaseMonth} text={"<"} />} rightChild={<Button onClick={onIncreaseMonth} text={">"} />} /> <DiaryList /> </div> ); }; export default Home;
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
도커볼륨 마운트 관련
프로젝트 구성DockerfileFROM node:14 RUN apt-get update && apt-get install -y bash COPY ./package.json /myfolder/ COPY ./yarn.lock /myfolder/ WORKDIR /myfolder/ RUN yarn install COPY . /myfolder/ CMD ["yarn", "start:dev"]docker-compose.yamlversion: "3.7" services: node-server: build: context: . dockerfile: Dockerfile volumes: - ./index.js:/myfolder/index.js - ./email.js:/myfolder/email.js ports: - 3000:3000 database-server: image: mongo:5 ports: - 27017:27017 Window 환경입니다.위와 같을 때index.js 파일을 수정하여도docker로 연동된 nodemon 재 실행이 안됩니다. docker-desktop 에서 container 에서보면 mount 라고 표기되어있고위의 새로고침 버튼을 누르면 제대로 적용 됩니다.원인이 뭘까요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
webstorm 해결할 수 없는 변수 문제
node -v : v22.14.0npm -v : 10.9.2webstorm IDE에서 아래와 같이 해결할 수 없는 변수 문제가 발생합니다. 다양하게 검색해 보고 아래의 상태를 체크 했습니다. 파일 > 설정 > Node.js : 코드 지원은 이미 체크가 되어 있었구요.또한 저와 같은 경우를 질문한 것도 찾았구요.아래의 링크 입니다.https://intellij-support.jetbrains.com/hc/en-us/community/posts/8692788860434-Unresolved-function-or-method-in-Webstrom-Node-Coding-Assistance@type 선언으로 해결하라는데 cluster편 강의를 보았을때 이문제가 없으시더라구요.문제는 위 @types 폴더에 cluster.d.ts 파일에 정의가 없어서 생기는 문제 같은데 여기에 변수를 정의하려 해도 수정하면 안된다는 메세지가 나오더라구요.강의에 내용이 아니지만 강의 영상에 강사님의 webstorm은 이런 현상이 없더라구요.webstorm 설정을 어떻게 하시는지 알고 싶습니다.------------------------------------------------------------------------------------------- 다른 질문입니다.node의 기본 모듈말고 npm으로 설치해야 하는 모듈이 node 버전만 같다면 윈도우와 리눅스가 같아야 한다고 생각합니다.안그러면 package.json의 의미가 반감될 것 같습니다.만약 리눅스에 이미 하위 버전의 node가 설치되어 있고 운영되고 있다면 package.json 기반으로 설치를 한다면 설치가 되어야 할 것 같습니다.문제는 실행이 되냐는 문제인것 같은데요.node 버전에 따른 js의 문법에는 문제가 없다면 실행 되는게 맞는지요?이런 생각이 드니 node의 버전와 모듈의 버전이 과연 어떤 연관성이 있는지 알고 싶습니다.모듈을 만드는 사람이 이것은 node 몇 버전 이하에서는 설치하지 마라고 하는것이 있는지요?
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
로그아웃 시 토큰 검증 오류 응답
현재 Ch4-6. 관리자 계정 로그아웃, 삭제 강의를 듣고 있는 학생입니다! 다름이 아니라 로그아웃 코드에서 토큰 검증 오류 시에 res.send()를 안하는 이유가 있나요?!토큰 검증 중 오류가 발생하게 된다면, isLoggedIn 상태는 true이고 토큰은 지워진 상태가 되는건데 그러면 로그인도 못하고 로그아웃도 못하는 상태인거 같아서요!궁금해서 여쭤봅니다!!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
월 변경 이벤트 핸들러가 작동하지 않습니다.
코드는 아래와 같습니다. 다른 버튼들은 모두 클릭 이벤트 핸들러가 작동하는데, 월 변경 버튼에만 이벤트 핸들러가 작동하지 않습니다. 혹시 Date 객체를 잘 못 생성한 것일까요..? import { useContext, useState } from "react"; import { DiaryStateContext } from "../App"; import Header from "../components/Header"; import Button from "../components/Header"; import DiaryList from "../components/DiaryList"; const getMonthlyDate = (pivotDate, data) => { const beginTime = new Date(pivotDate.getFullYear(), pivotDate.getMonth(), 1,0,0,0).getTime(); const endTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth()+1, 0, 23, 59, 59 ).getTime(); return data.filter((item)=> beginTime<= item.createdDate && item.createdDate <= endTime) } const Home = () => { const data = useContext(DiaryStateContext); //날짜 보관 const [pivotDate, setPivotDate] = useState(new Date()); const monthlyData = getMonthlyDate(pivotDate, data); const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth()+1)); } const onDecreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth()-1)); } return <div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth()+1}월`} leftChild={<Button onClick={onDecreaseMonth} title={"<"}/>} rightChild={<Button onClick={onIncreaseMonth} title={">"}/>} /> <DiaryList data={monthlyData}/> </div> }; export default Home;
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
import Hero from './Hero' 오류 문의
강의에서 말씀하신대로 자동완성을 이용하여서 './Hero' 가 되었는데, 오류가 납니다.Already included file name ~~ Root file specified for compliation 이라고 뜨는데 왜 그런건가요?Error lens에서 해당 오류를 출력합니다.
-
미해결실무 중심! FE 입문자를 위한 React
hooks recoil불러오는 과정에서 src내부에 있는 파일이 안불러와집니다
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
no-unused-vars 에러가 발생합니다!
5.1)실습 준비하기 강의에서 "no-unused-vars":"off",입력하여 기능을 끈다고 하셨는데코드를 입력하니까 Duplicate key 'no-unused-vars'. 라고 에러가 발생합니다.어떻게 해결해하나요??