173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
js 공부중인데 여기서 aa 와 "aa"결과값이 다르게 나오는데 1.이유가 뭔가요? 2.둘 차이점이 뭔가요? 자세하게 부탁드립니다 ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
수업 노트 보기에서 노션에 들어가면 따로 즐겨찾기를 할 수 있는 기능이 없는데 어떻게 해야 되나요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 설치된 익스텐션이 궁금하여 질문드립니다. 17:20에 return문에 h1태그를 추가하고 저장하시니까 ()가 자동으로 감싸지는데 어떤 익스텐션을 설치해야하나요? 아니면 어떤 설정을 해야하나요?
해결됨
한 입 크기로 잘라먹는 Next.js
import style from "./page.module.css"; // 변경 후: import Image from 'next/image'; import { notFound } from "next/navigation"; import { BookData } from "@/types"; export const dynamicParams = true; export async function generateStaticParams() { return [{id: "1"}, {id: "2"}, {id: "3"}]; } async function BookDetail({bookId}:{bookId:string}){ // params가 Promise이므로 먼저 await로 해결(resolve)해야 합니다 const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${bookId}`) ; if (!response.ok){ if (response.status === 404) { notFound(); } return <section>Failed to fetch books</section>; } const book = await response.json(); const { id, title, subTitle, description, author, publisher, coverImgUrl } = book; return ( <section> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }} > <img src={coverImgUrl} alt={title || "책 표지"} /> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </section> ); } function ReviewEditForm() { async function createReviewAction(formData: FormData) { "use server"; //console.log("server action called"); const content = formData.get("content")?.toString(); const author = formData.get("author")?.toString(); console.log("server action called", { content, author }); } return ( <section > <h2>리뷰 작성</h2> <form action={createReviewAction}> <textarea name="content" placeholder="리뷰를 작성해주세요" ></textarea> <input name="author" placeholder="작성자" /> <button type="submit">리뷰 작성</button> </form> </section> ); } export default function Page({ params }: { params: { id: string } }) { // const bookId = params.id; // 미리 params 처리 return ( <div className={style.container}> <BookDetail bookId={params.id}/> <ReviewEditForm/> </div> ) } 에서 Error: Route "/book/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at Page (src\app\book\[id]\page.tsx:79:33) 77 | return ( 78 | <div className={style.container}> > 79 | <BookDetail bookId={params.id}/> | ^ 80 | <ReviewEditForm/> 81 | </div> 82 | ) 이에러가 계속 나는데 chatgpt랑 계속 풀어 보려고 해도 쉽지 않네요 params 쓰는 시점 문제인거 같은데 강의 내용을 봐서는 잘모르겠네요 export default function Page({ params }: { params: { id: string } }) { // const bookId = params.id; // 미리 params 처리 return ( <div className={style.container}> <BookDetail bookId={params.id}/> <ReviewEditForm/> </div> ) } bookId 이 부분이 계속 async 어쩌구 하는데
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
안녕하세요! 강의 듣다가 최종 배포에서 질문이 있습니다. 강의에서는 vite.config.js 파일 내용 수정은 없는 것 같은데요 아래 순서로 했는데 홈페이지 메인화면에서 Blocked request. This host (" 5d39-218-159-221-155.ngrok-free.app ") is not allowed. To allow this host, add " 5d39-218-159-221-155.ngrok-free.app " to server.allowedHosts in vite.config.js. 에러가 뜨는데요 vite.config.js 파일 수정을 해야되나요? 프론트, 백앤드 서버 실행 cmd 창에서 ngrok http 5173 입력 index.js 파일에서 아래와 같이 수정 app.use(cors({ //origin: "http://localhost:5173", origin: "https://5d39-218-159-221-155.ngrok-free.app", credentials: true, })); ngrok 에러는 아래와 같아요 08:36:45.923 KST GET /favicon.ico 403 Forbidden
해결됨
한 입 크기로 잘라먹는 Next.js
3.5) 리액트 서버 컴포넌트 주의사항 강의의 12분 쯤 - 서버 컴포넌트를 클라이언트 컴포넌트의 children props로 사용하면, 브라우저에서 서버컴포넌트가 렌더링 되지 않는 걸 보여주는 예시에서요. (with-searchbar)/page.tsx1 (with-searchbar)/client-component.tsx (with-searchbar)/server-component.tsx 현재 잘 따라한거 같은데, 서버 컴포넌트가 브라우저에 출력이 되더라구요. 서버 컴포넌트로서 출력이 된거 같긴한데. 브라우저에서 서버 컴포넌트가 보이면 안되는 거 아닌가 싶은데, 현재 next 15.3 이라서 그런건가 싶기도 하구요!
미해결
클린업 JavaScript: 점프업!
안녕하세요 선배님 혹시 계획중이신 강의가 무엇이 있는지 알수있을까요?
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요. 강사님. tailwind v4에서 hsl 대신 oklch를 사용한다고 하는데,,, 이에 대한 안내도 있을까요? 아직 강의를 다 들은건 아니라서 커스텀 색상을 얼마나 추가할지는 모르겠는데 혹시 몰라서요!
해결됨
진짜! 자바스크립트(Javascript) - 기초부터 고급까지
안녕하세요 코드 샌드박스 소스 입력시 소스를 입력할때마다 console.log()가 계속 반응하는 것같은데 소스입력할때마다 반응하는 것을 멈출수 있을가요? 혹시.. 코드샌드박스 적응이 아직 안되었으면.. 비쥬얼 코드로 공부해도 큰 문제없을가요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
조건부 렌더링을 통해 다음과 같이 url 에 따라 특정 컴포넌트를 생성하는 방법을 이해했습니다. const render = () => { const path = this.state.currentPage; $app.innerHTML = ""; if (path.startsWith("/city")) { renderHeader(); renderCityDetail(); } else { renderHeader(); renderRegionList(); renderCityList(); } }; 이 경우, 컴포넌트가 추가될 때마다 this.setState 에 추가된 컴포넌트의 setState 를 추가로 호출해야 하는 번거로움도 사라진 것 같습니다. 하지만, 상세 페이지와 메인 페이지를 계속 왔다갔다 할 경우, 공통으로 호출되는 renderHeader() 와 다른 렌더링 함수가 호출되고 인스턴스가 계속 생성이 될 것 같습니다. 이렇게 인스턴스가 계속 생성이 되면, 메모리 효율이 좋지 않을 것 같은데, React나 Vue 같은 도구에서는 이런 문제를 해결해주고 있나요? 아니면, 이 정도는 크게 신경 안써도 될 정도로 미비한 건지 궁금합니다.
미해결
JavaScript 베이스캠프
https://test.api.weniv.co.kr/mall 접속이 안 됩니다.
미해결
바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기
강의 잘 듣고 있습니다. git 주소를 찾을 수 없네요. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님 next 15버전으로 바뀌고나서 새로 처음부터 다시 강의를 들으면서 만들어 보고 있습니다. next 15버전으로 바뀌고 나서 옛날꺼랑 msw 설정이 바뀌었더라구요 그런데 강의대로 msw 설정을 하니 ssr 적용이 제대로 안되는 것 같습니다. msw 설정 후 페이지의 network 탭에 localhost document의 미리보기 내용이 없습니다. ssr이 된다면 document에 미리보기에 내용이 넘어와야 하는데 msw 설정 후에 없습니다. 옛날에 만들어 놓았던, next14 버전으로 했었던 프로젝트에서는 미리보기에 내용이 잘 담겨 ssr이 잘되고 있고, 15버전으로 진행한 프로젝트에서 layout에 있는 mswprovider 컴포넌트를 없애주니 다시 미리보기에 내용이 생기는 것으로 보아 msw 설정에서 문제가 생긴 것으로 추측됩니다. 아래는 옛날 14 버전으로 진행했던 코드입니다. msw 2.1 버전입니다. "use client"; import { useEffect } from "react"; export const MSWComponent = () => { useEffect(() => { if (typeof window !== "undefined") { if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") { require("@/mocks/browser"); } } }, []); return null; }; 아래는 지금 하고있는 코드입니다. msw 2.7.3 버전입니다. "use client"; import { Suspense, use } from "react"; import { handlers } from "@/mocks/handlers"; const mockingEnabledPromise = typeof window !== "undefined" // browser일 때 ? import("@/mocks/browser").then(async ({ default: worker }) => { if (process.env.NODE_ENV === "production") { return; } await worker.start({ // msw가 처리할 수 없는 요청이 들어왔을 때 onUnhandledRequest(request, print) { if (request.url.includes("_next")) { // next가 내부적으로 처리하는 url이기 때문에 msw가 처리할 필요 없음 그래서 return return; } print.warning(); }, }); worker.use(...handlers); (module as any).hot?.dispose(() => { worker.stop(); }); console.log(worker.listHandlers()); }) : Promise.resolve(); export function MSWProvider({ children, }: Readonly<{ children: React.ReactNode; }>) { // If MSW is enabled, we need to wait for the worker to start, // so we wrap the children in a Suspense boundary until it's ready. return ( <Suspense fallback={null}> <MSWProviderWrapper>{children}</MSWProviderWrapper> </Suspense> ); } function MSWProviderWrapper({ children, }: Readonly<{ children: React.ReactNode; }>) { // use 사용해서 promise 실행 기다리고 children return use(mockingEnabledPromise); return children; } 제 추측으로는 MSWProvider에 있는 Suspense때문에 ssr 이 안되는 것 같은데, 맞는지 궁금합니다. 그리고 맞다면 next 사용시 msw로 데이터를 mocking 하게 되면 ssr 확인을 어떻게 해야 할까요??
미해결
애플 웹사이트 인터랙션 클론!
강사님처럼 똑같이 코드를 작성했음에도 불구하고 스크롤을 천천히 내리면 opacity가 0까지 잘 적용이되는데 스크롤을 빨리내리면 opacity가 0으로 빠지다가 그상태로 남아서 씬2까지 넘어가요. 혹시 왜그런지 알 수 있을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
어떤 사이트들을 보면 스크롤 하면 그 화면에 맡게 자동으로 그 다음 리스트들이 로딩해서 보여주던데요 이방식은 상호 작용이 있는것인지 상호 작용이 없다고 봐야 하는지 궁금하네요
해결됨
한 입 크기로 잘라먹는 Next.js
2.20 배포하기를 하다 보니 현재 api 서버를 미리 만들어 주셔서 테스트 했는데 사실상 section2 프로젝트 안에서 db 연결해서 진행되게 allinone으로 개발하는게 더 초보 입장에서 이해하기 쉬운데 원래 이렇게 구분해서 작업해야 하나요
해결됨
한 입 크기로 잘라먹는 Next.js
import { Html, Head, Main, NextScript } from "next/document"; export default function Document() { return ( <Html lang="kr"> <Head /> {/* favicon 설정 */} <link rel="icon" href="/public/favicon.ico" /> <body> <Main /> <NextScript /> </body> </Html> ); } 파비콘 설정 설명이 없어서 chatgpt가 알려줘서 이렇게 했는데 안보이네요
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
의존성 배열에 보통 배열이나 객체를 넣지 않는 게 좋다고 어디서 본거 같은데 useState으로 만든 객체나 배열은 상관이 없고 const a = {a: 1, b:2} 이런 거나 const b = []; 이렇게 초기화 된 것들만 넣지 말라고 하는 것인가요? 맞다면 이유는 const a 랑 const b는 리렌더 될 때마다 참조 값이 바뀌고 useState으로 만든 것은 리렌더링이 되어도 set 함수가 쓰이지 않는 이상 참조 값이 바뀌지 않아서 그런 건가요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 강사님 질문이 있습니다. fallback 상태일때는 SEO가 적용이 되지 않는것은 이해가 됐는데 서버에서 요청한 페이지(book/4)를 내려주면 결국 해당 페이지에 대한 SEO가 다시 잘 적용이 되는데 굳이 fallback 상태일때도 SEO를 신경써줘야하는 이유가 있나요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
제 얕은 지식으로는 svg 파일이 png 파일보다 용량이 더 적어서 좋다고 알고 있는데 어떤 이유로 이미지를 svg 파일 말고 png 파일로 진행하시는 이유가 있는지 궁금합니다!
