묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Slack 클론 코딩[실시간 채팅 with React]
배포 방법
제가 백엔드 강의는 수강한 적이 없어서요, 대신 노드js 교과서 책을 구매해서 가지고 있는데..우선 프론트는 네트리파이로 배포 완료했습니다https://admirable-donut-f22cc6.netlify.app/백엔드 배포는 선생님 책 노드js 교과서 722쪽 AWS 배포하기 부터 보면서 하면 별 문제없지 진행할 수 있을까요? 추가적으로 백엔드쪽 코드 수정이 필요할지..배포할 레포 구조는 아래 처럼 루트 폴더 하위에 백엔드, 프론트 폴더 각각 있습니다
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
express.static의 요청 처리
app.use('/', express.static(path.join(__dirname, 'public')));다른 코드들에서는 이런 식으로 경로를 지정하면 경로와 똑같은 요청만 처리를 하거나 모든 요청에 대해 처리하고 싶으면 그냥 경로를 생략하였는데 express.static은 왜 localhost:3000/ 에 대한 요청만 받아들이는 것이 아니라, 모든 요청에 대해 해당 파일이 있는지 확인하게 되는지 궁금합니다. 예시)localhost:3000/about -> public 폴더 안에 about 파일이 있는지 찾음 localhost:3000/hello.css-> public 폴더 안에 hello.css 파일이 있는지 찾음express.static은 특별한 미들웨어 인가요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
`app.use`의 용도에 대해 질문 드립니다!
궁금한 점이 있습니다. 지금까지는 다음과 같이 app.use 안에 요청 처리를 위한 미들웨어를 작성했는데, app.use((req, res, next) => { console.log("모든 요청에 실행하고 싶어요"); next(); });다음과 같이 app.use에 다운받은 미들웨어를 장착하는 건 "이 파일에서 특정 미들웨어를 사용하겠다"는 의도로 사용하는 건가요?? 아니면 둘 다 같은 동작을 하는건데 제가 둘을 다르다고 생각하는 걸까요?app.use(morgan("dev")); app.use(cookieParser()); app.use(express.json()); app.use(express.urlencoded({ extended: true }));추가로, 위 미들웨어들로 인해 req이나 res 객체에서 편하게 .cookie나 .body를 사용할 수 있게 되는데 그럼 미들웨어 내에서 미들웨어를 사용하는 건가요 🤔🤔?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
어떤 객체가 이벤트를 발생시키는지
여러 챕터에서 객체의 on 메서드를 사용하는 코드가 자주 보여서 개념에 대해 알아보았습니다.const fs = require("fs"); console.log("before:", process.memoryUsage().rss); // 메모리 체크 // 스트림 방식으로 파일 읽고 보내기 const readStream = fs.createReadStream("./big.txt"); const writeStream = fs.createWriteStream("./big3.txt"); readStream.pipe(writeStream); readStream.on("end", () => { console.log("stream: ", process.memoryUsage().rss); });그런데 이렇게 이벤트가 발생하는 객체의 종류를 모두 외우고 있어야 하나요? 아니면 이 객체가 이벤트를 발생시키는지 예상(?), 판단할 수 있는 기준이 있나요?
-
해결됨Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
ThreadAcceptLoop 의 우아한(?) 종료에 대해 질문드립니다.
안녕하십니까, TCP/IP, IOCP 개념을 배우는데 강사님의 강의가 큰 도움이 되었습니다. 다름이 아니라, IOCP 코드를 C++ Class 로 작성중에 소멸자에서 리소스들을 해제 하려고 작성 중에 있는데 ThreadAcceptLoop 스레드를 우아하게 종료하기 위한 방법이 있는지 궁금하여 질문을 하나 드려봅니다. g_hSocket : Server Listen SocketDWORD WINAPI ThreadAcceptLoop(LPVOID pParam)while ((hClient = ::accept(g_hSocket, &ClientAddr, &nAddrSize)) != INVALID_SOCKET){ // Do Something...} 보시다싶이 ThreadAcceptLoop 함수 내부에서 ::accept() 를 처리해주고 있고 accept 에 들어가는 순간 Blocking 이 되어버립니다. 저는 스레드의 완전 종료를 위해 accept 함수를 빠져나가기 위한 방법을 찾아보니 g_hSocket = NULL 또는 INVALID_SOCKET 을 할당 해주는것 말고는 Accept 함수를 빠져나갈 수 있는 방법이 없는 것 처럼 보이더라구요. 하지만 이런식으로 NULL 할당하여 accept 를 빠져나가도록 하고 WSAGetLastError 를 호출해보면 "WSACancelBlockingCall를 호출하여 차단 작업이 중단되었습니다." 라는 에러를 확인할 수 있었습니다. g_hSocket = NULL 호출 후 해당 오류를 무시해도 지나가도 되는 코드인지, 아니면 accept Blocking 상태를 빠져나가기 위한 "우아한 방법" 이 있는지 궁금합니다. 현재 작성한 코드 순서는 아래와 같습니다. 스레드는 _beginthreadex 로 호출해서 핸들을 가지고 있습니다. ::shutdown(g_hSocket, SD_BOTH); if (g_hSocket!= INVALID_SOCKET) { ::closesocket(g_hSocket); g_hSocket= INVALID_SOCKET; // 이 시점에 accept blocking 이 풀린다! } // Accept Thread 종료를 대기하자 WaitForSingleObject(IOCPAcceptThreadHandle._threadHandle, INFINITE); CloseHandle(IOCPAcceptThreadHandle._threadHandle); 감사합니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
npm run dev 시 빌드가 매우 느려졌습니다
안녕하세요 제로초님점점 npm run dev 할 떄마다 빌드 속도가 엄청 느려지는 것 같아서요아래 단계에서만 한 5분 있어야 success 뜨더라구요구글링, 지피티로도 알아보았지만 해결되지 않아 질문 드립니다단서 될만할지는 모르겠지만 제 윈도우 pc 사양이랑 설치된 패키지 내역입니다// package.json { "name": "sleact-ts-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack serve --env development", "build": "cross-env NODE_ENV=production webpack" }, "author": "ZeroCho", "license": "MIT", "dependencies": { "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", "@loadable/component": "^5.16.4", "@mui/icons-material": "^5.16.5", "@mui/material": "^5.16.5", "@types/gravatar": "^1.8.6", "@types/react": "^18.2.42", "@types/react-dom": "^18.3.0", "autosize": "^6.0.1", "axios": "^0.26.1", "core-js": "^3.15.1", "cross-env": "^7.0.3", "gravatar": "^1.8.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.25.1", "react-router-dom": "^6.25.1", "socket.io-client": "^2.5.0", "swr": "^2.2.5", "typescript": "^4.4.2" }, "devDependencies": { "@babel/core": "^7.13.8", "@babel/preset-env": "^7.13.8", "@babel/preset-react": "^7.12.13", "@babel/preset-typescript": "^7.13.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0", "@types/autosize": "^4.0.3", "@types/fork-ts-checker-webpack-plugin": "^0.4.5", "@types/loadable__component": "^5.13.9", "@types/node": "^16.11.26", "@types/react-router-dom": "^5.3.3", "@types/socket.io-client": "^1.4.35", "@types/webpack": "^5.28.0", "@types/webpack-dev-server": "^4.0.3", "autoprefixer": "^10.4.19", "babel-loader": "^8.2.2", "css-loader": "^6.2.0", "eslint": "^8.13.0", "eslint-config-prettier": "^8.1.0", "eslint-config-react-app": "^7.0.1", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.9.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.35.0", "fork-ts-checker-webpack-plugin": "^7.2.3", "postcss": "^8.4.39", "postcss-loader": "^8.1.1", "prettier": "^2.2.1", "react-refresh": "^0.12.0", "sass": "^1.77.8", "sass-loader": "^15.0.0", "style-loader": "^3.2.1", "tailwindcss": "^3.4.4", "ts-node": "^10.0.0", "webpack": "^5.24.2", "webpack-cli": "^4.5.0", "webpack-dev-server": "^4.0.0" } }
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
논 블로킹 방식의 동작 원리 이해가 어렵습니다.
강의 교안의 논 블로킹의 정의와 책의 예제(setTimeout 함수를 이용해 작업 시간이 긴 함수를 백그라운드로 보냄)를 읽어 보면오래 걸리는 함수를 백그라운드로 보내는 것 같은데, 그 다음 설명을 보면일부 코드들이 백그라운드에서 병렬로 실행된다고 되어있어서 헷갈립니다. 위 내용을 바탕으로 제가 이해한 것은 작업 시간이 긴 함수, 일부 코드 모두 백그라운드로 전달작업 시간이 긴 함수는 태스크 큐로 전달되고 동시 작업이 가능한 일부 코드들은 백그라운드에서 병렬로 처리일부 코드들의 병렬 처리가 끝나고 나면 태스크 큐에 있는 (블로킹 방식의)작업 시간이 긴 함수 처리 인데 맞을까요?
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
alias 경로 설정 오류
안녕하세요 제로초님components 의 alias 경로가 오류가 나서요 질문 드립니다저는 src 폴더를 추가해서 한번 더 감싼 구조에서 이에 맞게 alias 경로를 세팅했는데요import { TextField, Button } from '@components'; 이렇게 불러오면 components 폴더의 index 파일이 자동으로 인식되는 걸로 알고 있는데, 에러가 뜨더라구요그래서 import { TextField, Button } from '@components/index'; 로 해야 정상적으로 불러오던데 왜 index를 별도로 입력해야 하는지 모르겠어서요반면 @assets alias 경로에 있는 icons는 index 입력 없이 index 파일을 잘 불러와서 문제가 없더라구요 // webpack.config.ts alias: { '@assets': path.resolve(__dirname, './src/assets'), '@hooks': path.resolve(__dirname, './src/hooks'), '@components': path.resolve(__dirname, './src/components'), '@layouts': path.resolve(__dirname, './src/layouts'), '@pages': path.resolve(__dirname, './src/pages'), '@utils': path.resolve(__dirname, './src/utils'), '@typings': path.resolve(__dirname, './src/typings'), }, // tsconfig.json "paths": { "@assets/*": ["./src/assets/*"], "@hooks/*": ["./src/hooks/*"], "@components/*": ["./src/components/*"], "@layouts/*": ["./src/layouts/*"], "@pages/*": ["./src/pages/*"], "@utils/*": ["./src/utils/*"], "@typings/*": ["./src/typings/*"] }
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
강의 다 듣고 수료증 받을 수 있죠?
강의 다 들으면 수료증 받을 수 있죠?제출해야되서요..
-
미해결Slack 클론 코딩[실시간 채팅 with React]
fetcher 함수의 data 값이 두번 찍히는 이유
Login.tsx에서 swr로 호출한 users의 data 값을 return 직전에 console 로그로 찍어봤는데요네트워크 탭에서는 users 요청은 한번 밖에 없었는데undefined와 false가 연달아서 찍히더라구요다른 질문에서 답변해주신 내용을 보니 데이터 로딩중엔 undefined라고 말씀해주셨는데, 맨 처음 컴포넌트가 렌더링될 때 useSWR이 api를 호출하게 되고 이때 console.log(data)는 아직 데이터가 로딩 중이라서 undefined가 찍히게 되고, 이후 데이터 로딩이 완료되면 useSWR이 다시 호출되어? false가 찍히는 프로세스로 이해했는데 맞는걸까요그렇다면 useSWR로 api호출 시 무조건 최소 2번 렌더링될 수 밖에 없는걸까요?// Login.tsx import React, { useState, useCallback, useEffect } from 'react'; import { TextField, Button } from '@components/index'; import { Link, Navigate } from 'react-router-dom'; import { useInput } from '@hooks/useInput'; import { LogoSlack } from '@assets/icons/'; import axios from 'axios'; import useSWR from 'swr'; import fetcher from '@utils/fetcher'; const Login = () => { // useSWR은 get으로 요청한 데이터를 받아와서 저장한다. // mutate : 내가 원할 때 SWR 호출하기 const { data, error, mutate } = useSWR('http://localhost:3095/api/users', fetcher, { dedupingInterval: 5000, // 주기적으로 호출하지만, dedupingInterval 기간 내에는 캐시에서 불러온다 }); const [logInError, setLogInError] = useState(false); const [email, setEmail, onChangeEmail] = useInput(''); const [password, setPassword] = useInput<string>(''); const onChangePassword = useCallback( (e: React.ChangeEvent<HTMLInputElement>) => { setPassword(e.target.value); }, [email, password, data], ); const onSubmit = useCallback( (e) => { setLogInError(false); axios .post( 'http://localhost:3095/api/users/login', { email, password }, { withCredentials: true, }, ) .then(() => { mutate(); }) .catch((error) => { setLogInError(error.response?.status === 401); }); }, [email, password], ); console.log(data); // if (data) return <Navigate to="/workspace/channel" />; return ( <div className="max-w-[400px] mx-auto px-[20px]"> <h1 className="flex justify-center pt-[60px] pb-[20px]"> <LogoSlack /> <span className="blind">Slack</span> </h1> <TextField label="이메일 주소" type="email" value={email} onChange={onChangeEmail} /> <TextField label="비밀번호" type="password" value={password} onChange={onChangePassword} /> {logInError && <p className="mb-[20px] mt-[-10px] text-red-500 font-normal">로그인 실패</p>} <Button text="로그인" onClick={onSubmit} /> <p className="mt-[10px] text-center"> Slack을 처음 사용하시나요? <Link to="/sign" className="ml-[4px] text-blue-600"> 회원가입 </Link> </p> </div> ); }; export default Login;
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
소셜로그인 User 테이블 관련 질문 있습니다.
소셜로그인을 구현하다가 의문점이 생긴 부분이 있어 어떠한 방식으로 접근하는 것이 궁금하여 질문을 남깁니다.상황일반 회원가입시에는, 이메일 비밀번호 + 해당 서비스에 필요한 필수 정보들을 받고, 해당 내용을 클라이언트로 부터 받아 user테이블에 저장하는 상황입니다.소셜 로그인 같은 경우에는, 정보를 받을 수 있는 것이 제한이 되어있어, 추가적으로 필요한 정보들을, 소셜 로그인 성공 이후, 클라이언트 측에서 회원가입시 필요한 정보들을 받을 수 있는 화면으로 이동시켜, 해당 정보를 받아서, 부족한 정보들을 채워넣는 것으로 알고 있습니다.궁금점.소셜로그인 로그인 후, 신규 유저이기에 서비스 이용에 필요한 필수 부가정보 입력을 받기위해, 회원가입 창으로 이동시켜, 부가 정보를 입력받는다면 크게 문제가 없습니다.하지만, 앱을 사용하다보면은 데이터가 끊긴다거나, 배터리가 방전된다거나, 알수없는 이유로, 로그인은 되었으나, 필수 부가정보를 입력하지 못하고, 꺼지는 경우가 있습니다. 필수 부가정보를 꼭 받아야 하는 경우라면 이 부분에 대해서 어떻게 처리해야하나요?필수 정보를 채웠는지 여부를 확인하는 column을 boolean으로 User 테이블에 추가하여, 클라이언트에서 해당 Column으로 부가정보를 입력받지 않았으면 메인화면으로 가지않고, 회원가입 스크린으로 리다이렉 시키는 이런 로직을 작성해야하나요?필수 정보를 채웠는지 여부를 확인하는 column 없이 이런 경우에 처리할 수 있는 방안이 있는지 궁금하고, 현업에서는 어떤식으로 테이블을 설계하는지 궁금합니다!
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
SequelizeEagerLoadingError: User is not associated to Post!
안녕하세요 제로초님, User 테이블이랑 Post테이블이 관계설정이 안되어있다는 에러가 떠서 문의드립니다. 분명 시퀄라이즈 관계설정하는 부분 빠짐없이 모두 따라했는데 이런 오류가 뜹니다.
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
제네릭 질문
커스텀 훅에서 사용된 제네릭에 대해서 공부하다가 궁금한게 생겨서요.아래 테스트 코드에서'+' 연산자는 'T' 및 'T' 유형에 적용할 수 없습니다. 라는 에러 코드가 발생하는 이유가 이해가 안 가서요위 함수는 사용한다면 아래 처럼 숫자 또는 문자인 타입으로 쓰일텐데, 그러면 return 값에서 + 연산자가 number + number 또는 문자열 + 문자열로 실행되어 문제가 없을 것 같은데 에러가 뜨는 이유가 모르겠어서요add<number>(1, 2); add<string>('1', '2');지피티에 질문해보니 함수 오버로드를 쓰거나 return 값에 any를 쓰라곤 하는데 잘못된 방법 같고 extends로 타입 제한을 걸어도 같은 에러가 뜹니다function add<T extends number | string>(x: T, y: T): T { return x + y; }제가 참고한 제네릭 레퍼런스 자료입니다https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Generic-%ED%83%80%EC%9E%85-%EC%A0%95%EB%B3%B5%ED%95%98%EA%B8%B0#%EC%A0%9C%EB%84%A4%EB%A6%ADgenerics_%EC%86%8C%EA%B0%9C
-
미해결Slack 클론 코딩[실시간 채팅 with React]
ts-node 대신 tsx 사용여부
질문: 1.ts-node로 이어나가도 괜찮을까요?2. outdated 명령어 쳐보니 버전이 강의에서 한두개 추가설치했지만, 이제 빨간 글씨로 10개 정도 다 버전 업그레이드를 요구했습니다.제가 고쳐나가면서 나아가보면될지 궁금합니다.ㅡㅡㅡㅡㅡㅡㅡㅡ상황: 몇주전 타입스크립트를 다른 강의로 시작했습니다.최근 환경설정에서 ts-node 사용시 오류가 계속 떠서 그 강의가 tsx 사용을 권장했고, tsx로 입문했습니다.그래서 ts-node로 잘돌아갈지 의문입니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
실시간 채팅방에서 GIF uploads 하면 GIF가 바로 화면에 보이지 않고 새로 고침을 해야 보이는데 어떻게 해야 할까요?
실시간 채팅방 강좌 코드를 작성하여 작동 시켜 본 결과 메시지 전송 까지는 잘 되는 것을 확인 하였는데 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.jsconst 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.jsconst 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=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
app.js 에서 sequelize 를 가져오는 부분이 models/index.js 있는 sequelize 를 가르키는게 맞나요?
[제로초 강좌 질문 필독 사항입니다]세션 6번app.js 시퀄라이즈 싱크에 관한 문의 입니다.const { sequelize } = require('./models');app.js 에서 시퀄라이즈를 가져오는데 해당 모둘안에는 3개의 파일 있습니다 .( user, comment, index ) index 파일만 실행하면 될거 같은데 sequelize 자져오는 이유가 궁금하고 , 여기서 가르키는 sequelize 가 index에 있는 sequelize 인지 궁금합니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
req.login에서 passport.serializeUser 호출 원리
passport로 로그인 실습을 진행중에 있습니다. passport.initialize(); 이후에 localStrategy 등록해둔 메서드를 통해 로그인 여부 확인하는 데까지는 까지는 이해가 되었습니다. 그런데 /controller/auth.js 에서 req.login 이후에 passport.serializeUser이 호출되는 방식이 이해가 안되네요.www.passportjs.org 에서문서를 읽어보고 있는데 꼼꼼함이 부족한지 이해가 잘 안되네요. req.login 메서드 자체를 passport에서 정의하고 있고 login 메서드가 호출될때 자동으로 serializeUser가 호출되는건가요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
스스로하기에서 귓속말 구현할때
socket.id로 하면맨첨엔 귓속말 잘되는데 유저가 나갔다가 들어오면 socket.id가 갱신되어서 예전에 보냈던 채팅의 귓속말 버튼으로는 귓속말이 안가게 되는데 저만 이런건가요??
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
노드 삭제 재설치
그러면 안되지만 잘못 설치했을경우 노드 삭제 재설치 및 버전 업데이트 하는 방법에 대해서 혹시 유튜브에라도 해당 내용이 있을실까요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
저는왜 렌더링 화면이 다를까요 ?
저는 이 화면으로만 보이고 domain 적는 구간이없는데.. 왜그럴까요 계속 로그인 상태 알람만 발생합니다. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>API 서버 로그인</title> <style> .input-group label { width: 200px; display: inline-block; } </style> </head> <body> {% if user and user.id %} <span class="user-name">안녕하세요! {{user.nick}}님</span> <a href="/auth/logout"> <button>로그아웃</button> </a> <fieldset> <legend>도메인 등록</legend> <form action="/domain" method="post"> <div> <label for="type-free">무료</label> <input type="radio" id="type-free" name="type" value="free"> <label for="type-premium">프리미엄</label> <input type="radio" id="type-premium" name="type" value="premium"> </div> <div> <label for="host">도메인</label> <input type="text" id="host" name="host" placeholder="ex) zerocho.com"> </div> <button>저장</button> </form> </fieldset> <table> <tr> <th>도메인 주소</th> <th>타입</th> <th>클라이언트 비밀키</th> </tr> {% for domain in domains %} <tr> <td>{{domain.host}}</td> <td>{{domain.type}}</td> <td>{{domain.clientSecret}}</td> </tr> {% endfor %} </table> {% else %} <form action="/auth/login" id="login-form" method="post"> <h2>NodeBird 계정으로 로그인하세요.</h2> <div class="input-group"> <label for="email">이메일</label> <input id="email" type="email" name="email" required autofocus> </div> <div class="input-group"> <label for="password">비밀번호</label> <input id="password" type="password" name="password" required> </div> <div>회원가입은 localhost:8001에서 하세요.</div> <button id="login" type="submit">로그인</button> </form> <script> window.onload = () => { if (new URL(location.href).searchParams.get('error')) { alert(new URL(location.href).searchParams.get('error')); } }; </script> {% endif %} </body> </html> view에 login도 위와 같이 들어가있습니다.const { User, Domain } = require("../models"); const { v4: uuidv4 } = require("uuid"); exports.renderLogin = async (req, res, next) => { try { const user = await User.findOne({ where: { id: res.user?.id || null }, include: { model: Domain } }) res.render("login", { user, domains: user?.Domains }) } catch (err) { console.error(err) next(err); } } exports.createDomain = async (req, res, next) => { try { await Domain.create({ UserId: req.user.id, host: req.body.host, type: req.body.type, client: uuidv4() }) res.redirect("/"); } catch (err) { console.error(err); next(err); } } controller에서도 강의대로 잘 렌더가 들어가있습니다. 그러니 화면이 보이긴하는데 왜 저만안보일까요..- app.js에 passport의 initialize(), session() 함수 선언되어있습니다. - cookie도 있습니다.- db에 user도 있습니다.