우선 open ai api key 설정도 잘 따라해봤는데, 5달러만 결제해둘까요? 이후 강의 따라가는 데 있어서 결제 안하고 봐도 무방할까요? 

 문의글 조회에는 문제가 없지만,회원 로그인 후 상품 페이지의 문의글을 작성시 다음과 같은 에러가 발생합니다.

AI음성 전반적으로 수정이 필요한거같습니다.  mx-auto "먹스 오토" 라고 읽기도하고영어 속성 <-> 한글 전환이 자연스럽지 못한것 같습니다.  

제가 아직 기본이 부족한 상태여서 여쭤봅니다! mysql의 스키마 설정을 따라해서 되긴 했는데spring과 mysql의 연결이 spring코드의 어떤 부분에서 자동으로 되는건지 자세히 여쭤볼 수 있을까요??

 수정 부탁드립니다."에서만 사용할 수 있는 기능입니다."

[3줄 요약]비전공자로 10년 전 JSP, PHP 기반 개발 경험이 있으며, 현재는 헤드헌터로 활동 중입니다.React + Java(Spring) + MongoDB 기반으로 헤드헌터 업무에 활용할 수 있는 웹/모바일 플랫폼을 직접 개발하고자 합니다.기술 공백과 최신 스택(Git 등) 부족으로 학습 방향 및 인프런/부트캠프 강의 추천이 필요합니다. [본문]안녕하세요.현재 40세, 비전공자(경영학과)이며, 현재는 헤드헌터로 활동 중입니다.12년 전 독학과 오프라인 Java 강의(6개월) 수강 후 JSP 기반 웹 개발을 약 6개월,또한 웹호스팅 업체에서 리눅스/윈도우 서버 운영과 PHP 유지보수를 약 1년간 경험했습니다.퇴사 후 HTML5, CSS3, PHP, MySQL 기반으로 1인 창업 프로젝트(플랫폼)를 개발 경험도 있으나,프론트엔드 실무 한계로 인해 학원과 인강으로 보완했지만 실무 수준에 도달하기는 어려웠습니다.이후 창업을 접고 현재는 헤드헌터 일을 8년째 하고 있습니다. 최근 AI 도구(GPT, CURSOR 등)로 인해 1인 개발의 장벽이 많이 낮아졌다고 느꼈고,사이드프로젝트로 다시 한번 플랫폼을 만들어보자는 생각에 도전하고 있습니다. 우선 서버는 아마존이나 네이버 등 1년 동안 무료로 제공하는 클라우드를 생각하고 있습니다. [프로젝트 방향]목표: 헤드헌터 업무에 활용 가능한 게시판 중심의 웹 & 모바일 플랫폼프론트엔드: React백엔드: Java(Spring), 일부 Python (데이터 분석용)DB: MongoDB (NoSQL 기반)기능: 기능: 엑셀 데이터 업로드/필터링, 검색, 태그, 동료와 공유 및 협업플랫폼: PC 웹 + Android 우선 대응 [현재 느끼는 기술적 한계]10년 이상의 개발 공백 → 신규 기술 감각이 거의 없음Git, 협업 툴, 배포 등 실무적인 스택을 제대로 써본 적 없음과거 창업 경험 덕에 HTML/CSS/JS 기본 흐름은 이해주당 약 20시간 정도 학습 및 개발 시간 확보 가능 [현재 계획 중인 학습 우선순위]모든 강의를 다 듣기엔 시간 제약이 있으므로, 아래와 같은 것부터 선택적으로 수강하려고 합니다.React 중심 프론트엔드 학습 – 프로젝트 기반으로 실습 위주Spring 백엔드 학습 – REST API + MongoDB 연동 포함Git, 배포, 협업 도구 등 실무 환경 익히기Python 기초 + 데이터 분석 활용 (선택적)(Node.js나 웹 자동화는 현재는 후순위입니다) 시간상 모든 강의를 다 들을 수는 없어, 섹션별로 필요한 내용만 골라 수강할 수 있는 방식이 있는지 궁금합니다.또한 혼자서 진행하는 프로젝트이기에, 코드 리뷰나 피드백 커뮤니티가 병행되는 부트캠프가 있다면 병행하고 싶습니다.비슷한 경험을 하신 분이나, 인프런/코드잇 등에서 유익했던 강의나 커뮤니티가 있다면 조언 부탁드립니다 감사합니다.  #사이드프로젝트 #React #JavaSpring #MongoDB #프론트엔드 #백엔드 #풀스택도전#개발공백극복 #IT학습로드맵 #인프런강의추천 #코드잇추천

터미널에 vercel을 설치하려는데자꾸 이렇게 뜨고제가 맥os를 사용중이라 sudo npm i -g vercel 이것도 넣어봤더니 패스워드 입력하라고 뜨는데 입력이 아예 안 되네요.. 그냥 엔터 누르면 다시 시도하라고 뜨는데어떻게 해야 설치 가능한가요?ㅜㅜ

a.md 파일 만들고 u에서 a 이후 첫 커밋하는 건 잘 따라했는데요.이후 두 번째 커밋 하는 방법 보여주실 때 a.md 파일 수정하니까 강사님 화면에서는 m으로 바뀌더라구요.근데 저는 아무리 a.md를 수정해도 m으로 바뀌지 않아서.. 챗지피티 통해 알아보니까, a.md 수정 후 "저장(ctrl+s)" 해야 m으로 바뀌는 거였군요.. 강사님은 자동 저장이 되어 있어서 그런걸까요?

웹소켓 커넥션은 유지되어 데이터까지 들어오지만 view update는 브라우저 focus되어야만 발생하는걸 보여주셨는데요 원인과 대중적인 해결방법이 있는지 궁금합니다(사파적 방식x, 대중적인 정파적 방식o)

useEffect가 잘못짜면 디버깅이 골치아파서 관리에 신경을 쓰는데요. 제로초님의 useEffect 사용패턴이 궁금합니다 deps가 같은 것 끼리는 전부 묶어둔다deps가 같아도 로직 범주가 다르면 분리한다 저는 보통 2번을 선호하는데 useEffect 많아져서 드러워집니다. 그렇다고 1번은 더 머리가 아픈데,, 제로초님의 기준이나 이 문제에 대한 나름의 best practice가 있으신지 궁금합니다  

강의에서 말씀주시는 것 처럼 가급적 라이브러리를 쓰고 싶은데요. 제가 경력이 짧아서인지 라이브러리 서치에 애를 먹습니다 "가장 대중 픽" 찾는다고 할 때 어떤 방법으로 접근하시는지 궁금합니다제 생각엔 다운로드 수..는 순위가 아닌 절대량이라 모호하고 이 기능은 요즘 이게 좋더라하는 얘기를 나누는 커뮤니티가 따로 있으려나요? npm이나 구글링해서 나오는 무수한 라이브러리들 다 비교하는건 거시기한 상황입니다

현재 군대 사지방에서 공부를 하고 있는 군인입니다.여기서 깃허브 코드스페이스로 개발 공부를 하고 있습니다.iframe을 사용했을 때, live server로 포트를 열어 html을 열면 https 주소로 이동되고 iframe은 작동되지 않습니다. vscode 다운로드가 불가능해 로컬 환경에서 돌릴 수가 없는 상황인데 해결방법이 있을까요?

안녕하세요! 언제나 멋진 강의 감사드립니다.다름이 아니라, 프로젝트를 Vercel에 배포하는 과정에서 아래와 같은 컴파일 실패 에러가 빌드 로그에서 검출되어서 이에 대해 여쭤보고 싶습니다.화면 상에서는 src/app/(with-searchbar)/search/page.tsx에 선언한 generateMetaData 함수가 Next.js 페이지의 요구조건을 충족시키지 못한다라는 내용으로 보여지는데요, 이런 경우에는 해당 요소에서 어떤 부분을 확인해볼 수 있을까요?해당 페이지에 대한 코드도 함께 첨부해 드리겠습니다. \app\(with-searchbar)\search\page.tsx import BookItem from "@/components/book-item"; import BookListSkeleton from "@/components/skeleton/book-list-skeleton"; import { BookData } from "@/types"; import { delay } from "@/util/delay"; import { Metadata } from "next"; import { Suspense } from "react"; //index 페이지와 다르게 search 페이지는 QueryString과 같은 동적인 값에 의존하고 있기 때문에 static 페이지로는 설정할 수 없지만, 데이터 캐시를 최대한 이용하는 것으로 최적화 async function SearchResult({q}:{q:string}) { await delay(2000); const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/search?q=${q}`, {cache: "force-cache"} ); if(!response.ok){ return <div>오류가 발생했습니다 ...</div> } const books: BookData[] = await response.json(); return ( <div> {books.map((book) => ( <BookItem key={book.id} {...book} /> ))} </div> ); } //현재 페이지의 메타데이터를 동적으로 생성하는 함수 export async function generateMetaData({ searchParams, }: { searchParams: Promise<{q?: string}>; }): Promise<Metadata> { const {q} = await searchParams; return { title: `${q} : 검색 결과`, description : `검색어 ${q}의 검색 결과입니다`, openGraph: { title: `${q} : 검색 결과`, description : `검색어 ${q}의 검색 결과입니다`, images: ["/thumbnail.png"], } } } export default async function Page({ searchParams, }: { searchParams: Promise<{ q: string }>; }) { const {q} = await searchParams; return ( <Suspense key={q || ""} fallback={<BookListSkeleton count={3} />}> <SearchResult q={q ||""} /> </Suspense>); }

서버컴포넌트가 아닌 클라이언트 컴포넌트에서 params나 searchParams를 사용할때도 아래처럼{ params, }: { params: Promise<{ id: string }> }Promise를 붙여야하나요?? 아니면 hook을 사용해서 값을 받아오나요?

안녕하세요 혹시 해당 강의에 GitHub 주소나 자료가 따로 없을까요..?

안녕하세요,강사님 리엑트 코드와 똑같이 만들었지만페이지가 이상하게 나옵니다. 요런 식으로 나오는데 추가적으로 만져야 할 게 있을까요?제 패키지 파일 공유드립니다.{ "name": "login_react", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "@mui/icons-material": "^7.1.1", "@mui/material": "^7.1.1", "react": "^19.1.0", "react-dom": "^19.1.0", "react-router-dom": "^7.6.2" }, "devDependencies": { "@eslint/js": "^9.25.0", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.4.1", "eslint": "^9.25.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.19", "globals": "^16.0.0", "vite": "^6.3.5" } }

안녕하세요, 강의 너무 잘 수강하고 있습니다.강의 수강 중 질문이 생겨서요refresh Token을 사용하지 않는 이유가 있을까요?access 토큰 하나를 하루의 유효기간을 부여해서 사용하는 이유가 궁금합니다.jwt 버전이 0.11.5로 진행해주셨는데0.12.x 버전도 있는 걸로 알고 있어요버전의 올라감과 동시에 로직의 변화도 있는 거로 알고 있습니다.요것도 0.11.x로 진행하신 이유가 궁금합니다. 

const getStringedDate = (targetDate) => { let year = targetDate.getFullYear(); let month = targetDate.getMonth() + 1; let date = targetDate.getDate(); if (month < 10) { month = `0${month}`; } if (date < 10) { date = `0${date}`; } return `${year}-${month}-${date}`; };초기값 설정 할 때 input 태그가 date 객체를 해석하지 못해서 위의 getStringedDate() 함수로 문자열로 변환하여 value 속성으로 넣어줘야 한다고 하셨는데요,사용자 입력값을 넣을 때는 input을 수정하면 문자열로 들어가기 때문에 다시 date 객체로 바꿔주는 함수를 새로 사용해야 하던데<input name="createdDate" onChange={onChangeInput} value={getStringedDate(input.createdDate)} type="date" />이미 여기서 getStringedDate()로 객체에서 문자열 변환하는 함수를 사용해서 값을 나타내야하기 때문에 onChangeInput() 함수를 사용해야 하는건가요?이 흐름이 맞는 거 같긴한데 왠지 좀 번거로운거 같아서 제가 이해한게 맞는지 궁금해서요 참고로 섹션13 12.14)강의의10:22 부분을 듣고 생긴 질문입니다!

 위 이미지는 교재 376페이지의 상단 부분입니다.testUpload()를 실행시켰더니 "Tests Passed:"라는 메시지와 함께 실행성공되었습니다.그런데, 위 이미지에 나와있는, "S3의 버킷"을 AWS 어디에서 찾을 수 있는 지 모르겠습니다.아래 이미지는 나의 AWS S3 버킷 부분입니다. 

안녕하세요!Portfolio 제작 강의를 따라하던 중,지속적으로 CSS가 적용되지 않는 문제가 발생하여 문의드립니다. 화면 속 글자가 움직이는 걸로 보아 JS는 연동이 된 것 같은데 CSS가 문제가 있는 것 같아요. agent가 계속 해결을 못해서 문의 남깁니다.