파라미터로 id나 URL 등 값 받아올 때와 쿼리스트링으로 받아올 때 파라미터로도 perPage나 page 등 받아올 수 있는데 어떤 차이로 파라미터와 쿼리스트링을 나누어서 사용해야 할지 질문드립니다.단순히 파라미터는 http 요청시 한 번 정해지면 고정되는 값에 사용하고 쿼리스트링은 매 요청마다 변하는 값에 사용한다고 생각이 드는데 맞을까요??

안녕하세요 제로초님 궁금한게 있어서요.이러한 부모자식 관계에서 props로 함수를 넘겨줄때는 usecallback+자식컴포넌트(react.memo)로 자식컴포넌트의 리랜더링을 방지할 수 있다고 배웠습니다. 리액트는 함수나, style={{}}, 등 다 객체 참조값을 비교하여 부모컴포넌트가 리랜더링되면서 생성된 함수는 새로운 참조값을 갖게되까 변경사항이 있다고 생각한다. 라고 알고있습니다. 근데 이 부분에서는 style객체를 usememo만으로 리렌더링을 방지한다. 라고 하셨는데 그 말씀이 ButtonWrapper 의 컴포넌트에서 retun() 부분만 virtual dom 이 비교하고(함수자체는실행됨) 바뀐게 없네 하고 return 부분을 다시 안그린다는 의미에서 리렌더링을 방지한다고 하신건지..?? 아니면 아예 ButtonWrapper컴포넌트함수 자체가 react.memo를 사용한 것 처럼 리렌더링이 안되는건지 궁금합니다.ButtonWrapper컴포넌트의 리렌더링을 막으려면ButtonWrapper에react.memo적용 후 usememo를 사용해야되는것 아닌가해서요. usecallback과 마찬가지로요예제로 이런식으로 해봤는데 부모컴포넌트가 리렌더링되면 자식컴포넌트의 스타일을 usememo로 감싸주어도 리렌더링이 되더라구요??이 역시 자식컴포넌트에 React.memo를 감싸주고나서야 자식 컴포넌트가 리렌더링 안되는데 수업에서는 memo를 쓰지않아도 리렌더링이 되지않는다고 한 이유가 궁금합니다.

안녕하세요!수업시간에 보면 webpack.config.js 웹팩 설정파일을 CommonJS방식으로 작성하였는데요,웹팩은 Node.js에서 동작하는 프로그램이고,Node.js가 사용하는 모듈시스템이 CommonJS이므로 웹팩 설정파일을 CommonJS로 작성한 건 이해했습니다.그런데 문득 드는 궁금증이,CommonJS 모듈 시스템을 채택했던 NodeJS 환경에서 ES Module을 사용하려면 Babel과 같은 트랜스파일러(transpiler)를 사용했어야 했는데요. NodeJS 버전 13.2부터 ES모듈 시스템에 대한 정식 지원이 시작됨에 따라 다른 도구 없이 NodeJS에서 손쉽게 ES Module을 사용할 수 있게 되었잖아요..?그렇다면 노드버전 13.2부터는 webpack.config.js 를 CommonJS가 아닌, ES Module방식으로 작성해도 상관없는건가요?

안녕하세요 강사님 강의를 듣다가 이해를 제대로 한게 아닌거 같다는 생각이 들어 질문드립니다 검색해봐도 검색실력이 꽝인지... 제대로된 답을 못 찾았습니다 실행순서에 대해 알고싶은데요 이 코드의 실행순서가1 구조만들기 export default return2 html 을 만들고 onClick이벤트 안 함수로 가서 그 함수 안 실행 값을 setCount로 인해 count에 담아주어 실행된다 라고 생각하긴했는데 count가 먼저 실행되어지고 그 다음에 setCount로 인해 값이 변경되어지는게 아닌가란 의문이 들었습니다 useState는 실행순서가 언제 인가요? useState있을때 실행순서를 알고싶습니다제가 자바스크립트라던지 리액트의 실행순서에 동작방식에 미흡한데 추천해주실만한 글이나 어떻게 공부를 해야하는지에 대해 조언부탁드립니다 🙏

강사님 안녕하세요 ! 무엇이 문제인지 도통 모르겠어서 질문 남깁니다..섹션 30 강의에서 아래와 같이 작성하면import { gql, useQuery } from '@apollo/client'; const FETCH_BOARDS = gql` query { fetchBoards { number writer title contents } } `; // const FETCH_BOARDS = gql` // query { // fetchBoards { // writer // title // contents // } // } // `; export default function StaticRoutingMovedPage() { const { data } = useQuery(FETCH_BOARDS); console.log(data); console.log(data?.fetchBoards); return ( <div>안녕 {data?.fetchBoards.map(el => ( <div key={el.number}> <span> <input type="checkbox" /> </span> <span style={{ margin: "10px" }}>{el.number}</span> <span style={{ margin: "10px" }}>{el.title}</span> <span style={{ margin: "10px" }}>{el.writer}</span> </div> ))} </div> ); } 이런 에러가 확인됩니다. 조회하려는 데이터에 number가 문제인가 싶어 위에서 주석 처리한 부분과 같이 number를 지워보면빈 화면만 떴었는데 이번엔 게시글 목록 데이터가 확인이 되기는 합니다.Warning: Each child in a list should have a unique "key" prop.하지만 위와 같은 경고 문구가 확인이 되어서 return 문에 key를 추가해 봤으나, 동일한 에러가 떠있습니다. return ( <div> {data?.fetchBoards.map(el => ( <div key={el.number}> <span> <input type="checkbox" /> </span> <span style={{ margin: "10px" }}>{el.number}</span> <span style={{ margin: "10px" }}>{el.title}</span> <span style={{ margin: "10px" }}>{el.writer}</span> </div> ))} </div> ); 제가 playground에서 데이터를 조회해보면위와 같이 데이터가 확인이 되긴 하는데, 왜 number 관련 에러가 뜨는지, 무엇이 문제인지 모르겠습니다. 또 강사님과는 다른 데이터가 확인되는데, 강사님과 다른 데이터가 조회되는 것이 맞는건가요? 데이터 값이 다르게 나올 수도 있는 건지 헷갈립니다.. 질문을 남기는 중에 새로고침을 했더니, 아까와 달리 number를 지운 후, Network - Response 에 보였던 데이터가 안보이고 다른 문구가 생겼습니다.게시글 목록 데이터는 화면에 조회되는데 왜 저런 문구가 생긴걸까요? 궁금한 점이 많지만,, 답변 주시면 감사하겠습니다 ㅠㅡㅠ 

섹션 26 포트폴리오 깃허브 코드를 그대로 가져가서 썼는데도 오류가 나네요 전송할때 400오류가 납니다.return() 부분이 HTML코드가 작성되는곳인데 파일저장할때 프리티어 때문에 ; 가 붙어서 문서에 자꾸 ;가 작성되는데 안되게 하는법없을까요?graphql 연습용과 포트폴리오용의 차이가 뭔가요?또 VSCODE에서 graphql으로 Mutation을 작성할때 연습용 , 포트폴리오용 중에 어떤 방식으로 작성해야하나요?createBoardInput: CreateBoardInput! 이런식으로 되어있는 Mutation에서 CreateBoardInput! 이런형태는 무조건 객체로 작성해주어야 하나요?5. 쿼리 작성할때 강사님처럼 저는 색깔이 안바뀌는데 왜그런가요? 다른 익스텐션을 설치해주어야하나요?

안녕하세요 그랩님! 처음 질문드려봅니다ㅜㅜ혹시 하기와 같이 코드를 작성했는데 결과값이 계속 농구공 배열 한개로만 나와서.. 다른분들 질문해주신 부분을 살펴봐도 동일한 질문이 없어 문의드립니다! 어떤부분 수정이 필요할지 피드백 부탁드려도 될까요ㅠㅠ

["INFO" - 오후 3:42:09] Formatting file:///c%3A/Users/82109/OneDrive/%EB%B0%94%ED%83%95%20%ED%99%94%EB%A9%B4/codecamp-frontend-mentee/class/pages/_app.tsx ["ERROR" - 오후 3:42:09] Error resolving prettier configuration for c:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\class\pages\_app.tsx ["ERROR" - 오후 3:42:09] JSON Error in c:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\class\.prettierrc.json: Unexpected token '�', "��{JSONError: JSON Error in c:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\class\.prettierrc.json: Unexpected token '�', "��{이건 무엇을 의미하는건가요? 프리티어가 잘 작동을 하지 않네요 린트에러가 없는곳에서는 프리티어가 작동하는데 린트에러가 있으면 프리티어가 작동을 안하는데 원래 그런건가요?? 아님 제가 설정을 잘못한건지 모르겠네요 ㅠㅠ 

// import "../styles/globals.css"; import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client"; import type { AppProps } from "next/app"; export default function App({ Component }: AppProps): JSX.Element { const client = new ApolloClient({ uri: "http://backend-example.codebootcamp.co.kr/graphql", cache: new InMemoryCache(), //컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 임시로 저장해 놓기 => 나중에 더 자세히 알아보기 }); //graphql 셋팅 return ( <div> <div> ============여기는 APP.js 컴포넌트 시작부분 입니다============== </div> <ApolloProvider client={client}> <Component /> </ApolloProvider> <div>============여기는 APP.js입니다==============</div> </div> ); }코드이고 Component에 빨간줄이 그어져서 마우스를 올려보니 'Component'은(는) JSX 구성 요소로 사용할 수 없습니다.Its type 'NextComponentType<NextPageContext, any, {}>' is not a valid JSX element type.'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }' 형식은 'ElementType' 형식에 할당할 수 없습니다.'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }' 형식은 'new (props: any) => Component<any, any, any>' 형식에 할당할 수 없습니다.구문 시그니처 반환 형식 'Component<{}, any, any>' 및 'Component<any, any, any>'이(가) 호환되지 않습니다.'render()'에서 반환되는 형식은 해당 형식 간에 호환되지 않습니다.'React.ReactNode' 형식은 'import("c:/Users/82109/OneDrive/\uBC14\uD0D5 \uD654\uBA74/codecamp-frontend-mentee/class/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode' 형식에 할당할 수 없습니다.'{}' 형식은 'ReactNode' 형식에 할당할 수 없습니다.ts(2786)(parameter) Component: NextComponentType<NextPageContext, any, {}> 라고 나오는데 실행해도 크게 문제는 없는거 같은데 ts로 바꾸면서 타입을 설정해주지 않아서 나오는 warning같은 느낌인건지 궁굼해서 질문 남깁니다.항상 좋은강의 감사드립니다!

섹션 40에서 postgres 관련된 부분에서 노션에 나와있는 부분과 같이 host와 비밀번호를 입력했는데 진행이 되질않는데요혹시 이 부분이 실습 불가능한 부분이라 영상만 봐도 되는 건가요?

강의에서는 레코드삭제 버튼이 생겨서 데이터를 지울 수 있었는데, 제가 할 때는 생성되지 않아 지울 수가 없었습니다.SQL 실행에서 명령어를 넣어보려 해도 에러가 뜹니다. 어떻게 하면 데이터를 지울 수 있나요?

pm2 start main.js --watch 를 입력했을때 [PM2][ERROR] Script already launched, add -f option to force re-execution 라고 오류가 뜹니다.

도커 빌드하고 실행하는 과정에서 에러가 발생하네요.. 답변해주신 다른 글보고 해봐도 잘안되네요..  일단 빌드시 생기는 에러입니다.yarn install 할때 경고가 엄청 발생하는데 apollo-server-express가 문제인 것 같은데 정확한건 잘 모르겠네요..사용한 버전정보입니다.도커 빌드가 완료되서 실행을 해도 gateway가 다운되고 1번에러라는 메세지만 받네요 .. 어떻게 해야 할 지 답변부탁드립니다 ㅜㅜ

import { useMutation, gql } from "@apollo/client"; const 나의그래프큐엘셋팅 = gql` mutation { createBoard(writer: "철수", title: "안녕하세요", contents: "반갑습니다.") { _id number message } } `; export default function GraphqlMutationPage() { const [나의함수] = useMutation(나의그래프큐엘셋팅); console.log(나의함수); const onClickSubmit = async () => { const result = await 나의함수(); }; return <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button>; // 한 줄 일때는 괄호() 팔요 없음 } 안녕하세요 질문드립니다!이 코드에서 const [나의함수] = useMutation(나의그래프큐엘셋팅); 이 부분은 useMutation의 반환값 객체를 배열구조할당해서 나의함수라는 변수에 넣는건가요? useMutation의 반환값은 객체인가요? 배열인가요? 헷갈리네요..

error : DataSource is not set for this entity.백엔드 서버와 데이터베이스 도커를 통해 연결 하기를 적용한 후에도db랑 연결이 안되는거 같은데, 제가 도커랑 orm 개념이 조금 부족해서 해결을 못시키는거 같습니다ㅠdata-source.tsdocker-compose.yml server/Dockerfile + client/Dockerfile로 되어있습니다.api가 500으로 걸리는걸로 보아server는 잘 작동 중인거 같은데 data 쪽이 연결이 안되는거 같아서 이 부분에 대한 해결점 이나 혹시 데이터가 연결 안된 걸 확인 하는 방법이나 해결 점 있을까요?ㅠㅠ

안녕하세요.현재 웹팩의 가장 최신버전이 5버전으로 알고 있는데,해당 강의에서는 4버전으로 진행하더라고요.제가 잘 몰라서 그런데.. 4버전으로 공부해도 상관은 없겠죠?

안녕하세요? 웹팩 cli를 처음 깔아보는 수강생입니다..npm install -D webpack@4 webpack-cli위의 코드처럼 그냥 webpack-cli를 깔면, 에러가 발생하는데요...그래서수업시간에 webpack-cli를 버전3을 사용한다는 글을 보고, 다음과 같이 명령어를 바꿔서 쳐보았더니npm install -D webpack@4 webpack-cli@3정상적으로 설치가 되었습니다. 왜 버전을 명시해주지 않으면 에러가 발생하나요?  

강사님께서, 수업중에 import해오는 방법을 두가지를 언급하셨는데요,import * as math from './math.js'; // [방법1] 모든 export를 math라는 객체로 가져오기 import { sum } from './math.js'; // [방법2] sum함수만 가져오기방법1로 import할 경우, sum함수를 사용하기 위해서 math.sum(,) 이렇게 써야하지만,방법2로 import할 경우, 그냥 바로 sum(,)으로 사용하면 되나요? 저는 일단 그렇게 이해하고 있는데그러면 import * as math1 from './math1.js'; import * as math2 from './math2.js';이렇게 math1.js와 math2.js에서 각각 sum함수를 만들고, 그걸 app.js에서 위와 같이 import해서 사용했을 때,math1.sum(,) 그리고 math2.sum(,) 이렇게 쓰면 되니깐, 이름이 sum으로 같아도 충돌이 안나겠네요? 그러나 방법2방식으로 import { sum } from './math1.js'; import { sum } from './math2.js';이렇게 가져온다면, 둘다 sum(,)으로 호출하게 되니깐, 이름 충돌이 발생하겠네요?제가 이해한것이 맞는지 확인부탁드려요ㅠㅠ

안녕하세요 이장우 닮은 제로초 선생님,// workspaces.service.ts async createWorkspaceMembers(url: string, email: string) { const workspace = await this.workspacesRepository.findOne({ where: { url }, relations: ['Channels'], }); // queryBuilder 버전 this.workspacesRepository .createQueryBuilder('workspaces') // typeorm은 innerJoin 하면 join한 테이블은 가져오지 않는데, // innerJoinAndSelect을 하면 join한 테이블을 다 가져온다. .innerJoinAndSelect('workspaces.Channels', 'channels') .getOne(); const user = await this.usersRepository.findOne({ where: { email } }); if (!user) return null; const workspaceMember = new WorkspaceMembers(); workspaceMember.WorkspaceId = workspace.id; workspaceMember.UserId = user.id; await this.workspaceMembersRepository.save(workspaceMember); const channelMember = new ChannelMembers(); channelMember.ChannelId = workspace.Channels.find( (v) => v.name === '일반', ).id; channelMember.UserId = user.id; await this.channelMembersRepository.save(channelMember); }강의에서 위와 같이 createWorkspaceMembers 를 작성하셨는데, 여기도 transaction을 걸어주는게 낫겠죠? 걸어주는게 맞다면, 아래와 같이 하면 되나요? async createWorkspaceMembers(url: string, email: string) { const queryRunner = this.dataSource.createQueryRunner(); await queryRunner.connect(); await queryRunner.startTransaction(); try { const workspace = await queryRunner.manager.findOne(Workspaces, { where: { url }, relations: ['Channels'], }); const user = await queryRunner.manager.findOne(Users, { where: { email } }); if (!user) return null; const workspaceMember = new WorkspaceMembers(); workspaceMember.WorkspaceId = workspace.id; workspaceMember.UserId = user.id; await queryRunner.manager.save(workspaceMember); const channelMember = new ChannelMembers(); channelMember.ChannelId = workspace.Channels.find( (v) => v.name === '일반', ).id; channelMember.UserId = user.id; await queryRunner.manager.save(channelMember); await queryRunner.commitTransaction(); } catch (error) { console.error(error); await queryRunner.rollbackTransaction(); } finally { await queryRunner.release(); } }

라디오버튼 기본값은파란 테두리, 흰 배경, 파란 점 인데빨간 테두리, 검은 배경, 노란 점이런식으로 3가지를 다 바꿀수는 없나요?과제중에 궁금해서 여쭤봅니다테두리와 점 색을 바꾸면배경은 흰색이 되어버리거나점이 사라져버리고 배경색으로만 가득 찬다거나해서3개를 함께 적용할 방법을 찾지 못하겠는데원래 안되는건가요?