172만명의 커뮤니티!! 함께 토론해봐요.
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
a.md 파일 만들고 u에서 a 이후 첫 커밋하는 건 잘 따라했는데요. 이후 두 번째 커밋 하는 방법 보여주실 때 a.md 파일 수정하니까 강사님 화면에서는 m으로 바뀌더라구요. 근데 저는 아무리 a.md 를 수정해도 m으로 바뀌지 않아서.. 챗지피티 통해 알아보니까, a.md 수정 후 "저장(ctrl+s)" 해야 m으로 바뀌는 거였군요.. 강사님은 자동 저장이 되어 있어서 그런걸까요?
미해결
Slack 클론 코딩[실시간 채팅 with React]
웹소켓 커넥션은 유지되어 데이터까지 들어오지만 view update는 브라우저 focus되어야만 발생하는걸 보여주셨는데요 원인과 대중적인 해결방법이 있는지 궁금합니다 (사파적 방식x, 대중적인 정파적 방식o)
미해결
Slack 클론 코딩[실시간 채팅 with React]
useEffect가 잘못짜면 디버깅이 골치아파서 관리에 신경을 쓰는데요. 제로초님의 useEffect 사용패턴이 궁금합니다 deps가 같은 것 끼리는 전부 묶어둔다 deps가 같아도 로직 범주가 다르면 분리한다 저는 보통 2번을 선호하는데 useEffect 많아져서 드러워집니다. 그렇다고 1번은 더 머리가 아픈데,, 제로초님의 기준이나 이 문제에 대한 나름의 best practice가 있으신지 궁금합니다
미해결
Slack 클론 코딩[실시간 채팅 with React]
강의에서 말씀주시는 것 처럼 가급적 라이브러리를 쓰고 싶은데요. 제가 경력이 짧아서인지 라이브러리 서치에 애를 먹습니다 "가장 대중 픽" 찾는다고 할 때 어떤 방법으로 접근하시는지 궁금합니다 제 생각엔 다운로드 수..는 순위가 아닌 절대량이라 모호하고 이 기능은 요즘 이게 좋더라하는 얘기를 나누는 커뮤니티가 따로 있으려나요? npm이나 구글링해서 나오는 무수한 라이브러리들 다 비교하는건 거시기한 상황입니다
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
현재 군대 사지방에서 공부를 하고 있는 군인입니다. 여기서 깃허브 코드스페이스로 개발 공부를 하고 있습니다. iframe을 사용했을 때, live server로 포트를 열어 html을 열면 https 주소로 이동되고 iframe은 작동되지 않습니다. vscode 다운로드가 불가능해 로컬 환경에서 돌릴 수가 없는 상황인데 해결방법이 있을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 언제나 멋진 강의 감사드립니다. 다름이 아니라, 프로젝트를 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>); }
해결됨
한 입 크기로 잘라먹는 Next.js
서버컴포넌트가 아닌 클라이언트 컴포넌트에서 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로 진행하신 이유가 궁금합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
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 부분을 듣고 생긴 질문입니다!
미해결
코드로 배우는 React 19 with 스프링부트 API서버
위 이미지는 교재 376페이지의 상단 부분입니다. testUpload()를 실행시켰더니 "Tests Passed:"라는 메시지와 함께 실행성공되었습니다. 그런데, 위 이미지에 나와있는, "S3의 버킷"을 AWS 어디에서 찾을 수 있는 지 모르겠습니다. 아래 이미지는 나의 AWS S3 버킷 부분입니다.
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
안녕하세요! Portfolio 제작 강의를 따라하던 중, 지속적으로 CSS가 적용되지 않는 문제가 발생하여 문의드립니다. 화면 속 글자가 움직이는 걸로 보아 JS는 연동이 된 것 같은데 CSS가 문제가 있는 것 같아요. agent가 계속 해결을 못해서 문의 남깁니다.
해결됨
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요. 지금까지 알려주신 내용에서 Notion 통해 글을 추가/삭제했을 때, 그에 대한 반영이 이루어지기 위해 unstable_cache 적용 시 revalidate 옵션(단위: s(초))을 줘야 하는 것을 확인했습니다. (getPublishedPosts 구현부분에서 언급되지 않은부분이라 강의내용과 공식문서 토대로 동작 확인했습니다.) Notion이 아닌 실제 페이지에서 글쓰기를 했을 때는 revalidateTag 함수를 호출하여 캐시를 무효화시켰었습니다. 문제는 목록 가져올때도 매번 revalidateTag 함수를 사용하게 된다면 캐시 사용하는게 무의미해질거라 생각합니다. 즉시 반영을 위해서는 Webhook 연동이 필요해보이나, 생각보다 구현 난이도가 복잡해서 revalidate를 적절하게 주는게 좋을거라 생각했습니다. 그렇다면 효율적인 revalidate 값은 어느정도로 지정하는게 좋을까요?? TanStack Query ClientProvider에서 지정한 것처럼 1분 정도가 적절하려나요?? 그리고 실제 구현 이루어지는 프로그램(ex. 쇼핑몰)에 따라 기준이 달라질 것 같은데요. 이에 대한 강사님 의견 듣고싶습니다.
미해결
React Native with Expo: 제로초에게 제대로 배우기
expo go에서 만들고있는데 구글 승인 오류문구가 계속 나오네요 400에러인데 해결하기 어렵습니다 ㅠ.ㅠ
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
20.update-object받으니 컴포넌트의 기억저장서 부터이고 21조건부 랜터링부터 ~ 24이벤트전파까지의 소스 브랜치가 없네요
해결됨
코드로 배우는 React 19 with 스프링부트 API서버
부록 AWS Elastic Beanstalk 공부 중입니다. 교재 571페이지 ACL 편집부분에서.... AWS 버킷에서 ACL을 편집할 수 있는 창을 찾을 수가 없네요. 답변 좀 부탁드리겠습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useEffect와 useMemo 둘 다 의존성 배열이 바뀔때만 실행되도록 하는 훅으로 알고 있는데, 정확한 차이가 와닿지 않습니다..!
미해결
Slack 클론 코딩[실시간 채팅 with React]
react 개발하다보면 대부분의 파일에서 export default 하나만을 하게 되는데요. 아래 2가지 패턴 중 2번을 주로 사용하시는 것 같아서 이유가 있으신지 궁금합니다 export default function ABC() const ABC = () => {} export default ABC; 저는 1번을 강하게 선호하고 왜 굳이 하나의 함수에 대한 정의를 둘로 나눠 거리를 벌리는지 이해가 안 가는데요, 코딩 고수(?)들이 주로 2번 패턴을 사용하셔서 이유가 궁금합니다
미해결
React Native with Expo: 제로초에게 제대로 배우기
eas build --platform android --profile preview --local --local 플래그로 로컬에서 빌드해서 테스트 해보고 있습니다. EXPO_PUBLIC_FRONT_URL EXPO_PUBLIC 접두사를 붙여서 환경변수 넣어두었고 Alert.alert("uri", process.env.EXPO_PUBLIC_FRONT_URL); 위처럼 Alert 로 체크해보니 비어있었습니다 로컬로 빌드할시에 더 셋팅해줘야 하는 부분이 있을까요?
