묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
eslint
PS C:\Users\Master\inflearn\lecture-frontend-dev-env> npx eslint --initYou 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? · browserThe 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.eslintadded 2 packages, changed 1 package, and audited 799 packages in 2s111 packages are looking for funding run npm fund for details 설치가 됐는데 .eslintrc.js파일에 아무것도 안 뜨고 eslint.config.mjs파일이 설치됐어요
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
도와주세요!
PS C:\Users\Master\inflearn\lecture-frontend-dev-env> npm run build> lecture-frontend-dev-env@1.0.0 build> webpack --progress70% building 0/0 modules 0 activeC:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\babel-loader\lib\cache.js:22const findCacheDirP = import("find-cache-dir");^TypeError: Invalid host defined optionsat 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:14at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:409:6at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:155:13at 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:29at C:\Users\Master\inflearn\lecture-frontend-dev-env\node_modules\webpack\lib\NormalModuleFactory.js:346:9at process.processTicksAndRejections (node:internal/process/task_queues:77:11)Node.js v18.18.2
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
docker compose up 오류
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/datayml 파일은 수업 그대로 위/아래와 같이 작성했는데 4번쨰 줄 postgres 부분이 인식이 안되는것 같아서 이것 때문인지... 구글링을 해봐도 해결 방법을 모르겠습니다!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
7강중에서
혹시 뭐가 문제 일까요..?const express = require('express'); // 내가 설치한 express 모듈을 가져온다. const app = express() // 새로운 express 앱을 만든다. const port = 5000 // 포트 const bodyParser = require('body-parser'); const {User} = require("./models/User"); // User 가져옴 //application/x-www-form-urlencoded app.use(bodyParser.urlencoded({extended:true})) // 바디 파서가 클라이언트에서 오는정보를 서버에서 분석해서 가져올수있게 하는것 //application/josn app.use(bodyParser.json()); // 애는 json타입을 분석해서 가져옴 const mongoose = require('mongoose'); mongoose.connect('mongodb+srv://jin:0000@jin.p3agn.mongodb.net/?retryWrites=true&w=majority&appName=jin',{ useNewUrlParser: true, useUnifiedTopology: true }).then(()=> console.log('MongoDB Connected...')) .catch(err => console.log(err)) app.get('/', (req, res) => { // 앱을 넣은 후에 루트디렉토리에 오면 헬로월드 실행? res.send('Hello World!') }) app.post('/register',(req,res) => { //회원 가입 할때 필요한 정보들을 클라이언트에서 가져오면 // 그것들을 데이터 베이스에 넣어준다. const user = new User(req.body) // user 정보들을 데이터베이스에 넣기위해 req.body로 작성하면됨 // req.body 에는 정보들 있음 user.save((err,userInfo)=>{ // 만약 저장을 할때 err가 있을때 클라이언트한테 json형식으로 알려줌 if(err) return res.json({success:false, err}) // err 메세지 전달 return res.status(200).json({ // status200은 성공했다는 의미 success:true }) }) // save는 몽고디비에서 오는 메서드 // req.body 정보들이 user모델에 저장이됨 }) app.post('/register', async (req, res) => { try { const user = new User(req.body); // user 정보들을 데이터베이스에 넣기위해 req.body로 작성하면됨 // req.body 에는 정보들 있음 const userInfo = await user.save(); // 만약 저장을 할때 err가 있을때 클라이언트한테 json형식으로 알려줌 res.status(200).json({ success: true, userInfo }); } catch (err) { // err 메세지 전달 res.json({ success: false, err }); } }); app.listen(port, () => { console.log(`Example app listening on port ${port}`) //앱을 포트 5000번에서 실행 })
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
캐시를 기다리는 중. 질문드립니다
공통 컴포넌트 만들기 과정에서 Header left right버튼을 넣어서 수정하고 랜더링하는 과정에서 무한 대기로 빠집니다.Header를 삭제하면 랜더링이 잘 되는데, 동일하게 코드를 따라했음에도 Header를 넣으면 "캐시를 기다리는 중"이라는 문구와 함께 대기 상태로 접어듭니다원인을 잘 모르겠습니다
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
부록) remark 강의 중 parmas 오류
부록 따라가고 있는데 그대로 소스 코드를 작성해서 실행하면 localhost에 아래와 같이 오류가 뜹니다.오류 메시지가 [id].tsx 파일에 아래와 같이 뜨긴 하는데 강의 중 강사님 화면에도 그렇고 강의 자료에도 똑같이 오류 메시지(빨간 줄)가 있더라구요. next13부터 라우팅 방식이 달라졌다고 하던데 버전 문제인건지...아래 params 오류 제외하고는 모두 동일한 소스 코드를 작성했고 오류도 없습니다.해결 방법이 궁금합니다. **혹시 몰라서 [id].tsx 랑 post.ts 코드 전체 첨부합니다.<id.tsx>import React from 'react' import Head from 'next/head' import { GetStaticPaths, GetStaticProps } from 'next' import { getAllPostIds, getPostData, getSortedPostsData } from '../../lib/post' const Post = ({postData}: { postData: { title: string date: string contentHtml: string } }) => { return ( <div> <Head> <title>{postData.title}</title> </Head> <article> <h1>{postData.title}</h1> <div> {postData.date} </div> <div dangerouslySetInnerHTML={{__html: postData.contentHtml}} /> </article> </div> ) } export default Post export const getStaticPath: GetStaticPaths =async () => { const paths = getAllPostIds(); return{ paths, fallback: false } } export const getStaticProps: GetStaticProps =async ({params}) => { const postData = await getPostData(params.id as string) return { props: { postData } } }<post.ts>import fs from 'fs' import path from 'path' import matter from 'gray-matter' import { remark } from 'remark'; import remarkHtml from 'remark-html/lib'; const postsDirectory = path.join(process.cwd(), 'posts') console.log('process.cwd()', process.cwd()); console.log('postsDirectory.cwd()', postsDirectory); export function getSortedPostsData(){ //Get file names under /posts const fileNames = fs.readdirSync(postsDirectory) console.log('fileNames', fileNames); //fileNames ['pre-rendering.md', 'ssg-ssr.md'] const allPostsData = fileNames.map(fileName => { //Remove ".md" from file name to get id const id = fileName.replace(/\.md$/, '') //Read markdown file as string const fullPath = path.join(postsDirectory, fileName) const fileContents = fs.readFileSync(fullPath, 'utf8') //Use gray-matter to parse the post metadata section const matterResult = matter(fileContents) //Combine the data with the id return{ id, ...(matterResult.data as {date: string; title: string}) } }) //Sort posts by date return allPostsData.sort((a,b) => { if(a.date<b.date){ return 1 } else{ return -1 } }) } export function getAllPostIds(){ const fileNames = fs.readdirSync(postsDirectory); return fileNames.map(fileName => { return { params: { id: fileName.replace(/\.md$/, '') } } }) } export async function getPostData(id: string){ const fullPath = path.join(postsDirectory, `${id}.md`) const fileContents = fs.readFileSync(fullPath, 'utf-8') const matterResult = matter(fileContents); const processedContent = await remark().use(remarkHtml).process(matterResult.content); const contentHtml = processedContent.toString(); return { id, contentHtml, ...(matterResult.data as {date: string; title: string}) } }
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
spread 연산자는 연산자가 맞을까요
연산자는 계산을 한 후에 그 값을 알 수 있어야 한다고 알고 있었는데 spread 연산자는 결과값이라는게 존재하지 않는 것 같습니다. typeof 연산자를 통해서 데이터 타입을 확인하는것도 불가능하고let arr1 = [1, 2, 3];let obj1 = {a:1, b:2, c:3};라 했을 때 console.log(...arr1); 는 출력이 되지만 console.log(...obj1);는 에러가 뜨는 것을 봐서는 연산을 통한 결과값을 적용하는 것이 아니라 그냥 코드 내의 글자 자체가 ...arr1 이 1, 2, 3 또는 arr1[0], arr1[1], arr1[2] 로 치환되는것 같습니다. 코딩을 할 때 중요할 것 같진 않지만 작동 방식이 궁금해서 질문 드립니다.
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
Heroku 데이터로드 문제.
heroku에 deploy하고나서 openApp하면 데이터가 로드 돼야 하는데 안돼는 이유가 먼지 그리고 axios 통신을 localhost:5000해서 문제인지 궁금합니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
TodoList에서 checkBox 업데이트를 위한 onUpdate의 props전달?
TodoList에서 checkBox 업데이트를 위한 onUpdate의 props전달?에 대해서 질문이 있습니다 첫 번째, 부모 컴포넌트에서 자식 컴포넌트로 값(변수, 리스트, 함수 등)을 전달하는 것이 props인건지 햇갈립니다 두 번째, onUpdate의 구동방식은 이해되었습니다. 다만 app.jsx가 아니라 List.jsx에서 만들어도 되지 않나? 라는 의문점이 있습니다. 리렌더링 때문일까요? 아님 다른 이유가 있는건지 궁금합니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 todos 에서 map 사용시 에러가 발생합니다.
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.todos 콘솔 테스트 📝 ?? 을 사용하면 console 에 Array 를 보여주지만 ?? 을 빼면 undefined 로 보여줍니다. map 오류undefiend 되면서 오류가 발생하는거 같은데 App 에서 Array 를 제대로 넘겼는데 왜 undefined 가 되는걸까요 ??
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
9장 데이테베이스 세팅하기 TypeError: model.initiate is not a function
질문이 좀 많습니다. 질문에 비슷한 사례가 있는데 도저히 해결이 안 되어서 다시 여쭤봅니다.에러 메시지는 다음과 같습니다.C:\developing\zeroCho\nodeJs\nodebird\models>node index.js hashtag.js Hashtag old-index.js undefined C:\developing\zeroCho\nodeJs\nodebird\models\index.js:30 model.initiate(sequelize); ^ TypeError: model.initiate is not a function코드 본문입니다.const Sequelize = require('sequelize'); const fs = require('fs'); const path = require('path'); const env = process.env.NODE_ENV || 'development'; const config = require('../config/config')[env]; const db = {}; const sequelize = new Sequelize( config.database, config.username, config.password, config, ); db.sequelize = sequelize; const basename = path.basename(__filename); fs .readdirSync(__dirname) // 현재 폴더의 모든 파일을 조회 .filter(file => { // 숨김 파일, index.js, js 확장자가 아닌 파일 필터링 return (file.indexOf('.') !== 0) && (file !== basename) && (file.slice(-3) === '.js'); }) .forEach(file => { // 해당 파일의 모델 불러와서 init const model = require(path.join(__dirname, file)); console.log(file, model.name); db[model.name] = model; model.initiate(sequelize); // 문제 발생점 }); Object.keys(db).forEach(modelName => { // associate 호출 if (db[modelName].associate) { db[modelName].associate(db); } }); module.exports = db;콘솔 한번 찍어보고 싶은데 해당 오류 때문에 진도를 못 나가고 있네요. 도대체 뭐가 문제인지 모르겠습니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
9장 데이터베이스 세팅하기 질문있습니다.
20분 정도에서 말씀주신 내용처럼 콘솔을 찍어보려고 하는데 다음과 같은 에러가 발생했습니다.C:\developing\zeroCho\nodeJs\nodebird\models\index.js:19 file.index(".") !== 0 && file !== basename && file.slice(-3) === ".js" ^ TypeError: file.index is not a function 그래서 일단 코드를 다음과 같이 수정했습니다.[기존 코드: return file.index(".") !== 0 &&...]fs.readdirSync(__dirname) .filter((file) => { return ( !file.startsWith(".") && file !== basename && file.slice(-3) === ".js" );문제는 또 다른 에러가 발생했는데C:\developing\zeroCho\nodeJs\nodebird\models>node index.js hashtag.js Hashtag C:\developing\zeroCho\nodeJs\nodebird\node_modules\sequelize\lib\model.js:662 throw new Error("No Sequelize instance passed"); ^ Error: No Sequelize instance passed at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\node_modules\sequelize\lib\model.js:662:13) at Hashtag.initiate (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) at C:\developing\zeroCho\nodeJs\nodebird\models\index.js:30:11 at Array.forEach (<anonymous>) at Object.<anonymous> (C:\developing\zeroCho\nodeJs\nodebird\models\index.js:25:4) at Module._compile (node:internal/modules/cjs/loader:1469:14) at Module._extensions..js (node:internal/modules/cjs/loader:1548:10) at Module.load (node:internal/modules/cjs/loader:1288:32) at Module._load (node:internal/modules/cjs/loader:1104:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12) 그래서 일단 이것도 modules 폴더 내에서 사용된 initate 메서드를 init으로 변경했습니다.<예시>const Sequelize = require("sequelize"); class Hashtag extends Sequelize.Model { static init(sequelize) { Hashtag.init({ title: { type: Sequelize.STRING(15), allowNull: false, unique: true, }, }); } static associate(db) {} } module.exports = Hashtag; 그랬더니 이번에는 무한 재귀 에러가 발생하였습니다C:\developing\zeroCho\nodeJs\nodebird\models>node index.js hashtag.js Hashtag C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5 Hashtag.init({ ^ RangeError: Maximum call stack size exceeded at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) at Hashtag.init (C:\developing\zeroCho\nodeJs\nodebird\models\hashtag.js:5:13) Node.js v20.18.0 대안은 super.init을 호출하는 것이라고 하는데 제가 지금 해결방향을 제대로 잡고 있는건지 아니면 점점 산으로 가고 있는건지 저 스스로는 판단이 안 됩니다. 사실 이 문제가 전 파트에서 시퀄라이저 진도 나갈 때도 발생했었는데 같은 문제가 다시 발생해서 굉장히 당황스럽습니다.도움 부탁드립니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
context 리스트 검색 안됨
// App.jsx import "./App.css"; import { useState, useRef, useReducer, useCallback, createContext, } from "react"; import Header from "./components/Header"; import Editor from "./components/Editor"; import List from "./components/List"; const mockData = [ { id: 0, isDone: false, content: "React 공부하기", date: new Date().getTime(), }, { id: 1, isDone: false, content: "빨래하기", date: new Date().getTime(), }, { id: 2, isDone: false, content: "노래 연습하기", 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; } } export const TodoContext = createContext(); function App() { const [todos, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", targetId: targetId, }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", targetId: targetId, }); }, []); return ( <div className="App"> <Header /> <TodoContext.Provider value={{ todos, onCreate, onUpdate, onDelete }}> <Editor /> <List /> </TodoContext.Provider> </div> ); } export default App; // List.jsx import "./List.css"; import TodoItem from "./TodoItem"; import { useState, useMemo, useContext } from "react"; import { TodoContext } from "../App"; const List = () => { const { todos } = useContext(TodoContext); const [search, setSearch] = useState(""); const onChangeSearch = (e) => { setSearch(e.target.value); }; const getFilteredData = () => { if (search === "") { return todos; } return todos.filter((todo) => todo.content.toLowerCaes().includes(search.toLowerCase()) ); }; const filteredTodos = getFilteredData(); const { totalCount, doneCount, notDoneCount } = useMemo(() => { const totalCount = todos.length; const doneCount = todos.filter((todo) => todo.isDone).length; const notDoneCount = totalCount - doneCount; return { totalCount, doneCount, notDoneCount, }; }, [todos]); return ( <div className="List"> <h4>Todo List 🎯</h4> <div> <div>total: {totalCount}</div> <div>done: {doneCount}</div> <div>notDone: {notDoneCount}</div> </div> <input value={search} onChange={onChangeSearch} placeholder="검색어를 입력하세요" /> <div className="todos_wrapper"> {filteredTodos.map((todo) => { // return <div>{todo.content}</div>; return <TodoItem key={todo.id} {...todo} />; })} </div> </div> ); }; export default List; 안녕하세요.11-2강을 수강하며 코드를 따라 작성하였는데 리스트 검색을 하려고 하면 빈 창으로 바뀝니다.리스트 추가와 삭제는 잘 작동합니다.무엇이 문제일까요?미리 답변 감사합니다 🙇🏻♀️ 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
미해결Strapi로 코딩없이 나만의 API 서버 만들기
Strapi v5 버전의 프로젝트 실행이 안되네요.
안녕하세요. 열심히 따라하고있습니다 ^^ 질문 : 로컬 pc 에서 v5 로 프로젝트 생성해서 처음 실행하려는데 에러가 나면서 실행이 안되네요.Strapi v5 훑어보기v4 버전할때는 강의 따라해도 문제없이 잘 됐었습니다. 실행 결과를 보니 db 에는 테이블까지는 생성이 됐었네요. 에러 내용 :C:\dev\strapi5_test> npm run develop> strapi-5-test@0.1.0 develop> strapi develop⠋ Loading Strapi⠋ Building build context[INFO] Including the following ENV variables as part of the JS bundle: - ADMIN_PATH - STRAPI_ADMIN_BACKEND_URL - STRAPI_TELEMETRY_DISABLED✔ Building build context (73ms)✔ Creating admin (489ms)✔ Loading Strapi (1826ms)✔ Generating types (315ms)node:events:497 throw er; // Unhandled 'error' event ^Error: bind EACCES null:5173 at listenOnPrimaryHandle (node:net:1985:18) at rr (node:internal/cluster/child:163:12) at Worker.<anonymous> (node:internal/cluster/child:113:7) at process.onInternalMessage (node:internal/cluster/utils:49:5) at process.emit (node:events:531:35) at process.processEmit [as emit] (C:\dev\strapi5_test\node_modules\signal-exit\index.js:199:34) at emit (node:internal/child_process:951:14) at process.processTicksAndRejections (node:internal/process/task_queues:83:21)Emitted 'error' event on Server instance at: at listenOnPrimaryHandle (node:net:1986:21) at rr (node:internal/cluster/child:163:12) [... lines matching original stack trace ...] at process.processTicksAndRejections (node:internal/process/task_queues:83:21) { errno: -4092, code: 'EACCES', syscall: 'bind', address: null, port: 5173}Node.js v20.18.0C:\dev\strapi5_test> 바쁘시겠지만 시간 괜찮으실때 한번 봐주세요~감사합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
VSCode에서 save를 할 때, landingpage의 useEffect가 실행되는 문제에 대하여
landingpage에서 useEffect로 fetchProducts를 하고 있는데, VSCode development server를 켜놓고 하지 않습니까?근데 vscode에서 save를 할 때 landingpage의 useEffect가 실행되는데, 이게 원래 이런건가요? useEffect는 컴포넌트가 처음 마운트 될 때만 실행되는 것으로 알고 있는데, 개발모드에서 save할 때는 save할 때마다 실행되나요? 궁금하네요.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
경매 시간을 자유롭게 조정할 수 있게 만들때, 경매 시작 시간도 유저가 조정할 수 있게 만들어야 할까요
숙제로 경매 시간을 자유롭게 조정할 수 있게 구현하라고 하셨는데, 처음 사용자가 상품을 생성할 때 경매 종료 시간과 경매 시작 시간을 입력받을 수 있게 만들라는 말씀이실까요? 경매 시작 시간도 조정할 수 있게 하면 sse로 서버 시간을 매초마다 클라이언트에게 보내는 의미가 없을 것 같아 여쭤봅니다!
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
로그인방법이 고민됩니다.
제가 프론트에서는 nextauth를 사용하고 잇고 nest에서는 passport를 이용하고 있는데 둘다 인증및 인가를 위한 라이브러리다보니까 한쪽에서만 인증 인가를 하는게 맞는것인지 아니면 둘다 써도 문제 없는것인지 궁금합니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
jsx와 js파일
쌤~문득 궁금해져서 질문드립니다.보통 파일작성하실 때 jsx확장자로 하시는데 왜 유독 util폴더에 있는 파일은 js확장자 인가요?jsx나 js든 자유롭게 써도 되는건지 어떤 규칙이나 의도가 있으신지 궁금합니다.!
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onClickButton함수를 넘겨주는 것이 궁금합니다.
import "./App.css"; import Viewer from "./components/Viewer"; import Controller from "./components/Controller"; import { useState } from "react"; function App() { const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); }; return ( <div className="App"> <h1>Simple Counter</h1> <section> <Viewer count={count} /> </section> <section> <Controller onClickButton={onClickButton} /> </section> </div> ); } export default App;const Controller = ({ onClickButton }) => { return ( <div> <button onClick={() => { onClickButton(-1); }} > -1 </button> <button onClick={() => { onClickButton(-10); }} > -10 </button> <button onClick={() => { onClickButton(-100); }} > -100 </button> <button onClick={() => { onClickButton(100); }} > +100 </button> <button onClick={() => { onClickButton(10); }} > +10 </button> <button onClick={() => { onClickButton(1); }} > +1 </button> </div> ); }; export default Controller; App.jsx에서 onClickButton이 count, setCount 함수를 모두 사용하고 있을텐데요, 이것이 Controller.jsx로 넘어갈 때에는 아래와 같이 넘어가나요(value) => { setCount(13 + value);//count:13일때 };아니면 App.jsx에서 onClickButton 함수를 호출하여 App.jsx의 count, setCount를 사용하는 것인가요? 너무 기초적인 질문을 드려 죄송합니다ㅠㅠ
-
미해결GraphQL - REST API를 대체할 기술
Node.js 서버 Docs 불러오기 안됨
선생님 안녕하세요.. Node.js 프로젝트 생성 및 초기설정 따라하고 있는데 문제가 발생하여 글 남깁니다.. 영상 속 코드를 모두 따라친 후 알타이어에 reload Docs를 했는데 Introspection request failed with: 400이러한 에러와 함께 docs가 불러와지지않았습니다. 그래서 수업 노트에 올려주신 코드를 그대로 복붙해 다시 실행해보았는데도 여전히 동작하지 않습니다.. 버전이 많이 바뀌면서 강의속 코드가 동작하지 않는것인지.. 구글링도 해보고 여러 방법을 시도해보았는데도 해결되지 않아 혹시 해결 방법을 알 수 있을까 하여 문의남깁니다 ㅠㅠ