강사님 안녕하세요 ! 무엇이 문제인지 도통 모르겠어서 질문 남깁니다.. 섹션 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. 쿼리 작성할때 강사님처럼 저는 색깔이 안바뀌는데 왜그런가요? 다른 익스텐션을 설치해주어야하나요?
// 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같은 느낌인건지 궁굼해서 질문 남깁니다. 항상 좋은강의 감사드립니다!
Next.js 에서 스타일링을 하는 방법들이 다양한 것으로 알고 있습니다. css-in-js도 제공하는 styled-jsx 아니면 재설정 해서 styled-component, emotion ..... 등등 프로젝트 스타일링을 scss, scss module로 결정하셨는데 혹시 이유가 있나요 ?????
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
error : DataSource is not set for this entity. 백엔드 서버와 데이터베이스 도커를 통해 연결 하기를 적용한 후에도 db랑 연결이 안되는거 같은데, 제가 도커랑 orm 개념이 조금 부족해서 해결을 못시키는거 같습니다ㅠ data-source.ts docker-compose.yml server/Dockerfile + client/Dockerfile 로 되어있습니다. api가 500으로 걸리는걸로 보아 server는 잘 작동 중인거 같은데 data 쪽이 연결이 안되는거 같아서 이 부분에 대한 해결점 이나 혹시 데이터가 연결 안된 걸 확인 하는 방법이나 해결 점 있을까요?ㅠㅠ
라디오버튼 기본값은 파란 테두리, 흰 배경, 파란 점 인데 빨간 테두리, 검은 배경, 노란 점 이런식으로 3가지를 다 바꿀수는 없나요? 과제중에 궁금해서 여쭤봅니다 테두리와 점 색을 바꾸면 배경은 흰색이 되어버리거나 점이 사라져버리고 배경색으로만 가득 찬다거나해서 3개를 함께 적용할 방법을 찾지 못하겠는데 원래 안되는건가요?
중고마켓 게시글 작성하는 부분을 작업 하고 있는데 여기서 게시글작성은 회원만 등록 할 수 있는것을 파악하였습니다. 그래서 withAuth를 이용해서 분기처리를 하였는데 로그인 해도 로그인하라는 문구가 떠서 질문 드립니다. markets -> new -> index.tsx withAuth 어떤 식으로 해야 로그인 시 게시글 작성을 할 수 있을까요 , 또 로그인 안했을 시 빽쪽에서 막아놨기 때문에 게시글을 작성 할 수 없는걸까요?
강의에서 14버전으로 사용하셔서 설치하려했더니 오류가 나서 오류 해결방법 공유합니다. $ arch -x86_64 zsh 해당 명령어 입력 한뒤 다시 nvm install 원하는 버전 입력하시면 됩니다! 위와 같은 명령어 입력시 셸이 Intel 아키텍처 환경으로 전환되어 node 버전이 낮은것도 잘 설치 됩니다!
섹션 34에서 15분대에 _app.tsx 소스 파일을 eslint 형식에 맞게 수정하는 중에 이 사진처럼 Component 부분에 에러가 발생하는데 어떤 이유에서 발생하는지 알고 싶습니다. 검색을 해보니깐 버전이 꼬여서 발생한거라고 하는데... 이해가 가지 않습니다 ㅠㅠ [ 상세 에러 ] 'Component' cannot be used as a JSX component. Its type 'NextComponentType<NextPageContext, any, {}>' is not a valid JSX element type. Type 'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }' is not assignable to type 'ElementType'. Type 'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }' is not assignable to type 'new (props: any) => Component<any, any, any>'. Construct signature return types 'Component<{}, any, any>' and 'Component<any, any, any>' are incompatible. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("c:/VsCodeProject/0.study/inflearn/codecamp-frontend/class/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
안녕하세요 https://www.figma.com/file/e0ebI5c2LtjNMR8acwU0JS/%E1%84%8A%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%AF%E1%86%AF%E1%84%83%E1%85%B3?node-id=0%3A1 올려주신 강의 따라하던중 notion에 공유해주신 내용중 싸이월드 만들기 1탄에 올려주셨던 figma url 연결시 "Figma is experiencing a temporary outage. We'll be back soon!" 와 같은 오류창이 뜹니다. url 연결 확인 부탁드려요~
안녕하세요 next/image 에 대한 질문이 있습니다 next/image(총 17분) 강의 영상 02:40 example 파일의 확장자가 jpg 인데 webp 으로 사용되는 부분이 궁금합니다. webp 를 꽤 많은 브라우저에서 지원해주긴 하지만 모든 브라우저에서 지원해주지는 않을텐데, 어떤 최적화를 수행하는걸까요? 사용자 브라우저를 체크해서 img 태그의 srcset 를 사용하는 것과 같이 최적의 확장자에 대한 추가 최적화(client) 이미지 자체의 최적화(server) + 1번 제가 생각해본 최적화는 2가지 정도인데.. 알려주시면 감사하겠습니다
function ratingDetail(num) { // 여기에 코드를 작성하세요. let result; if (num >=90 && num <=100 ) { result = "A"; if (num >= 96) { result += "+"; } else if (num <= 93) { result += "-"; } else { } } else if (num >= 80 && num < 90) { result = "B"; if (num >= 86) { result += "+"; } else if (num <= 83) { result += "-"; } else { } } else if (num >= 70 && num < 80) { result = "C"; if (num >= 76) { result += "+"; } else if (num < 73) { result += "-"; } else { } } else if (num >= 60 && num < 70) { result = "D"; if (num >= 66) { result += "+"; } else if (num < 63) { result += "-"; } else { } } else if (num > 0 && num < 60) { result = "등급미달"; } else { result = "잘못된 값입니다"; } return result; } ratingDetail(60); output에 맞추다 보니 이렇게 코드가 길고 가독성이 떨어지게 되었습니다. if문을 중첩으로 사용하는 것 외의 다른 방법으로 코드를 최적화할 수 있는 방법이 궁금합니다. 커리큘럼 중 어느 부분을 찾아서 공부하고 응용하면 될까요?
