묻고 답해요

checkAuction() 호출 위치 질문

해결됨

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

const checkAuction = require("./checkAuction"); const app = express(); passportConfig(); checkAuction(); app.set("port", process.env.PORT || 8010); app.set("view engine", "html"); nunjucks.configure("views", { express: app, watch: true, }); sequelize .sync({ force: false }) .then(() => { console.log("데이터베이스 연결 성공"); }) .catch((err) => { console.error(err); }); 이렇게 checkAuction함수의 호출이 sequelize.sync호출보다 위에있는데 어떻게 시퀄라이즈를 쓰는checkAuction함수가 에러없이 돌아가는게 가능한 것이죠?

• node.js
• mysql
• mongodb
• express
• typescript
• socket.io
• jwt

클라이언트가 먼저 연결종료를 해야한다고 하신부분 질문입니다.

해결됨

Windows 소켓 프로그래밍 입문에서 고성능 서버까지!

클라이언트가 만약 소켓 연결을 정상 종료하지 않고 프로그램을 끄게 되는 경우 예컨데 정전으로 인해 클라이언트 PC가 종료됐다면 서버는 알턱이 없으니 결국 TimeOut을 체크해서 서버가 연결을 종료해야할 것 같은데 맞을까요? 제 생각엔 위와 같은 흐름으로 진행되고 다른 방법은 떠오르지 않는데 혹시 대응할 수 있는 방법이 있을까요?

• socket.io
• udp
• iocp
• tcpip

현업에서 환경변수 같은 건 어떻게 관리하시나요?

해결됨

실리콘밸리 엔지니어가 가르치는 파이썬 장고 웹프로그래밍

민감한 URL 이라든지 환경변수를 통해 사용하고 싶은게 있을 때 강사님께서는 어떻게 관리하시는지 궁금합니다. 그냥 UNIX 환경에서 export url = http://example.com 이런식으로 하고 os 모듈을 통해 쓰고있는데, 더 보안상 좋은 방법이 있을까요?

• python
• django
• bootstrap
• rest-api
• drf

Cannot GET / 404 에러 발생하시는분

미해결

Slack 클론 코딩[실시간 채팅 with React]

강의 7:40부근 webpack.config.ts 파일 72번째 라인 devServer: { historyApiFallback: true, // react router port: 3090, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname) }, }, 이부분 추가하시면 될것같습니다. static: { directory: path.resolve(__dirname) }

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

api 서버 만들기: 도메인주소, 클라이언트비밀키가 화면에 표시되지 않습니다.

해결됨

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

무료/프리미엄 고르고 도메인주소 입력하면 밑에 화면에 주소와 타입 비밀키가 표시되지 않습니다. 로그는 계속 이렇게만 뜨고, 워크벤치 들어가보면 키는 보입니다. 키가 발급은 되었는데, 브라우저로 못 띄우는 것 같다고 판단했습니다. 어떤 부분을 확인해봐야 될까요?

• node.js
• mysql
• mongodb
• express
• typescript
• socket.io
• jwt

프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.

미해결

Slack 클론 코딩[실시간 채팅 with React]

로그인 및 인증,인가(세션,jwt둘다 사용), 게시판(이미지포함), 댓글, 소켓채팅 정도의 기능을 구현하여 테스트 코드와 docker로 띄워서 CI/CD까지 구현하려고 합니다. 상태랑 로직 관리를 useReducer, React Context API, React Query, redux, graphql 정도로 생각하고 있는데 어떤걸로 하는게 좋을까요?!

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

npx sequelize db:create 실패

미해결

Slack 클론 코딩[실시간 채팅 with React]

mac os에서 mysql을 homebrew로 사용중입니다. root계정의 비밀번호 설정 완료했습니다. back 환경설정에서 문제를 겪고있습니다. cd back으로 경로 이동후 npm i로 node 모듈 설치 성공후에 .env파일 구성(비밀번호 맞음), npx sequelize db:create 명령어 입력시 아래와 같은 에러가 발생합니다. -- 에러메세지 시작 Sequelize CLI [Node: 16.18.0, CLI: 6.6.0, ORM: 6.28.0] Loaded configuration file "config/config.js". Using environment "development". ERROR: Failed to create schema directory 'sleact' (errno: 2 - No such file or directory) -- 에러메세지 종료 -- .env파일 시작 COOKIE_SECRET =sleactcookie MYSQL_PASSWORD =kaadal -- .env파일 종료 --config.js 시작 require('dotenv'). config (); module.exports = { "development": { "username": "root", "password": process.env.MYSQL_PASSWORD, "database": "sleact", "host": "127.0.0.1", "dialect": "mysql" }, "test": { "username": "root", "password": process.env.MYSQL_PASSWORD, "database": "sleact", "host": "127.0.0.1", "dialect": "mysql" }, "production": { "username": "root", "password": process.env.MYSQL_PASSWORD, "database": "sleact", "host": "127.0.0.1", "dialect": "mysql" } } -- config.js 종료 이상입니다.

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

room계층 소켓 연결 후 소통 질문

해결됨

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

서버쪽에선 socket.on("join", (data) => { socket.join(data); // 방 참가 socket.to(data).emit("join", { user: "system", chat: `${socket.request.session.color}님이 입장하셨습니다.`, }); }); 이렇게 room계층 소켓으로 연결했고, 해당 room으로 join이벤트를 보냈는데 브라우저 쪽에선 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) {...} /chat 네임스페이스 계층 소켓으로 밖에 연결하지 못했는데 어떻게 해당 room계층으로 온 join이벤트인지 구별하는 게 가능한지 궁금합니다. room계층보다 상위인 네임스페이스 계층에 연결했으니 어느 room으로 오든 네임스페이스만 같으면 모든 이벤트를 다 감지하게 되는 것 아닌가요?

• node.js
• mysql
• mongodb
• express
• typescript
• socket.io
• jwt

pending 질문입니다.

해결됨

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

메인화면으로가는 버튼을 빠르게 반복해서 누르면 로딩중만 나오길래 개발자모드에서 network를 보면 (pending)이렇게 나오면서 응답을 못하는상태인데 왜 그러는걸까요? 모든 함수에서 mysql에 연결하고 쿼리문 사용할때 async/await 사용하고있습니다. 로그인 미들웨어는 promise로 사용하고있는데 정확히 어떤점때문에 이러한 오류가 발생하는지 모르겠습니다. 저pending 오류를 어떻게해야 해결이 될까요?

• node.js
• mysql
• mongodb
• express
• typescript
• socket.io
• jwt

react typescript vite 설치시 오류 질문드립니다.

미해결

풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기

제목처럼 react typescript vite설치를 하려고 터미널에 yarn create vite를 입력하여 설치를 했습니다. 아래 이미지와 같이 typescript를 선택 후, 설치를 완료했는데... 아래 이미지들처럼 설치 하자마자 빨간줄들이 난무하고있습니다ㅜㅜ 아래 이미지는 package.json 파일입니다. 어떻게 해결할 수 있을까요?

• react
• typescript
• vite

부동산 매물 강좌 관련 문의

미해결

[신규 개정판] 이것이 진짜 크롤링이다 - 실전편 (인공지능 수익화)

안녕하세요! 강사님 강의를 끝까지 다 수강하였습니다. 너무 도움이 많이 되었습니다. 감사합니다. 부동산 매물 강의에 대한 공지를 보고 메일로 문의 드렸는데 아직 피드백이 오지 않아 이렇게 질문글로 문의를 드리게 되었습니다! 메일 문의 한 번만 확인 부탁드립니다. 감사합니다!

• python
• 웹-크롤링

실제 서버 배포

미해결

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

안녕하세요 선생님 ! 강의 정말 잘 보고 있습니다 ! 다름이 아니라 현재 Node Js 교과서를 참고해서 웹 프로젝트를 진행 중입니다. AWS를 이용해 lightsail과 도메인을 구입해 실제 배포를 하려 하는데요. 큰 프로젝트가 아니라 사용자가 100~200명쯤 되는 블라인드 매칭 서비스입니다. 무료로 진행하는 프로그램이라 큰 걱정은 없지만, 실제 서버 배포를 함에 있어 15장에 나오는 서비스 운영을 위한 패키지 만으로 보안이 가능할까 걱정이 돼서 글을 작성합니다. 추가 적으로 추천하시는 패키지들이 있으시면 추천 받고 싶습니다 !

• node.js
• mysql
• mongodb
• express
• typescript
• socket.io
• jwt

event.dataTransfer.items의 타입이 무엇인가요?

해결됨

Slack 클론 코딩[실시간 채팅 with React]

MDN의 가이드에 따라 DragNDrop 코드를 작성하는데 파일을 가져오기 위한 코드인 event.dataTransfer.items 에서 아래와 같은 오류가 발생햇습니다. 'DataTransferItemList' 형식은 배열 형식이 아닙니다.ts(2461) MDN DataTransfer: items 속성 가이드에서는 목록을 반환하고 항목이없어도 빈목록을 반환한다고 되어있고 MDN DataTransferItemList 타입 가이드에서 객체라고 명시되어 있던데 개별항목에는 [ ]표기법으로 접근할수 있다는걸로 보아 event.dataTransfer.items의 타입은 리스트가 아닌 오브젝트에 숫자를 KEY로 값을 넣어놓은 형태인가요?? 아님 또다른 타입인건가요? 코드 function dropHandler(ev: React.DragEvent<HTMLDivElement>): void { console.log('File(s) dropped'); // Prevent default behavior (Prevent file from being opened) ev.preventDefault(); if (ev.dataTransfer.items) { // Use DataTransferItemList interface to access the file(s) [...ev.dataTransfer.items].forEach((item, i) => { // If dropped items aren't files, reject them if (item.kind === 'file') { const file = item.getAsFile(); if (file) { console.log(`… file[${i}].name = ${file.name}`); } } }); } else { // Use DataTransfer interface to access the file(s) const files = ev.dataTransfer.files; [...files].forEach((file, i) => { console.log(`… file[${i}].name = ${file.name}`); }); } } MDN DragNDrop가이드 https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop MDN DataTransfer: items 속성 가이드 https://developer.mozilla.org/ko/docs/Web/API/DataTransfer/items MDN DataTransferItemList 타입 가이드 https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItemList

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

파이썬 예제 코드 실습 에러

미해결

퀀트 투자를 위한 주식 자동매매 봇 만들기 Part 1

예제 코드를 파이참을 실행해서 어느 프로그램 경로에다가 어떤식으로 연결해야 실행이 되는지 잘 모르겠습니다. 현재 예제 코드가 실행이 잘 안되서요

• python
• 투자
• 퀀트

프로미스 함수 모킹할 때 질문

해결됨

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

Promise.reject를 쓰는 경우가 아니라면 바로 반환하거나 Promise객체를 사용해서 반환하거나 똑같은 것 같은데 크게 상관없나요?

• node.js
• mysql
• mongodb
• express
• typescript
• socket.io
• jwt

infinite scroll에서 최초 랜더링한 페이지가 한페이지에 안나올때 추가로 페이지를 불러 올수 있나요?

해결됨

Slack 클론 코딩[실시간 채팅 with React]

만약 Page의 단위를 5로 잡아서 최초 랜더링한 페이지가 스크롤이 되지않는다면 onScroll 이벤트가 발생하지 않으니 setSize 이벤트도 발생할수 없습니다. 이렇게 최초 데이터의 개수가 모자라서 이벤트 자체가 발생하지 않으면 별개의 이벤트로 scroll이 가능할때까지 페이지를 불러와야 하는데 좋은 방법이 잇는가요? 페이지를 5개로 잡을떄 페이지를 20개로 잡을떄 참조 코드 import ChatBox from '@components/ChatBox'; import ChatList from '@components/ChatList'; import useInput from '@hooks/useInput'; import { Header, Container } from '@pages/DirectMessage/styles'; import fetcher from '@utils/fetcher'; import makeSection from '@utils/makeSection'; import axios from 'axios'; import gravatar from 'gravatar'; import React, { FC, FormEventHandler, useCallback, useEffect, useRef, useState } from 'react'; import Scrollbars from 'react-custom-scrollbars-2'; import { useParams } from 'react-router'; import useSWR from 'swr'; import useSWRInfinite from 'swr/infinite'; const PAGE_SIZE = 5; const DirectMessage: FC = () => { const { workspace, id } = useParams(); const { data: myData } = useSWR<IUser, false>('/api/users', fetcher); const { data: userData } = useSWR<IUser, false>(`/api/workspaces/${workspace}/users/${id}`, fetcher); const [chat, onChangeChat, setChat] = useInput(''); // const scrollbarRef = useRef(null); const { data: chatData, mutate: mutateChat, setSize, } = useSWRInfinite<IDM[]>( (index) => `/api/workspaces/${workspace}/dms/${id}/chats?perPage=${PAGE_SIZE}&page=${index + 1}`, fetcher, ); const isEmpty = chatData?.[0]?.length === 0; const isReachingEnd = isEmpty || (chatData && chatData[chatData.length - 1]?.length < PAGE_SIZE); const chatSection = makeSection(chatData ? [...chatData].flat().reverse() : []); const onSubmitForm = useCallback<FormEventHandler>( (event) => { event.preventDefault(); if (!chat || !chat?.trim()) { return; } axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => { mutateChat(); setChat(''); }) .catch(console.error); console.log('제출'); }, [chat, id, mutateChat, setChat, workspace], ); const scrollbarRef = useRef<Scrollbars>(null); return !userData || !myData || !chatData ? null : ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nickname} /> <span>{userData.nickname}</span> </Header> <ChatList chatSections={chatSection} isEmpty={isEmpty} isReachingEnd={isReachingEnd} setSize={setSize} ref={scrollbarRef} /> <ChatBox onSubmitForm={onSubmitForm} chat={chat} onChangeChat={onChangeChat} placeholder={`Message ${userData.nickname}`} otherData={[userData]} /> </Container> ); }; export default DirectMessage; import Chat from '@components/Chat'; import { ChatZone, Section, StickyHeader } from '@components/ChatList/styles'; import React, { FC, MutableRefObject, forwardRef, useCallback } from 'react'; import { Scrollbars, positionValues } from 'react-custom-scrollbars-2'; interface Props { chatSections: { [key: string]: (IDM | IChat)[] }; isEmpty: boolean; isReachingEnd?: boolean; setSize: (f: (size: number) => number) => Promise<(IDM | IChat)[][] | undefined>; } const ChatList = forwardRef<Scrollbars, Props>(({ chatSections, isReachingEnd, isEmpty, setSize }, scrollRef) => { const onScroll = useCallback( (values: positionValues) => { if (values.scrollTop === 0 && !isReachingEnd) { setSize((size) => size + 1).then(() => { const current = (scrollRef as MutableRefObject<Scrollbars>)?.current; if (current) { current.scrollTop(current.getScrollHeight() - values.scrollHeight); } }); } }, [isReachingEnd, scrollRef, setSize], ); return ( <ChatZone> <Scrollbars autoHide ref={scrollRef} onScrollFrame={onScroll}> {Object.entries(chatSections).map(([dateData, chatData]) => ( <Section className={`section-${dateData}`} key={dateData}> <StickyHeader> <button>{dateData}</button> </StickyHeader> {chatData.map((chat) => ( <Chat key={chat.id} data={chat} /> ))} </Section> ))} </Scrollbars> </ChatZone> ); }); export default ChatList;

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

concat시 2차원 배열이면 쪼개지지않나요?

해결됨

Slack 클론 코딩[실시간 채팅 with React]

원본값을 유지하기위해 concat을 사용하셧는데 지금 같은 1차원 배열일때는 문제가 없지만 2차원 배열일 경우 해당 배열이 다쪼개져서 1차원 배열이 되는걸로 알고있습니다 그래서 저는 원본을 유지할때 스프레드 문법을 사용하는데 concat이 더 좋은경우도 있나요? 두가지 방법을 다 알려주시긴 하셧는데 차이점이 잇는가 궁금합니다. 예시상황 const chatData = [[1, 2], [3, 4], [5, 6]]; [].concat(...chatData).reverse() => [6, 5, 4, 3, 2, 1] [...chatData].reverse() => [[5, 6], [3, 4], [1, 2]]

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

react-custom-scrollbars 를 최상위 컴포넌트에 적용하면 시스템 스크롤바가 안생길까요?

해결됨

Slack 클론 코딩[실시간 채팅 with React]

기존 윈도우 스크롤바의 경우 스크롤바가 width를 잡아먹어 의도햇던 디자인이 찌그러 지는경우가 있어서 고민이엿습니다. 이번 강의에서 알려주신 react-custom-scrollbars 의경우 width를 잡아먹지 않고 내부에 생성되는걸로 확인되는데 vw,vh를 100%로 잡은 최상위 레이아웃을 만들고 react-custom-scrollbars 를 추가한뒤 그 자식으로 기존 코드들을 옮기려 합니다. 이때 문제가 될만한 이슈 또는 더 나은 방법이 잇을까요?

• react
• 웹팩
• typescript
• socket.io
• babel
• 클론코딩

MySQL 3306 포트 PID 관련 질문

미해결

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

강의에서 알려주신대로 MySQL 설치 및 정상적으로 비밀번호도 설정하였습니다. 그리고, workbench 및 콘솔로도 잘 실습하였고요. (*Table 세팅 등) 그런데, 컴퓨터를 껐다가 재부팅했더니 MySQL 로그인이 안됩니다. 패스워드도 정상적으로 다 입력하였으나, 계속 오류 메세지가 나와서 cmd에 접속해 현재 mysql이 사용중인 프로세스 id가 컴퓨터 재부팅 전에 설정되었던 pid와 다름을 확인하였고, 어쩔 수 없이 컴퓨터에 설치된 MySQL 프로그램 삭제 후 재설치하면서 임시방편으로 문제해결하긴 했습니다. 혹시 몰라서 또 다시 컴퓨터를 재부팅한 이후 MySQL pid를 보았는데, 또 바뀌어 있더라고요. 그럼.... 컴퓨터를 매번 재부팅할 때마다 MySQL 프로그램을 계속 삭제했다가 재설치를 해야하나요?ㅜ

• node.js
• mysql
• mongodb
• express
• typescript
• socket.io
• jwt

react native 윈도우 실행 오류

미해결

이번에 처음으로 앱 개발 공부를 해보려고 react native를 열심히 실행해 봤습니다. 중간에 계속 에러가 나고 막히는 부분이 있었지만 겨우 마지막에 npm run android부분까지 왔습니다. 그런데 실행을 할려고 하면 계속 C:\Users\aladi\MyApp\NewApp>npx react-native run-android info Starting JS server... info 💡 Tip: Make sure that you have set up your development environment correctly, by running react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor FAILURE: Build completed with 2 failures. 1: Task failed with an exception. ----------- * Where: Build file 'C:\Users\aladi\MyApp\NewApp\android\app\build.gradle' line: 2 * What went wrong: A problem occurred evaluating project ':app'. > Could not find implementation class 'com.facebook.react.ReactPlugin' for plugin 'com.facebook.react' specified in jar:file:/C:/Users/aladi/.gradle/caches/jars-9/e787d8a8f912d81d210d8e27e6fa5ed3/react-native-gradle-plugin.jar!/META-INF/gradle-plugins/com.facebook.react.properties. * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. ============================================================================== 2: Task failed with an exception. ----------- * What went wrong: A problem occurred configuring project ':app'. > compileSdkVersion is not specified. Please add it to build.gradle * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. ============================================================================== * Get more help at https://help.gradle.org BUILD FAILED in 12s error Failed to install the app. Command failed with exit code 1: gradlew.bat tasks FAILURE: Build completed with 2 failures. 1: Task failed with an exception. ----------- * Where: Build file 'C:\Users\aladi\MyApp\NewApp\android\app\build.gradle' line: 2 * What went wrong: A problem occurred evaluating project ':app'. > Could not find implementation class 'com.facebook.react.ReactPlugin' for plugin 'com.facebook.react' specified in jar:file:/C:/Users/aladi/.gradle/caches/jars-9/e787d8a8f912d81d210d8e27e6fa5ed3/react-native-gradle-plugin.jar!/META-INF/gradle-plugins/com.facebook.react.properties. * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. ============================================================================== 2: Task failed with an exception. ----------- * What went wrong: A problem occurred configuring project ':app'. > compileSdkVersion is not specified. Please add it to build.gradle * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. ============================================================================== * Get more help at https://help.gradle.org BUILD FAILED in 12s > Task :gradle-plugin:compileKotlin UP-TO-DATE > Task :gradle-plugin:compileJava NO-SOURCE > Task :gradle-plugin:pluginDescriptors UP-TO-DATE > Task :gradle-plugin:processResources UP-TO-DATE > Task :gradle-plugin:classes UP-TO-DATE > Task :gradle-plugin:jar UP-TO-DATE > Task :gradle-plugin:inspectClassesForKotlinIC UP-TO-DATE 5 actionable tasks: 5 up-to-date. 이런 에러가 뜨더라구요 정말 이쪽부분은 하나도 모르는 코린이라 아무리 구글링해보고 혼자 머리 굴려봐도 해결이 되지 않습니다.. 에뮬레이터까지는 뜨는데 react native화면은 뜨지 않고 저렇게 에러 메세지만 나옵니다. 어떻게 해야될까요.. 제발 도와주세요ㅜ

• react-native
• react
• app
• android
• windows
• node