안녕하세요, 강의 잘 들었습니다.SSG 페이지 갯수에 관해서 궁금한 것이 있는데요.만약에 커뮤니티 사이트 같은 걸 만든다고 하면 엄청나게 많은 글이 생성 될텐데 SEO를 위해 이 페이지 모두 SSG를 적용하면 안될 것 같다고 생각하는데 맞을까요?그리고 그렇다면 SSR로 모든 페이지를 개발한다고 하면 사용자 경험이 안 좋을 것 같고, SSR은 prefetch도 안되는 것 같은데 속도를 개선하는 방법이 없을까요?

안녕하세요 aws ec2 배포중 docker-compose up 시 동일 에러가 계속 뜨는데 이유를 모르겠습니다ㅠㅠ...env 파일 따로 루트폴더에 생성해서 아이디 패스워드 작성해주었습니다오류메세지.envdocker-compose.yml

const ImgWrapper = styled.div` padding: 32px; text-align: center; & img { margin: 0 auto; max-height: 750px; } `;사진이 정확히 가운데에 정렬이 안돼서 padding을 봤는데 이상하게 padding 오른쪽이 있는데 오른쪽 padding이 짤려서출력이 됩니다 이유가 무었일까요?

사진처럼 eslint js 파일에 rules 설정을 마쳤는데도 npx eslint .을 하면 여전히 문제가 100개 이상 발생하고 있습니다. 하지만 강의 내용에는 저 5개의 규칙만 적용해도 발생하는 문제가 없다고 뜹니다. 뭐가 문제인가요?빠른 수정 방식으로 새로운 규칙을 지정하는 등의 문제 해결은 가능하나 현재 강의 내용과 보여지는 에러가 달라서 질문 남깁니다. 빨간 줄이 쳐저 있는 부분은 import하는 부분과 코드 내부에서는 router 기능을 사용하는 곳에 표시됩니다.

 제 한계네용... 1.텍스트입력칸을 어떻게 하면 밑줄만 가로로 쭉 나오게 할지 모르겠고2. 성별 선택하는 라디오"만" 중앙배치 시키고싶은데 아직 해결이 안되고3.모든 요소들사이에 공간을 만들어주는게 아닌 가입버튼과 이용약관, 성별 선택라디오이렇게 세가지 요소만 공간을 만들고 요소를 선택해서 배치를 자유자재로 하고싶은데어렵네요 ㅠ

학습자료를 보고 수업프로젝트 설치목록 class와 freeboard_frontend를 설치하고 있는데, 어떨때는 설치가 잘 되는데 어떨때는 설치도중에 컴퓨터 전원이 꺼져버리네요. 왜 어쩔때는 설치도중에 컴퓨터 전원이 꺼지는 건가요?

안녕하세요! 강의 잘 보고있습니다섹션 8에 유저페이지 생성하기 부분을 진행 하던 중 useSWR을 입력 시 툴팁으로 useSWR에 대한 추론이 나오시는데 저는 나오지를 않습니다ㅠㅠ.. useSWRConfig 말고는 나오지 않는데 이유가 무엇일까요?라이브러리는 제대로 설치가 되었습니다..!

2:34환경을 초기화할때 사용 할 메서드 이름을 bootstrap 이라고 정하신 이유가 궁금합니다...!

안녕하세요, 사용자 정보 조회 API 부분에서컨트롤러에 보면screenName이 없을 경우에 대해서 예외처리를 해주고 있습니다.if (screenName === undefined || screenName === null) { throw new BadReqError('screenName이 누락되었습니다.'); }위와 같은데저 에러를 구현해보고 싶어서 테스트 해봤는데 되지 않아서 고민하다가 질문드려요.[screenName].ts 형식의 Dynamic route로 되어 있어서 screenName이 누락된다면 해당 컨트롤러를 수행하지 않아 위 에러가 발생하지 않을 것 같은데 맞을까요?제가 next는 이제 막 배워가고 있는 단계라서 잘 몰라서 위 이유가 맞는지 잘 모르겠습니다. 제가 발생시키지 못 하고 있는 중이라면 어떻게 해야 저 에러를 발생시킬 수 있는지 또한 같이 답변 부탁드립니다!!요약dynamic route로 인해 screenName이 누락되었을 경우 컨트롤러를 실행하지 않는다고 생각했는데 맞을까요?실행시킬 수 있는 에러라면 어떻게 해야 저 예외처리를 실행 시킬 수 있나요?

 redirect_uri_mismatch구글 로그인 버튼 생성하여 팝업을 실행시키면 위와 같은 에러가 나옵니다.안되는 이유를 찾던 중 강의에서는 authDomain에FIREBASE_AUTH_HOST 를 입력하셨는데 host를 입력하지 않고,firebaseconsle에서 확인할 수 있는 domain 을 가져와서 값을 넣으니 동작 하였습니다. 아래와 같은 형식authDomain: "blah-tutorial-3e756.firebaseapp.com",영상을 찍을 때와 버전이 달라져서 그런건지 문의드리며 혹시 비슷한 이슈로 팝업에서 에러를 받는 수강생들에게 도움이되길바랍니다.

똑같이 했는데요 docker-compose up data폴더안에 안생겨요

안녕하세요? 프로그램 설치 관련 한번 더 질의 드립니다. 질의 답변 및 노션의 디렉션대로 진행하던 중 어떤 문제가 발생한 듯도 했지만 설치는 진행이 되었습니다. npx create-next-app을 설치한 한 class 폴더 내 다른 폴더들 확인한 결과, 아래와 같이 pages 폴더는 설치가 되지 않았고, node.modules에서는 노션에 나온 대로 버전 변경하려 했으나 이미 변경된 상태였습니다. 시간이 지나 업데이트 등의 이유로 설치 항목이 변경되어 위와 같은 것인지, 혹은 제가 무언가 실수를 한 것인지 궁금하여 질의 드립니다. 위와 같이 설치된 상태에서도 수업 진행에 차질이 없을지요?   

안녕하세요! 강의 수강 중 에러 원인을 모르겠어서 문의드립니다.next.js 최신 업데이트 버전을 사용하고 있어 동적 페이지 아래와 같이 생성 후 동일한 코드를 작성하였습니다. getstaticpath로 페이지 생성은 되었습니다. console에 path도 잘 나타나는 것 확인했습니다!근데 getstaticprops에서의 console이 아무것도 찍히지 않습니다. 실행 자체가 되지 않는 것 같은데 아무리 찾아도 모르겠습니다ㅜㅜ 무엇이 잘못된 것일까요?ㅜㅜ  

안녕하세요 제로초님 궁금한게 있어서요.이러한 부모자식 관계에서 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를 쓰지않아도 리렌더링이 되지않는다고 한 이유가 궁금합니다.

안녕하세요 강사님 강의를 듣다가 이해를 제대로 한게 아닌거 같다는 생각이 들어 질문드립니다 검색해봐도 검색실력이 꽝인지... 제대로된 답을 못 찾았습니다 실행순서에 대해 알고싶은데요 이 코드의 실행순서가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같은 느낌인건지 궁굼해서 질문 남깁니다.항상 좋은강의 감사드립니다!

안녕하세요 선생님.제가 지금 npx create next app을 하면 pages가 아니라 app폴더 방식으로 버전 13이 기본으로 되어 있는 것 같습니다.13 버전으로 공부해도 괜찮을까요? getStaticProps함수 등 여러가지 기능이 바뀌었을 것 같아서요