172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); 이런식으로 Image.create() 를 적용한 다음 다시 post.addImages() 하는 이유가 뭔가요? 중복된 실행이라고 생각했는데 실행해봤을때는 중복된 튜플이 생성되지는 않네요..
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
1.사용자가 웹에 접속을 할 때, 브라우저 -> 프론트서버 로 요청을 보내게 되고 프론트 -> 브라우저 로 html css js 파일을 보내서 뷰를 표시하게 되는데 그러면 특정 기능을 사용할 때, 예를 들어 로그인 버튼을 누른다고 하면 그 요청은 브라우저 -> 백엔드 인가요 프론트 -> 백엔드 인가요? 만약 브라우저 -> 백엔드 이면 백엔드 cors 설정에서는 프론트서버 도메인만 허용하도록 해놓는데 어떻게 브라우저에서 백엔드로 접근이 가능한건가요? 2.강좌에서는 me값으로 로그인 유지를 위한 로직을 작성했고 모든 페이지 접속 때마다 백엔드로 요청을 보내서 세션인증을 하는방식으로 로직을 작성했는데 제가 알기로 세션인증방식은 세션id를 프론트에 보내서 쿠키에 있는 세션id를 이용해 로그인 유지를 하는것으로 알고있습니다. 제가 알고 있는 방식과 강좌에서의 세션인증이 좀 다른것 같은데 어떻게 이해해야 하나요? 강좌는 ssr 적용 전 백엔드 부분까지만 들은 상태입니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요! 로그아웃 후 계속 auth/me후 계속 req에서 쿠키가 존재해서 문의 남깁니다! application탭에서 쿠키는 잘 삭제가 되고 네트워크 탭에서도 logout이 성공적으로 이루어지는데 reload하면 바로 auth/me가 계속 200코드와 함께 user가 전달됩니다. 콘솔에도 찍어봤는데 계속 req에 쿠키가 같이 전달되고 있어서 요. 서버도 껐다 켜보고 했는데도 계속 그래서 문의드립니다! client/src/context/auth.tsx client/src/components/NavBar.tsx server/src/middlewares/auth.ts server/src/routes/auth.ts
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
관련 에러를 찾아보니 ip주소를 0000이나 내 컴퓨터 ip를 입력해봐서 해결한 경우를 보았으나 제 경우는 해결되지 않습니다. 어떻게 해결할 수 있을까요? 아래 오류 코드입니다. MongoServerError: bad auth : authentication failed at Connection.onMessage (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/connection.js:227:30) at MessageStream.<anonymous> (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/connection.js:60:60) at MessageStream.emit (node:events:513:28) at processIncomingData (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/message_stream.js:125:16) at MessageStream._write (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/message_stream.js:33:9) at writeOrBuffer (node:internal/streams/writable:392:12) at _write (node:internal/streams/writable:333:10) at Writable.write (node:internal/streams/writable:337:10) at TLSSocket.ondata (node:internal/streams/readable:766:22) at TLSSocket.emit (node:events:513:28) { ok: 0, code: 8000, codeName: 'AtlasError', connectionGeneration: 0, [Symbol(errorLabels)]: Set(2) { 'HandshakeError', 'ResetPool' } }
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
다이어리 에디터 직접 만들어보고 있는데 강의에서 e.target .name에 []괄호 안에넣는데 e.target.name 자체가 string이잖아요 괄호표기법으로 안써도 위에서는 그냥 author: "" 이렇게 key갑: value 값 써줬는데 e.target .name도 console찍어보면 author라고 뜨는데 왜 괄호를 붙여야 하나요? [ e.target.name ] 왜 이렇게 써야하는지 궁금합니다. 위에선 괄호없이 string으로 썼는데
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
해당 프로젝트에서 getInitialProps와 getServerSideProps를 동시에 쓰고 있는데 2개의 경우 pre-render를 하기 위해 작성했다고 이해했는데 둘 중 하나만 써도 되는 부분 아닌가요??? 어떤 상황떄문에 2개를 동시에 사용하는지 궁금합니다
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요 선생님 혹시 강의를 듣고 정리한 내용을 개인 블로그에 게시해도 될까요??
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Invalid Custom Plugin "typescript" 라면서 에러가 뜹니다 어떻게 해결해야 할까요?
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
파이참 사용시 좌측처럼 코드가 있는부분은 색상이 다르던데 이건 어떻게 해야할까요? 강의 듣다가 이게 궁금해서 계속 옆길로 빠지게 됩니다 ;;;
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
8분 20초경 오류나서 코드를 수정하셨는데, case ADD_POST_TO_ME: return { ...state, me: { ...state.me, // 이부분 왜 추가한건가요? Posts: [{ id: action.data }, ...state.me.Posts], }, }; 코드 주석부분 왜 추가하신건가요..? const dummyUser = (data) => ({ ...data, nickname: "wewewe", id: 1, Posts: [{ id: 1 }], Followings: [{ nickname: "we1" }, { nickname: "we2" }, { nickname: "we3" }], Followers: [{ nickname: "we1" }, { nickname: "we2" }, { nickname: "we3" }], }); dummy데이터 구조를 보면 Posts를 제외한 nickname, id, Followings 등 변하지 않는 데이터들의 불변성을 유지하기 위해서 추가한것이 맞는건가요?!
해결됨
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
members.add.ts 25번째 줄에 return이 없어도 괜찮은건가요? 또 개인적인 생각으로는 api를 호출하는 부분에서 axios를 사용하면 코드가 더 간단해질 것 같은데 fetch가 사용된 이유가 있을까요? 바쁘실텐데 여러 사소한 질문들 드려서 죄송합니다.
해결됨
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. 질문 있습니다. 강의에서는 SWR을 쓰시는데 공부할때는 react-query를 쓰려고 합니다. 이유는 생태계가 더 큰 라이브러리를 사용할 목적이었는데 알려주신 npm trends에 검색해보니 둘 다 비슷비슷하더라고요. SWR도 아직 많이 쓰이는 추세인가요??? 궁금한 이유는 react-query 외에도 추가로 하나의 라이브러리를 동시에 더 써볼 생각이라 추천해주시면 감사합니다. 추가로 수업 외 질문으로 유틸리티 라이브러리?를 하나 써보려고 합니다. 기존에는 fxjs를 사용 중이었습니다. npm trends를 보니 가장 많이 사용하는 라이브러리는 lodash, rxjs인 것 같고 lamda도 많이 쓰는거 같고 타입스크립트로 된 fp-ts도 있는거 같은데 fp-ts를 제외한 것들 중 추천해주시는게 있을까요? 감사합니다!!
미해결
[리뉴얼] React로 NodeBird SNS 만들기
제로초쌤 제가 우분투에서 Nodebird를 진행하고 있는데 더북에 써져있는 거처럼 리눅스(우분투)에서 설치하는 방법 그대로 설치하다가 Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (13) 소켓 에러가 계속 나서 해결하려고 인터넷에 찾아보면서 따라하고 있는데 해결이 안되서 혹시 윈도우로 mysql설치해서 진행해도 크게 차이가 없을까요?
미해결
Slack 클론 코딩[실시간 채팅 with React]
제로초님, 코드를 따라친 후에 로그아웃을 하고 다시 로그인 하면 이런 에러메세지가 뜹니다. 그런데 네트워크 탭을 보면 로그인이 정상적으로 된거 같아서 새로고침을 하면 에러 메세지가 사라지고 슬랙에서 로그인된 화면이 제대로 뜹니다. 근데 또 여기서 워크스페이스를 생성하려고 하면 콘솔에 axioserror메세지가 떠서 어떻게 해야될지 모르겠습니다.. Workspace/index.tsx import axios from "axios"; import React, { FC, useCallback, useState } from "react"; import useSWR from 'swr'; import fetcher from "@utils/fetcher"; import { Navigate, Routes, Route } from "react-router-dom"; import { AddButton, Channels, Chats, Header, LogOutButton, MenuScroll, ProfileImg, ProfileModal, RightMenu, WorkspaceButton, WorkspaceName, Workspaces, WorkspaceWrapper } from "@layouts/Workspace/style"; import gravatar from 'gravatar'; import loadable from '@loadable/component'; import Menu from "../../components/Menu"; import Modal from "../../components/Modal"; import { Link } from "react-router-dom"; import { IUser } from "@typings/db"; import { Button, Input, Label } from "@pages/SignUp/styles"; import useInput from "@hooks/useInput"; import {toast} from 'react-toastify'; const Channel = loadable(() => import('@pages/Channel')); const DirectMessage = loadable(() => import('@pages/DirectMessage')); const Workspace: FC<React.PropsWithChildren<{}>> = ({children}) => { const [showUserMenu, setShowUserMenu] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkspace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); // revalidate = 서버로 요청 다시 보내서 데이터를 다시 가져옴 // mutate = 서버에 요청 안보내고 데이터를 수정 const {data: userData, error, mutate} = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, }); const onLogout = useCallback(() => { axios.post('/api/users/logout', null , { withCredentials: true, }) .then(() => { mutate(false, false); }) }, []); const onClickUserProfile = useCallback((e: any) => { e.stopPropagation(); setShowUserMenu((prev) => !prev); }, []) const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal(true); }, []) const onCreateWorkspace = useCallback((e: any) => { e.preventDefault(); // 띄어쓰기도 검사해줘야됨 if(!newWorkspace || !newWorkspace.trim()) return; if(!newUrl || !newUrl.trim()) return; axios.post('http://localhost:3095/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }) .then(() => { mutate(); setShowCreateWorkspaceModal(false); setNewWorkspace(''); setNewUrl(''); }) .catch((error) => { console.dir(error); // 에러가 나면 사용자가 인지하게 해줌 toast.error(error.response?.data, { position: 'bottom-center' }) }) }, [newWorkspace, newUrl]) const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); }, []) if(!userData) { return <Navigate to="/login" /> } if(!userData) return null; return( <div> <Header> <RightMenu> <span onClick={onClickUserProfile}> <ProfileImg src={gravatar.url(userData.email, { s: '28px', d: 'retro' })} alt={userData.nickname} /> {showUserMenu && <Menu style={{ right: 0, top: 38 }} show={showUserMenu} onCloseModal={onClickUserProfile}> <ProfileModal> <img src={gravatar.url(userData.nickname, { s: '36px', d: 'retro' })} alt={userData.nickname} /> <div> <span id="profile-name">{userData.nickname}</span> <span id="profile-active">Active</span> </div> </ProfileModal> <LogOutButton onClick={onLogout}>로그아웃</LogOutButton> </Menu>} </span> </RightMenu> </Header> <WorkspaceWrapper> <Workspaces> {userData?.Workspaces.map((ws) => { return ( <Link key={ws.id} to={`/workspace/${123}/channel/일반`}> <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton> </Link> ); })} <AddButton onClick={onClickCreateWorkspace}>+</AddButton> </Workspaces> <Channels> <WorkspaceName>Sleact</WorkspaceName> <MenuScroll>menu scroll</MenuScroll> </Channels> <Chats> <Routes> <Route path="/channel" element={<Channel />} /> <Route path="/dm" element={<DirectMessage />} /> </Routes> </Chats> {/* Input이 들어있으면 별도의 컴포넌트로 빼는 것을 추천(input에 글자를 입력할 때마다 여기 있는 함수들이 다 리렌더링 되기 때문에 비효율적) */} </WorkspaceWrapper> <Modal show={showCreateWorkspaceModal} onCloseModal={onCloseModal}> <form onSubmit={onCreateWorkspace}> <Label id="workspace-label"> <span>워크스페이스 이름</span> <Input id="workspace" value={newWorkspace} onChange={onChangeNewWorkspace} /> </Label> <Label id="workspace-url-label"> <span>워크스페이스 이름</span> <Input id="workspace" value={newUrl} onChange={onChangeNewUrl} /> </Label> <Button type="submit">생성하기</Button> </form> </Modal> </div> ) } export default Workspace; Modal/index.tsx import React, { useCallback, FC } from "react"; import { CloseModalButton, CreateModal } from "./style"; interface Props { show: boolean; onCloseModal: () => void; children: React.ReactNode; } const Modal: FC<Props> = ({show, children, onCloseModal}) => { const stopPropagation = useCallback((e: any) => { e.stopPropagation() }, []); if(!show){ return null; } return( <CreateModal onClick={onCloseModal}> <div onClick={stopPropagation}> <CloseModalButton onClick={onCloseModal}>×</CloseModalButton> {children} </div> </CreateModal> ); }; export default Modal; swr2.0 버전, react v18, typescript v18 swr을 최신버전 사용해서 revalidate대신 mutate를 사용했는데 제가 잘못 사용한건지 모르겠습니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
콘솔 결과와 error가 같이 출력됩니다!
해결됨
풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
안녕하세요. 2강 진행 중 상품목록 조회시 msw Response 결과에 대한 body 값이 ReadableStream 으로 넘어옵니다. 이 경우 body 의 data를 확인할 방법이 있을까요? 답변 부탁드립니다. 감사합니다.
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
강사님 안녕하세요 좋은강의 잘 수강중인 학생입니다. 강의중에는 클라이언트에 저장된 확장자 2개의 이미지를 사용해서 분기처리를 하셨는데요, 서버에서 받아오는 이미지파일을 분기처리 할려면(webp를 지원하지않는 브라우저를 위해) webp파일 이미지와 jpg(또는 png) 파일 이미지 총 2개 파일 이미지를 보내줘야 분기처리가 가능한가요? 아니면 서버에서 1개의 확장자 이미지를 보내주면 jpg -> webp 또는 webp->jpg로 바꾸어서 분기처리 하는방법은 없을까요?
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요 강사님 해당 상품을 클릭했을때 url은 바뀌지만 상품상세페이지로 화면은 바뀌지 않는 오류가 발생했습니다(새로고침하면 화면이 바뀌긴 합니다) 다른 수강생들의 비슷한 질문답변을 참고하여 <React.StrictMode>를 지워도보고 react-router-dom 버전도 5.2.0이고 Route path도 "/products/:id"라고 적었는데 여전히 오류가 해결되지 않습니다 https://github.com/kanghanju/grab-market-client/commit/01c0657f4f64398b47493c1b2c3b44836bf1a785# 여기는 Link태그 해당 수업코드 파일입니다!
미해결
프로젝트로 배우는 React.js
72번째 강의 초반부 편집오류 있습니다.
미해결
프로젝트로 배우는 React.js
강의에서는 toast가 비동기적으로 실행되는것을 해결하기 위해 useRef를 활용했는데 혹시 async나 promise로도 해결이 가능한건가요?
