안녕하세요. 이번에 새로운 시도를 위해 react, express, mariaDB를 이용하여 개발중인 신입 개발자입니다. 처음으로 백엔드 분야를 시도하는거라 물어볼 사람도 많지 않아 어려움을 겪고 있습니다.  현재 메인페이지에서 새로운 카테고리(ex. test)를 만들면 test라는 테이블이 DB내에서 생성되고, 이후 test내부에서 또다시 카테고리를 만들면 DB내에서 생성 되도록 제작하고 싶습니다. 현재 코드를 이렇게 작성하였지만, 테이블 생성이 안되고 있습니다. 어떻게 하면 좋을까요? app.get("/", (req, res) => {     res.send("안녕");     const title = "insert_test11"     const sqlQuery = "CREATE TABLE (?) (  `user_key` INT NOT NULL AUTO_INCREMENT,  `user_id` VARCHAR(45) NULL,  PRIMARY KEY (`user_key`))";     connection.query(sqlQuery, [title], (err, result) => {         if(err) {             console.log("실패!");         }         else {             console.log("성공!");         }     }) });

헤더에 background 로 넣고 싶은 이미지는 어떻게 할 수 있을까요?? 간단에 예제 코드 부탁드려도 될까요??    

안녕하세요.   fetch나 axios 에서 요청을 보낼 때, cache-control 설정해서 요청하는거랑   서버에서 설정해서 보내주는거랑 무슨 차이인가요?

리액트로 프론트를 개발하고 있고 친구는 스프링 부트로 백엔드를 개발한 후 포스트 맨을 통해서  api를 제공해 줬는데 토큰을 쿠키에서 받아오는 형식입니다. 그런데 제 localhost의 쿠키를 넣으면 401이 뜨고 백엔드 친구의 url 에 토큰 값을 저장해지만 되는데 어떻게 해결 할 수 있을까요. 

// onDelete in MsgList.js ... console.log(typeof id) // number const receivedId = await fetcher("delete", `/messages/${id}`, { params: { userId }, }); // delete handler in messages.js const targetIndex = msgs.findIndex((msg) => msg.id === id); console.log(typeof msg.id, typeof id) // number, string   안녕하세요, 강의에서와는 달리 제 코드에서는 DELETE시 처음부터 서버에서 에러가 발생하여 디버깅 해보니 DELETE 핸들러에서 msg.id는 숫자인데 params.id는 문자열로 들어오고 있습니다.  클라이언트 onDelete에서 보내는 id를 typeof 로 출력해보면 타입이 숫자여서 이해가 어렵습니다.  강의와 똑같이 코드 작성한 것 같은데 어디서 비롯된 문제인지 파악이 어려워 질문 남깁니다. 감사합니다.       

같은 자바스크립트여도 리액트인걸 개발자한테 알려주기위해 jsx 를 쓴다고 무료강좌에서 들었던것 같은데 next js 는 확장자를 보통 js로 하나요?

리액트 관련해서 질문이 있습니다. 지금까지는 리액트를 로컬에서만 불러오고 있는데요.   외부에서 접근을하려면 서버에 올려야하잖아요? 이런건 어떻게 aws서버에 올리는지 궁금합니다.   aws와 react 강의니깐 강의에 맞는 질문 같은데 아니면 알려주세요.  

확인해 보시면 좋을것 같습니다 :)

헉 제로초님 저는 서버 강의는 안듣고 클라이언트만 듣고 배포하고 싶거든요 포폴로 사용하려고요 클라이언트만 따로 배포 할 방법은 없을까요?...    

깃에서 클론받아서 강의를 진행하고 있는데 front 뿐만 아니라 sleact 폴더에도 전부 만들어져 있는데 어떤식으로 진행해야하나요    초반 셋팅 부분 빼고는 다 삭제 후 만들면 되겟죠..?

제가 초보라서 그러는데 renderChatRooms 함수에서  (chatRooms)를 인자로 받고 => { } 이렇게 중괄호를 쓰지 않고 바로 => 다음에 처리를 해주는건 어떤 이유에서 인가요? {} 사용하면 함수가 처리가 안되던데 어떤 차이때문인지 궁금합니다.

  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로 넘어갈 수 있는건가요?   궁금합니다!! ㅎㅅㅎ

안녕하세요! 에러가 발생해서 여쭤보겠습니다. 환경세팅을 한 후에 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.

swr 최신버전에서 revalidate가 삭제 된 것 같아서 질문드립니다!  제로초님의 강의를 듣고, 제가 이해한 것은, 기본 swr설정으로 사용을 하면, 지속적으로 데이터를 요청하게 되는데,  swr에서 revalidate를 설정해주고, onSubmit의 post의 then에 reavalidate함수를 넣어주면, 그 함수가 실행 되었을 때부터 swr이 작동한다고 이해했는데 그게 맞을지 여쭤보고 싶습니다. swr 공식문서를 읽어보긴 했는데 확실히 이해가 되지 않아서요.. 조건부로 실행시키기 위해서, useSWR()에서 조건을 주어, 조건에 따라 false일 때 url의 위치에 null  안에 조건을 넣어주는 방식으로 공식 문서에 적혀있는데, 이렇게 되면 useState로 조건을 하나 만들어주어야 할까요? 해당 방법이 맞는지와 올바른 코드 예시가 있다면 알려주시면 감사하겠습니다!! ㅠ

위 애러가 나오고 해결이 되지 않습니다._firebase__WEBPACK_IMPORTED_MODULE_4__.default.auth is not a function  

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 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를 지웠다 깔아봐도 같은 에러를 내뿜는데 혹싀 여쭤볼 수 있을까요 ㅠㅠㅠ

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   안녕하세요 데이터의 값이 예쁘게 보이지 않아 질문을 올리게 되었습니다.   7 : 22에 교수님의 data는 펼쳐볼수도 있고 예쁘게 정리가 되어 있는데 저의 data는 그냥 나열만 되어 있어서 브라우저에서 보는 확장 프로그램에 대한 문제가 아닌가 라는 생각을 하게 되어서 질문을 하게 되었습니다.    

프로필 사진 변경 후 새로고침이 자동으로 되지 않아서 직접 새로고침을 해야 변경된 사항들이 처리가 되는데 useEffect를 사용해야 하나요? 아니면  원래 자동으로 되는데 제가 처리를 못한건가요?

.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);이런식으로 콘솔에 찍어보면 잘 출력이 됩니다.스코프와 관련이 있나요?