이미지를 업로드 후 받아오는 url을 통해, 이미지를 로딩해오는 과정에서 오류가 발생해서 질문드립니다. data는 uploadFile mutation 후 받아온 result에 대한 출력 결과이고, 여기서 받아온 url을 https://storage.googleapis.com/ . 뒤에 붙여서 이미지를 불러오려고 하면 오류가 발생합니다. 이 부분에 대한 에러를 해결할 수가 없어서 질문드립니다.
안녕하세요 강사님. 먼저 강의 감사히 잘 듣고 있습니다. 다름이 아니라 API Routes로 프로젝트를 변경한 이후 아래와 같은 에러가 발생합니다. 아래 자막에 달아 두신 것과 같이 .env파일도 정상적으로 배포한 사이트로 바꿔 두었고 혹시몰라 JSON파일에 대한 파싱문제가 있는것인지 확인하고 싶습니다. https://github.com/eugene028/NextJsMap github주소도 남깁니다. 잘 되다가 API Routes로 변경하니까 이런 에러가 뜨네요!! ㅜㅜ
안녕하세요. 로그인 버튼 클릭시 콘솔창에 다음과 같은 에러가 발생합니다. rebaseError: Firebase: Error (auth/auth-domain-config-required). at createErrorInternal (index-16e22603.js:497:1) at _assert (index-16e22603.js:503:1) at getIframeUrl (index-16e22603.js:9318:1) at _openIframe (index-16e22603.js:9343:1) at async BrowserPopupRedirectResolver.initAndGetManager (index-16e22603.js:9609:1) w https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth 공식 문서를 보니 authDomain configuration is not provided 일때 발생하는 에러라고 합니다. auth/auth-domain-config-required Thrown if authDomain configuration is not provided when calling firebase.initializeApp(). Check Firebase Console for instructions on determining and passing that field. 아래는 로그인버튼 컴포넌트에 onClick입니다. 코드상에는 에러가 발생하지 않았습니다. <GoogleLoginButton onClick={() => { signInWithPopup(FirebaseClient.getInstance().Auth, provider) .then((result) => { console.info(result.user); }) .catch((error) => { console.error(error); }); }} /> 루트 폴더에 .env 파일도 잘 있구요 ㅜㅜ 아래는 루트 폴더에 next.config.js 파일입니다. module.exports = { reactStrictMode: true, publicRuntimeConfig: { publicApiKey: process.env.publicApiKey || '', authDomain: process.env.FIREBASE_AUTH_HOST || '', projectId: process.env.projectId || '', }, }; 로그인 버튼 컴포넌트도 강사님 코드와 일치합니다.. 아래는 models/firebase_client.ts 입니다. 원인이 뭘까요!? import { initializeApp, getApps } from 'firebase/app'; import { Auth, getAuth } from 'firebase/auth'; import getConfig from 'next/config'; const { publicRuntimeConfig } = getConfig(); /** 환경변수는 node.js이기 때문에 서버에서 사용할 수 있고, 클라이언트에서 바로 접근할 수 없기 때문에 config 설정을 해주고 * 아래처럼 가져와서 쓸 수 있도록 해준다. */ const FirebaseCredentials = { apiKey: publicRuntimeConfig.apiKey, authDomain: publicRuntimeConfig.authDomain, projectId: publicRuntimeConfig.projectId, }; /** Firebase의 Authentication 모듈을 사용하기 위해 FirebaseClient 클래스를 정의하는 코드 */ export default class FirebaseClient { private static instance: FirebaseClient; private auth: Auth; /** 이미 초기화된 Firebase 애플리케이션이 있는지 검사하고, 없다면 FirebaseCredentials를 사용하여 Firebase 애플리케이션을 초기화 */ public constructor() { /** 앱이 몇 개 있는지 찾는 것 */ const apps = getApps(); /** 앱이 한 번도 초기화되지 않았다면 초기화를 시작 */ if (apps.length === 0) { console.info('firebase client init start'); initializeApp(FirebaseCredentials); } /** 초기화가 되었으면 Auth를 가져와서 할당 */ this.auth = getAuth(); console.info('firebase auth'); } /** 인스턴스를 가져옴 */ public static getInstance(): FirebaseClient { if (FirebaseClient.instance === undefined || FirebaseClient.instance === null) { FirebaseClient.instance = new FirebaseClient(); } return FirebaseClient.instance; } /** auth를 반환 */ public get Auth(): Auth { return this.auth; } }
강사님 안녕하세요. 이 전 질문에 대한 답변으로 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" } }
안녕하세요 제로초님 늦은 밤에 죄송합니다 현재 이미지 업로드하고 미리보기까지 나오는거 확인하고 올렸는데 성공했다고만 뜨고 정작 이미지 파일만 빼고 post성공한거같습니다 그리고 게시글은 올려 지긴 하나 사진 빼고 내용만 나옵니다 지금까지 콘솔내용을 보고 Images에 어떻게 넣을까 고민하다가 postform하고 백에서 routes/post.js부분을 건드려봤지만 아무런 성과가 없었습니다 에러도 안나와서 어딜봐야할지 잘모르겠습니다 ㅠㅠ
PostCardContent에서 취소 버튼을 클릭시 바로 onCancelUpdate()를 하게 되면 editText의 값이 리셋되지 않습니다. 그래서 다시 수정 버튼을 클릭하면, TextArea에 postData가 보이는 것이 아닌, 이전에 수정을 하려다가 취소할 당시의 값이 남아있게 됩니다! (해당 내용은 제로초님 sleact 레파지토리에 pull request 하였습니다.) 취소 버튼 클릭시 editText를 리셋하고 onCancelUpdate를 실행할 함수를 만들어주면 됩니다! const onClickCancel = useCallback(() => { setEditText(postData); onCancelUpdate(); }); <Button type="danger" onClick={onClickCancel}>취소</Button>
안녕하세요. 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(); } }
지올로케이션으로 위치 나타내는 함수 배우는데 콘솔창 맨 위에 [Violation] Only request geolocation information in response to a user gesture. 이렇게라고 떠요. 해당 자바스크립트 번호 보니까 딱히 문제 될 것도 없고 강사님이랑 똑같이 적었는데 왜 저렇게 뜰까요?
emotion에 props 던지기 및 setState의 작동원리강의 49분경 설명에서.... 작성자,제목,내용 인풋창에 q,q,q를 입력하는 과정에서 최종적으로 내용인풋에 q입력할때 처음에는 contents값이 없는 상태로 렌더링이 일어나고 42번째 함수가 종료가 될때, (임시로 저장해두었던 q) contents를 q로 바꾸라고 알아들어서 바꾸면 한번더 리렌더링이 일어나서 contents 값이 q가되어 있으므로 44번째 if문이 실행이 되어서 45번째 setMycolor가 실행이 되고, 또 다시 setMycolor가 바뀌므로 리렌더링 일어나서 버튼색이 노란색으로 바껴야 하는거 아닌가요? 왜 내용에 qw를 입력하는 순간 이 일이 일어나나요?
안녕하세요. 언제나 좋은 강의 감사합니다! 다름이 아니라 section 14 과제인 마이페이지를 구현하는 중인데 나의 상품 페이지 pagination에 사용할 내 장터-나의 상품 count API는 어떤 걸 쓰면 될까요? 다른 페이지에서 사용할 count API는 모두 있는 것 같데 나의 상품만 없는 건지 제가 못 찾고 있는 건지 모르겠네요..
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강의에서 좀 더 나아가 클라이언트와 서버도 도커 환경으로 구축?을 해보려고 합니다. 계획은 Docker hub private repo에 Dockerfile로 빌드된 이미지를 push하고 ec2인스턴스에서 docker-compose up으로 pull을 받으려고 합니다. 간단히 테스트를 해보니 제대로 실행은 되고 있으나 보안적인 부분에 있어 문제될 것이 있나 궁금하여 질문 드립니다. 답변 주시면 감사하겠습니다. 감사합니다~
git 저장소를 불러오는중에 Aborting떠서 git reset --hard를 해도 계속 최신 커밋이 안뜹니다 ㅠㅠ HEAD is now at 95de5ce Update: back start script 계속 이게 뜨면서 pull해도 Aborting이 계속 나오네요 ㅠㅠ
제가 다른게시물 보고 https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04 이거까지 했는데 계속 새로운 비밀번호 입력 하라고 뜨네요 ㅠㅠ 이런 경우 어떻게 해야할까요 비밀번호도 보안수준에 맞게 했는데 계속 뜨네요 ㅠㅠ