172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요. 우선 매번 좋은 강의 감사드립니다! 다름이 아니라, 이 강의 전 버전에서 html,css,js를 수강하여 이번 버전에선 섹션3. [중급] 웹 프론트엔드 부트캠프 부터 수강중입니다! 수업노트에 있는 노션에 들어가보니 [과제] 탭이 따로 있더라구요! 과제01이 섹션01이랑 같은 부분이라서 섹션01을 수강 후 과제01을 해보는 식으로 진행하면 되는건가요? 섹션12까지 수강하였는데 강의중에는 따로 말씀이 없으셔서 그냥 강의만 듣고 자체적으로 복습만 했습니다. 저게 아니라면 과제는 언제부터 시작하는건지 알 수 있을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
5분55초쯤 설명하고 계시는 layout.tsx를 삭제하면 파일이 자동생긴다는 부분이 저는 생기지않는데 chatGPT한테물어보니 딱히 그런 기능은 Next에 없다고하는데 확장프로그램 차이일까요?
해결됨
웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크
카메라와 위치정보만 네이티브에서 권한 요청하고,화면이 전부 웹뷰로 구성되어있는 앱을 배포한다고 가정 했을때 ios 심사통과 가능성이 높은지 낮은지 궁금합니다.
미해결
한 입 크기로 잘라먹는 Next.js
안녕하세용 이번에 revalidatePath로 서버단에서 데이터를 변경하고 리랜더링 까지 하는 작업을 보고 궁금한게 하나 생겼습니다. 기존 csr 방식처럼 상태값이 변경될시에 리랜더링이 발생하는 방식 말고 이렇게 서버액션을 통해 데이터를 받고 재랜더링을 하는 이유가 완전히 서버 컴포넌트들로만 작동하게 되어 SSG로 구현이 가능하기 때문인건가요? 머릿속이 지금 복잡해서 그냥 useEffect랑 state를 쓰고싶다는 욕망이 크게 느껴지고 있는데 왜 이걸 사용해야 하는지에 대해 조금 명쾌한 해답을 듣고 싶습니다!
미해결
한 입 크기로 잘라먹는 Next.js
이번 장에서 서버액션에 관한 내용을 들었는데 유지보수 측면에서 이 기술이 좋은 방법일까 하는 의문이 들었습니다! 아래는 이런 경우가 생기지 않을까 해서 적어둔 내용입니다. 서버액션으로 프론트에서 "a를 오른쪽으로 옮겨주세요" 라는 api를 백엔드에 만들었습니다. 그런데 기존의 백엔드 api에선 a는 왼쪽으로 옮기는 스크립트를 만들어놨는데 서버액션으로 인해 백엔드 서버엔 예정에 없던 동작이 발생했습니다. 그러다 나중에 a를 오른쪽으로 옮긴것에 대해 문제가 발생해서 백엔드 코드를 하루 꼬박 세면서 뒤져봤는데 오류를 못 찾았습니다 그런데 알고보니 프론트에서 서버액션으로 보내는 a를 오른쪽으로 옮겨라는 코드 때문에 발생한 문제였습니다. 이런 상황이 실무에서 발생할거 같다는 생각이 들어서 이 서버액션 기능을 실제로도 많이 사용하는지 궁금합니다!!
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
우선 open ai api key 설정도 잘 따라해봤는데, 5달러만 결제해둘까요? 이후 강의 따라가는 데 있어서 결제 안하고 봐도 무방할까요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
문의글 조회에는 문제가 없지만, 회원 로그인 후 상품 페이지의 문의글을 작성시 다음과 같은 에러가 발생합니다.
미해결
Next.js 15로 완성하는 실전 YouTube 클론 개발
AI음성 전반적으로 수정이 필요한거같습니다. mx-auto "먹스 오토" 라고 읽기도하고 영어 속성 <-> 한글 전환이 자연스럽지 못한것 같습니다.
미해결
Next.js 15로 완성하는 실전 YouTube 클론 개발
수정 부탁드립니다. "에서만 사용할 수 있는 기능입니다."
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
a.md 파일 만들고 u에서 a 이후 첫 커밋하는 건 잘 따라했는데요. 이후 두 번째 커밋 하는 방법 보여주실 때 a.md 파일 수정하니까 강사님 화면에서는 m으로 바뀌더라구요. 근데 저는 아무리 a.md 를 수정해도 m으로 바뀌지 않아서.. 챗지피티 통해 알아보니까, a.md 수정 후 "저장(ctrl+s)" 해야 m으로 바뀌는 거였군요.. 강사님은 자동 저장이 되어 있어서 그런걸까요?
해결됨
실전 활용을 위한 git/github(feat.각종 충돌상황 해결하기)
우선 좋은 강의 만들어주셔서 정말 감사드립니다. 이번에 새로 출시된 강의 " eks를 활용한 spring 운영서버 배포(feat. devops의 모든것)" 이 강의 질문 할 곳이 없어서 여기다가 질문을 드립니다. 양해 부탁드립니다. 제가 쿠버네티스 지식이 없다보니 질문 드리는 건데요. 해당 강의 경우 무중단 배포 로 진행 되는 강의 인지 궁금 합니다. 아무래도 실전에서는 무중단 배포로 진행 해야 하는 경우 많아서 이렇게 질문 하네요. 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
현재 군대 사지방에서 공부를 하고 있는 군인입니다. 여기서 깃허브 코드스페이스로 개발 공부를 하고 있습니다. 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을 사용해서 값을 받아오나요?
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
안녕하세요! 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. 쇼핑몰)에 따라 기준이 달라질 것 같은데요. 이에 대한 강사님 의견 듣고싶습니다.
미해결
비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)
firebase 프로젝트 생성하고 설정하고 있는데 Authentication > 로그인방법 설정중에 어느 방법을 선택해도 아래 이미지와 같이 업데이트 오류라는 문구가 뜨고 저장이 안됩니다. 데이터베이스 만들기 과정에서도 '위치'란에 아무 select박스가 안뜹니다. 프로젝트 생성은 영상과 동일하게 하였는데 프로젝트가 제대로 생성이 안된건지 문제가 뭔지 모르겠습니다.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. import axios from "../api/axios"; import React, { useEffect, useState } from 'react' import requests from '../api/requests'; import "./Banner.css" import styled from "styled-components"; export default function Banner() { const [movie, setMovie] = useState([]); const [isClicked, setIsClicked] = useState(false); useEffect(() => { fetchData(); }, []); const fetchData = async() => { //현재 상영중인 영화 정보를 가져오기 (여러 영화) const request = await axios.get(requests.fetchNowPlaying); //여러 영화 중 영화 하나의 ID를 가져오기 const movieId = request.data.results[ Math.floor(Math.random() * request.data.results.length) ].id; //특정 영화의 더 상세한 정보를 가져오기 (비디오 정보도 포함) const {data: movieDetail} = await axios.get(`movie/${movieId}`, { params: {append_to_response: "videos"}, }); setMovie(movieDetail); } const truncate = (str, n) => { return str?.length > n ? str.substr(0, n - 1) + "..." : str; } console.log('movie', movie); if(!isClicked) { return ( <header className="banner" style={{ backgroundImage: `url("https://image.tmdb.org/t/p/original/${movie.backdrop_path}")`, backgroundPosition: "top center", backgroundSize: "cover", }}> <div className="banner__contents"> <h1 className="banner__title"> {movie.title || movie.name || movie.original_name} </h1> <div className="banner__buttons"> <button className="banner__button play" onClick={() => setIsClicked(true)} > Play</button> <button className="banner__button info">More Information</button> </div> <h1 className="banner_description"> {truncate(movie.overview, 100)} </h1> </div> <div className="banner--fadeBottom"></div> </header> ); } else{ return ( <Container> <HomeContainer> <Iframe width="640" height="360" src={`https://www.youtube.com/embed/${movie.videos.results[0].key}?controls=0&autoplay=1&loop=1&mute=1&playlist=${movie.videos.results[0].key}`} title="YouTube video player" allow="autoplay; fullscreen" ></Iframe> </HomeContainer> </Container> ); } } const Iframe = styled.iframe` width: 100%; height: 100%; opacity: 0.65; border: none; &::after { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }` const Container = styled.div` display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100vh; ` const HomeContainer = styled.div` width: 100vw; height: 100vh;`
해결됨
한 입 크기로 잘라먹는 Next.js
이전의 사전 렌더링에서 이런식으로 동작한다고 이해하고 초기접속시 JS 번들러에 남은 컴포넌트를 담아서 준다고 이해했는데 여기서는 페이지 이동 요청시 JS 번들러가 오는데 헷갈립니다.
해결됨
한 입 크기로 잘라먹는 Next.js
2.8) 페이지별 레이아웃 설정하기 안녕하세요 한입 nextjs 강의 잘 보고 있는데요! 하나 궁금한 게 생겨서 질문 남겨요! 20분쯤에 나오는 onKeyDown 으로 키보드 이벤트를 감지하여 처리하는 이유가 있을까요? 해당 부분만 form 으로 감싸면 자동으로 enter 클릭시 감지해서 요청을 보내게 되는데 onKeyDown으로 함수를 빼서 input 이벤트를 핸들링 하는 이유는 무엇인가요! submit 직전 다른 데이터를 핸들링 할 때 form은 바로 submit이 일어나기 때문에 그런 부분에 있어서 확장성? 을 위한건가용?
