월 19,800원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
useToast 에러
사용자 홈 페이지-1 > 질문 입력 컴포넌트 제작 강의에서textarea에서 토스트 사용 시 에러가 발생해서 문의드립니다...조건은 잘 먹혀서 코드 문제는 아닌 것 같은데..7줄 이상이라는 조건이 달성되면 toast를 실행하지 않고 에러가 반환됩니다. 작성 코드import { useToast } from '@chakra-ui/react'; const toast = useToast();<Textarea value={message} onChange={(e) => { if (e.currentTarget.value) { const lineCount = (e.currentTarget.value.match(/[^\n]*\n[^\n]*/gi)?.length ?? 1) + 1; if (lineCount > 7) { toast({ title: '최대 7줄까지만 입력가능합니다', position: 'top-right', }); return; } } setMessage(e.currentTarget.value); }} /> 에러메세지 혹시나 뭔가 버전이 문제가 되는 걸까 해서 함께 첨부합니다.package.json "@chakra-ui/react": "1.8", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "firebase": "^9.14.0", "firebase-admin": "^11.3.0", "framer-motion": "^7.6.7", "next": "12.0.7", "react": "17.0.2", "react-dom": "17.0.2", "react-textarea-autosize": "^8.4.0", "styled-components": "^5.3.3"
- 해결됨만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
문의 드립니다😭
안녕하세요, 강사님😊좋은 강의 감사합니다!모든 기능을 완료한 이후 메세지 삭제 기능을 추가하고 싶어 코드를 조금 더 작성하는 도중 오류를 만났는데 어떤 방식으로 풀어가면 좋을지 몰라 이곳에 질문하게 되었습니다 ㅜㅜ!메세지 삭제 기능은 message.model.ts를 통하여 다음과 같이 작성하였습니다.message_item은 다음과 같은 소스를 작성하였습니다.controller의 message controll은 다음과 같이 작성하였습니다.삭제는 정상적으로 작동하며, firebase DB 내에 있는 messages의 해당 문서가 삭제되는 것을 함께 확인하였습니다. 다만 이후 messages.info가 작동됨과 동시에 이미 삭제된 messages의 아이디가 존재하여 400번 customServerError가 발생되는 것을 확인하였습니다 ㅜㅜ혹여 이럴 때는 어떤 것을 참고해서 더 수정해야 좋을지 몰라 여쭙게 되었습니다.😭부쩍 날씨가 추워진 요즘, 감기 조심하시길 바라며 다시 한 번 좋은 강의 감사합니다 :)!
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
빌드시 오류
빌드시에 다음과같은 오류가 나오는데구글링으로 해결을 못했습니다ㅠㅠ
- 해결됨만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
vercel 배포 후 list의 uid가 넘어가지 않아 문의 드립니다!
안녕하세요 코드를 전부 작성하고 배포까지 진행해보았으나 문제가 생겨 문의 드리게 되었습니다😂local 상태에서는 screenName이 정상적으로 넘어가 정보가 정상적으로 출력되었으나 배포 이후 uid가 undefined 형태로 넘어가는 것을 확인했습니다.코드를 열심히 확인해 보았으나 어느 부분이 문제인지 모르겠습니다 😥😥
- 해결됨만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
CORS 오류로 인한 문의 드립니다
안녕하세요, 강사님! 좋은 수업 감사드리며 열심히 코드를 작성하던 중 문제가 발생하여 문의 드리게 되었습니다.src={userInfo.photoURL ?? 'https://bit.ly/broken-link'}상기와 같은 코드를 작상한 뒤, 프로그램을 localhost에서 실행시키게 되었는데 현재 301 status를 지닌 CORS가 발생되었습니다.정확한 오류 사항은 다음 화면과 같습니다.해결 방안을 찾아보고자 하였으나 찾지 못했습니다 😂 301 error를 해결할 방안이 있을까요?
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
LOCAL_CHROME_PATH 경로에 파일이 없어요!
안녕하세요!강의를 보며 따라 하고 있는데요! 강의에서 LOCAL_CHROME_PATH 경로에 해당 파일이 저는 없는데 .. yarn add playwright-core chrome-aws-lambda@6 도 설치하고 강의를 다시 돌려봐도 문제가 없는 것 같은데.. 어디를 확인해 봐야 하는 걸까요?
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
렌더마다 변경되는 값이라서 context Provider에 못 넣는 에러
선생님 강의 5:10 쯤에 temp obj를 provider value에 넣으려고 할 때, "매번 변경되는 값이라서 들어가지 않으니 hook으로 빼주면 된다고" 하셨는데요-!처음엔 그냥 따라쳤는데 복습하다 보니까 왜 custom hook으로 빼주면 괜찮은지 궁금해요. 에러 메시지가 제안하는 대로 useMemo를 쓰지 않는 건 함수가 async 라서 그런 건가요.
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
public runtime config 에러 공유
강의에 따라 다 잘 맞게 다 썼는데 이런 오류가 나서검색해보고 Eslint 설정을 바꿨습니다.해결{ "eslint.options": { "overrideConfig": { "parserOptions": { "createDefaultProgram": true, } } } } 아래는 출처입니다.https://blog.realhe.ro/how-to-fix-vsc-eslint-error-the-file-must-be-included-in-at-least-one-of-the-projects-provided/
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
컴포넌트 파일명에 underscore
선생님! 강의에 중간에 보니까 컴포넌트 파일명을 소문자 + underscore로 하셔서요. service_layout.tsx 이렇게요저는 컴포넌트 파일명도 주로 대문자로 시작해서 파스칼로 만들어주는 것 같은데요. 궁금해서 조금 찾아보니까 선생님이 사용하신 방법은 'Google JavaScript Style Guide' 인 것 같은데, 그런가요? 이건 그냥 취향의 문제인가요? next 에서 페이지는 pages 폴더 안에 파일명을 소문자로 넣어주면 그대로 url로 사용하는 건 본 것 같은데 혹시 next 에서 사용하는 방법인가요?파이어베이스 설정하는 부분 넘어가니 좀 쉬워져서 좋습니다~~ 질문은 to be continued...
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
firebase admin 코드 추가 강의 부분
firebase admin 코드 추가 강의 부분 여기는 저같은 JS와 리액트까지만 어느 정도 알고 있는 프론트엔드 초급 수준 => 강의 소개에 나온 대상자 수준에서 볼 때 frebase-admin.ts 작성이 설명이 (많이) 생략된 부분도 많고 어렵다는 생각이 듭니다. 그래도 그냥 아~~고렇구나 하고 일단 넘어갔습니다.아래는 제 기준 뇌정지 부분 정지 정리했습니다. 혹시 다음에 공부하시는 분들도 참고하시라고요ㅠ7:50초 강의를 3번 돌려보고 30분 넘게 꼼꼼하게 코드 치고 모르는 건 최대한 구글링했습니다아1.공식문서도 참고하라는 페이지가 2초 화면에 나오고 사라졌는데 나왔는데 여기가 맞나요https://firebase.google.com/docs/admin/setup선생님이 하신 거처럼 안하고(제가 이해가 되지 않는 코드는 안쓰는 게 낫지 않을까요?) 공식문서대로 나온대로 쓰는 거랑 무슨 차이인가요2.싱글톤 패턴...갑자기요? ㅠㅠ 패알못이라서 왜 여기서 싱글톤 패턴 사용하는지 몰겠어요3. 자바스크립트 에서 클래스 생성하는 문법 까먹어서 뇌정지 모먼트https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes public static, instance, private 등 한번 배우고 까먹은 용어들이 줄줄이 설명없이 나와서 멈추고 찾아봤어요4.환경초기화 하는 메서드는 왜 bootstrap이라는 이름으로 정하셨나요 제가 아는 bootstrap은 프론트엔드 라이브러리가 전부인데요 이 이름으로 정한 이유가 궁금했어요5. 05:33function 처럼 실행하지 않고 field 처럼 실행할꺼라는 말이 무슨 말일까요6. 썬더클라이언트..다운로드 받은 건 기억이 나는데 설명을 안해주심 대충 느낌은 알았어요 포스트맨 같은 거네요일단 그래도 config 파일이라서 울면서 넘어가겠읍니다..저빼고 초급자들은 다 이해하셨을까요 저만 5시간 강의 + 추가 50시간 개인학습되는 거 아니겠쥬 앞으로도 계속 마이크로 수강평 남길게요...
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
구글 로그인 apikey error
영상도 여러번 돌려보고 했는데 선생님 코드랑 다른곳이 없어보였고, stackoverflow나 여러 구글 게시물들을 찾아 보면서 fix 해보려 했는데도 잘 모르겠네요
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
firebase/auth import 안됨
다른코드는 오류가 안나는데 firebase/auth 여기서 오류가 나네요. 저도 구글 로그인 진행 되게 해보고 싶은데..
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
SSR axios를 하는 과정에서 401 에러가 떠요..
getServerSideProps를 이용해서 SSR을 할 때axios에서 계속 401 Unauthorized 에러가 발생하네요...혹시몰라서 CSR로도 시도해봤는데 이때는 잘 되구요...혹시 SSR에서 header 설정을 추가로 해주어야한다거나 하는 경우가 있는건가요...? 어떻게 시도를 해도 에러가 없어지지 않네요ㅠㅠㅠ
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
도와주세요!
git clone을 하고 보니 폴더 갯수가 달라서 보니최상위 버전이 clone된것 같은데 이 부분은 어떻게 해야되나요?초기설정에서 클론을하는데도 이렇게 나옵니다...
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
Server error
TypeError: (0 , import_react4.useSyncExternalStore) is not a function이렇게 error가 나오는데 이 부분은 어떻게 해결해야 될까요??혼자 해결하려고 구글링을 해봤는데 정답을 모르겠네요;;이미지도 첨부합니다
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
질문있습니다..
local에서는 userInfo 가 제대로 넘어오는데vercel 배포후에는 userInfo가 html태그로 넘어오는건 뭐 때문일까요..?
- 해결됨만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
firebase store추가
async function signInWithGoogle(): Promise<void> { const provider = new GoogleAuthProvider(); try { const signInResult = await signInWithPopup(FirebaseClient.getInstance().Auth, provider); if (signInResult.user) { const resp = await fetch('/api/members.add', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ uid: signInResult.user.uid, email: signInResult.user.email, displayName: signInResult.user.displayName, photoURL: signInResult.user.photoURL, }), }); console.info({ status: resp.status }); const respData = await resp.json(); console.info(respData); } } catch (err) { console.error(err); }// Next.js API route support: https://nextjs.org/docs/api-routes/introductionimport type { NextApiRequest, NextApiResponse } from 'next';import { FirebaseAdmin } from '../../models/firebase_admin';export default async function handler( req: NextApiRequest, res: NextApiResponse,) { const { uid, displayName, photoURL, email } = req.body; if (uid === undefined || uid === null) { return res.status(400).json({ result: false, message: 'uid가 누락되었습니다.' }); } try { const addResult = await FirebaseAdmin.getInstance().Firebase.collection('members').add({ uid, email: email ?? '', displayName: displayName ?? '', photoURL: photoURL ?? '', }); return res.status(200).json({ result: true, id: addResult }); } catch (error) { console.error(error); res.status(500).json({ result: false }); }firebase 에 members가 추가가 안됩니다.. code: 16, details: 'Failed to retrieve auth metadata with error: error:0909006C:PEM routines:get_name:no start line', metadata: Metadata { internalRepr: Map(0) {}, options: {} }, note: 'Exception occurred in retry method that was not classified as transient'stackoverflow 에서도 찾아보고 있는데 혹시 해결방법이 있을까요}}
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
구글 로고 질문
수업 자료에 구글 로고가 없는데 어디서 찾을 수 있을까요?수업 자료 다운을 받았는데 아래와 같이 나와서 문의드립니다
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
궁금한 점 질문 드립니다~
1. memberDoc에 사용자가 이미 추가된 상태인지를 판별해서 addResult 이후에 성공 코드(200, 201)를 리턴하는 방식 대신 트랜잭션 콜백 안에서 성공 코드를바로 리턴하는 방식을 사용하지 않는 이유가 있을까요? 코드로 표현하면 아래와 같습니다. await firebaseInstance.Firebase.runTransaction(async (transaction) => { const memberRef = firebaseInstance.Firebase.collection('members').doc(uid); const screenName = (email as string).replace('@gmail.com', ''); const screenNameRef = firebaseInstance.Firebase.collection('screen_names').doc(screenName); const memberDoc = await transaction.get(memberRef); if (memberDoc.exists) { // 이미 추가된 상태 return res.status(201).json({ result: true, id: uid }); } await transaction.set(memberRef, addData); await transaction.set(screenNameRef, addData); return res.status(200).json({ result: true, id: uid }); }); 2. screenName을 알기 위해 위해 screen_names라는 컬렉션을 새로 추가하셨는데, 컬렉션을 추가하지 않고 members 컬렉션을 uid로 조회한 뒤 해당 도큐먼트의 email값을 이용하는 방법을 이용하지 않는 이유가 있을까요?
- 미해결만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
playwright를 활용한 썸네일 생성 작업에서 windows 설정 방법 참고 하세요~
강사님 강좌 굉장하네요! 굉장히 깔끔하고 유용합니다. 배우는 것이 많았습니다. 감사합니다! playwright를 활용한 썸네일 생성 작업 부분에서 LOCAL_CHROME_PATH 설정하는 법을 mac만 설명해주셔서 windows 설정하는 부분 시간 단축 하시라고 남겨봅니다. https://playwright.dev/docs/browsers#managing-browser-binaries 여기를 참고 했고요. powershell 에서 $env:PLAYWRIGHT_BROWSERS_PATH="$env:USERPROFILE\pw-browsers" npx playwright install 위와 같이 환경변수 설정하고 playwright 설치하면 저같은 경우 LOCAL_CHROME_PATH=C:/Users/{사용자이름}/pw-browsers/chromium-1012/chrome-win/chrome.exe 이렇게 .env에 설정하고 서버 재시작하니 되었습니다. 질문 게시판이니 질문도 남깁니다. 강사님 다른 강좌들도 더 찍어주시면 좋을 것 같습니다. (nextjs 기반으로 react-query라던가 grapql 이라던가 다른 데이터베이스 prisma 등 이요 ㅎㅎㅎ) 혹시 다른 강좌 계획있으신지 궁금합니다.