묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Slack 클론 코딩[실시간 채팅 with React]
useSelector가 초기값만 읽고, 상태변화를 읽지못함
안녕하세요. 선생님늦은 시간인데도 답변해주셔서 감사합니다(꾸벅)선생님께서 말씀해주신대로 useSelector를 써봤는데요.useSelector가 초기값만 읽고, updateReducer에 의해 상태가 업데이트되면,업데이트 된 값을 읽지 못합니다....1. console.log(title)이라고 썼는데, 아무것도 뜨지 않습니다2. Modal 컴포넌트에 제목을 입력을 해도 상태 변화를 읽지를 못합니다.어디서 잘못 된걸까요??const TodoItem = () =>{ const [state, dispatch] = useReducer(checkReducer, todoItem) const id = useSelector((state)=> state.update.id); const title = useSelector((state)=> state.update.title) const content = useSelector((state)=> state.update.content); const isDone = useSelector((state)=> state.update.isDone) const handleCheck = (id) =>{ dispatch(checkBox(id)); }; console.log(title) return( <SeveralItemContainer> <TodoItemContainer key={id}> <TitleContainer> <img className ="dot" src={dot} alt="icon"></img> <div className="title">{title}</div> <img onClick={ () => {handleCheck(id)}} className="noncheck" src = {isDone ? check: noncheck} alt="icon"></img> </TitleContainer> <div className="contentcontainer"> <div className="content">{content}</div> </div> </TodoItemContainer> </SeveralItemContainer> ) }; export default TodoItem; export const updateReducer = (state=initialState, action)=>{ switch(action.type){ case 'UPDATE_TITLE': return{...state, title: action.payload}; case 'UPDATE_STARTDATE': return{...state, startDate: action.payload}; case 'UPDATE_ENDDATE': return{...state, endDate:action.payload}; case 'UPDATE_CONTENT': return {...state, content: action.payload}; case 'ADD_ITEM': return {...state, id: Number(state.id)+1} //여기서 todoItem을 바로 쓸 수 없다. state나 action관련된 변수만 넣어야 한다 // 배열은 가능하지만, 객체는 전개연산자(...)를 쓸 수 없다 default: return state; } }; const rootReducer = combineReducers({ update: updateReducer, check: checkReducer, }); export default rootReducer; const Modal = ({onClick}) =>{ const [state, dispatch] = useReducer(updateReducer, initialState) const handleModalClick = (e) => { e.stopPropagation(); // 이벤트 버블링 막기 }; //사용자가 입력한 값을 추적하는 함수 const handleInputChange = (e) =>{ const {name, value} = e.target; dispatch({type: `UPDATE_${name.toUpperCase()}`, payload: value}) }; //클릭으로 적은 모든 내용을 한번에 전달 const addItem = () =>{ dispatch({type:'ADD_ITEM'}); }; return( <ModalBackGround onClick={onClick}> <ModalView onClick={handleModalClick} > <div className = "titleContainer"> <img className="dot" src = {dot} alt="icon"></img> <input value ={state.title} name = "title" className="title" placeholder="메모 제목" onChange={handleInputChange}></input> <img onClick={addItem} className="edit" src={edit} alt="icon"></img> </div> <div className="date"> <div className='일자'>일자</div> <input value ={state.startDate} name ="startDate" className ="start" placeholder="시작일" onChange={handleInputChange}></input> <div>~</div> <input value ={state.endDate} name= "endDate" className ="end" placeholder="종료일" onChange={handleInputChange}></input> </div> <div className='contentContainer'> <textarea value ={state.content} name ="content" className ="content" placeholder="메모" onChange={handleInputChange}> </textarea> </div> </ModalView> </ModalBackGround> ) }; export default Modal;
-
미해결Slack 클론 코딩[실시간 채팅 with React]
리덕스에서 스토어 부분 질문
안녕하세요. 선생님선생님 말씀대로 useSelector를 사용해 보려고,로컬스토리지 관련 코드들은 삭제했습니다.원하는 구현기능)질문은 Modal 컴포넌트에서 리듀서에 의해 업데이트된 상태를,todoItem 컴포넌트로 가져와서 사용이 가능한가요?todoItem 컴포넌트로 가져와서 todoData에 집어넣고 싶습니다...그래서 updateReducer에서 ADD_ITEM case를 읽을때 그때 그 상태를todoItem 컴포넌트로 가져와서 사용이 하고 싶습니다.질문)1. 위에 기능을 useSelector만 알면 가능할까요?2. 리덕스에 4단계 액션, 디스패치, 리듀서, 스토어 중 스토어 부분,저장했다가 필요할때 꺼내쓰는 부분을 잘 모르겠어요.어떤 추가적인 개념 공부가 필요할 까요? const Modal = ({onClick}) =>{ const [state, dispatch] = useReducer(updateReducer, initialState) const handleModalClick = (e) => { e.stopPropagation(); // 이벤트 버블링 막기 }; //사용자가 입력한 값을 추적하는 함수 const handleInputChange = (e) =>{ const {name, value} = e.target; dispatch({type: `UPDATE_${name.toUpperCase()}`, payload: value}) }; //클릭으로 적은 모든 내용을 한번에 전달 const addItem = () =>{ dispatch({type:'ADD_ITEM'}); }; return( <ModalBackGround onClick={onClick}> <ModalView onClick={handleModalClick} > <div className = "titleContainer"> <img className="dot" src = {dot} alt="icon"></img> <input value ={state.title} name = "title" className="title" placeholder="메모 제목" onChange={handleInputChange}></input> <img onClick={addItem} className="edit" src={edit} alt="icon"></img> </div> <div className="date"> <div className='일자'>일자</div> <input value ={state.startDate} name ="startDate" className ="start" placeholder="시작일" onChange={handleInputChange}></input> <div>~</div> <input value ={state.endDate} name= "endDate" className ="end" placeholder="종료일" onChange={handleInputChange}></input> </div> <div className='contentContainer'> <textarea value ={state.content} name ="content" className ="content" placeholder="메모" onChange={handleInputChange}> </textarea> </div> </ModalView> </ModalBackGround> ) }; export default Modal; export const updateReducer = (state=initialState, action)=>{ switch(action.type){ case 'UPDATE_TITLE': return{...state, title: action.payload}; case 'UPDATE_STARTDATE': return{...state, startDate: action.payload}; case 'UPDATE_ENDDATE': return{...state, endDate:action.payload}; case 'UPDATE_CONTENT': return {...state, content: action.payload}; case 'ADD_ITEM': return {...state, id: Number(state.id)+1} //여기서 todoItem을 바로 쓸 수 없다. state나 action관련된 변수만 넣어야 한다 // 배열은 가능하지만, 객체는 전개연산자(...)를 쓸 수 없다 default: return state; } }; const TodoItem = () =>{ const [state, dispatch] = useReducer(checkReducer, todoItem) const [todoData, setTodoData] = useState(todoItem); const handleCheck = (id) =>{ dispatch(checkBox(id)); }; return( <SeveralItemContainer> { todoData.map((item)=>{ return ( <TodoItemContainer key={item.id}> <TitleContainer> <img className ="dot" src={dot} alt="icon"></img> <div className="title">{item.title}</div> <img onClick={ () => {handleCheck(item.id)}} className="noncheck" src = {item.isDone ? check: noncheck} alt="icon"></img> </TitleContainer> <div className="contentcontainer"> <div className="content">{item.content}</div> </div> </TodoItemContainer> ) }) } </SeveralItemContainer> ) }; export default TodoItem;
-
해결됨Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
입/출력 비동기 처리 순서 문제
이벤트 기반 파일 입/출력 강의에서 예제를 통해 프로세스가 요청한 작업의 순서와 운영체제가 실제로 해당 작업들을 처리하는 순서가 달라질 수 있다는 것을 보여주셨습니다.저는 이 예제의 결과를 보면서 프로세스에서 요청한 작업들이 커널 레벨의 큐에 순차적으로 삽입된다고 하더라도, 결국 운영체제도 큐에서 꺼낸 작업들을 비동기로 처리한다는 것으로 이해했는데요. 서로 다른 작업들을 비동기로 처리하기 위해서는, 결국 각 작업들이 서로의 완료 여부와는 관계 없이 독립적으로 수행되기 위해 멀티 Threading과 같은 방식을 처리될 것으로 예상됩니다.궁금한 점은 여기서 생겨났는데요, 이렇게 최종 작업마저 비동기로 처리하게 되면 I/O 작업의 순서가 꼬여 프로세스 입장에서 기대하는 파일의 최종 상태와 실제로 모든 작업을 끝마친 파일의 상태가 달라지는 경우가 발생할 수 있지 않나요?만약에 발생하지 않는다면, 왜 발생하지 않는지 궁금합니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
nextTick과 promise 우선순위에 대한 "type": "module"의 영향
package.json에서 "type": "module" 설정 유무에 따라 우선 순위가 다르게 나오는 이유가 궁금합니다.setImmediate(() => { console.log("immediate"); }); process.nextTick(() => { console.log("nextTick"); }); setTimeout(() => { console.log("timeout"); }, 0); Promise.resolve().then(() => console.log("promise"));위의 코드로 설정없이 실행 시 강의 처럼 동일한 결과가 출력되는데설정을 추가 하면 아래처럼 promise가 더 먼저 출력됩니다.이러한 결과에 대한 원인이 궁금합니다!!
-
미해결Slack 클론 코딩[실시간 채팅 with React]
로그인 후 페이지가 뜨지 않습니다
Throttling navigation to prevent the browser from hanging. See <URL>. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection Throttling navigation to prevent the browser from hanging. See https://crbug.com/1038223. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection 계속 강의 잘 듣고 있었는데 며칠 전부터 이런 에러 메시지가 뜨면서 로그인해서 넘어가면 아무 화면도 뜨지 않습니다. git reset --hard로 이전 코드로 돌려놔봐도 전에는 잘 되던 코드도 지금 안됩니다.구글링해봐도 무슨 말인지 잘 모르겠는데 뭐가 문제일까요....
-
해결됨[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
추가 강의 좀 올려주시면 감사하겠습니다^^
[섹션0_Node.js 기초 다지기] 파트에서MySQL 연동하기 동영상 강좌에는 13_app_mysql.js 파일까지 강의가 진행되었는데정적파일처리 영상을 보게 되면 16_static.js로 강의부터 강의가 진행되다보니뭔가 좀 이상하다 싶어 우연히 발견하게 되었습니다.14_route.js 파일 영상과 15_app_route_module에 관련된 동영상 강의가 없어서 문의 드립니다.
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
초기 세팅이게 맞는건가요?
알려주신대로 세팅을 해봤는데, 이게 맞는건가요?강의에 보이는 선생님 세팅과 뭔가 다른것 같아서요 ㅜ첫번째 사진은 폴더를 펼치지 않은것, 나머지 사진은 폴더를 모두 열어제낀것 입니다이 상태로 다음 강의 진행해도 문제없을까요?
-
미해결[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
개발자님이 예시로 해서 Mysql에 넣은 데이터들을 알수있을까요?
안녕하세요. 현재 mysql 연동하기 강의를 듣고 있는데, 개발자님이 예시로 해서 Mysql에 넣은 데이터들을 알수있을까요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
config.json 파일을 불러올 수 없습니다.
안녕하세요 선생님npm start 실행하면 config파일이 잘 불러와지는데npm run test를 실행하면 config 파일이 불러와지지 않는 것 같습니다. routes/auth.test.js ● Test suite failed to run TypeError: Cannot read properties of undefined (reading 'database') 10 | const db = {}; 11 | const sequelize = new Sequelize( > 12 | config.database, config.username, config.password, config, | ^ 13 | ); 14 | 15 | db.sequelize = sequelize; at Object.database (models/index.js:12:12) at Object.require (app.js:17:21) at Object.<anonymous> (routes/auth.test.js:1:30) npm run test를 했을 때 뜨는 오류입니다.{ "development": { "username": "root", "password": "비밀번호", "database": "nodebird", "host": "127.0.0.1", "dialect": "mysql" },config/config.json 파일에 developmont도 존재합니다.const Sequelize = require('sequelize'); const fs = require('fs'); const path = require('path'); const env = process.env.NODE_ENV || 'development'; console.log(env); const config = require('../config/config')[env]; console.log(config) const db = {}; const sequelize = new Sequelize( config.database, config.username, config.password, config, );models/index.js 파일입니다.npm start를 실행하면 에러없이 실행되고, console.log도 실행되어서 env, config 다 undefined가 아님을 확인했습니다.어떤 부분이 문제인지 감을 잘 잡지 못하겠습니다.힌트 좀 주실 수 있을까요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
setSignUpError(error.response.data);에 data 가 TypeError: Cannot read properties of undefined (reading 'data')라고 뜹니다.
setSignUpError(error.response.data);이 부분의 data에 typeerror가 뜹니다.왜 뜨는지 검색을 해봐도 모르겠어서 질문 남깁니다.
-
해결됨Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
tcp 통신 관련하여 질문드립니다
안녕하세요 선생님~tcp 관련해서 질문을 드리고 싶습니다. ^^tcp 버퍼라는게 따로 존재하나요? 아니면 소켓 버퍼가 곧 tcp 버퍼인가요?segmentation된 데이터는 어디서 조립되나요? 만약 소켓 버퍼에서 조립된다면 recv했을 때 덜 조립된 데이터를 받거나 하진 않는지 궁금합니다.관련 책에서 본 내용인데요, 송신 버퍼에 1바이트의 여유만 있어도 tcp는 send가 가능하다는데 이러면 데이터가 다른 관련없는 데이터와 섞여서 송신되거나 하지는 않나요?다른건 안그러는데 이상하게 네트워크 쪽만 공부하면 자꾸 깊게 파고들려고 하네요. ;;호기심을 적당히 가져야 진도를 빠르게 뺄텐데... 그래도 좋게 생각해야겠죠? ㅎㅎ항상 좋은 강의 감사드립니다~^^
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
Error: Unable to call `followerIdList["includes"]`, which is undefined or falsey
로그인 후 포스팅 하나 작성하면 계속 에러가 발생합니다.exports.renderMain = async (req, res, next) => { try { const posts = await Post.findAll({ include: { model: User, attributes: ['id', 'nick'], }, order: [['createdAt', 'DESC']] // 최신순 정렬(작성일 기준 내림차순) }); res.render('main', { title: 'NodeBird', twits: posts }); } catch (error) { console.error(error); next(error); } };renderMain 메서드에서 따로 follwerIdList를 보내지 않는 것 같은데 {% for twit in twits %} <div class="twit"> <input type="hidden" value="{{twit.User.id}}" class="twit-user-id"> <input type="hidden" value="{{twit.id}}" class="twit-id"> <div class="twit-author">{{twit.User.nick}}</div> {% if not followerIdList.includes(twit.User.id) and twit.User.id !== user.id %} <button class="twit-follow">팔로우하기</button> {% endif %} <div class="twit-content">{{twit.content}}</div> {% if twit.img %} <div class="twit-img"><img src="{{twit.img}}" alt="섬네일"></div> {% endif %} </div> {% endfor %}followerIdList는 어디서 나온 어디서 나온건지 찾을 수가 없습니다..
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
Unkown column 'Post.UserId' in 'field list'
rendermain Executing (default): SELECT `Post`.`id`, `Post`.`content`, `Post`.`img`, `Post`.`createdAt`, `Post`.`updatedAt`, `Post`.`UserId`, `User`.`id` AS `User.id`, `User`.`nick` AS `User.nick` FROM `posts` AS `Post` LEFT OUTER JOIN `users` AS `User` ON `Post`.`UserId` = `User`.`id` AND (`User`.`deletedAt` IS NULL) ORDER BY `Post`.`createdAt` DESC; Error at Query.run (C:\Users\user\study\nodejs\nodebird\node_modules\sequelize\lib\dialects\mysql\query.js:52:25) at C:\Users\user\study\nodejs\nodebird\node_modules\sequelize\lib\sequelize.js:315:28 at processTicksAndRejections (internal/process/task_queues.js:95:5) at async MySQLQueryInterface.select (C:\Users\user\study\nodejs\nodebird\node_modules\sequelize\lib\dialects\abstract\query-interface.js:407:12) at async Function.findAll (C:\Users\user\study\nodejs\nodebird\node_modules\sequelize\lib\model.js:1140:21) at async exports.renderMain (C:\Users\user\study\nodejs\nodebird\controllers\page.js:16:23) { name: 'SequelizeDatabaseError', parent: Error: Unknown column 'Post.UserId' in 'field list' at Packet.asError (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\packets\packet.js:728:17) at Query.execute (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\commands\command.js:29:26) at Connection.handlePacket (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\connection.js:489:32) at PacketParser.onPacket (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\connection.js:94:12) at PacketParser.executeStart (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\packet_parser.js:75:16) at Socket.<anonymous> (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\connection.js:101:25) at Socket.emit (events.js:400:28) at addChunk (internal/streams/readable.js:293:12) at readableAddChunk (internal/streams/readable.js:267:9) at Socket.Readable.push (internal/streams/readable.js:206:10) { code: 'ER_BAD_FIELD_ERROR', errno: 1054, sqlState: '42S22', sqlMessage: "Unknown column 'Post.UserId' in 'field list'", sql: 'SELECT `Post`.`id`, `Post`.`content`, `Post`.`img`, `Post`.`createdAt`, `Post`.`updatedAt`, `Post`.`UserId`, `User`.`id` AS `User.id`, `User`.`nick` AS `User.nick` FROM `posts` AS `Post` LEFT OUTER JOIN `users` AS `User` ON `Post`.`UserId` = `User`.`id` AND (`User`.`deletedAt` IS NULL) ORDER BY `Post`.`createdAt` DESC;', parameters: undefined }, original: Error: Unknown column 'Post.UserId' in 'field list' at Packet.asError (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\packets\packet.js:728:17) at Query.execute (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\commands\command.js:29:26) at Connection.handlePacket (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\connection.js:489:32) at PacketParser.onPacket (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\connection.js:94:12) at PacketParser.executeStart (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\packet_parser.js:75:16) at Socket.<anonymous> (C:\Users\user\study\nodejs\nodebird\node_modules\mysql2\lib\connection.js:101:25) at Socket.emit (events.js:400:28) at addChunk (internal/streams/readable.js:293:12) at readableAddChunk (internal/streams/readable.js:267:9) at Socket.Readable.push (internal/streams/readable.js:206:10) { code: 'ER_BAD_FIELD_ERROR', errno: 1054, sqlState: '42S22', sqlMessage: "Unknown column 'Post.UserId' in 'field list'", sql: 'SELECT `Post`.`id`, `Post`.`content`, `Post`.`img`, `Post`.`createdAt`, `Post`.`updatedAt`, `Post`.`UserId`, `User`.`id` AS `User.id`, `User`.`nick` AS `User.nick` FROM `posts` AS `Post` LEFT OUTER JOIN `users` AS `User` ON `Post`.`UserId` = `User`.`id` AND (`User`.`deletedAt` IS NULL) ORDER BY `Post`.`createdAt` DESC;', parameters: undefined }, sql: 'SELECT `Post`.`id`, `Post`.`content`, `Post`.`img`, `Post`.`createdAt`, `Post`.`updatedAt`, `Post`.`UserId`, `User`.`id` AS `User.id`, `User`.`nick` AS `User.nick` FROM `posts` AS `Post` LEFT OUTER JOIN `users` AS `User` ON `Post`.`UserId` = `User`.`id` AND (`User`.`deletedAt` IS NULL) ORDER BY `Post`.`createdAt` DESC;', parameters: {} } GET / 500 25.038 ms - 2481 GET /main.css 200 2.256 ms - 2609 exports.renderMain = async (req, res, next) => { console.log('rendermain') try { const posts = await Post.findAll({ include: { model: User, attributes: ['id', 'nick'], }, order: [['createdAt', 'DESC']] // 최신순 정렬(작성일 기준 내림차순) }); console.log(posts); res.render('main', { title: 'NodeBird', twits: posts }); } catch (error) { console.error(error); next(error); } };안녕하세요 선생님npm run start 서버 띄우고 localhost:8001 로 갔을 때 나오는 에러 입니다.사진도 같이 띄웁니다.controller/page.js 에서 16번째 줄에서 에러가 발생하길래 확인하였는데위 에러 코드에서 보이듯이 sql문에 Post테이블의 UserId 컬럼이 포함되어 있었습니다.Post 테이블 만들 때 UserId 컬럼을 명시한 적이 없는데 왜 sql 문에 포함되었는지 잘 이해가 안 갑니다ㅠㅠ
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
windows에서 nodemon을 통한 app.js 실행 문제
안녕하세요 선생님windows 11 운영체제 플랫폼에서 강의를 수강하고 있습니다.webstorm IDE 사용하고 있습니다.nvm windows를 설치해서 사용 중이며 node 18 lts 버전을 사용 중에 있습니다.npm i nodemon --save-devpackage.json에 devDependencies에 추가한 상태입니다.선생님과 똑같이 cmd 창에서 node app 입력했을 경우 잘 실행이 되었는데요.nodemon app 을 입력했을 경우 다음과 같이 실행할 수 없습니다.C:\Users\mingyo\study\nodejs\nodePractice\express>nodemon app'nodemon'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.C:\Users\mingyo\study\nodejs\nodePractice\express>nodemon app.js'nodemon'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.찾아봤을 때는nodemon을 -g 옵션을 줘서 전역으로 설치하는 방법시스템 환경 변수를 수정(?)하는 방법이렇게 크게 두 가지 방법이 있는 것 같았습니다.global 설치는 선생님이 별로 추천하지 않는다고 하셔서 어떤 해결 방법을 사용하는 걸 추천하시는지 궁금합니다.아 그리고 nvm windows를 사용해서 node를 다운받았는데, nvm windows 사용으로 인해 이 문제가 발생한 건지도 궁금합니다.조금 찾아보긴 했는데 이렇게 질문드리는 게 적절한지 잘 모르겠습니다.
-
해결됨Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
Wireshark을 어떻게 분석해야 하나요?
안녕하세요 선생님^^강의를 보면서 Wireshark 분석도 따라해보고 있는데요,제가 루프백 환경에서 진행을 하고 있어서 그런지 뭔가 뒤죽박죽 같더라구요특히 14번 패킷은 아무데서도 Ack=5가 안나왔는데 Seq=5를 보내니까저로서는 도저히 뭐가 뭔지 모르겠어서.. ㅠㅠ;;어디서부터 실마리를 잡아야 할까요..?분석 관련해서 조언을 얻고 싶습니다!!
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
몽고디비 몽구스와 socket.io를 활용한 실시간 채팅 페이지
안녕하세요.현재 프로젝트 시작했는데 백엔드 배정받아 급하게 강의 결제후 듣고 있습니다.인스타그램 같은 어플을 만들 예정인데, 저는 채팅쪽 파트를 맡게 되었습니다.리액트, node.js mongodb, mongoose를 사용하기로 했으며 제가 구현해야 하는 기능은 이렇습니다.아이디를 검색했을 때 나오는 유저와 채팅하기 버튼을 누르면, 그 유저와 1대1 채팅이 가능하도록 해야합니다. 그리고 채팅 후 방을 둘 다 나가기 하지 않는 이상 채팅방은 계속 유지되어 계속 채팅을 이어나갈 수 있어야 합니다.스키마작성부터 CRUD 코드 작성, 서비스코드 작성, 라우터 코드 작성까지,, 손도 못대겠네요 ㅎㅎ아무리 머리를 쥐어 짜내봐도, 어떻게 구현해야할지 감조차 안잡혀서 유튜브 검색해보면 외국인 강좌들 밖에 안나와서,, 어떻게 해야할까요ㅎㅎfigma는 위와 같습니다.프론트만 해보다 보니 뭘 어떻게 해야할지 모르겠어요,,,ㅠㅠ
-
미해결Slack 클론 코딩[실시간 채팅 with React]
안읽은메세지 표시
안녕하세요 제로초님mutate(0)으로 했는데도 콘솔찍어보니까 다시 1로 변합니다channel부분만 이러네요
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
npm i typescript 충돌 오류
npm i typescript 작성 시 아래와 같은 오류가 뜹니다. 종속성 해결 과정에서 충돌이 발생한 것으로 보이는데, 여기서 --force를 해서 설치를 하면 실행 될 것 같긴한데 그렇게 했을때는 결국 문제가 터졌던 경험들이 있어서 어떻게 하면 되는지 잘 모르겠습니다./c/02WorkSpace/sleact/alecture (master)$ npm i typescriptnpm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR!npm ERR! While resolving: react-custom-scrollbars@4.2.1npm ERR! Found: react@17.0.2npm ERR! node_modules/reactnpm ERR! peer react@">=16.8.0" from @emotion/react@11.10.6npm ERR! node_modules/@emotion/reactnpm ERR! peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.10.6npm ERR! node_modules/@emotion/stylednpm ERR! @emotion/styled@"^11.1.5" from the root projectnpm ERR! @emotion/react@"^11.1.5" from the root projectnpm ERR! peer react@">=16.8.0" from @emotion/styled@11.10.6npm ERR! node_modules/@emotion/stylednpm ERR! @emotion/styled@"^11.1.5" from the root projectnpm ERR! 10 more (@emotion/use-insertion-effect-with-fallbacks, ...)npm ERR!npm ERR! Could not resolve dependency:npm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from react-custom-scrollbars@4.2.1npm ERR! node_modules/react-custom-scrollbarsnpm ERR! react-custom-scrollbars@"^4.2.1" from the root projectnpm ERR!npm ERR! Conflicting peer dependency: react@16.14.0 npm ERR! node_modules/reactnpm ERR! peer react@"^0.14.0 || ^15.0.0 || ^16.0.0" from react-custom-scrollbars@4.2.1npm ERR! node_modules/react-custom-scrollbars npm ERR! react-custom-scrollbars@"^4.2.1" from the root projectnpm ERR!npm ERR! Fix the upstream dependency conflict, or retrynpm ERR! this command with --force or --legacy-peer-depsnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.npm ERR!npm ERR!npm ERR! For a full report see:npm ERR! C:\Users\KG.Park\AppData\Local\npm-cache\_logs\2023-05-16T00_56_02_463Z-eresolve-report.txtnpm ERR! A complete log of this run can be found in:
-
미해결Electron과 NodeJS 그리고 Socket.io를 이용한 채팅 어플리케이션 개발
강의
안녕하세요리액트 관련해서 일렉트론을 수강하려고 했는데, 그 수업이 아니라고 하셔서 제의도와 맞지않아 환불을 원합니다..환불 부탁드려요 감사합니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
데이터 초기화 후
안녕하세요 제로초님 이미지가 안들어가져서 데이터를 삭제하고 다시 만들었는데 갑자기 잘되던것들이 이렇게 오류가 계속뜨네요. 아래는 현재 데이터 테이블들입니다