172만명의 커뮤니티!! 함께 토론해봐요.
미해결
이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
리액트 관련해서 질문이 있습니다. 지금까지는 리액트를 로컬에서만 불러오고 있는데요. 외부에서 접근을하려면 서버에 올려야하잖아요? 이런건 어떻게 aws 서버에 올리는지 궁금합니다. aws와 react 강의니깐 강의에 맞는 질문 같은데 아니면 알려주세요.
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
확인해 보시면 좋을것 같습니다 :)
미해결
Slack 클론 코딩[실시간 채팅 with React]
헉 제로초님 저는 서버 강의는 안듣고 클라이언트만 듣고 배포하고 싶거든요 포폴로 사용하려고요 클라이언트만 따로 배포 할 방법은 없을까요?...
해결됨
Slack 클론 코딩[실시간 채팅 with React]
깃에서 클론받아서 강의를 진행하고 있는데 front 뿐만 아니라 sleact 폴더에도 전부 만들어져 있는데 어떤식으로 진행해야하나요 초반 셋팅 부분 빼고는 다 삭제 후 만들면 되겟죠..?
미해결
따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
제가 초보라서 그러는데 renderChatRooms 함수에서 (chatRooms)를 인자로 받고 => { } 이렇게 중괄호를 쓰지 않고 바로 => 다음에 처리를 해주는건 어떤 이유에서 인가요? {} 사용하면 함수가 처리가 안되던데 어떤 차이때문인지 궁금합니다.
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
import React from ' react '; import MsgList from ' ../components/MsgList '; import fetcher from ' ../fetcher '; export default function Home ({ smsgs , users }) { return ( <> < h1 > SIMPLE SNS </ h1 > < MsgList smsgs ={ smsgs } users ={ users } /> </> ) ; } export const getServerSideProps = async () => { const smsgs = await fetcher ( ' get ' , ' /messages ' ) ; const users = await fetcher ( ' get ' , ' /users ' ) ; return { props : { smsgs , users } }; }; 안녕하세요! 강의를 보다가 pages에 있는 index.js에 궁금한 로직이 있습니다. getServerSideProps 함수에서 return 값이 어떻게 위 Home 리액트 컴포넌트에 props로 넘어갈 수 있는건가요? 궁금합니다!! ㅎㅅㅎ
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
안녕하세요! 에러가 발생해서 여쭤보겠습니다. 환경세팅을 한 후에 yarn run client를 실행하면 아래와 같은 에러코드가 발생하는데 어떠한 이유에서 발생하는지 모르겠습니다... 코드는 그대로 똑같이 치고 강사님의 git파일들과도 비교했는데 에러가 발생합니다 ㅠㅠ PS C:\Users\Desktop\Toy Projects> yarn run client yarn run v1.22.11 $ yarn workspace client start internal/modules/cjs/loader.js:888 throw err; ^ Error: Cannot find module 'C:\Users\諛뺣???AppData\Roaming\npm\node_modules\yarn\bin\yarn.js' at Function.Module._resolveFilename ㅂ(internal/modules/cjs/loader.js:885:15) at Function.Module._load (internal/modules/cjs/loader.js:730:27) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) at internal/main/run_main_module.js:17:47 { code: 'MODULE_NOT_FOUND', requireStack: [] } error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
미해결
Slack 클론 코딩[실시간 채팅 with React]
swr 최신버전에서 revalidate가 삭제 된 것 같아서 질문드립니다! 제로초님의 강의를 듣고, 제가 이해한 것은, 기본 swr설정으로 사용을 하면, 지속적으로 데이터를 요청하게 되는데, swr에서 revalidate를 설정해주고, onSubmit의 post의 then에 reavalidate함수를 넣어주면, 그 함수가 실행 되었을 때부터 swr이 작동한다고 이해했는데 그게 맞을지 여쭤보고 싶습니다. swr 공식문서를 읽어보긴 했는데 확실히 이해가 되지 않아서요.. 조건부로 실행시키기 위해서, useSWR()에서 조건을 주어, 조건에 따라 false일 때 url의 위치에 null 안에 조건을 넣어주는 방식으로 공식 문서에 적혀있는데, 이렇게 되면 useState로 조건을 하나 만들어주어야 할까요? 해당 방법이 맞는지와 올바른 코드 예시가 있다면 알려주시면 감사하겠습니다!! ㅠ
미해결
따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
위 애러가 나오고 해결이 되지 않습니다. _firebase__WEBPACK_IMPORTED_MODULE_4__.default.auth is not a function
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. import { useState, useEffect, useRef } from "react"; import { useRouter } from "next/router"; import MsgItem from "./MsgItem"; import MsgInput from "./MsgInput"; import fetcher from "../fetcher"; import useInfiniteScroll from "../hooks/useInfiniteScroll"; const MsgList = (smsgs, users) => { const { query: { userId = "" }, } = useRouter(); const [msgs, setMsgs] = useState(smsgs); const [editingId, setEditingId] = useState(null); const [hasNext, setHasNext] = useState(true); const fetchMoreEl = useRef(null); const intersecting = useInfiniteScroll(fetchMoreEl); const onCreate = async (text) => { const newMsg = await fetcher("post", "/messages", { text, userId }); if (!newMsg) throw Error("something wrong"); setMsgs((msgs) => [newMsg, ...msgs]); }; const onUpdate = async (text, id) => { const newMsg = await fetcher("put", `/messages/${id}`, { text, userId }); if (!newMsg) throw Error("something wrong"); setMsgs((msgs) => { const targetIndex = msgs.findIndex((msg) => msg.id === id); if (targetIndex < 0) return msgs; const newMsgs = [...msgs]; newMsgs.splice(targetIndex, 1, newMsg); return newMsgs; }); doneEdit(); }; const onDelete = async (id) => { const receivedId = await fetcher("delete", `/messages/${id}`, { params: { userId }, }); setMsgs((msgs) => { const targetIndex = msgs.findIndex((msg) => msg.id === receivedId + ""); if (targetIndex < 0) return msgs; const newMsgs = [...msgs]; newMsgs.splice(targetIndex, 1); return newMsg; }); }; const doneEdit = () => setEditingId(null); const getMessages = async () => { const newMsgs = await fetcher("get", "/messages", { params: { cursor: msgs[msgs.length - 1]?.id || "" }, }); if (newMsgs.length === 0) { setHasNext(false); return; } setMsgs((msgs) => [...msgs, ...newMsgs]); }; useEffect(() => { if (intersecting && hasNext) getMessages(); }, [intersecting]); return ( <> <MsgInput mutate={onCreate} /> {userId && <MsgInput mutate={onCreate} />} <ul className="messages"> {msgs.map(x => ( <MsgItem key={x.id} {...x} onUpdate={onUpdate} onDelete={() => onDelete(x.id)} startEdit={() => setEditingId(x.id)} isEditing={editingId === x.id} myId={userId} user={users[x.userId]} /> ))} </ul> <div ref={fetchMoreEl} /> </> ); }; export default MsgList; -------- 에러 error - components/MsgList.js (72:14) @ MsgList TypeError: msgs.map is not a function 이유가 뭘까요 대체...
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이제까지 잘 실행되고 실습했던 리액트가 npm start를 하면 오류를 내뿜습니다. node.js를 지웠다 깔아봐도 같은 에러를 내뿜는데 혹싀 여쭤볼 수 있을까요 ㅠㅠㅠ
해결됨
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 데이터의 값이 예쁘게 보이지 않아 질문을 올리게 되었습니다. 7 : 22에 교수님의 data는 펼쳐볼수도 있고 예쁘게 정리가 되어 있는데 저의 data는 그냥 나열만 되어 있어서 브라우저에서 보는 확장 프로그램에 대한 문제가 아닌가 라는 생각을 하게 되어서 질문을 하게 되었습니다.
미해결
따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
프로필 사진 변경 후 새로고침이 자동으로 되지 않아서 직접 새로고침을 해야 변경된 사항들이 처리가 되는데 useEffect를 사용해야 하나요? 아니면 원래 자동으로 되는데 제가 처리를 못한건가요?
해결됨
[React 1부] 만들고 비교하며 학습하는 React
. map ((tabType) => ({tabType, tabLabel : TabLabel [tabType]})) 해당 코드에서 TabLabel [tabType] -> TabLabel.tabType 으로 변경하면 undefined 가 출력이 되는데 이유를 모르겠습니다. // const TabLabel = { [ TabType . KEYWORD ]: '추천 검색어' , [ TabType . HISTORY ]: '최근 검색어' } console . log ( TabLabel [ 'KEYWORD' ]); console . log ( TabLabel . KEYWORD ); 이런식으로 콘솔에 찍어보면 잘 출력이 됩니다. 스코프와 관련이 있나요?
해결됨
실전 리액트 프로그래밍
<input ref={ref => ref && setText(INITIAL_TEXT)}> 여기에서 화살표 함수를 사용해서 input이 생성될 때는 input이 함수의 매개변수에 담기게 되고 사라질 때는 null값이 넘어와서 null 값일때는 setText가 실행되지 않는다는 것은 이해했습니다. 그런데 그러면 저 함수에서 리턴값은 어떻게 되는건가요? ref = {}에서 ref에는 실질적으로 값이 담기는 것은 아닌가요? import React, { useState } from 'react'; export default function App() { const [text, setText] = useState(INITIAL_TEXT); const [showText, setShowText] = useState(true); return ( <div> {showText && ( <input type="text" ref={(ref) => { ref && setText(INITIAL_TEXT); console.log(ref); }} value={text} onChange={(e) => setText(e.target.value)} /> )} <button onClick={() => setShowText(!showText)}>보이기/가리기</button> </div> ); } const INITIAL_TEXT = '안녕하세요'; 또한 위의 코드에서 console을 찍어봤을 때 input 입력창에 키보드 입력을 하게 되면 콘솔이 두번 찍히게 되는데 이것은 어떤 이유에서 그런걸까요?
미해결
Slack 클론 코딩[실시간 채팅 with React]
강의에서, setShowCreateChannelModal props의 타입을 (flag:boolean)=>void;라고 지정하셨는데, setState의 경우 기본적으로는 Dispatch<setStateAction<S>> 이런식이었던 것 같은데 이렇게 안쓰고 그냥 저렇게 쓸 수 있는 건가요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 설치가 다른댓글처럼 404가떠서 다른 댓글에 남기신 https://www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb 이거보고 프론트,백 설치했는데요 / etc / nginx / nginx . conf 여기 안에 include / etc / nginx / sites - enabled /*; 이라는 문구가 있으면 nginx.conf말고 vim /etc/nginx/sites-enabled/default 들어가서 그대로 적으면 되는건가요? 서버가 이상한거보니까 제가 뭔가 잘못이해한거같은데 vim /etc/nginx/sites-enabled/default 여기에 그대로 적는게 아닌가요.. 첫번째사진이 처음상태고 두번째로 제가 제로초님 블로그 보고 바꾼상태입니다. sudo service nginx start를 하고 status 는 이상태입니다,, 프론트는 위같은 에러가뜨면서 헤더만뜨고 아무것도안뜨고 백서버는 sudo service nginx start이거하면 아무 말 없이 실행되고 welcome to nginx 인데 백도 지금 잘못된상태인가요? 배포까지는 여태까지 뜨는 에러들 진짜 몇일동안 혼자 다 해결했는데 https적용 이거는 뭐가문제인지를 모르겠어서 질문합니다..
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 빌드시 메모리 부족으로 계속 빌드가 멈추는데요 구글링해서 옵션도 다 붙여보고 해도 똑같네요,, 질문글들을 보니까 .next를 서버에 전송하여 실행하라는 답글을 봤습니다. 이부분이 잘 이해가 안가서요. 혹시 .next폴더는 용량이 크니까 커밋푸시로는 안올라가니까 lfs를 사용해서? 깃헙에 올려하는것 같던데 이런식으로 올리고 ubuntu에서 그냥 git clone하라는 말씀 맞나요?
미해결
Slack 클론 코딩[실시간 채팅 with React]
이전에 비슷한 문제를 겪은 글이 있었는데 해결되지 않아서 글을 작성하게 되었습니다. InviteChannelModal 컴포넌트에서 보내는 GET 요청 const { revalidate : revalidateMembers } = useSWR ( userData ? `/api/workspaces/ ${ workspace } /channels/ ${ channel } /members` : null , fetcher , ); 위 코드의 실행되는 결과로 다음과 같은 에러가 발생합니다. const { workspace , channel } = useParams (); InviteChannelModal 컴포넌트에서 콘솔에 workspace와 channel을 찍어보니 channel이 undefined 값으로 나오는데 useParams를 사용하면 현재 URL에서 라우터에서 지정한 콜론 뒤의 키에 해당하는 값을 반환하는 것으로 알고 있습니다. 로그인 후 "http://localhost:3090/workspace/sleact/channel/일반" 주소로 이동하기에 channel 값이 일반으로 출력되기를 예상합니다만.. Workspace layouts 에서 라우터 설정을 했음에도 매칭되는 channel 값을 받아오지 못하기에 원인을 알 수 없어 여쭤봅니다. < Switch > < Route path = "/workspace/:workspace/channel/:channel" component = { Channel } /> < Route path = "/workspace/:workspace/dm/:id" component = { DirectMessage } /> </ Switch >
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 인피니트 스크롤 적용 중 이상한 점이 하나 있어서 질문드립니다. f12누르고 개발자 모드 킨 상태로 redux 툴로 action을 체크하는 상태에서 스크롤을 맨 밑으로 내리면 제로초님처럼 LOAD_POSTS_REQUEST를 보내고 SUCCESS까지 동작하는데 문제는 스크롤이 계속 맨 밑에 머물러서 REQUEST SUCCESS를 계속 반복합니다. 즉 한번 맨 밑으로가면 스크롤이 다시 올라오지 않고 그 상태에서 REQUEST, SUCCESS를 5번 반복합니다. 그런데 개발자모드를 키지않고 테스트하면 제로초님처럼 정상작동합니다. 이거는 별 문제가 아닌건가요? (코드도 깃허브참고해서 똑같이 했습니다.)
