inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

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번에서 실행 })

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

캐시를 기다리는 중. 질문드립니다

해결됨

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

공통 컴포넌트 만들기 과정에서 Header left right버튼을 넣어서 수정하고 랜더링하는 과정에서 무한 대기로 빠집니다. Header를 삭제하면 랜더링이 잘 되는데, 동일하게 코드를 따라했음에도 Header를 넣으면 "캐시를 기다리는 중"이라는 문구와 함께 대기 상태로 접어듭니다 원인을 잘 모르겠습니다

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

부록) remark 강의 중 parmas 오류

해결됨

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

부록 따라가고 있는데 그대로 소스 코드를 작성해서 실행하면 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}) } }

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

spread 연산자는 연산자가 맞을까요

해결됨

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

연산자는 계산을 한 후에 그 값을 알 수 있어야 한다고 알고 있었는데 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] 로 치환되는것 같습니다. 코딩을 할 때 중요할 것 같진 않지만 작동 방식이 궁금해서 질문 드립니다.

  • javascript
  • react
  • node.js
bestoon 댓글 1 좋아요 1 조회수 178

Heroku 데이터로드 문제.

미해결

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

heroku에 deploy하고나서 openApp하면 데이터가 로드 돼야 하는데 안돼는 이유가 먼지 그리고 axios 통신을 localhost:5000해서 문제인지 궁금합니다.

  • react
  • node.js
  • mongodb
  • express
  • firebase
박성현 Park 댓글 2 좋아요 0 조회수 240

TodoList에서 checkBox 업데이트를 위한 onUpdate의 props전달?

미해결

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

TodoList에서 checkBox 업데이트를 위한 onUpdate의 props전달?에 대해서 질문이 있습니다 첫 번째, 부모 컴포넌트에서 자식 컴포넌트로 값(변수, 리스트, 함수 등)을 전달하는 것이 props인건지 햇갈립니다 두 번째, onUpdate의 구동방식은 이해되었습니다. 다만 app.jsx가 아니라 List.jsx에서 만들어도 되지 않나? 라는 의문점이 있습니다. 리렌더링 때문일까요? 아님 다른 이유가 있는건지 궁금합니다.

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

안녕하세요 todos 에서 map 사용시 에러가 발생합니다.

해결됨

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

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. todos 콘솔 테스트 📝 ?? 을 사용하면 console 에 Array 를 보여주지만 ?? 을 빼면 undefined 로 보여줍니다. map 오류 undefiend 되면서 오류가 발생하는거 같은데 App 에서 Array 를 제대로 넘겼는데 왜 undefined 가 되는걸까요 ??

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

9장 데이테베이스 세팅하기 TypeError: model.initiate is not a function

해결됨

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

질문이 좀 많습니다. 질문에 비슷한 사례가 있는데 도저히 해결이 안 되어서 다시 여쭤봅니다. 에러 메시지는 다음과 같습니다. 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; 콘솔 한번 찍어보고 싶은데 해당 오류 때문에 진도를 못 나가고 있네요. 도대체 뭐가 문제인지 모르겠습니다.

  • node.js
  • mysql
  • mongodb
  • express
Backend Woonie 댓글 2 좋아요 0 조회수 216

9장 데이터베이스 세팅하기 질문있습니다.

미해결

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

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을 호출하는 것이라고 하는데 제가 지금 해결방향을 제대로 잡고 있는건지 아니면 점점 산으로 가고 있는건지 저 스스로는 판단이 안 됩니다. 사실 이 문제가 전 파트에서 시퀄라이저 진도 나갈 때도 발생했었는데 같은 문제가 다시 발생해서 굉장히 당황스럽습니다. 도움 부탁드립니다.

  • node.js
  • mysql
  • express
  • typescript
Backend Woonie 댓글 3 좋아요 0 조회수 223

context 리스트 검색 안됨

해결됨

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

// 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 문의하기를 이용해주세요.

  • javascript
  • react
  • node.js
황유나 댓글 3 좋아요 0 조회수 321

Strapi v5 버전의 프로젝트 실행이 안되네요.

해결됨

Strapi로 코딩없이 나만의 API 서버 만들기

안녕하세요. 열심히 따라하고있습니다 ^^ 질문 : 로컬 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.0 C:\dev\strapi5_test> 바쁘시겠지만 시간 괜찮으실때 한번 봐주세요~ 감사합니다.

  • node.js
  • mysql
  • backend
  • strapi
  • ec2
somestory 댓글 1 좋아요 0 조회수 270

VSCode에서 save를 할 때, landingpage의 useEffect가 실행되는 문제에 대하여

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

landingpage에서 useEffect로 fetchProducts를 하고 있는데, VSCode development server를 켜놓고 하지 않습니까? 근데 vscode에서 save를 할 때 landingpage의 useEffect가 실행되는데, 이게 원래 이런건가요? useEffect는 컴포넌트가 처음 마운트 될 때만 실행되는 것으로 알고 있는데, 개발모드에서 save할 때는 save할 때마다 실행되나요? 궁금하네요.

  • react
  • redux
  • node.js
  • 웹앱
  • mongodb
문주영 댓글 1 좋아요 0 조회수 218

경매 시간을 자유롭게 조정할 수 있게 만들때, 경매 시작 시간도 유저가 조정할 수 있게 만들어야 할까요

미해결

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

숙제로 경매 시간을 자유롭게 조정할 수 있게 구현하라고 하셨는데, 처음 사용자가 상품을 생성할 때 경매 종료 시간과 경매 시작 시간을 입력받을 수 있게 만들라는 말씀이실까요? 경매 시작 시간도 조정할 수 있게 하면 sse로 서버 시간을 매초마다 클라이언트에게 보내는 의미가 없을 것 같아 여쭤봅니다!

  • node.js
  • mysql
  • express
  • socket.io
yeolan 댓글 2 좋아요 0 조회수 161

로그인방법이 고민됩니다.

미해결

Slack 클론 코딩[백엔드 with NestJS + TypeORM]

제가 프론트에서는 nextauth를 사용하고 잇고 nest에서는 passport를 이용하고 있는데 둘다 인증및 인가를 위한 라이브러리다보니까 한쪽에서만 인증 인가를 하는게 맞는것인지 아니면 둘다 써도 문제 없는것인지 궁금합니다.

  • node.js
  • express
  • nestjs
  • typeorm
GI P 댓글 2 좋아요 0 조회수 245

jsx와 js파일

해결됨

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

쌤~ 문득 궁금해져서 질문드립니다. 보통 파일작성하실 때 jsx확장자로 하시는데 왜 유독 util폴더에 있는 파일은 js확장자 인가요? jsx나 js든 자유롭게 써도 되는건지 어떤 규칙이나 의도가 있으신지 궁금합니다.!

  • javascript
  • react
  • node.js
ggang89 댓글 1 좋아요 0 조회수 271

onClickButton함수를 넘겨주는 것이 궁금합니다.

해결됨

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

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를 사용하는 것인가요? 너무 기초적인 질문을 드려 죄송합니다ㅠㅠ

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

Node.js 서버 Docs 불러오기 안됨

미해결

GraphQL: REST API를 대체할 기술

선생님 안녕하세요.. Node.js 프로젝트 생성 및 초기설정 따라하고 있는데 문제가 발생하여 글 남깁니다.. 영상 속 코드를 모두 따라친 후 알타이어에 reload Docs를 했는데 Introspection request failed with: 400 이러한 에러와 함께 docs가 불러와지지않았습니다. 그래서 수업 노트에 올려주신 코드를 그대로 복붙해 다시 실행해보았는데도 여전히 동작하지 않습니다.. 버전이 많이 바뀌면서 강의속 코드가 동작하지 않는것인지.. 구글링도 해보고 여러 방법을 시도해보았는데도 해결되지 않아 혹시 해결 방법을 알 수 있을까 하여 문의남깁니다 ㅠㅠ

  • node.js
  • spring-boot
  • graphql
댓글 1 좋아요 0 조회수 184

싸이월드 과제 쪽이 궁금합니다.

해결됨

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

혼자할때 요런식으로 진행했는데 강의를 보니 아예 다르게 하시더라구요 피그마 여백쪽을 margin 으로 일일히 계산했는데 틀린방법일까요? weight 100% 주면서 쉽게쉽게 하시길래 보면서 제 생각에는 미리 div들 따로 해놔서 maring 굳이 줄 이유가 없는것일까요?

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
푸우푸우 댓글 2 좋아요 0 조회수 172

댓글 내용 수정 중 문제 / inputs 리팩토링 중 질문

해결됨

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

안녕하세요~ 포트폴리오 과제하다가 질문 생겨 남겨요 첫번째는 댓글 내용 수정할 때 댓글 내용을 지우다가 다 지워지면 수정 전 원래 댓글 내용으로 도로 바뀌는 문젠데요 댓글부분 리팩토링 끝마치고나서 발견해서 처음엔 뭘 잘못했나? 했는데 계속 보니 그냥 value에서 defaultValue를 대체하여 작성해주던 아래 부분 때문인 것 같더라고요 value={ props.inputs.contents !== "" ? props.inputs.contents : props.el?.contents ?? "" } 수정을 시작할 땐 props.inputs.contents === ""이니까 댓글 내용인 props.el?.contents를 불러와서 띄워주고, 지우는 중엔 state가 빈 문자열이 아니니까 props.inputs.contents대로 표시되다가 댓글 내용을 전부 지우면 props.inputs.contents가 다시 빈 문자열이 되어서 바로 기존 댓글 내용을 띄워버려요 아예 댓글 내용을 지우고 싶어도 지울수가 없게 되어버리는데 어떻게 바꾸면 될까요? 좀 생각해봤는데 감이 안와서요 혹시 나중에 고치는 내용이 나오나요 두번째는 이번 포트폴리오 과제의 댓글부분 리팩토링 진행하다가 궁금했던 건데요 // BoardCommentWrite.container.tsx // ... const onClickWrite = async (): Promise<void> => { // ... // setWriter(""); // setPassword(""); // setContents(""); setInputs( (prev) => Object.fromEntries( Object.keys(prev).map((key) => [key, ""]), ) as typeof prev, ); // ... } 댓글 작성 끝날때 writer, password, contents를 비워줄 수 있도록 빈 문자열로 초기화시켜주던 걸 이런식으로 바꾸었는데 리팩토링 마치고 나서 잘 돌아가긴 했는데요 위 부분을 너무 어거지로 바꾼 것 같아서 좀 그래요... 사실 setInputs({ writer: "", password: "", contents: "" }) 그냥 이렇게 하는게 여기선 가장 좋은 방법인 것 같긴 한데, 더 많은 state들을 묶는 경우도 있다고 생각하면 것도 좀... 그래서요 이번 댓글 부분 코드에서는 setInputs({ writer: "", password: "", contents: "" }) 이렇게 하는게 가장 적당할까요? 그리고 더 많은 걸 초기화해야한다고 치면 어떻게 하는게 좋을까요?

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

CPU 코어 갯수 만큼 워커를 생성할때 마스터 프로세스를 포함하지 않는 이유가 궁금합니다.

해결됨

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

마스터 프로세스가 종료되면 워커들도 함께 강제 종료된다고 생각했습니다. 그래서 해당 코드에서 워커들을 실행한 후 마스터 프로세스의 작업이 마무리되면 프로세스도 종료될 것이라고 예상했습니다. 그러나 찾아본 결과, 마스터 프로세스는 워커들이 작업을 마무리할 때까지 대기하는 것으로 이해했습니다. 그렇다면 마스터 프로세스가 하나의 코어를 사용하고 있다고 생각되는데, 워커들을 생성할 때 CPU 코어 수( numCPUs )만큼 생성하는 이유가 궁금합니다. 마스터 프로세스가 하나의 코어를 계속 점유하는 것은 아니라는 것은 알고 있지만, 코어 갯수만큼 워커를 만드는 것이 보편적이라고 들어서 질문드립니다. const cluster = require("cluster"); const http = require("http"); const numCPUs = require("os").cpus().length; if (cluster.isMaster) { // CPU 개수만큼 워커를 생산 for (let i = 0; i < numCPUs + 5; i += 1) { cluster.fork(); } } else { // 워커들 실행 // ... }

  • node.js
  • cluster
  • 마스터프로세스
  • 워커
김현수 댓글 2 좋아요 0 조회수 210

인기 태그

인프런 TOP Writers

주간 인기글