안녕하세요 제로초님 강의 잘 듣고 있습니다.우선 에러가 발생하여 질문하는 것은 아니구요. axios와 swr을 활용하는 과정에서 의문점이 생겨서 질문을 드렸습니다.axios 로 로그인 api를 호출하게되면 response에 로그인한 유저의 정보를 받을 수 있는데로그인이 성공한 후 swr을 사용해서 유저 정보 조회 api를 서버에 get요청으로 다시 받아 쓰는 이유가 뭔지 궁금합니다.

gravatar를 적용시킨 후<WorkspaceWrapper> <Workspace>test</Workspace> <Channels> <WorkspaceName>Sleact</WorkspaceName> <MenuScroll>Menu Scroll</MenuScroll> </Channels> </WorkspaceWrapper>이 부분을 추가해서 저장 후 실행시켰더니 갑자기 메모리 사용량이 폭발적으로 증가해 웹 페이지를 열 수 없다고 나옵니다.작업 관리자를 켜서 실시간으로 확인해봐도 웹 페이지에서 오류 페이지를 띄울 때 까지 계속 증가하네요.인터넷에 검색해도 쿠키를 제거하라는 형식적인 답변만 나오고 커뮤니티 게시판에도 이같은 문제를 겪었던 사람이 없어서 질문드립니다.현재 사용하는 노트북의 RAM은 16기가입니다. 혹시 같은 현상을 겪어보신적 있으신가요?

안녕하세요. 혼자 개인 프로젝트를 하면서 강의를 듣고 있는데 궁금한 점이 생겨서 질문 남깁니다!  현재 projectA 안에 프론트, 백 폴더를 제로초님처럼 만들어놓고 프론트는 react+typescript / 백은 nestjs+typescript 로 전부 설치해놓은 상태입니다.다만, 이렇게 할 경우 proxy 설정을 프론트에서 해줘야 된다고 하여 아래 처럼 설정을 해당 강의 듣기전에 구글링하여 만들어놨었습니다. 미들웨어 설치 npm i http-proxy-middlewareprojectA > pront > src > setupProxy.tsconst { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( createProxyMiddleware("/api", { target: "http://localhost:3095", changeOrigin: true, }) ); }; package.json// 위에 생략... "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "proxy": "http://localhost:3095/", // 아래 생략... 여기서 궁금한 점이.. proxy를 설정할 때 미들웨어를 설치하여 setupProxy.js 파일을 만들어서 사용하라는 글들을 많이 봐서 그대로 따라하고 파일명만 ts로 변경했었습니다. 이렇게 하니 api를 불러오는 url 부분에 localhost:3095~~~ 이 부분을 전부 다 입력해야 에러가 나지 않았고 생략해서 사용하려면 package.json에 proxy 경로를 추가하는 방법밖에는 없는걸까요??(미들웨어 설치 + setupProxy.ts 파일로만 proxy 설정을 해보고 싶었는데 이 경우에는 api url 불러오는 부분에 locallhost~~~... 를 쓸 수 밖에 없는지가 궁금합니다.) 다만.. package.json에 proxy 경로를 넣어놓고 setupProxy.ts 파일의 코드를 지워도 제대로 돌아가더라구요.. setupProxy.ts 파일을 잘 못 만든걸까요? 이때 돌아가는 이유가 package.json의 proxy 경로로만 인식을 한 것 같습니다..https://www.npmjs.com/package/http-proxy-middleware 마지막으로 위 proxy 설정 파일을 해주면 cors 오류가 발생하지 않는 것 같은데 둘중 하나만 설정을 해주는 것이 맞을까요? 둘다 해줘야 하는건지.. 프론트에서 proxy만 하거나 백에서 cors를 설치하는 방향 둘중에 뭐가 더 나은 방향인지도 궁금합니다!원래는 아래 cors 설치하고 아래 코드까지 작성 해놨었습니다.main.ts(back 폴더안)import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; import cors = require('cors'); async function bootstrap() { const app = await NestFactory.create(AppModule); app.use(cors()); await app.listen(process.env.PORT); console.log(`listening on port ${process.env.PORT}`); } bootstrap();

백엔드를 npm run start로 했을 시 로그인이 안되는 문제가 있습니다.프론트,백엔드 https적용되어있고 같은 도메인을 쓰고있습니다.app.js에 cookie.secure를 주석처리하면 로그인이 됩니다.질문드린 이유는 지금 제 프론트 <-> 백엔드가 https 통신이 아닌 것인지맞다면 왜 cookie.secure를 true로 했을 때 왜 쿠키가 설정이 안되는 것인지 알고싶습니다.  -시도한 방법 -domain에 상위도메인 넣어보았는데도 안됩니다 ㅠ저와 비슷한 상황을 겪은 분의 질문을 보던 중 궁금한 게 있어서 이것도 적어봅니다.https://www.inflearn.com/questions/342672/express-aws-%EB%B0%B0%ED%8F%AC-%ED%9B%84-%EC%84%B8%EC%85%98-%EC%BF%A0%ED%82%A4여기서 cors는 어떻게 하란걸까요? -아래는 제 상황을 파악하시는데 도움이 될만한 내용을 적어봤습니다.- 아래는 프론트에서 login 요청시 morgan 로그입니다.프론트 url입니다 => https가 적용되어있습니다.아래는 백엔드 url을 인터넷주소창에 쳤을 때입니다.아래는 프론트에서 백엔드로 login 요청했을 때 요청헤더입니다. 아래는 백엔드서버 nginx 설정입니다.Route53 호스팅 영역 설정입니다.app으로 시작하는게 백엔드입니다. (CNAME이런건 그림판으로 지웠습니다.)가비아에도 서브도메인으로 등록했습니다.

다른 질문글들을 살펴보니 .env파일 설정이 안되어 있거나 back 서버를 구동하지 않은 상태에서 에러가 나던데 저는 .env파일과 back서버 모두 구동을 했음에도 에러가 뜹니다. 제가 했던 설정 중 일반적인 설정과 다른 경우는 1장에서 db를 생성하고 만들었을 때 mysql비밀번호가 있음에도 도저히 인식하지 못해 설정파일에 변수명이 아닌 직접 비밀번호를 입력한 경우를 제외하곤 강의에서 설명한 설정 그대로 수행했습니다. 어떤게 문제일까요?

App.tsx부분입니다. 여기에서 Router부분 주석처리하고 테스트중입니다라는 텍스트만 적어놓고 npm run build 후 생긴 index.html을 클릭하면 아래 이미지처럼 텍스트가 제대로 나오는거까진 확인을 하였습니다. 그런데 텍스트를 지우고 index.html 을 실행하면 화면에 아무것도 나오질 않습니다. 코드대로라면 백엔드와 통신이 안될 땐 로딩중입니다는 텍스트가 떠야하는데 말이죠.. import React, { FC } from 'react'; import './App.css'; import { Router } from '../router'; const App = () => { return ( <div className="App"> <Router /> </div> ); }; export default App;  -npm run build 후 App.tsx에 <Router/> 주석 후 테스트중입니다 텍스트 입력 후 index.html 실행 화면-npm run build 후 App.tsx에 <Router/> 주석 해제 후 index.html 실행 화면 및 네트워크 개발자도구 -npm run dev (정상일 경우 동작해야하는 화면)제가 이 질문을 드린건 지금 s3에 버킷 생성 후 dist에 있는 폴더를 아래처럼 다 올렸습니다. 그 후 엔드포인트에 접속했는데 아무것도 안 뜨길래 로컬에서 빌드 후 생긴 index.html에 로딩중입니다가 떠야 s3 엔드포인트에 접속했을 때도 로딩중입니다가 뜰 거 같아서 로컬에서 문제를 해결해보고 있습니다.-s3 파일 업로드 화면-  아래는 웹 시작초기에 관련 있는 코드들이라 생각되어 같이 올립니다. client.tsx부분입니다. import 'core-js/stable'; import 'regenerator-runtime/runtime'; import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import axios from 'axios'; import App from './layouts/App'; axios.defaults.withCredentials = true; axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? 'http://localhost:3095' : 'http://localhost:3095'; render( <BrowserRouter> <App /> </BrowserRouter>, document.querySelector('#app'), ); index.html입니다. <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>주식 캘린더</title> <style> html, body { margin: 0; padding: 0; overflow: initial !important; } body { font-size: 15px; line-height: 1.46668; font-weight: 400; font-variant-ligatures: common-ligatures; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } </style> <!-- <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon.png" /> --> </head> <body> <div id="modal"></div> <div id="app"></div> <script src="./dist/app.js"></script> </body> </html> 하루 반나절동안 잡고 있는데도 해결이 안되어서 질문드립니다.. ㅠㅠ... 도와주세요 제발...ㅠㅠㅠㅠ  

안녕하세요 선생님 다름 아니라 현재 세팅하기 부분 강의 듣고있는데,화면과 다른게 제가 클론해온 파일은 alecture 폴더에 셋팅이 다 완료되어있는것같아서 문의드립니다.https://github.com/zerocho/sleact/tree/master여기서 클론 해왔구요그러면 현재 셋팅하는 강의는 다 건너뛰고 바로 회원가입 파트로 넘어가면 되는지요?

강의 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) }

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

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=sleactcookieMYSQL_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 종료이상입니다. 

git clone git@github.com:jeonghwan-kim/lecture-fronted-dev-env.gitCloning into 'lecture-fronted-dev-env'...git@github.com: Permission denied (publickey).fatal: Could not read from remote repository. 이런 오류가 뜨면서 파일이 안받아지는데 어떻게 해야할까요? ㅠ

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_dropMDN DataTransfer: items 속성 가이드https://developer.mozilla.org/ko/docs/Web/API/DataTransfer/itemsMDN DataTransferItemList 타입 가이드https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItemList

만약 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; 

원본값을 유지하기위해 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]]

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

저는 평소에 아래와 같이 ComponentPropsWithoutRef을 이용하여 children이나 스타일등을 props로 내려받아 사용하고 있엇는데 export interface Props { /** 북마크 여부 */ isBookmark: boolean; /** 클릭했을 때 호출할 함수 */ onClick: (event: React.MouseEvent<HTMLButtonElement>) => void; } export const Bookmark = (Props: Props & ComponentPropsWithoutRef<"button">) => { return ( <ButtonStyle {...Props}> <BookmarkIcon isBookmark={Props.isBookmark} /> </ButtonStyle> ); }; export default Bookmark; 강의에서는 아래와같이 FC<PropsWithChildren<Props>> 형식으로 받아 오던데 둘이 어떤 차이가 있을까요?interface Props { show: boolean; onCloseModal: () => void; style: CSSProperties; closeButton?: boolean; } const Menu: FC<PropsWithChildren<Props>> = ({ closeButton, style, show, children, onCloseModal }) => { const stopPropagation = useCallback<MouseEventHandler<HTMLDivElement>>((event) => { event.stopPropagation(); }, []); if (!show) { return null; } return ( <CreateMenu onClick={onCloseModal}> <div onClick={stopPropagation} style={style}> {closeButton && <CloseModalButton onClick={onCloseModal}>&times;</CloseModalButton>} {children} </div> </CreateMenu> ); };

슬랙 프로젝트의 환경설정(웹팩 등)을 토대로 새 프로젝트를 만들고 있습니다.페이지 접속시 console.log를 찍어보니 3번 찍히는 문제가 있습니다.원인 및 해결방법을 모르겠어서 질문드립니다. 아래는 라우터 쪽입니다.login과 signup은 loadble을 사용해서 그런지 1번만 console.log가 찍혔습니다.아래 stockrecode에 해당하는 페이지가 3번 console.log 찍힙니다. 아래는 stockrecode 컴포넌트에 있는 코드입니다. 나머지는 다 주석처리하였습니다.아래는 로 이동시에 표시된 내용입니다. useSwr 사용 부분을 지우면 2번 표시됩니다.<해본 방법>strict-mode를 지우면 되는 글을 보아서 찾아봤는데이미 strict-mode가 없는 상태였습니다. 2.웹팩에서 strict-mode를 false로 하면 되는 글을 보고 해보았는데(관련 링크 https://www.sobyte.net/post/2021-09/webpack-strip-use-strict/)아래처럼 @babel/plugin-transform-modules-commonjs 설치를 하고 적용해보았는데도아래처럼 에러가 생겨서 이 방법으로도 해결하지 못하였습니다 답변주시는데 더 필요한 정보가 있으시면 말씀부탁드립니다.꼭 해결하고 싶은데 제자리만 멤도는거 같아 질문 올립니다. ㅠ                 

안녕하세요 질문드립니다!아직 초반이지만 언젠가부터 cors 에러가 계속 나고 있는데 baseURL 도 아래와 같이 변경했습니다.axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? 'http://localhost:3095' : 'http://localhost:3090'; 제 코드엔 nodebird 라는 글자 자체가 없는데 어디가 잘못된 건가요......

안녕하세요 질문 드립니다.npm 설치할 때 이러 경고가 나타났는데, 에러는 아니길래 그냥 지나갔는데,로컬호스트3095 들어가면 계속 이러 에러가 나와서 진행이 안 되고 있어요서버는 잘 연결되었습니다

안녕하세요! 강의 정말 잘 듣고 있습니다. 저에게 여러모로 큰 도움이 되고 있는 것 같습니다!다른게 아니라 강의를 들으면서 아직 웹소켓에 대해 잘 몰라서 정확한 로직을 잘 모르겠어서 질문을 드립니다! 소켓을 사용하는 로직이한 클라이언트에 대해 워크스페이스를 바꿀 때 마다 해당 워크스페이스에 대한 소켓을 연결서버는 워크스페이스 별로 소켓을 관리. 채널과 디엠 상관없이 워크스페이스 별로 들어오는 모든 소켓 요청(채팅 내용)을 받아서 전달함클라이언트는 해당 채팅 내용들을 다 받지만 현재 접속해있는 채널이나 dm을 주고 받는 상대에 대한 채팅 내용만 걸러서 화면에 보여줌이렇게 진행되는 것이 맞을까요? 맞다면 혹시 워크스페이스라는 개념이 없이 채팅방만 있거나 1:1 채팅의 기능만 소켓을 사용하여 구현한다고 했을 때는 채팅방 별로 혹은 클라이언트 별로 소켓을 생성해서 구현을 하게 되나요..? 그게 아니라면 보통 어떻게 구현하는지 질문 드리고 싶습니다..! 감사합니다