173만명의 커뮤니티!! 함께 토론해봐요.
미해결
한 입 크기로 잘라먹는 Next.js
안녕하세용 이번에 revalidatePath로 서버단에서 데이터를 변경하고 리랜더링 까지 하는 작업을 보고 궁금한게 하나 생겼습니다. 기존 csr 방식처럼 상태값이 변경될시에 리랜더링이 발생하는 방식 말고 이렇게 서버액션을 통해 데이터를 받고 재랜더링을 하는 이유가 완전히 서버 컴포넌트들로만 작동하게 되어 SSG로 구현이 가능하기 때문인건가요? 머릿속이 지금 복잡해서 그냥 useEffect랑 state를 쓰고싶다는 욕망이 크게 느껴지고 있는데 왜 이걸 사용해야 하는지에 대해 조금 명쾌한 해답을 듣고 싶습니다!
미해결
한 입 크기로 잘라먹는 Next.js
이번 장에서 서버액션에 관한 내용을 들었는데 유지보수 측면에서 이 기술이 좋은 방법일까 하는 의문이 들었습니다! 아래는 이런 경우가 생기지 않을까 해서 적어둔 내용입니다. 서버액션으로 프론트에서 "a를 오른쪽으로 옮겨주세요" 라는 api를 백엔드에 만들었습니다. 그런데 기존의 백엔드 api에선 a는 왼쪽으로 옮기는 스크립트를 만들어놨는데 서버액션으로 인해 백엔드 서버엔 예정에 없던 동작이 발생했습니다. 그러다 나중에 a를 오른쪽으로 옮긴것에 대해 문제가 발생해서 백엔드 코드를 하루 꼬박 세면서 뒤져봤는데 오류를 못 찾았습니다 그런데 알고보니 프론트에서 서버액션으로 보내는 a를 오른쪽으로 옮겨라는 코드 때문에 발생한 문제였습니다. 이런 상황이 실무에서 발생할거 같다는 생각이 들어서 이 서버액션 기능을 실제로도 많이 사용하는지 궁금합니다!!
미해결
프론트엔드 개발의 Kick, Web API (feat. React)
5,7,8,10,11,12,14,15,17,18,19번 강의가 음성만 있고 화면에 보여지는게 없는데, 의도된걸까요..? 저만 그런건지,,,ㅠㅠ
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
우선 open ai api key 설정도 잘 따라해봤는데, 5달러만 결제해둘까요? 이후 강의 따라가는 데 있어서 결제 안하고 봐도 무방할까요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
문의글 조회에는 문제가 없지만, 회원 로그인 후 상품 페이지의 문의글을 작성시 다음과 같은 에러가 발생합니다.
미해결
Next.js 15로 완성하는 실전 YouTube 클론 개발
AI음성 전반적으로 수정이 필요한거같습니다. mx-auto "먹스 오토" 라고 읽기도하고 영어 속성 <-> 한글 전환이 자연스럽지 못한것 같습니다.
미해결
Next.js 15로 완성하는 실전 YouTube 클론 개발
수정 부탁드립니다. "에서만 사용할 수 있는 기능입니다."
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
세션 9. 최종 프로젝트 cityDetail 개발-2 에서 https://trip-wiki-api.vercel.app/ 강사님이 알려주셨던 링크에는 상세페이지 이미지와 받는 정보가 없습니다! 어떻게 상세페이지를 출력할 수 있나요? Japan을 검색창에서 검색하고 상세페이지를 눌렀지만 아무런 정보가 출력되지 않고 있습니다! import Header from "./components/Header.js"; import RegionList from "./components/RegionList.js"; import CityList from "./components/CityList.js"; import CityDetail from "./components/CityDetail.js"; import { request, requestCityDetail } from "./components/api.js"; export default function App($app) { const getSortBy = () => { if (window.location.search) { return window.location.search.split("sort=")[1].split("&")[0]; } return "total"; }; const getSearchWord = () => { if (window.location.search && window.location.search.includes("search=")) { return window.location.search.split("search=")[1]; } return ""; }; this.state = { startIdx: 0, sortBy: getSortBy(), region: window.location.pathname.replace("/", ""), searchWord: getSearchWord(), cities: "", currentPage: window.location.pathname, }; const renderHeader = () => { new Header({ $app, initialState: { currentPage: this.state.currentPage, sortBy: this.state.sortBy, searchWord: this.state.searchWord, }, handleSortChange: async (sortBy) => { const pageUrl = `/${this.state.region}?sort=${sortBy}`; history.pushState( null, null, this.state.searchWord ? pageUrl + `&search=${this.state.searchWord}` : pageUrl ); const cities = await request( 0, this.state.region, sortBy, this.state.searchWord ); this.setState({ ...this.state, startIdx: 0, sortBy: sortBy, cities: cities, }); }, handleSearch: async (searchWord) => { history.pushState( null, null, `/${this.state.region}?sort=${this.state.sortBy}&search=${searchWord}` ); const cities = await request( 0, this.state.region, this.state.sortBy, searchWord ); this.setState({ ...this.state, startIdx: 0, cities: cities, searchWord: searchWord, }); }, }); }; const renderRegionList = () => { new RegionList({ $app, initialState: this.state.region, handleRegion: async (region) => { history.pushState(null, null, `/${region}?sort=total`); const cities = await request(0, region, "total"); this.setState({ ...this.state, startIdx: 0, sortBy: "total", region: region, cities: cities, searchWord: "", currentPage: `/${region}`, }); }, }); }; const renderCityList = () => { new CityList({ $app, initialState: this.state.cities, handleItemClick: async (id) => { history.pushState(null, null, `/city/${id}`); this.setState({ ...this.state, currentPage: `/city/${id}`, }); }, handleLoadMore: async () => { const newStartIdx = this.state.startIdx + 40; const newCities = await request( newStartIdx, this.state.region, this.state.sortBy ); this.setState({ ...this.state, startIdx: newStartIdx, cities: { ...this.state.cities, cities: [...this.state.cities.cities, ...newCities.cities], isEnd: newCities.isEnd, }, }); }, }); }; const renderCityDetail = async (cityId) => { try { const cityDetailData = await requestCityDetail(cityId); new CityDetail({ $app, initialState: cityDetailData }); } catch (err) { console.log(err); } }; const render = async () => { const path = this.state.currentPage; $app.innerHTML = ""; // 상세 페이지로 이동 if (path.startsWith("/city/")) { const cityId = path.split("/city/")[1]; renderHeader(); renderCityDetail(cityId); } else { renderHeader(); renderRegionList(); renderCityList(); } }; this.setState = (newState) => { this.state = newState; render(); }; const init = async () => { const path = this.state.currentPage; // 메인 페이지 if (!path.startsWith("/city")) { const cities = await request( this.state.startIdx, this.state.region, this.state.sortBy, this.state.searchWord ); this.setState({ ...this.state, cities: cities, }); } // 상세페이지 else { render(); } }; window.addEventListener("popstate", async () => { const urlPath = window.location.pathname; const prevRegion = urlPath.replace("/", ""); const prevPage = urlPath; const prevSortBy = getSortBy(); const prevSearchWord = getSearchWord(); const prevStartIdx = 0; const prevCities = await request( prevStartIdx, prevRegion, prevSortBy, prevSearchWord ); this.setState({ ...this.state, startIdx: prevStartIdx, sortBy: prevSortBy, region: prevRegion, currentPage: prevPage, searchWord: prevSearchWord, cities: prevCities, }); }); init(); } //API.js 코드입니다! export default function CityDetail({ $app, initialState }) { this.state = initialState; this.$target = document.createElement("div"); this.$target.className = "city-detail"; $app.appendChild(this.$target); const getScoreColor = (score) => { // let scoreNumber = parseInt(score); if (score >= 4) return "green"; if (score >= 3) return "yellow"; return "red"; }; this.template = () => { let cityData = this.state.CityDetail; let temp = ``; if (cityData) { temp = `<div class="image-banner"> <img src="${cityData.image}"/> <div class="city-name"> <div class="city">${cityData.city}</div> <div class="country">${cityData.region} / ${cityData.country}</div> </div> </div> <div class="progress-container"> <div class="info-item"> <div class="label">⭐ Total Score</div> <div class="progress-bar" score-color="${getScoreColor( cityData.total )}" style="--score:${cityData.total * 20}%"></div> </div> <div class="info-item"> <div class="label">💵 Cost</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.cost )}" style="--score:${cityData.info.cost * 20}%"></div> </div> <div class="info-item"> <div class="label">😆 Fun</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.fun )}" style="--score:${cityData.info.fun * 20}%"></div> </div> <div class="info-item"> <div class="label">🚓 Safety</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.safety )}" style="--score:${cityData.info.safety * 20}%"></div> </div> <div class="info-item"> <div class="label">🌐 Internet</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.internet )}" style="--score:${cityData.info.internet * 20}%"></div> </div> <div class="info-item"> <div class="label">💨 Air Condition</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.air )}" style="--score: ${cityData.info.air * 20}%"></div> </div> <div class="info-item"> <div class="label">🍜 Food</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.food )}" style="--score: ${cityData.info.food * 20}%"></div> </div> </div> `; } return temp; }; this.render = () => { this.$target.innerHTML = this.template(); }; /* this.setState = (newState) => { this.state = newState; this.render(); }; */ this.render(); } //cityDetail.js 상세페이지 코드입니다!
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
안녕하세요 테일윈드 강의에서 반응형 부분의 강의를 보다가 궁금한 점이 생겨 여쭤보고 싶어 글을 남깁니다. 예를 들어 모바일 청첩장처럼 모바일사이즈만 사용할 경우 리액트에서는 처음에 라이브러리를 사용하지 않고 모바일 사이즈로만 설정하는 방법이 궁금합니다. 그리고 테일윈드에서 모바일 사이즈만 할 경우에는 sm 이 부분만 사용을 설정하면 되는지 궁금합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
터미널에 vercel을 설치하려는데 자꾸 이렇게 뜨고 제가 맥os를 사용중이라 sudo npm i -g vercel 이것도 넣어봤더니 패스워드 입력하라고 뜨는데 입력이 아예 안 되네요.. 그냥 엔터 누르면 다시 시도하라고 뜨는데 어떻게 해야 설치 가능한가요?ㅜㅜ
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
a.md 파일 만들고 u에서 a 이후 첫 커밋하는 건 잘 따라했는데요. 이후 두 번째 커밋 하는 방법 보여주실 때 a.md 파일 수정하니까 강사님 화면에서는 m으로 바뀌더라구요. 근데 저는 아무리 a.md 를 수정해도 m으로 바뀌지 않아서.. 챗지피티 통해 알아보니까, a.md 수정 후 "저장(ctrl+s)" 해야 m으로 바뀌는 거였군요.. 강사님은 자동 저장이 되어 있어서 그런걸까요?
미해결
JavaScript 베이스캠프
async function getData() { const jsonData = [ { id: 1, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img1.jpeg', }, { id: 2, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img2.jpeg', }, { id: 3, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img3.jpeg', }, { id: 4, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img4.jpeg', }, { id: 4, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img4.jpeg', }, { id: 5, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img5.jpeg', }, { id: 6, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img6.jpeg', }, ]; const response = new Response(JSON.stringify(jsonData), { status: 200, statusText: 'OK', headers: { 'Content-Type': 'application/json', }, }); fetch('https://test.api.weniv.co.kr/mall') .then((res) => { if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`); } return re.json(); //응답을 json으로 파싱 }) .then((data) => console.log(data)) .catch((error) => console.log('Error:', error)); const productData = await response.json(); return productData; } function createProductCard(product) { const card = document.createElement('section'); card.classList.add('card'); card.innerText = 'hello world'; return card; } function render(product) { const container = document.querySelector('.container'); container.innerHTML = ''; products.forEach((product) => { const card = createProductCard(product); container.appendChild(card); }); } async function main() { const productData = await getData(); render(productData); }
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
현재 군대 사지방에서 공부를 하고 있는 군인입니다. 여기서 깃허브 코드스페이스로 개발 공부를 하고 있습니다. iframe을 사용했을 때, live server로 포트를 열어 html을 열면 https 주소로 이동되고 iframe은 작동되지 않습니다. vscode 다운로드가 불가능해 로컬 환경에서 돌릴 수가 없는 상황인데 해결방법이 있을까요?
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
강의 : 5. 북마크바 만들기 북마크바 디폴트 화면이 '북마크 열기'(bookmark-close)로 뜨면서 북마크가 열려있는 상태(?)로 나옵니다. 그리고 북마크 열기를 클릭하면, 의도한 바처럼 '북마크 열기'(bookmark-close)가 뜨면서 북마크가 닫힌 상태로 바뀌고, 다시 클릭 시 '북마크 닫기'(bookmark-open)가 뜨고 북마크가 열린 상태로 나옵니다. 즉, 두번째 액션부터 정상적으로 작동이 되는데요 ㅠㅠ [디폴트 화면] 효빈 강사님께서 작성한 예시 그대로 작업했는데 뭐가 문제인걸까요?? <!-- 북마크 열린 상태 --> <div class="bookmark-open" id="bookmark-open"> <div id="bookmark-open-btn">북마크 닫기</div> </div> <!-- 북마크 닫힌 상태 --> <div class="bookmark-close" id="bookmark-close"> <div id="bookmark-close-btn">북마크 열기</div> </div> <div class="bookmark-bar" id="bookmark-bar"> <!-- 북마크 바 --> </div> .bookmark-open { display: flex; justify-content: flex-end; position: absolute; top: 0; right: 0; width: 240px; height: 20px; padding: 15px 30px; font-size: var(--xsmall); background-color: rgba(0, 0, 0, 0.5); color: #fff; } .bookmark-close { display: flex; justify-content: flex-end; position: absolute; top: 0; right: 0; width: 240px; height: 20px; padding: 15px 30px; font-size: var(--xsmall); background-color: rgba(0, 0, 0, 0.5); color: #fff; } .bookmark-open div { cursor: pointer; } .bookmark-close div { cursor: pointer; } .bookmark-bar { position: absolute; top: 50px; right: 0; min-height: calc(100vh - 70px); width: 240px; padding: 10px 30px; background-color: rgba(0, 0, 0, 0.5); color: #fff; } const bookMarkBar = document.getElementById("bookmark-bar"); const Open = document.getElementById("bookmark-open"); const Close = document.getElementById("bookmark-close"); // 북마크 바 열기 및 닫기 const bookmarkBarToggle = () => { const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen"); if (isBookMarkBarOpen) { if (isBookMarkBarOpen === "open") { localStorage.setItem("isBookMarkBarOpen", "close"); bookMarkBar.style.display = "none"; Open.style.display = "none"; Close.style.display = "flex"; } else { localStorage.setItem("isBookMarkBarOpen", "open"); bookMarkBar.style.display = "block"; Open.style.display = "flex"; Close.style.display = "none"; } } else { localStorage.setItem("isBookMarkBarOpen", "close"); bookMarkBar.style.display = "none"; Open.style.display = "none"; Close.style.display = "flex"; } }; document .getElementById("bookmark-open-btn") .addEventListener("click", bookmarkBarToggle); document .getElementById("bookmark-close-btn") .addEventListener("click", bookmarkBarToggle);
미해결
JavaScript 베이스캠프
[ { "id": 1, "productName": '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', "price": 12500, "stokeCount": 100, "thumbnailImg": 'assets/img1.jpeg' }, { "id": 2, "productName": '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', "price": 12500, "stokeCount": 100, "thumbnailImg": 'assets/img2.jpeg' }, { "id": 3, "productName": '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', "price: 12500", "stokeCount": 100, "thumbnailImg": 'assets/img3.jpeg' }, { "id": 4, "productName": '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', "price": 12500, "stokeCount": 100, "thumbnailImg": 'assets/img4.jpeg' }, { "id": 4, "productName": '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', "price": 12500, "stokeCount": 100, "thumbnailImg": 'assets/img4.jpeg' }, { "id": 5, "productName": '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', "price": 12500, "stokeCount": 100, "thumbnailImg": 'assets/img5.jpeg' }, { "id": 6, "productName": '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', "price": 12500, "stokeCount": 100, "thumbnailImg": 'assets/img6.jpeg' }, ];
해결됨
한 입 크기로 잘라먹는 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을 사용해서 값을 받아오나요?
해결됨
한 입 크기로 잘라 먹는 리액트(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 부분을 듣고 생긴 질문입니다!
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Vue 3 시작하기 강의에서 알려주신 legacy 버전 설치해도 개발자 모드에서 vue 탭이 안보이고 아래와 같은 에러가 발생합니다.
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
안녕하세요! Portfolio 제작 강의를 따라하던 중, 지속적으로 CSS가 적용되지 않는 문제가 발생하여 문의드립니다. 화면 속 글자가 움직이는 걸로 보아 JS는 연동이 된 것 같은데 CSS가 문제가 있는 것 같아요. agent가 계속 해결을 못해서 문의 남깁니다.
