강의에서 localStorage 를 이용하여 접속시간 or 마지막 불러온 일자를 저장하고그 local 값을 unreads 에 after 파람으로 전송하여 읽지않은 메시지를 카운트 햇는데해당 방식은 다른 아이디로 로그인 시 같은 local 데이터를 활용하기도 하고 다른 기기에 접속시 해당값은 날라가게 될텐데 이는 에러사항으로 이어질 것으로 예상됩니다.마지막 일자를 활용하게 된다면 이 값은 db에 저장되야 할걸로 생각이 되는데 맞을까요?

sleact 서비스에 내부스토리지 (web스토리지,indexedDB) 를 좀더 체계적으로 써야될것같은데zustand 같은 상태관리 라이브러리에 내부스토리지를 연결하는게 좋을까요? 아니면 swr 같은데다 연결하는게 좋을까요? 아니면 내부스토리 접근하는 코드 따로 빼놓고 데이터 가져와서 state 에 관리하는게 나을까요?

import Chat from '@components/Chat'; import { ChatZone, Section, StickyHeader } from '@components/ChatList/style'; import { IChat, IDM } from '@typings/db'; import React, { FC, RefObject, VFC, forwardRef, useCallback, useRef } from 'react'; import { Scrollbars } from 'react-custom-scrollbars'; interface Props { scrollRef: RefObject<Scrollbars>; chatSections: { [key: string]: IDM[] }; setSize: (f: (index: number) => number) => Promise<IDM[][] | undefined>; isEmpty: boolean; isReachingEnd: boolean; } const ChatList: VFC<Props> = (({ chatSections, setSize, isEmpty, scrollRef, isReachingEnd}) => { const onScroll = useCallback((values) => { // 끝에 도달하면 불러오지 않기 if(values.scrollTop === 0 && !isReachingEnd){ console.log('가장 위'); setSize((prevSize) => prevSize + 1).then(()=>{ // 스크롤 위치 유지 if(scrollRef?.current){ scrollRef.current?.scrollTop(scrollRef.current?.getScrollHeight() - values.scrollHeight); } }); } }, []); return ( <ChatZone> <Scrollbars autoHide ref={scrollRef} onScrollFrame={onScroll}> {Object.entries(chatSections).map(([date, chats]) => { return ( <Section className={`section-${date}`} key={date}> <StickyHeader> <button>{date}</button> </StickyHeader> {chats.map((chat) => ( <Chat key={chat.id} data={chat} /> ))} </Section> ); })} </Scrollbars> </ChatZone> ); }); export default ChatList; 이쪽 코드는 문제가 없는것같은데 희한하게 위치가 유지가 되지않고 원래처럼 쭉 올라가버립니다.. ref쪽이 문제인가요..? 혹시몰라 DirectMessage 컴포넌트도 아래에 첨부하겠습니다.import React, { useCallback, useEffect, useRef } from 'react'; import gravator from 'gravatar'; import useSWR, { mutate } from 'swr'; // swr 인피니티스크롤링 전용 메서드 import useSWRInfinite from 'swr/infinite'; import { IDM, IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import { useParams } from 'react-router'; import ChatBox from '@components/ChatBox'; import { Container, Header } from '@pages/DirectMessage/style'; import ChatList from '@components/ChatList'; import useInput from '@hooks/useInput'; import axios from 'axios'; import makeSection from '@utils/makeSection'; import Scrollbars from 'react-custom-scrollbars'; const DirectMessage = () => { const { workspace, id } = useParams<{ workspace: string; id: string }>(); const { data: userData } = useSWR(`http://localhost:3095/api/workspaces/${workspace}/users/${id}`, fetcher); // 내정보 const { data: myData } = useSWR(`http://localhost:3095/api/users`, fetcher); const [chat, onChangeChat, setChat] = useInput(''); // 과거 채팅리스트에서 채팅을 치면 최신목록으로 바로 스크롤을 내려줄려면 ref를 // 이 컴포넌트에서 props로 내려줘야하기 때문에 forwardRef를 사용해서 props로 넘겨준다 // 💡 HTML 엘리먼트가 아닌 React 컴포넌트에서 ref prop을 사용하려면 React에서 제공하는 forwardRef()라는 함수를 사용해야 합니다 const scrollbarRef = useRef<Scrollbars>(null); // 채팅 받아오는곳 (setSize : 페이지수를 바꿔줌) // useSWRInfinite를 쓰면 [{id:1},{id:2},{id:3},{id:4}] 1차원배열이 [[{id:1},{id:2}],[{id:3},{id:4}]] 2차원배열이 된다. const { data: chatData, mutate: mutateChat, setSize, } = useSWRInfinite<IDM[]>( (index) => `http://localhost:3095/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=${index + 1}`, fetcher, ); // 데이터 40 개중에 20개씩 사져오면 첫번째페이지부터 20 + 20 + 0 세번째 페이지 0 이되면 isEmpty, isReachingEnd는 true가 됨 // 반대의 상황에서 데이터가 45개면 20 + 20 + 5 isEmpty는 0이 아니라서 false isReachingEnd는 여전히 데이터 가져옴 const isEmpty = chatData?.[0]?.length === 0; const isReachingEnd = isEmpty || (chatData && chatData[chatData.length - 1]?.length < 20) || false; const onSubmitForm = useCallback( (e) => { e.preventDefault(); if (chat?.trim() && chatData) { const savedChat = chat; // 💡 옵티미스틱 UI // 서버쪽에 다녀오지 않아도 성공해서 데이터가 있는거처럼 보이게 미리 만듦 mutateChat((prevChatData) => { // infinite 스크롤링은 2차원 배열이다. prevChatData?.[0].unshift({ // unshift : 앞쪽에 추가 id: (chatData[0][0]?.id || 0) + 1, content: savedChat, SenderId: myData.id, Sender: myData, ReceiverId: userData.id, Receiver: userData, createdAt : new Date(), }); return prevChatData; },false) // 옵티미스틱 UI 할땐 이부분이 항상 false .then(()=>{ setChat(''); // 버튼클릭 시 기존 채팅지우기 scrollbarRef.current?.scrollToBottom(); // 채팅 첬을때 맨 아래로 }) axios .post( `http://localhost:3095/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }, { withCredentials: true, }, ) .then(() => { mutateChat(); // SWR에서 데이터를 다시 불러와서 캐시를 갱신하는 역할을 합니다. }) .catch(() => { console.error; }); } }, [chat, chatData, myData, userData, workspace, id], ); // (채팅이 최신것을 아래에 두기 위함) = 기존것 데이터를두고 새 데이터를 뒤집어서 출력 / flat() 배열을 1차원 배열로 만들어줌 const chatSections = makeSection(chatData ? [...chatData].flat().reverse() : []); // 로딩 시 스크롤바 제일 아래로 useEffect(()=>{ if(chatData?.length === 1){ // 채팅 데이터가 있어서 불러온 경우 scrollbarRef.current?.scrollToBottom(); // 가장 아래쪽으로 내려줌 } },[chatData]) // 로딩 if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravator.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nickname}></img> <span>{userData.nickname}</span> </Header> {/* 컴포넌트 위치를 미리 지정해도 좋다. */} {/* 전역 상태관리 라이브러리를 사용해도 컴포넌트상황에따라 props 로 넘겨줌*/} <ChatList scrollRef={scrollbarRef} chatSections={chatSections} setSize={setSize} isEmpty={isEmpty} isReachingEnd={isReachingEnd} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); }; export default DirectMessage;

workSpace 에도 useSwr 로 유저데이터랑 채널데이터 요청하고모달안에서도 유저데이터랑 채널데이터 요청하는데 이러면 불필요한 요청이 모달하나 띄운다고 실행되는거 아닌가요? workSpace에서 revalidate 함수만 넘겨서 하면 어떤가요?

강의를 전부 진행한지 시간이 좀 된 상태에서 프로젝트 리팩토링중 이해가 안되는 부분이 있어 질문드립니다.아래 의문점에 대해 확인과 의견을 부탁드립니다.작성된 코드는 제로초님의 front / nest-typeorm 에서 가져온 코드입니다. 의문점 : 채팅 데이터 전송에 웹소켓이 역할을 하지 않는것 같다. 그렇게 생각한 근거 : 1-1 : useSocket을 이용해서 소켓에 연결하는데 ws-${workspace} 의 message에 onMessage 함수를 연결하고 있다const Channel = () => { const [socket] = useSocket(workspace); useEffect(() => { socket?.on('message', onMessage); return () => { socket?.off('message', onMessage); }; }, [socket, onMessage]); }const useSocket = (workspace?: string): [Socket | undefined, () => void] => { const disconnect = useCallback(() => { if (workspace && sockets[workspace]) { console.log('소켓 연결 끊음'); sockets[workspace].disconnect(); delete sockets[workspace]; } }, [workspace]); if (!workspace) { return [undefined, disconnect]; } if (!sockets[workspace]) { sockets[workspace] = io(`${backUrl}/ws-${workspace}`, { transports: ['websocket'], }); console.info('create socket', workspace, sockets[workspace]); sockets[workspace].on('connect_error', (err) => { console.error(err); console.log(`connect_error due to ${err.message}`); }); } return [sockets[workspace], disconnect]; };1-2 : 백엔드에서 채팅을 수신받는 createWorkspaceChannelChats는 ws-${url}-${chatWithUser.ChannelId} 의 message에 받아온 채팅을 보내고 있다. async createWorkspaceChannelChats( url: string, name: string, content: string, myId: number, ) { const channel = await this.channelsRepository .createQueryBuilder('channel') .innerJoin('channel.Workspace', 'workspace', 'workspace.url = :url', { url, }) .where('channel.name = :name', { name }) .getOne(); const chats = new ChannelChats(); chats.content = content; chats.UserId = myId; chats.ChannelId = channel.id; const savedChat = await this.channelChatsRepository.save(chats); const chatWithUser = await this.channelChatsRepository.findOne({ where: { id: savedChat.id }, relations: ['User', 'Channel'], }); this.eventsGateway.server // .of(`/ws-${url}`) .to(`/ws-${url}-${chatWithUser.ChannelId}`) .emit('message', chatWithUser); } 2 : 네트워크 탭의 웹소켓 메시지에 채팅내역 수신내역이 남지 않는다이미지가 보일지는 모르겟지만 빨간 박스가 새로 전송한 채팅이고 정상적으로 수신받으면 네트워크 탭에 messag에 내역이 남아야 하는걸로 알고 있는데 남지 않는걸로 확인됩니다. 3 : 웹페이지에서 포커스를 유지한 상태로 모바일에서 입력시 채팅이 전송되지 않음 왜 채팅이 정상적으로 전송된거 처럼 보일까 생각해보니 swr이 브라우저를 포커스 아웃후 재 포커스하면 채팅데이터를 다시 가져오는걸로 추측하여 웹페이지 포커스 유지중 모바일로 테스트해보니 채팅이 전송되지 않습니다.

MentionsTextarea 에 ctrl+c ctrl+v 를 이용하여 값을 입력시 사이즈는 조절되나 글자 줄 수가 잘려서 보이는 버그가 있습니다.MentionsTextarea 을 사용시 실제보이는 textarea와 보이지 않는 span 영역이 생성되는데 이 중 autosize에 span ref만 넘어가서 span영역만 커지고 textarea의 영역은 유지되서 생기는 버그로 보입니다.이후 글자를 제거 하거나 추가로 입력시 정상적으로 보이게 됩니다. 

import { useCallback } from 'react'; import io from 'socket.io-client'; // 아무 key값이 들어올수 있으니 이런 형식으로 타입 지정 const sockets: {[key: string]: SocketIOClient.Socket} = {}; const backUrl = "http://localhost:3095"; const useSocket = (workspace?: string): [SocketIOClient.Socket | undefined, () => void] => { const disconnect = useCallback(() => { if(workspace) { sockets[workspace].disconnect(); // 연결 끊을때는 지우기 delete sockets[workspace]; } },[workspace]) if(!workspace) { // 한번 맺었던 연결을 끊는 함수 (끝맺음을 잘하자) return [undefined, disconnect]; } sockets[workspace] = io.connect(`${backUrl}/ws-${workspace}`,{ transports: ['websocket'], }); return [sockets[workspace], disconnect] } export default useSocket;  const [socket, disconnect ] = useSocket(workspace); useEffect(()=>{ if(channelData && userData){ socket?.emit("login",{id : userData.id, channels: channelData.map((y)=> y.id)}); } },[userData, channelData, socket]); // socket연결을 끊어줄 때 useEffect(()=>{ return () => { disconnect(); } },[workspace, disconnect]) 버전이 달라서 이런 현상이 생기는건지 잘 모르겠습니다. ..

The file is in the program because: TS1261: Already included file name 'C:/Users/gram15/Desktop/slack/sleact-master/alecture/pages/LogIn/index.tsx' differs from file name 'C:/Users/gram15/Desktop/slack/sleact-master/alecture/pages/Login/index.tsx' only in casing. Imported via '@pages/LogIn' from file 'C:/Users/gram15/Desktop/slack/sleact-master/alecture/layouts/App.tsx' Root file specified for compilation 2 | import loadable from '@loadable/component'; 3 | import { Switch, Route, Redirect } from 'react-router-dom'; > 4 | const LogIn = loadable(() => import('@pages/LogIn')); | ^^^^^^^^^^^^^^ 5 | const SignUp = loadable(() => import('@pages/SignUp')); 6 | 7 | const App = () => { App.tsx import React from 'react'; import loadable from '@loadable/component'; import { Switch, Route, Redirect } from 'react-router-dom'; const LogIn = loadable(() => import('@pages/LogIn')); const SignUp = loadable(() => import('@pages/SignUp')); const App = () => { return ( <Switch> <Redirect exact path='/' to="/login" /> <Route path="/login" component={LogIn} /> <Route path="/signup" component={SignUp} /> </Switch> ); }; export default App; LogIn/index.tsx import React from "react"; const LogIn = () => { return ( <div>로그인</div> ); }; export default LogIn; SignUp/index.tsx import React from "react"; const SignUp = () => { return ( <div>회원가입</div> ); }; export default SignUp; 폴더 이름이 맞지 않다고 하는데 이름 대소문자 까지 다 맞춰서 했습니다. 오류가 왜 뜨는지 모르겠어요....

안녕하세요 제로초님! 백엔드 서버 구동을 하고 주소창에 경로를 입력하여 띄웠을때 오류가 나서 질문드립니다우선 프로젝트를 클론을 받아 back폴더로 이동후 리드미에 적힌대로 세팅을 진행하였고 아래캡쳐와 같이 스키마와 테이블이 잘 생성이 된 것을 확인했습니다. 그런데 주소창에 경로를 입력해서 화면이 떴을때 아래캡쳐와 같이 에러가 발생하였습니다.확인을 해보니 요청 주소가 https://sleact.nodebird.com/api/users 여기로 가는데 코드의 어떤 부분을 수정해주어야 하는걸까요?이전에 다른분께서 저와 같은 에러가 발생하여 제로초님이 답변하시기를 프론트의 코드를 수정하면 된다고 하셨는데, 백엔드만 실행했는데 이런 문제가 발생하는 이유가 궁금합니다. 클론받은 back폴더 내에서 전체검색으로 http://sleact.nodebird.com 키워드로 검색한 결과 public/dist 경로안의 파일 838.js와 app.js 에서 defaults.baseURL의 경로로 되어있는것을 확인했습니다. 제로초님께서 프로젝트를 만들고 프론트와 연동을 했을때 남은 결과물 인것같아서 아래 캡쳐본에 있는 dist안에서 빌드?된 결과물을 삭제한 뒤 다시 실행을 시켜보면 되지않을까 했는데 백엔드에서 빌드를 어떻게 해야하는것일까요?  

setting/ts 를 복사해 사용중 이고, pages/SignUp/index.tsx는 기존 repository 를 복사해서 사용하는게 맞나요? run dev 실행시 ERROR in ./pages/Login/index.tsx:10:24 TS2339: Property 'revalidate' does not exist on type 'SWRResponse<any, any, any>'. 8 | 9 | const LogIn = () => { > 10 | const { data, error, revalidate, mutate } = useSWR('/api/users', fetcher); | ^^^^^^^^^^ 11 | 12 | const [logInError, setLogInError] = useState(false); 13 | const [email, onChangeEmail] = useInput(''); ERROR in ./pages/Login/index.tsx:16:6 TS7006: Parameter 'e' implicitly has an 'any' type. 14 | const [password, onChangePassword] = useInput(''); 15 | const onSubmit = useCallback( > 16 | (e) => { | ^ 17 | e.preventDefault(); 18 | setLogInError(false); 19 | axios ERROR in ./pages/SignUp/index.tsx:10:24 TS2339: Property 'revalidate' does not exist on type 'SWRResponse<any, any, any>'. 8 | 9 | const SignUp = () => { > 10 | const { data, error, revalidate } = useSWR('/api/users', fetcher); | ^^^^^^^^^^ 11 | 12 | const [email, onChangeEmail] = useInput(''); 13 | const [nickname, onChangeNickname] = useInput(''); ^ 에러 로그 가 뜹니다

WorkspaceLoginif(data == undefind)는 데이터를 받아오기 전에 undefinde여서 무한 로딩중이 떠서 주석처리해주었고 로그인 후 새로고침시 로그인이 풀려버리는데 강의내용의 실습에서는 로그인이 풀리지않는데 고쳐야 될 부분이 있을까요..?

안녕하세요 선생님 강의 학습 도중 api에 대해 궁금한게 생겨 질문드려요. 로그인 할 때는 /api/users/login로 axios 요청을 하고 로그인 정보는 /api/users로 받아오는데 처음 공부할 땐 그려려니 하고 넘어갔는데 복습하다보니 login 과 users api가 반환하는 값이 살짝 다르지만 로그인 정보를 반환하는건 비슷하던데 이렇게 설정하신 이유가 있나요? 그리고 만약 로그인 api 요청 시 로그인 정보를 반환한다고 설정한 상황에 axios로 로그인 api요청 후 반환 값을 swr로 같은 api주소를 입력해 저장할 수 있나요?예를들어 axios.post('/api/login') ~~ / useSWR('/api/login', fetcher) 이런 식으로요 아직 잘 몰라 사용법이 낯설고 어렵네요..ㅎ 알려주신다면 열심히 배우겠습니다.

터미널에 socket 설치 후 부터 모든 import에 저 에러가 뜨는데 이유를 모르겠습니다Parsing error: DeprecationError: 'originalKeywordKind' has been deprecated since v5.0.0 and can no longer be used. Use 'identifierToKeywordKind(identifier)' instead

안녕하세요.현재 npm i react-router-dom 으로 설치를 하여 라우터로 페이지 이동을 사용하려고 하는데요 터미널에서 계속 에러가 나서 질문드립니다.. 설치할때 --force, or --legacy-peer-deps 사용해봤지만 전부 아래 에러 나오고 리액트 버전을 낮추려고 npm uninstall react react-dom 를 하고 npm install react@^17.0.2 react-dom@17.0.2 까지 해봤지만 전부 아래 에러가 나옵니다.. 리액트 버전 관련 종속성 문제 인 것 같은데 npm start를 제외한 명령어를 치면 아래 에러가 나오는데 어떻게 해결을 해야 할까요??아래 에러 말고 --legacy-peer-deps 이걸 포함해서 명령어를 작성하라고 한 에러도 있어서 항상 그렇게 설치를 해왔지만 아래 에러는 처음입니다.. npm ERR! code EOVERRIDE npm ERR! Override for @types/react@^18.2.20 conflicts with direct dependency npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\gmltn\AppData\Local\npm-cache\_logs\2023-09-01T15_46_00_408Z-debug-0.log package.json{ "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^29.5.3", "@types/node": "^20.5.1", "@types/react": "^18.2.20", "@types/react-dom": "^18.2.7", "axios": "^1.4.0", "http-proxy-middleware": "^2.0.6", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.45.4", "react-icons": "^4.10.1", "react-scripts": "5.0.1", "typescript": "^5.1.6", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "overrides": { "@types/react": "^17.0.38" } }  

안녕하세요 제로초님! 강의 잘 듣고 있습니다.다름이아니라 강의 내용대로 따라가면서 무리없이 로그인 로그아웃 동작하도록 만들었는데현재 상태는 로그아웃을 하게되면 swr을 revalidate 해서 로그아웃을 수행한 상태에서는 유저정보 api를 호출할 수 없으니 undifined가 되어서 그 값으로 페이지 이동을 제어한다 라고 이해를 했는데 혹시 맞을까요? 맞다면 로그아웃 후에도 클라이언트 사이드에 쿠키에 토큰값이 아직 지워지지 않은채로 남아있는데 백엔드에서는 로그인처리가 되었어도 프론트에서 쿠키값을 따로 지워줄 필요는 없는것인지 궁금합니다!

안녕하세요 제로초님 강의 잘 듣고 있습니다.우선 에러가 발생하여 질문하는 것은 아니구요. 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비밀번호가 있음에도 도저히 인식하지 못해 설정파일에 변수명이 아닌 직접 비밀번호를 입력한 경우를 제외하곤 강의에서 설명한 설정 그대로 수행했습니다. 어떤게 문제일까요?