만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)대시보드

강사님 안녕하세요. 이 전 질문에 대한 답변으로 get 요청에 대한 문제는 해결했습니다 감사합니다^^그런데 이후 다음과 같은 문제가 발생하였습니다. package-lock.json 삭제하고, node_modules 폴더도 삭제한 뒤 yarn 으로 패키지 재설치하였고,yarn dev, yarn build 등 명령어를 입력하면 다음과 같은 에러 메시지가 출력되면서 localhost:3000에 진입할 수 없습니다.@types/react를 최신버전으로 다시 설치해봤고, 강의에서 사용중인 버전인 ^17.0.37으로도 다시 설치해봤고, vscode 종료 후 재실행하여도 동일한 에러메시지가 계속 출력됩니다.해당 에러 메시지는 npm run dev 명령어를 입력해도 @types/react를 설치하라는 에러가 발생합니다.자체 해결https://stackoverflow.com/questions/71843307/next-js-is-not-recognizing-types-react위 스택오버플로우 답변을 보고 @types/react 버전을 18.0.1 버전으로 변경했습니다. 결과적으로 문제는 해결되었습니다.그러나 의문점은, 강의에서 사용하는 버전은 ^17.0.37인데 저의 경우만 18.0.1버전으로 변경해야 작동하는 것인지?아니면 다른 분들도 작동하지 않으시는지? 저만 그런것이라면 원인이 무엇일지 궁금합니다. ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info  - Loaded env from /Users/hanair/dev/blahx2/.env It looks like you're trying to use TypeScript but do not have the required package(s) installed. Please install @types/react by running:         yarn add --dev @types/react If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory). error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.  package.json 파일은 다음과 같습니다.{   "name": "blahx2",   "private": true,   "scripts": {     "dev": "next dev",     "build": "next build",     "start": "next start",     "lint": "next lint"   },   "dependencies": {     "@chakra-ui/react": "1.8",     "@emotion/react": "^11.10.6",     "@emotion/styled": "^11.10.6",     "firebase": "^9.20.0",     "firebase-admin": "^11.7.0",     "framer-motion": "^6.5.1",     "next": "12.0.7",     "react": "17.0.2",     "react-dom": "17.0.2",     "styled-components": "^5.3.3"   },   "devDependencies": {     "@types/node": "^16.11.13",     "@types/react": "^17.0.58",     "@types/styled-components": "^5.1.18",     "@typescript-eslint/eslint-plugin": "^5.8.0",     "@typescript-eslint/parser": "^5.8.0",     "babel-eslint": "^10.1.0",     "babel-plugin-styled-components": "^2.0.2",     "eslint": "8.4.1",     "eslint-config-airbnb": "^19.0.2",     "eslint-config-airbnb-base": "^15.0.0",     "eslint-config-airbnb-typescript": "^16.1.0",     "eslint-config-next": "12.0.7",     "eslint-config-prettier": "^8.3.0",     "eslint-plugin-babel": "^5.3.1",     "eslint-plugin-import": "^2.25.3",     "eslint-plugin-jsx-a11y": "^6.5.1",     "eslint-plugin-prettier": "^4.0.0",     "eslint-plugin-react": "^7.27.1",     "eslint-plugin-react-hooks": "^4.3.0",     "prettier": "^2.5.1",     "typescript": "^4.5.4"   } }

안녕하세요. thunder client로 get 요청시 무한로딩이 됩니다.localhost:3000/api/hello에 대한 요청이 되지 않습니다.다른 open api 요청을 쏴봤는데요. 그건 됩니다.혹시 원인이 무엇일까요?개발 환경은 실행중입니다.폴더 구조입니다. 아래는 코드입니다.// hello.ts // Next.js API route support: https://nextjs.org/docs/api-routes/introduction import { NextApiRequest, NextApiResponse } from 'next'; import FirebaseAdmin from '@/models/firebase_admin'; export default function handler(_: NextApiRequest, res: NextApiResponse) { FirebaseAdmin.getInstance().Firebase.collection('test'); res.status(200).json({ name: 'John Doe' }); }  // firebase_admin.ts import * as admin from 'firebase-admin'; interface Config { credential: { privateKey: string; clientEmail: string; projectId: string; }; } /** 싱글톤 패턴을 이용해서 어디서든 같은 인스턴스를 불러낼 수 있도록 한다. */ export default class FirebaseAdmin { public static instance: FirebaseAdmin; /** 초기화 여부 */ private init = false; /** 인스턴스를 반환하는 메서드 */ public static getInstance(): FirebaseAdmin { if (FirebaseAdmin.instance === undefined || FirebaseAdmin.instance === null) { /** 초기화 진행 */ FirebaseAdmin.instance = new FirebaseAdmin(); /** 환경을 초기화한다. */ FirebaseAdmin.instance.bootstrap(); } return FirebaseAdmin.instance; } /** 환경을 초기화할 때 사용할 메서드 */ private bootstrap(): void { /** 등록되어 있는 앱의 갯수가 0이 아니어야 앱이 존재함을 의미한다. */ const haveApp = admin.apps.length !== 0; if (haveApp) { this.init = true; return; } /** config를 활용해서 초기화한다. */ const config: Config = { credential: { /** process.env.로 환경변수에 접근하여 각 값들을 받아온다. * 각 갑들은 undefined일 수 있으므로, 값이 없을 경우 빈 문자열을 할당한다. */ projectId: process.env.projectid || '', clientEmail: process.env.clientEmail || '', /** * privateKey는 원래 개행이 들어간 여러 줄 짜리 텍스트인데, 반환할 때는 json에서는 그렇게 표현할 수 없기 때문에 한 줄이 된다. * 그 한줄짜리 json을 원래대로 개행이 들어가도록 임의로 다시 개행문자를 넣어주는 것이다. */ privateKey: (process.env.privatekey || '').replace(/\\n/g, '\n'), }, }; admin.initializeApp({ credential: admin.credential.cert(config.credential) }); console.info('bootstrap firebase admin'); } /** firestore를 반환 */ public get Firebase(): FirebaseFirestore.Firestore { if (this.init === false) { this.bootstrap(); } return admin.firestore(); } public get Auth(): admin.auth.Auth { if (this.init === false) { this.bootstrap(); } return admin.auth(); } }

fireBase인증 과정에 대하여 질문있습니다. 제가 이해한 것이 맞는지 확인해주시면 감사하겠습니다.질문 1.(1) try { const signInResult = await signInWithPopup(FirebaseAuthClient.getInstance().Auth, provider); if (signInResult.user) { const idToken = await signInResult.user.getIdToken(); const { uid, displayName, photoURL, email } = signInResult.user; // uid // photoURL // displayName const resp = await memberAddForClient({ data: { uid, displayName: displayName || undefined, email: email!, screenName: email!.split('@')[0], photoURL: photoURL || undefined, provider: 'google', }, token: idToken, }); }signInWithPopup메서드를 통해 구글 로그인 후 로그인 한 유저 정보(signInResult)를 가져옵니다.(2) const idToken = await signInResult.user.getIdToken();여기서 accesstoken과 다른 유저정보 email,uid등등을 가져와서 filestore에 저장합니다(3)export default async function verifyFirebaseIdToken(token: string) { try { const id = await FirebaseAdmin.getInstance().Auth.verifyIdToken(token); return id.uid; }그후 사용자가 어떤 api요청을 보낼 때 verifyFirebaseIdToken 함수에에 있는 verifyIdToken메서드를 통해 아까 받은 accesstoken을 보내 토큰이 유효한지 검사합니다. accessotken이 유효하면 id를 주어 api에 함께 보내 api 요청을 성공시킵니다.이 과정이 맞나요?질문 2. const id = await FirebaseAdmin.getInstance().Auth.verifyIdToken(token);verifyFirebaseIdToken에서 유효성 검사를 할 때 token이 로그인할 때 받은 accesstoken과 동일한 token인가요?질문 3.firestore에 accesstoken은 저장되어 있지 않던데 어디에 저장되어 있는 건가요?질문 4.코드에 accesstoken으로 인증하고 유효성 검사하는 것이 있는데요 따로 refreshToken은 없는데 firebase auth는 refreshtoken 시나리오는 잘 안하나요?질문 5.코드에는 브라우저에 쿠키나 로컬스토리지를 사용하지 않음에도 브라우저를 껐다가 다시 켜도 로그아웃 되어있지 않고 로그인이 되어있는데 어떻게 가능한 것인가요?질문 6.지금 이 로그인이 흔히 말하는 oauth맞나요?

안녕하세요. 항상 잘 듣고 있는 학생입니다.다름이 아니라 '상세 메세지 보기' 버튼 클릭 시window.location.href 을 사용해서 상세 페이지로 이동하게 구현 하셨는데, next/router 말고 window.location이 사용된 이유가 있을까 문득 궁금해서 질문 남깁니다.외부 URL로 이동하는 건 아니고상세 페이지에서 back버튼은 next/Link를 사용하셔서, 혹시 window.location 방법이 서버사이드 측면에서 기능적 이점이 있는 걸까요?   - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

6:15초 쯤 자동으로 줄바꿈 되는거 같은데 이런건 어떻게 하는건가요?

안녕하세요 송요창 개발자님, 프론트 개발을 공부하다 우연한 기회로 강의를 듣고있는데 정말 재밌게 잘 배우고 있습니다. 감사합니다!다름이 아니라 custom_server_error.ts 파일에서 에러메세지를 문자열로 표기하는 용도로 serialize error라는 함수를 작성하셨고 error handling file에서 사용하셨는데요.말씀하신대로 외부로 에러메세지를 보내주려는 의미는 이해하겠지만 왜 serialize라는 표현을 사용하셨는지,여기서 serialize라는 표현이 정확히 어떤 의미를 지니는지 설명해주실 수 있을까요?좋은 강의 만들어주셔서 감사합니다 :)

안녕하세요. 매 회차마다 선생님 코딩 실력에 감탄하며 강의 듣고 있습니다. 지금 페이지네이션 API 만들고 썬더 클라이언트에서도 문제 없이 작동했는데 view 부분에서 setMessageList((prev) => [...prev, ...data.content]);로 바꾸고 나서 처음 화면이 로드되면 API 호출이 두번 되면서 messageList에 데이터가 두번 저장됩니다. 그 이후 더보기 버튼 클릭시에는 size만큼 잘 불러오는데 처음 페이지 로딩때만 두번 나오는 이유를 모르겠습니다. useEffect 부분도 useEffect(() => { if (userInfo === null) return; fetchMessageList(userInfo.uid); }, [userInfo, messageListFetchtrigger, page]); 로 선생님 작성한 코드와 같은 것 같은데 틀린부분 있을까요?React Hook useEffect has a missing dependency: 'fetchMessageList'. Either include it or remove the dependency array.이런 eslint 경고도 나옵니다.강의 계속 돌려보다가 도저히 모르겠어서 질문 남깁니다 ㅠ    - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요 강사님! 수강을 완료하고 개인적으로 플젝을 진행하며 복습을 하고있습니다.많은 도움이 되었고, 강의 내에 코드 짤 때의 깨알 꿀팁도 많아서코드 짜는 실력이 많이 늘었습니다. 다시 한 번 감사합니다. 지금 강의를 다시 들으며 머릿속을 정리하고 싶은데기간이 3주도 채 안남아있어서 혹시 연장이 가능할지 여쭤봅니다😥😥 감사합니다.

메시지 거절(Deny) 뷰 작업 강의와 메시지 거절(Deny) API 구현 강의 제목이 서로 변경되었어요!강의 제목 - 뷰 작업. 강의 내용 - API 구현강의 제목 - API 구현. 강의 내용 - 뷰 작업다시 한번 듣고 있는데 발견했습니다.

안녕하세요, 강사님.강의를 듣고 있는 학생입니다.제가 Next.js를 가지고 개발을 하고 있는데 배포를 할 때, Next.js로만 dockerfile을 작성해서 배포하면 되는 걸까요? 아니면 Vue.js와 같은 SPA 처럼 Nginx를 포함시켜서 dockerfile을 작성하고 각각 컨테이너를 만들고 연결시켜주면 되는 건가요?제가 이쪽 지식이 부족해서 수업 이외에 다른 것도 여쭤보게 되었는데,, 만약 답변이 가능하시다면 염치불구하고 물어보고 싶습니다 ㅠㅠ배포 환경은 EC2와 같은 가상컴퓨터환경(클라우드)에서 쿠버네티스를 만들고 그 위에 올릴거 같은데,, 어떤 구조를 참고하면 좋을지 고민이에요.

강사님 안녕하세요:)구글 계정 로그인을 구현하다가 제목과 같은 에러가 발생했습니다(구글로그인 버튼 클릭시).팝업을 열기 위한 url이 잘못되었다고 나오는데 어느 부분이 잘못되었는지 감이 안잡히네요ㅠ.env에 있는 내용을 next.config.js에서 export했고 FirebaseClient에서 FirebaseCredentials로 잘 매칭한 것 같은데 이상하네요..어떻게 접근하면 좋을까요.?? 

안녕하세요 강사님. 명쾌한 강의 덕분에 많이 배우고 있습니다. 지금까지는 모르는 부분이나 오류를 직접 찾아보고 해결해왔는데 빌드 부분은 도저히 못 찾겠어서 질문글을 작성하였습니다ㅜㅜ... 수강 도중 빌드에 계속 오류가 생겨 질문 남깁니다.(강사님의 초기설정 .eslintrc.js 파일을 사용시 오류)  초반에 강사님의 깃에서 초기설정 버전 파일을 클론해서 시작할 때부터 ts, tsx 파일 맨 첫줄들이 다 빨간줄이 떴었는데 npm run dev는 실행되길래 무시해도 되는 오류인 줄 알고 진행했습니다.ㅜㅜ .. 빌드가 안되는걸 이제서야 알았어요...babel-eslint 가 @babel/eslint-parser로 버전이 바뀌어 오류가 난다 해서 변경시도도 해보았는데 node_modules에서 못찾는다는 오류가 발생해서 지금은 다시 babel-eslint로 커밋한 시점에 돌려놓은 상태입니다.원인이 너무 궁금한데 이틀째 아침부터 저녁까지 해결방법만 찾고있는데도 해결을 못했습니다ㅜㅜ...부끄럽지만 해결 방법에 대해 질문 남깁니다..eslintrc.js 파일에서 parser : '@typescript-eslint/parser'과 parser:'babel-eslint'를 같이 쓰면 안되는 것 같지만 둘 중 하나만 지워도 또 에러가 떠서 저 상태를 유지하고 있습니다. 깃 주소는 해결되어 지우겠습니다긴 글 읽어주셔서 감사합니다.> 현재 오류 //.eslintrc.js 파일 module.exports = { parser: '@typescript-eslint/parser', // Specifies the ESLint parser extends: [ 'airbnb', 'plugin:@typescript-eslint/recommended', 'plugin:import/typescript', 'plugin:prettier/recommended', 'babel-eslint', 'prettier', ], plugins: ['babel-eslint', '@typescript-eslint', 'prettier', 'react-hooks'], parserOptions: { ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features sourceType: 'module', // Allows for the use of imports ecmaFeatures: { jsx: true, }, project: './tsconfig.json', }, parser: 'babel-eslint', env: { browser: true, jest: true, es6: true, node: true, }, globals: { cy: true, Cypress: true, }, rules: { 'arrow-parens': [2, 'always'], '@typescript-eslint/no-unused-vars': [ 1, { argsIgnorePattern: 'res|next|stage|^err|on|config|e', }, ], 'arrow-body-style': ['error', 'as-needed', { requireReturnForObjectLiteral: false }], 'no-param-reassign': [ 2, { props: false, }, ], 'no-unused-expressions': [ 1, { allowTaggedTemplates: true, }, ], '@typescript-eslint/prefer-interface': 0, '@typescript-eslint/explicit-function-return-type': 0, '@typescript-eslint/no-use-before-define': 0, '@typescript-eslint/camelcase': 0, '@typescript-eslint/no-var-requires': 0, '@typescript-eslint/no-explicit-any': 0, '@typescript-eslint/no-non-null-assertion': 0, 'no-console': 0, 'spaced-comment': 0, 'no-use-before-define': 0, 'linebreak-style': 0, 'consistent-return': 0, import: 0, 'func-names': 0, 'import/no-extraneous-dependencies': 0, 'import/prefer-default-export': 0, 'import/no-cycle': 0, 'import/extensions': 0, 'import/no-unresolved': 0, 'space-before-function-paren': 0, 'react/jsx-one-expression-per-line': 0, 'react/no-danger': 0, 'react/display-name': 1, 'react/react-in-jsx-scope': 0, 'react/jsx-uses-react': 1, 'react/forbid-prop-types': 0, 'react/no-unescaped-entities': 0, 'react/prop-types': 0, 'react/jsx-filename-extension': [ 1, { extensions: ['.js', '.jsx', '.tsx'], }, ], 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'warn', quotes: [ 2, 'single', { avoidEscape: true, }, ], 'prettier/prettier': 'error', 'jsx-a11y/href-no-hash': 'off', 'jsx-a11y/anchor-is-valid': [ 'warn', { aspects: ['invalidHref'], }, ], }, }; // package.json 파일 { "name": "blahx2", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@chakra-ui/icons": "^2.0.17", "@chakra-ui/react": "^1.8.8", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "axios": "^1.2.3", "chrome-aws-lambda": "^6.0.0", "firebase": "^9.15.0", "firebase-admin": "^11.4.1", "framer-motion": "^6.5.1", "moment": "^2.29.4", "next": "12.0.7", "playwright-core": "^1.30.0", "react": "17.0.2", "react-dom": "17.0.2", "react-query": "^3.39.3", "react-textarea-autosize": "^8.4.0", "styled-components": "^5.3.3" }, "devDependencies": { "@types/node": "^16.11.13", "@types/react": "^17.0.37", "@types/styled-components": "^5.1.18", "@typescript-eslint/eslint-plugin": "^5.8.0", "@typescript-eslint/parser": "^5.8.0", "babel-eslint": "^10.1.0", "babel-plugin-styled-components": "^2.0.2", "eslint": "8.4.1", "eslint-config-airbnb": "^19.0.2", "eslint-config-airbnb-base": "^15.0.0", "eslint-config-airbnb-typescript": "^16.1.0", "eslint-config-next": "12.0.7", "eslint-config-prettier": "^8.3.0", "eslint-plugin-babel": "^5.3.1", "eslint-plugin-import": "^2.25.3", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-react": "^7.27.1", "eslint-plugin-react-hooks": "^4.3.0", "prettier": "^2.5.1", "typescript": "^4.5.4" } }

members.add.ts 25번째 줄에 return이 없어도 괜찮은건가요?또 개인적인 생각으로는 api를 호출하는 부분에서 axios를 사용하면 코드가 더 간단해질 것 같은데 fetch가 사용된 이유가 있을까요?바쁘실텐데 여러 사소한 질문들 드려서 죄송합니다.

useState의 set 함수가 비동기로 실행된다고 이해하고 있는데setLoading(true); setAuthUser({ uid: authState.uid, email: authState.email, photoURL: authState.photoURL, displayName: authState.displayName, }); setLoading(false);이 부분의 코드가 어떻게 순서대로 실행이 되는건가요? set 함수끼리는 순서가 지켜지나요?

개인 사정으로 결제만 해두고 강의를 하나도 듣지 못했는데,이제 시간이 조금씩 나서 듣기 시작하려고 합니다.그런데 강의 기한이 2달 조금 안되게 남아서 수강기한을 다시 설정할 수 없을까요? 

강의 화면에서 터미널을 보았습니다.사용하시는 쉘과 테마가 궁금합니다.감사합니다.

안녕하세요. 1월 21일까지 수강기간인데 제가 한번더 총체적으로 살펴보길 소망해서요.혹시 수강기간을 연장해주실 수 있을까요?보통 무제한 수강인줄알고 구매를 했었는데 수강기간이 제한이 있는줄 늦게 알게 되었습니다. ㅠ

제선에서 할 수 있는 방법은 다 해본거 같은데 모르겠습니다..config 수정node v 18- >14 fs오류때문에 강의 진행이 안되고있습니다 ㅠ 해결방법이 무엇일까요

// firebase_client.ts const FirebaseCredentials = { apiKey: publicRunTimeConfig.apiKey, authDomain: publicRunTimeConfig.authDomain, projectId: publicRunTimeConfig.projectId, } // next.config.js module.exports = { reactStrictMode: true, publicRunTimeConfig : { apiKey: process.env.publicApiKey || '', authDomain: process.env.FIREBASE_AUTH_HOST || '', projectId: process.env.projectId || '', } }  "firebase": "^9.15.0","firebase-admin": "^11.4.1",publicRunTimeConfig가 계속 undefined인거 같습니다 ㅜㅜ

12월 2일까지 수강할 수 있다고 되어 있는데, 그 이후로는 강의를 들을 수 없는 걸까요? 다시 듣고 있는데.. 복습이 불가 한가 해서요 ㅠㅠ