172만명의 커뮤니티!! 함께 토론해봐요.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
선생님 포스트 나 댓글 삭제기능은 어떤식으로 해야될까요 따로 강의는 없겟죠? ㅠ
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
짹짹 버튼을 눌렀을 때, 처음 클릭 시에만 해당 Input이 초기화 되고, 그 뒤로는 초기화 되지 않는 오류입니다. useEffect가 addPostDone 이 바뀔 때 마다 작동이 되어야 하는데, Redux Devtool에서는 분명 변경이 되었음에도 , PostForm에서 변경이 없는걸로 감지가 됩니다. PostAction export const ADD_POST_REQUEST = 'ADD_POST_REQUEST'; export const ADD_POST_SUCCESS = 'ADD_POST_SUCCESS'; export const ADD_POST_FAILURE = 'ADD_POST_FAILURE'; const addPostRequestAction = (data) => ({ type: ADD_POST_REQUEST, data, }); export { addPostRequestAction, }; post.js (reducer) import shortId from 'shortid'; const dummyPost = (data) => ({ id: shortId.generate(), content: data, User: { id: 1, nickname: 'admin', }, Images: [], Comments: [], }); const reducer = (state = initialState, action) => { switch (action.type) { case ADD_POST_REQUEST: console.log('ADD_POST_REDUCER'); return { ...state, addPostLoading: true, addPostDone: false, addPostError: null, }; case ADD_POST_SUCCESS: return { ...state, mainPosts: [dummyPost(action.data), ...state.mainPosts], addPostLoading: false, addPostDone: true, }; case ADD_POST_FAILURE: return { ...state, addPostLoading: false, addPostError: action.error, }; default: return state; } }; ==Redux-Saga=== index.js(rootSaga) import { all, fork } from 'redux-saga/effects'; import postSaga from './post'; import userSaga from './user'; export default function* rootSaga() { yield all([ fork(postSaga), fork(userSaga), ]); } postSaga import { all, fork, takeLatest, put, delay } from 'redux-saga/effects'; import axios from 'axios'; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, } from '../reducers/Actions/post'; function* addPostRequest(action) { try { // const result = yield call(addPostAPI,action.data) delay(1000); yield put({ type: ADD_POST_SUCCESS, data: action.data, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPostRequest); } export default function* postSaga() { yield all([ fork(watchAddPost), ]); } ==Component== PostForm.js import { useCallback, useRef, useEffect, useState } from 'react'; import { Form, Input, Button } from 'antd'; import { useDispatch, useSelector } from 'react-redux'; import { addPostRequestAction } from '../reducers/Actions/post'; const PostForm = () => { const { imagePaths, addPostLoading, addPostDone } = useSelector((state) => state.post); const [text, setText] = useState(''); const dispatch = useDispatch(); useEffect(() => { if (addPostDone) { setText(''); } }, [addPostDone]); const onSubmit = useCallback(() => { dispatch(addPostRequestAction(text)); }, [text]); const onChangeText = useCallback((e) => setText(e.target.value), []); return ( <Form style={{ margin: '10px 0 20px' }} encType="multipart/form-data" onFinish={onSubmit}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> <div> {imagePaths.map((v) => ( <div key={v} style={{ display: 'inline-block' }}> <img src={v} style={{ width: '200px' }} alt={v} /> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ); }; export default PostForm;
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요 선생님 post 타이틀을 한글로 쓰면 경로이동이 안됩니다 영어로 쓰면 라우터대로 경로가 이동하는데 한글로 쓰면 이동이 안되네요... 왜이럴까요 한글타이틀 도 영어타이틀 처럼 잘 이동될순 없을까요
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
setupProxy.js 파일 내용을 아래처럼 바꾸시면 됩니다. 공식 문서 보니 설정 문법이 바뀌었나봐요. https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: "http://localhost:5000", changeOrigin: true, }) ); };
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
배포하기 전에 커뮤니티, 포스트, comment 삭제하고 다시작성하고 싶은데 어떻게해야될까요?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 제가 이제 LocalStorage를 이용해서 하는 챕터까지 진행했는데요 전부 다 코딩치고 여러가지 테스트를 해보다가 일기를 전부 삭제를 했더니 오류가 나옵니다.. 갑자기 화면은 아무것도 안뜨고 콘솔창에서는 Uncaught TypeError: Cannot read properties of undefined (reading 'id') 이란 에러가 뜹니다. 그리고 에러위치는 App:52:1 로 dataId.current = parseInt(diaryList[0].id) + 1; 요 부분에서 에러가 나는거 같습니다.... 제가 어느부분을 잘못한걸까요??
해결됨
[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
require('dotenv').config(); const PORT = process.env.PORT; const dotenv = require('dotenv'); const express = require('express'); const compression = require("compression"); const methodOverride = require("method-override"); const cors = require("cors"); const userRouter = require("./routes/userRoute"); const boardRouter = require("./routes/boardRoute"); const authRouter = require('./routes/auth'); // 인증 라우터 const ejsMate = require('ejs-mate'); const path = require('path'); const session = require('express-session'); const morgan = require('morgan'); const nunjucks = require('nunjucks'); const passport = require('passport'); const passportConfig = require('./passport'); const { sequelize } = require('../models/index'); const cookieParser = require('cookie-parser'); const app = express(); passportConfig(); nunjucks.configure('views', { express : app, watch : true, }); sequelize.sync({ force: true }) .then(() => { console.log("데이터 베이스 연결 성공") }) .catch((err) => { console.log(err); }); app.engine('ejs', ejsMate) app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, 'views')) app.use(express.urlencoded({ extended: true })); app.use(compression()); app.use(express.json()); app.use(express.urlencoded({extended:true})); app.use(methodOverride()); app.use(cors()); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ resave: false, saveUninitialized: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false, }, }), ); //! express-session에 의존하므로 뒤에 위치해야 함 app.use(passport.initialize()); // 요청 객체에 passport 설정을 심음 app.use(passport.session()); // req.session 객체에 passport정보를 추가 저장 // passport.session()이 실행되면, 세션쿠키 정보를 바탕으로 해서 passport/index.js의 deserializeUser()가 실행하게 한다. app.use('/', userRouter); app.use('/', boardRouter); app.use('/auth', authRouter); app.get('/', (req,res)=>{ res.render('home') }) app.listen(PORT, () => { console.log(`SERVING ON THE ${PORT}`); }) module.exports = app; <env파일> DB_HOST = localhost DB_USER = root DB_PASS = tkfkdgo12 DB_NAME = nodejs PORT = 3000 JWT_SECRET = softsquared_jwt_secret_key_07040014087 COOKIE_SECRET = cookiesecret KAKAO_ID = bcb213727449d2b53039dcca5f541c02 const Sequelize = require('sequelize'); const path = require('path'); const env = process.env.NODE_ENV || 'development'; const User = require('./user'); // config/config.json 파일에 있는 설정값들을 불러온다. // config객체의 env변수(development)키 의 객체값들을 불러온다. // 즉, 데이터베이스 설정을 불러온다고 말할 수 있다. const config = require('../config/config')[env] const db = {}; // new Sequelize를 통해 MySQL 연결 객체를 생성한다. const sequelize = new Sequelize(config.database, config.username, config.password, config) // 연결객체를 나중에 재사용하기 위해 db.sequelize에 넣어둔다. db.Sequelize = Sequelize; db.sequelize = sequelize; User.init(sequelize); // 모듈로 꺼낸다. module.exports = db; <models 폴더 내 index.js> const Sequelize = require('sequelize'); const path = require('path'); const env = process.env.NODE_ENV || 'development'; const User = require('./user'); // config/config.json 파일에 있는 설정값들을 불러온다. // config객체의 env변수(development)키 의 객체값들을 불러온다. // 즉, 데이터베이스 설정을 불러온다고 말할 수 있다. const config = require('../config/config')[env] const db = {}; // new Sequelize를 통해 MySQL 연결 객체를 생성한다. const sequelize = new Sequelize(config.database, config.username, config.password, config) // 연결객체를 나중에 재사용하기 위해 db.sequelize에 넣어둔다. db.Sequelize = Sequelize; db.sequelize = sequelize; User.init(sequelize); // 모듈로 꺼낸다. module.exports = db; <config.json>{ "development": { "username": "root", "password": "tkfkdgo12", "database": "nodejs", "host": "localhost", "dialect": "mysql" }, "test": { "username": "root", "password": null, "database": "database_test", "host": "127.0.0.1", "dialect": "mysql" }, "production": { "username": "root", "password": null, "database": "database_production", "host": "127.0.0.1", "dialect": "mysql" } } <오류메시지> 비밀번호 설정도 다해줬는데 모르겠습니다 ㅠㅠ
미해결
따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
npm run dev를 하니 다음과 같은 오류가 납니다. PS C:\Users\82105\Downloads\boilerplate-mern-stack-master> npm run dev > react-boiler-plate@1.0.0 dev > concurrently "npm run backend" "npm run start --prefix client" [1] [1] > client@0.1.0 start [1] > react-scripts start [1] [0] [0] > react-boiler-plate@1.0.0 backend [0] > nodemon server/index.js [0] [0] [nodemon] 1.19.4 [0] [nodemon] to restart at any time, enter rs [0] [nodemon] watching dir(s): . [0] [nodemon] watching extensions: js,mjs,json [0] [nodemon] starting node server/index.js [0] (node:9916) Warning: Accessing non-existent property 'count' of module exports inside circular dependency [0] (Use node --trace-warnings ... to show where the warning was created) [0] Server Listening on 5000 [0] (node:9916) Warning: Accessing non-existent property 'findOne' of module exports inside circular dependency [0] (node:9916) Warning: Accessing non-existent property 'remove' of module exports inside circular dependency [0] (node:9916) Warning: Accessing non-existent property 'updateOne' of module exports inside circular dependency [0] MongoDB Connected... [1] [HPM] Proxy created: / -> http://localhost:5000 [1] i ｢wds｣: Project is running at http://192.168.123.163/ [1] i ｢wds｣: webpack output is served from [1] i ｢wds｣: Content not from webpack is served from C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\public [1] i ｢wds｣: 404s will fallback to / [1] Starting the development server... [1] [1] Error: error:0308010C:digital envelope routines::unsupported [1] at new Hash (node:internal/crypto/hash:71:19) [1] at Object.createHash (node:crypto:133:10) [1] at module.exports (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\util\createHash.js:135:53) [1] at NormalModule._initBuildHash (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:417:16) [1] at handleParseError (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:471:10) [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:503:5 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:358:12 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:373:3 [1] at iterateNormalLoaders (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:214:10) [1] at iterateNormalLoaders (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:221:10) [1] C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\react-scripts\scripts\start.js:19 [1] throw err; [1] ^ [1] [1] Error: error:0308010C:digital envelope routines::unsupported [1] at new Hash (node:internal/crypto/hash:71:19) [1] at Object.createHash (node:crypto:133:10) [1] at module.exports (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\util\createHash.js:135:53) [1] at NormalModule._initBuildHash (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:417:16) [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:452:10 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:323:13 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:367:11 [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:233:18 [1] at context.callback (C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:111:13) [1] at C:\Users\82105\Downloads\boilerplate-mern-stack-master\client\node_modules\babel-loader\lib\index.js:59:103 { [1] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], [1] library: 'digital envelope routines', [1] reason: 'unsupported', [1] code: 'ERR_OSSL_EVP_UNSUPPORTED' [1] }
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
https://yamea-guide.tistory.com/entry/atlas-MongoError-user-is-not-allowed-to-do-action-find-on 이거땜에 2시간을 욕하고 힘들었네요 후... 어떤글도 해결이 안됐습니다 이거 따라하세요....
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
TypeError: dispatch is not a function at handleSubmit (login.tsx?11e1:23:13) 에러나는 부분은login파일의 dispatch("LOGIN", res.data ?.user); 에서 에러가 납니다. 이 강의 듣는 몇몇분들도 동일하게 나타나는 증상같은데.. 확인 한번 부탁드립니다.
미해결
탄탄한 백엔드 NestJS, 기초부터 심화까지
MongoDB가 업데이트가 되어서 DB생성시에 권한이 있어야지만 생성이 됩니다. 전 강좌에서 Mongodb Atlas 에서 사용자를 만들때 Database Access 에서 본인에게 권한을 주어야 Database 를 만들고 CollectionName 을 넣을 수 있습니다.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요, 강의를 수강하다 궁금한 점이 있어 여쭤보려합니다. React에서 배열 사용하기 1 - 리스트 렌더링(조회) 강의 16분 35초 쯤 DiaryItem에 key={it.id}값을 전달하고 뒤에 {...it}을 전달하는 코드를 작성하게 되는데 {...it}을 전달하게 되면 it 내부에 있는 id도 같이 전달되게 되는데 굳이 key값에 it.id를 중복해서 전달하는 이유가 궁금합니다. 그래서 key={it.id}를 지워보았는데 코드는 동일하게 동작하였습니다. 이유가 무엇인가요?
미해결
탄탄한 백엔드 NestJS, 기초부터 심화까지
function helloUser() { const username = prompt('What is your name?'); socket.emit('new_user', username, (data) => { drawHelloStranger(data); }); } 사용자가 처음 화면에 진입했을 때에 사용자가 이름을 입력하고 나면 ‘new_user’에 해당하는 게이트웨이 로직이 실행되는 것으로 알고 있습니다. 이 로직 안에서 ‘user_connected’에 대해 브로드 캐스팅을 해주고 있는데요 socket.broadcast.emit('user_connected', username); 프론트엔드에서 아래와 같이 connected!라는 채팅글도 화면에 나타나야 할 것 같은데 socket.on('user_connected', (username) => { drawNewChat(`${username} connected!`); }); 화면 진입자 입장에서는 connected!부분이 나타나지 않습니다. 왜 그런지 설명해주실 수 있을까요? 화면 진입자 또한 위 코드를 수행하고 있는데 화면 진입자를 제외한 나머지 사용자에게는 connected!가 나타나지만 화면 진입자는 나타나지 않는 이유가 궁금합니다.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의와 같이 다 성공적으로 하고 firebase deploy 까지 완료 했는데 강사님처럼 도메인 주소 들어가면 프로젝트가 안뜨고 사지관 같이 뜹니다 ㅜㅠ
미해결
Node.js로 웹 크롤링하기
const crawler = async() => { await Promise.all(records.map( async(r) => { const response = await axios.get(r.링크) if(response.status === 200){ const html = response.data const $ = cheerio.load(html) const text = $('.score.score_left .star_score').text() console.log(r.제목,'평점',text) } } )) } 1-4 axios-cheerio로 첫 크롤링하기 강의중 const $ = cheerio.load시 cheerio에 빗금이 처지며 deprecated라는 표시가 뜹니다. 무시하고 그냥 해도 결과는 나오지만 구글링을 해봐도 deprecated대신 사용할수있는게 없어 그냥 해야하나 아니면 다른 방법으로 대체해야하나 궁금합니다. package.json은 아래와 같습니다. "dependencies": { "axios": "^1.1.3", "cheerio": "^1.0.0-rc.12", "nodemon": "^2.0.20" }
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 강의를 듣다가 마지막에 하신 말씀이 잘 이해가 안돼서 질문드립니다. 복잡한 상태 관리 로직 분리하기 - useReducer의 22:31 부분에서 "dispatch는 함수형 업데이트 그런거 필요 없이 호출하면 알아서 현재의 state를 참조해서 자동으로 해주니 useCallback을 사용하면서 dependency array를 걱정할 필요가 없다." 라고 하셨는데 이게 무엇을 의미하는 말씀인지 말 모르겠습니다...
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 강의 잘듣고있습니다. 배포는 처음이라 해당강의를 들으면서 무작정 따라하면서 실습을 하고 있습니다. 근데 제가 모르고 drop table까지 따라해서 database가 삭제됬습니다. 그래서 우분투 back으로 간 뒤 다시 db를 생성했습니다. 근데 db는 정상적으로 생성이 됬는데 테이블을 검색해보면 다음과 같이 Empty set이 출력이 되더라고요 이러한 경우에는 다시 인스턴스를 생성해야될까요? ㅜㅜ mysql> show databases; +--------------------+ | Database | +--------------------+ | information_schema | | mysql | | performance_schema | | recipe.io | | sys | +--------------------+ 5 rows in set (0.00 sec) mysql> use recipe.io; Database changed mysql> show tables; Empty set (0.00 sec) mysql>
미해결
mongoDB 기초부터 실무까지(feat. Node.js)
await mongoose.connect(MONGO_URI, {useNewUrlParser : true , useUnifiedTopology:true , useCreateIndex:true}); useCreateIndex:true} 이부분을 추가시 mongodb 6.0이상 버전에서 MongoParseError: option usecreateindex is not supported 위와 같은 에러가 발생합니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman에서 우측 상단의 no environment를 클릭해도 다른 항목이 나오지 않습니다.
미해결
MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
이거는 reple 입니다. 리플 모델입니다. 이거는 댓글 입력했을때 들어오는 값이랑 맨위에 사진17번째줄 콘솔입니다. 포스트아이디가 없습니다.. 포스트 area 에서 postInfo 를 콘솔한것이 이것 이며 여기서 props.postID 를 가져오지를 못해서.. 값이 안들어가는것 같습니다. 혹시 강의가 업데이트 되거나 제가 잘못한 부분이있을까요..? PostArea.js 에서 댓글지역으로 프롭이렇게 보냈습니다 영상과같이.
