176만명의 커뮤니티!! 함께 토론해봐요.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
백엔드 run은 가능하지만, front에서 run이 안되더라구요. 원인은 webpack 관련 에러인 것을 확인했고, chat gpt를 통해 에러 해결하려 하니, 또 다른 에러가 발생했습니다. 제가 잘못 건들인건지 잘 모르겠지만, 왜 그런지 알고 싶습니다. 혹시나 해서 깃도 같이 올려드립니다. https://github.com/bukwon/boiler-plate
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
우선 노드 설치페이지가 기존과 매우 크게 달라져서 해당 부분 업데이트를 해주시거나 피드백을 주셔야 할 것 같습니다. 그래도 우선 사이트에 들어가서 설치를 시도해 보았는데요 이와 같은 화면이 떠서 우선 여기에 제공된 코드를 복사하여 cmd에서 실행을 하였으나 설치중 아래와 같은 에러가 발생하였습니다. 강의제공자께서 보여주신 설치화면과 매우 달라서 어떻게 접근해야할 지 부터 어려웠고, 시도를 했음에도 에러가 이렇게 생기는데 어떻게 해야 제대로 노드가 설치가 될까요? 일단 설치가 되어야 다음 단계로 넘어가든 할 텐데 해결이 안되고 있습니다...
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
1번 질문 next9 버전을 다운받아서 실행 했더니 오류가 나서 찾아봤는데 node버전이 높아서 호환 관련 문제로 실행이 안되는 오류가 있었습니다. next14 버전으로 진행했는데 앞으로도 괜찮나요? 2번 질문 pages 폴더안에 index.js파일은 /이고 그 외에 이름은 /profile, /signup 구조인것 같은데 어떤 경우에 폴더구조를 사용하고 어떤 경우에 js파일의 이름을 변경해서 사용해야 하는지 궁금합니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
react를 실행하려는데 해당 에러가 발생했습니다. 어떻게 해결해야 할까요? 검색해도 나와있지 않습니다
미해결
[리뉴얼] React로 NodeBird SNS 만들기
프론트 axios에서 baseurl을 https://api.count101.shop으로 설정했는데 요청을 보내보니깐 request url이 https://count101.shop/https/api.count101.shop/user/autoLogin 이런식으로 앞에 https://count101.shop이 붙어버리는데 어디를 수정해야 될 지 모르겠습니다,,
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
상품 등록시에 판매자 데이터를 넣는거같은데 gpl query문에서 seller, buyer를 어떤 형식으로 작성해야 되는지 모르겠습니다 데이터는 fetchUserLoggedin으로 넣는게 맞는지도 궁금합니다
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
실시간 채팅방 강좌 코드를 작성하여 작동 시켜 본 결과 메시지 전송 까지는 잘 되는 것을 확인 하였는데 GIF 업로드 시 다음 그림과 같은 현상이 발생하고 있습니다 그림 하단에 표시한 부분 처럼 처음에 GIF 올리기를 하면 그림이 보이지 않다가 새로 고침을 하면 위의 다른 GIF 처럼 잘 보이긴 하는데 무슨 문제 일까요? 참고로 관련 코드를 같이 올립니다 chat.html {% extends 'layout.html' %} {% block content %} <h1>{{title}}</h1> <a href="/" id="exit-btn">방 나가기</a> <fieldset> <legend>채팅 내용</legend> <div id="chat-list"> {% for chat in chats %} {% if chat.user === user %} <div class="mine" style="color: {{chat.user}}"> <div>{{chat.user}}</div> {% if chat.gif %}} <img src="/gif/{{chat.gif}}"> {% else %} <div>{{chat.chat}}</div> {% endif %} </div> {% elif chat.user === 'system' %} <div class="system"> <div>{{chat.chat}}</div> </div> {% else %} <div class="other" style="color: {{chat.user}}"> <div>{{chat.user}}</div> {% if chat.gif %} <img src="/gif/{{chat.gif}}"> {% else %} <div>{{chat.chat}}</div> {% endif %} </div> {% endif %} {% endfor %} </div> </fieldset> <form action="/chat" id="chat-form" method="post" enctype="multipart/form-data"> <label for="gif">GIF 올리기</label> <input type="file" id="gif" name="gif" accept="image/gif"> <input type="text" id="chat" name="chat"> <button type="submit">전송</button> </form> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script> const socket = io.connect('http://localhost:8005/chat', { path: '/socket.io', }); socket.emit('join', new URL(location).pathname.split('/').at(-1)); socket.on('join', function (data) { const div = document.createElement('div'); div.classList.add('system'); const chat = document.createElement('div'); div.textContent = data.chat; div.appendChild(chat); document.querySelector('#chat-list').appendChild(div); }); socket.on('exit', function (data) { const div = document.createElement('div'); div.classList.add('system'); const chat = document.createElement('div'); div.textContent = data.chat; div.appendChild(chat); document.querySelector('#chat-list').appendChild(div); }); socket.on('chat', function (data) { const div = document.createElement('div'); if (data.user === '{{user}}') { div.classList.add('mine'); } else { div.classList.add('other'); } const name = document.createElement('div'); name.textContent = data.user; div.appendChild(name); if (data.chat){ const chat = document.createElement('div'); chat.textContent = data.chat; div.appendChild(chat); } else { const gif = document.createElement('img'); gif.sr = '/gif/' + data.gif; div.appendChild(gif); } div.style.color = data.user; document.querySelector('#chat-list').appendChild(div); }); document.querySelector('#chat-form').addEventListener('submit', function (e) { e.preventDefault(); if (e.target.chat.value) { axios.post('/room/{{room._id}}/chat', { chat: this.chat.value, }) .then( () => { e.target.chat.value = ''; }) .catch( (err) => { console.error(err); }); } }); document.querySelector('#gif').addEventListener('change', function (e) { console.log('******',e.target.files); const formData = new FormData(); formData.append('gif', e.target.files[0]); axios.post('/room/{{room._id}}/gif', formData) .then( () => { e.target.file = null; }) .catch( (err) => { console.error(err); }); }); </script> {% endblock %} routes/index.js const express = require('express'); const { renderMain, renderRoom, createRoom, enterRoom, removeRoom, sendChat, sendGif } = require('../controllers'); const multer = require('multer'); const fs = require('fs'); const path = require('path'); const router = express.Router(); router.get('/', renderMain); router.get('/room', renderRoom); router.post('/room', createRoom); router.get('/room/:id', enterRoom); router.delete('/room/:id', removeRoom); router.post('/room/:id/chat', sendChat); try {fs.readdirSync('uploads'); } catch (err) { console.error('uploads 폴더가 없어 uploads 폴더를 생성합니다.'); fs.mkdirSync('uploads'); } const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, 'uploads/'); }, filename(req, file, done ) { const ext = path.extname(file.originalname); done(null, path.basename(file.originalname, ext) + Date.now() + ext); }, }), limits: {fileSize: 5 * 1024 *1024 }, }) router.post('/room/:id/gif', upload.single('gif'), sendGif); module.exports = router; controllers/index.js const Room = require('../schemas/room'); const Chat = require('../schemas/chat'); const { removeRoom: removeRoomService } = require('../services'); exports.renderMain = async ( req, res, next ) => { try{ const rooms = await Room.find({}); res.render('main', {rooms, title: 'GIF 채팅방'}); } catch (error) { console.error(error); next(error); } }; exports.renderRoom = ( req, res, next ) => { res.render('room', { title: 'GIF 채팅방 생성'}); }; exports.createRoom = async ( req, res, next ) => { try{ const newRoom = await Room.create({ title: req.body.title, max: req.body.max, owner: req.session.color, password: req.body.password, //session data 에서 옮 }); const io = req.app.get('io'); io.of('/room').emit('newRoom', newRoom); // 방에 들어가는 부분 if (req.body.password ) { res.redirect(`/room/${newRoom._id}?password=${req.body.password}`); } else { res.redirect(`/room/${newRoom._id}`); } } catch (error) { console.error(error); next(error); } }; exports.enterRoom = async( req, res, next ) => { try{ const room = await Room.findOne({_id: req.params.id}); if (!room){ return res.redirect('/?error=존재하지 않는 방입니다.'); } if (room.password && room.password !== req.query.password ){ return res.redirect('/?error=비밀번호가 틀렸습니다.'); } const io = req.app.get('io'); const { rooms } = io.of('/chat').adapter; if (room.max <= rooms.get(req.params.id)?.size) { return res.redirect('/?error=허용 인원을 초과하였습니다.'); } const chats = await Chat.find({room: room._id }).sort('createdAt'); res.render('chat', { title: 'GIF 채팅방 생성', chats , room, user: req.session.color }); } catch (error) { console.error(error); next(error); } }; exports.removeRoom = async ( req, res, next ) => { try { await removeRoomService(req.params.id ); res.send('ok'); setTimeout(() => { req.app.get('io').of('/room').emit('removeRoom', req.params.id); }, 2000) } catch (error) { console.error(error); next(error); } }; exports.sendChat = async (req, res, next ) =>{ try { const chat = await Chat.create({ room: req.params.id, user: req.session.color, chat: req.body.chat, }); req.app.get('io').of('/chat').to(req.params.id).emit('chat', chat); res.send('ok'); } catch( error ){ console.error(error); next(error); } } exports.sendGif = async (req, res, next ) => { try { const chat = await Chat.create({ room : req.params.id, user: req.session.color, gif: req.file.filename, }) setTimeout(() => { req.app.get('io').of('/chat').to(req.params.id).emit('chat',chat); }, 1000); res.send('ok'); } catch (error) { console.error(error); next(error); } } [제로초 강좌 질문 필독 사항입니다] 질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다. 도움이 되는 질문을 하는 방법을 알려드립니다. https://www.youtube.com/watch?v=PUKOWrOuC0c 0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다. 1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다. 2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다. 3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요. 4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요. 5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다. 6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
만약 도커로 백엔드 실행하기싫고, 내 로컬에서 백엔드 실행한다고하면 mongoose .connect("mongodb://my-database:27017/mydocker") .then(() => { console.log("DB 연결 성공"); }) .catch((err) => console.log("DB 연결 실패", err)); connect부분을 로컬호스트:27017로만 변경하면 되는거는 알겠는데.. 너무 번거로운거같은데 혹시 .env에 설정하는 방식같은게 없을까요? 예를들면 프로덕션, 개발모드에 따라서env를 바꿀수있잖아유 그런것처럼 도커컨테이너 환경 혹은 그냥 로컬에서 백엔드 실행했을때환경 이런걸 구분할수있는 방법은없나유?
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
AI 답변이 어느정도 편리할 수 있단 건 인정하지만, 질문 답변도 강의서비스에 포함된 것인데 어느 순간부터 강의제공자님의 직접답변은 달리지 않고 AI 답변만 달리네요. 그것만으로 전혀 충분하지 않은데 말이죠 그리고 AI 답변은 기존 데이터가 없으면 답변을 못해줍니다. 강의제공자로부터 피드백을 받을 수 있을 것을 기대하고 강의를 수강하는데 이렇게 질문답변 조차 제대로 해결이 되지 않고 있는 것은 문제라고 봅니다. 몇년 동안 강의를 걸어놓으 실 거면, 그리고 여러 API를 사용하실 거면 적어도 일년에 한번은 UI나 기능에 변화나 업데이트 가 있는지 확인하고 강의에 반영해주셔야 할 것 같은데 아직도 2022년 버전을 그대로 강의에 걸어두셔서 현재 UI와 완전달라 강의 진행이 제대로 안되고 있습니다. 이게 정말 제대로 되고 있는게 맞나요? 무료 강의도 아니고 돈내고 듣는 강의에서 기본적인 내용 업데이트 및 강의에 포함된 질문 답변조차 제대로 진행 되지 않는다는 건 매우 실망 스럽습니다. 강의 제공자님의 빠른 직접 답변과 피드백 부탁드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 graphql 부분에서 조금 헷갈려서 질문을 드립니다. 1. 이 부분에서 왼쪽부분에서 판매자 이름이 철수이고 createProductInput은 마우스, 정말 좋은 마우스 그리고 가격을 사용자가 저렇게 마우스 가격등을 input에 작성하면 name, detail, price가 생성된다라는 뜻으로 이해하면 좋을까요? 그리고 그 밑에 _id는 윗부분에 마우스라고 생성해서 나온 마우스라는 제품의 id를 보낸다는 뜻인지도 궁금합니다.
미해결
이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
강의에 사용된 코드 다운 받는 사이트 주소 있나요?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
내용을 찾아보니 defaultProps에 대한 지원은 향후 주요 릴리스의 함수 구성 요소에서 제거될 예정이고, 대신 JavaScript 기본 매개변수를 사용하세요. 라고 나와있는데 defaultProps 를 사용하지 않으면 기본값은 어떻게 설정해야 할까요??
미해결
mongoDB 기초부터 실무까지(feat. Node.js)
Schemaless 특성을 재생시 검은화면이 나와요 새로고침해도 같은 현상이 나오네요 ㅠ
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 14:00 쯤에 작성하신 map 함수를 이용한 EmotionItem 렌더링 파트에 질문이 있습니다. 강의에서는 아래처럼 작성하셨는데 emotionList.map((item) => { <EmotionItem key={item.emotionId} {...item} /> }); 저는 map 내부 콜백함수에서 return 을 붙이지 않으면 화면에 렌더링 되지 않더라구요. 특별히 다른 이유가 있을까요?
해결됨
차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)
안녕하세요 강의를 듣다가 궁금한 부분이 있어서 질문드립니다!! User에 대한 모델을 정의할 때 comments, likes도 정의하는 데 이 둘은 각각의 articles 모델에 대한 comments, likes라고 생각되는 데 왜 User 모델에도 정의되어 있는지 궁금합니다!! 각각의 articles 모델에 대한 comments, likes라도 User에서 정의해야 하는 건가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 수업 너무 잘 듣고 있습니다. 수업을 듣다 궁금한점이 생겼는데 제가 인강을 보면서 변수 let, const와, 리액트에서 useState부분을 보고 이해는 갔지만 제가 막상 혼자 코드를 친다고 했을때 let, const와 useState를 언제 작성을 하면 되는지 잘 모르겠더라구요. 혼자 코드를 작성을 한다고 할때 변수와 useState를 언제 작성을 하면된다라고 이해를 하면 쉽게 이해할수있을까요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
제목 그대로 입니다. 가장 최근에 업데이트 해주신게 벌써 2년전인데, 강의를 계속 걸어놓으시려면 적어도 매년 단위로UI 상태에 맞게 해당 부분만이라도 강의를 업데이트 해주셔야 할 것 같습니다.Mock server 부분 도저히 찾지못해 시간만 보내고 진척이 없습니다. 대체 어떻게 해야 하나요?
미해결
Slack 클론 코딩[백엔드 with NestJS + TypeORM]
안녕하세요. 최근에 프로젝트를 완성해서 배포까지 성공리에 마쳤는데요. 이제 운영을 해야하는데 몇가지 궁금한 점이 생겨서 질문 남기게 되었습니다. 운영을 하다보면 배포하기 전 진행한 테스트 외에도 예기치 못한 오류가 생길 수 있기때문에 서버에서 로깅하는게 굉장히 중요하다고 생각이 드는데요. 실무에서는 로깅을 따로 어떻게 하는지에 대해 궁금함이 생겼습니다. 현재 서비스의 중요한 비즈니스 로직에는 Logger를 사용해서 호출 될 때 마다, 시간과 함께 넘어가는 데이터를 같이 로깅하게끔 개발 해놨습니다. 약간 문제라고 생각되는 것은 에러가 발생 할 때, 호스팅하고있는 온프레미스 서버에 직접 접속해서 도커 컨테이너 로그를 일일이 확인해야 하는 번거로움이 있는 점입니다. 실무에서 모든 개발자들이 이렇게 확인하지 않을 것이라고 생각하는데 보통 실무에서는 어떻게 로그를 관리하시나요? 조언 부탁드립니다!
미해결
코로나맵 개발자와 함께하는 지도서비스 만들기 2
카카오 api 받아서 지도 잘 작동하고 검색창도 떳는데 키워드 검색 데이터 받아오기 강의 들으면서 잘 따라갔는데 갑자기 안됩니다 upload.js:1 Uncaught ReferenceError: require is not defined at upload.js:1:20 f12누르니까 이렇게 나옵니다 ㅠㅠ 추가적으로 vs코드에서는 파일이 CommonJS 모듈입니다. ES 모듈로 변환될 수 있습니다.ts(80001) 이런 문구가 나오네요 +그래서 upload 파일은 무시하고 지도위에 저장한 데이터 표시하기 강의까지 들었는데 이번엔 main.js:1 Uncaught ReferenceError: require is not defined at main.js:1:20 이렇게 뜨네요 require 함수가 지금까지 잘 되다가 수업이 진행될수록 왜 문제가 될까요 ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
현재 리액트부분을 시작했는데 리액트를 설치할때 yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact 이러한 명령어를 사용하는데 이렇게 설치하고 나니 제가 알고있는 폴더들이나 내용이 좀 다르더라구요. 제가 알고있는 건 npx create-react-app ./ 이러한 명령어로 리액트를 설치했는데 이거와 전혀 다른 명령어 인가요?
