172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
혹시 백엔드서버를 종료해도 에러가 뜨지안고 정상가동되면 어떻게해야하나요?.. 당황스럽네요 하하 아 캐싱문제네요 강제 새로고침으로 해결했습니다. 감사합니다. 음 아니네요 여전히 이상하네요.. 전 이상하게 Footer에서 먼저 에러가 나네요. force cache가 되어있음에도.. 왜그럴까요?ㅜㅜ
미해결
한 입 크기로 잘라먹는 Next.js
실제 https로 배포된 API를 fetch를 활용하여 SSR을 구현하고있습니다. 문제는 local에서는 yarn build -> yarn start 하고 테스트를 진행하면 fetch가 정상적으로 작동합니다. 하지만 AWS Amplify를 활용하여 Next JS를 배포하고 배포한 사이트에서 fetch(pending 이후에 catch로 빠짐)가 작동하지않습니다. API에 문제가 있나해서 다른 API를 CSR로 테스트를 해보면 정상적으로 200이 됩니다. 원인이 뭘까요?
해결됨
한 입 크기로 잘라먹는 Next.js
폴라우트 페이지 2를 보면서 / 인덱스페이지가 강사님은 static 페이지가 아닌 다이나믹 페이지로 빌드가 되는 부분에서 강사님은 fetch에 force-cache를 적용시키면서 이제 다이나믹된 페이지를 static 페이지로 바꾸셨느데 일단 저는 force-cache 옵션을 적용을 안해도 static 페이지이더라구요 강사님과 저랑 다른 점은 api호출하는 함수 부분을 따로 api 폴더에 빼둔거 말고는 다른 점은 없습니다 . 이렇게 따로 빼놓은 뒤 그냥 promis.all로 데이터 패칭을 해서 그대로 화면에 보여줬습니다 (이것저것 시험하느라 Allbook ,RandomBook 컴포넌트를 따로 빼지는 않은 상태입니다. ) export default async function Home() { const [allBooks, randomBooks] = await Promise.all([ fetchBooks(), fetchRandomBook(), ]); 저는 force-cache 를 적용안햇는데도 왜 다이나믹 페이지가 안되고 static 페이지가 되는걸까요 ...
미해결
깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!
이미지를 업로드한 후 푸시 커밋 하여 나온 블로그 화면 일부입니다. 처음에는 경로에 한글이 포함되어있어서 업데이트 자체가 되지 않았는데 경로에 한글 제거 후 업데이트하니 저렇게 나오는 데 제가 뭘 누락 했는지 잘 모르겠습니다.. Typora에는 잘 출력되고 페이지도 정상적으로 업데이트 되었다고 출력됩니다. 다만 _Posts파일에 업데이트된 코드에는 사진이 출력되지않고 images에서는 정상적으로 이미지가 출력됩니다. posts에 사진파일명만 표시되는데 파일명을 클릭하면 "The master branch of "깃허브 주소" does not contain the path" 라는 404오류메시지가 표시됩니다. 경로가 잘못되었다는 내용 같은데 해결 방법을 잘 모르겠어서 질문 남깁니다. 좋은 강의 제공해 주셔서 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
// CssModulePage.jsx import styles from "./styles.module.css"; export default function CssModulePage() { return ( <> <button className={styles.버튼스타일}>버튼</button> <div className={styles.네모상자스타일}>네모상자</div> </> ); } .버튼스타일 { background-color: yellow; } .네모상자스타일 { width: 200px; height: 200px; } Server Error Error: The default export is not a React Component in "/section04/04-03-css/page"
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
영상이 18분쯤 마무리 되는 것 같은데 영상길이가 87분으로 검은화면만 노출됩니다 확인 부탁드려요!
미해결
Next + React Query로 SNS 서비스 만들기
제가 알기로는 서버 액션은 현재 url, 강의 기준 /i/flow/signup으로 네트워크 요청이 일어나는거로 알고 있는데 msw의 핸들러로 fetch를 하신 이유가 궁금합니다. 작동하는 코드인가요? const onSubmit = async (formData: FormData) => { "use server"; let shouldRedirect = false; try { const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: "post", credentials: "include", body: formData, }); console.log(res.status); console.log(await res.json()); shouldRedirect = true; } catch (error) { console.error(error); } if (shouldRedirect) { redirect("/home"); } console.log("실행됨"); }; 위 코드는 SignupModal에서 msw의 핸들러로 form 제출 요청을 보내는 코드이고, http.post(`${baseUrl}/api/users`, () => { console.log("로그인 성공"); return HttpResponse.json({ message: "msw 성공", }); }), 이 코드는 핸들러 코드입니다. 요청 url인 http://localhost:3000/api/users로 폼 제출이 정상적으로 이루어지는지 궁금합니다.
미해결
직접 활용할 수 있는 Git과 Github - 기초부터 협업까지
비쥬얼 스튜디오에서 아무리 수정해도 강의에서는 그냥 바로 소스트리에 추적이 되어서 커밋이 뜨는데 저는 이렇게 save all을 눌러줘야 커밋이 떠요 왜그런가요?? 제가 뭘 잘못하는건가요?
미해결
비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
.category-item에서 width를 24%로 해야 4등분이 되고 25%로 하면 3등분이 됩니다. 이건 제가 질문하려는 내용과 뭔가 관련이 있는 것 같아서 말씀드리는거고 css #map에서 height를 픽셀로 안하면 지도가 나오지도 않고 픽셀로 해도 지도가 일부분만 나옵니다. 지도자체를 인용하는거는 문제가 없어보이는데 왜 안나올까요? @font-face { font-family: 'ChosunCentennial'; src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/ChosunCentennial.woff2') format('woff2'); font-weight: normal; font-style: normal; } *{ padding: 0; margin: 0; box-sizing: border-box; } html{ font-size: 10px; font-family: 'ChosunCentennial'; } nav{ background-color: white; } .nav-container{ padding: 1rem 0; display: flex; flex-direction: row; justify-content:space-between; align-items: center; } .nav-title{ font-size: 3rem; } .nav-contact{ font-size: 2.5rem; border: 0; background: none; cursor: pointer; font-family: inherit; } .category-title{ font-size: 3.5rem; } .category-item{ width: 24%; height: 5rem; background: none; border: none; font-family: inherit; font-size: 1.6rem; } .category-item:hover { color: orange; cursor: pointer; } .inner{ padding: 0 1.5rem; } @media all and (min-width: 1024px){ .inner{ max-width: 1024px; margin: 0 auto; } } /*카카오맵 css*/ body{ height: 100vh; } nav{ height: 59px; } main{ padding-top: 1.5rem; height: calc(100%-59px); display: flex; flex-direction: column; } #map{ flex-wrap: 1; width: 100%; height: 100px; }
해결됨
Git & GitHub, 원리부터 차근차근 - 근본깃
안녕하세요! 강의 보면서 공부하고 있습니다! 예제 보여주시면 저도 폴더를 만들어서 같은 예제 상황을 만들어서 똑같이 따라고 하고 있는대요! git diff 나 git log 명령어 등을 사용했을 때 해당 폴더가 아닌 다른 폴더 커밋과 차이점이 같이 나와서요~ 위 캡쳐 이미지를 보시면 제가 브랜치 연습을 위해 만든 branch01폴더에서 rectangle 파일을 만들고 git diff 명령어를 사용했을 때, diff를 연습할 때 만든 diff_commit 폴더의 rectangle 상태를 보여주고 있습니다. 위 캡쳐는 git log했을 때인데요! 오늘이 10일인데 전날 연습했던 다른 폴더의 커밋 내역들까지 보입니다. git bash는 해당 폴더에서 오른쪽 마우스로 git bash here를 눌러 새 창을 열어서 사용했습니다. 이번 영상 7분 18초 쯔음보면 커밋 2개가 조회 된다고 하는데 전 어제 것 까지 13개 커밋 내역이 나오는 상황입니다. 어떤 점이 문제 일까요? 답변 부탁드립니다. 감사합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
아직 사용하기 전에 변수들이 있는 경우 아래 사진과 같이 표시되는데 오류가 발생하지 않도록 설정은 어떻게 하나요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
왼쪽처럼 입력하는 박스를 박스모양이 아니라 밑줄만 나오게 하려면 어떻게 해야하나요?
미해결
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
섹션 03-02 마지막 부분에 나오는 회원가입 피그마 화면처럼 만들기 문제에 대한 답은 업로드 되어있나요? 답을 확인할수 없을까요??
미해결
손에 익는 Next.js - 블로그 만들기
안녕하세요 조은님!! 😀 강의 너무 잘봤고 완강 후 질문 남깁니다! 마지막 기능인 PPR와 Suspense를 적용한 이후에 html에서 확인해봤을 때 동적인 요소로 채워지고 있는 것을 확인할 수 있었습니다. 그런데 Vercel에서 Build Logs 를 확인해보면 ◐ (Partial Prerender) 으로 뜨는 것이 아니라 여전히 ● (SSG) prerendered as static HTML 으로 뜨는데요, PPR 적용이 잘 된게 맞을까요? Suspense가 적용이 잘 되는데 PPR은 적용이 안된걸까요? 코드 작업 후 적용결과 첨부하겠습니다!
해결됨
한 입 크기로 잘라먹는 Next.js
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 2.11 번 강의에서 ssr 듣다가 궁금한점이 있어서요 ssr은 두번 렌더링이 일어난다고 하셧느데 그러면 첫번째 서버에서 렌더링된 뒤에는 undefined이고 두번째 하이드레이션이 일어나고 그 뒤에는 window가 있으니 밑에처럼 했을때에는 콘솔이 나온느게 맞을까요 ?(하이드레이션 적용된 뒤에가 맞을까요 ?) if (typeof window !== "undefined") { console.log("window.location", window.location); }
미해결
Next + React Query로 SNS 서비스 만들기
SessoinProvider을 사용할 경우 SessionProvider로 감싼 하위 컴포넌트는 모두 클라이언트 컴포넌트가 되는 걸로 알고 있고 클라이너트 컴포넌트의 자식으로써는 서버 컴포넌트가 올 수 없다고 본 것 같은데 코드를 보니까 SessionProvider의 하위 컴포넌트도 서버 컴포넌트로 잘 작동 되는 컴포넌트가 있는 것 같아요. 혹시 제가 잘못알고 있는지 궁금합니다.
미해결
Next.js App router 기반 Chat GPT 만들기
// db/index.ts 코드 내용 import { neon } from '@neondatabase/serverless'; import { drizzle } from 'drizzle-orm/neon-http'; import * as schema from './schema'; const sql = neon(process.env.DATABASE_URL!); const db = drizzle(sql, {schema}); export default db; // action/signup.ts 내용 "use client"; import bcrypt from "bcryptjs"; import { getUserByEmail } from "@/data/user"; import { SignUpSchema } from "@/schemas/auth"; import { user } from "@/db/schema"; import db from "@/db"; import { redirect } from "next/navigation"; export const signUp = async(_:any, formData:FormData) => { //1. 필드 중요성 const validatedFields = SignUpSchema.safeParse({ name: formData.get("name"), email: formData.get("email"), password: formData.get("password") }) if(!validatedFields.success){ return { errorMessages: "잘못된 입력값이 있습니다.", }; } //2. 존재하는 사용자인지 체크 const {email, name, password} = validatedFields.data; //4. 성공 여부 반환 try { const existingUser = await getUserByEmail(email); if(existingUser){ return { errorMessages: "이미 가입된 사용자입니다.", }; } const hasehdPassword = await bcrypt.hash(password, 10); //3. db에 insert await db.insert(user).values({name, email, password: hasehdPassword}); } catch(error) { console.error(error) return {errorMessage: "알 수 없는 오류가 발생했습니다."}; } redirect("/login"); }; 회원가입 마무리 코드를 다 입력하고 저장한 뒤에 사이트를 확인했는데, 이런 오류가 납니다. DATABASE URL이 잘못됐나 싶어서 다시 확인해봤지만 이상이 없었습니다. 이전 강의인 회원가입 유효성 검사 기능 제작까지 문제가 없었는데, 문제 해결이 되지 않아 질문 남겨봅니다....
해결됨
Git & GitHub, 원리부터 차근차근 - 근본깃 [AI 더빙]
A, B 파일을 버전 1로 업로드 한 상태에서 A의 A+1로 수정을 한 후 A+1만 commit & push 하지 않나요? 근데 설명을 해주시는 그림을 보면, staging area에 A+1, B과 commit & push가 이뤄지는 것처럼 보여 질문드립니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요, 해당과같이 Dynamic page에서는 full route cache가 사용되지 않는다고 설명해주셨습니다. 이때, 첫번째 요청에서는 리퀘스트 메모이제이션과 데이터캐시가 당연히 아무것도 없기때문에 백엔드 서버에서 받아온 응답을 데이터캐시에 저장, 그리고 같은 내용을 중복방지를 위해 리퀘스트 메모이제이션에 캐싱하는거까진 알겠습니다. 그런데 두번쨰 요청에서는 같은 요청인데 리퀘스트 메모이제이션에서 MISS가 아닌 HIT을 해야하지 않나요? 왜 같은 요청인데 리퀘스트 메모이제이션은 MISS가 되고 데이터캐시에서 HIT을 하게되고 또다시 리퀘스트 메모이제이션에 SET을 하게 되는걸까요?
해결됨
Git & GitHub, 원리부터 차근차근 - 근본깃
안녕하세요 어제 완주를 완료하고 커피까지 감사하게 잘 받았습니다. 다름이 아니라 로컬에 git 을 설치하고 버전 컨트롤을 하게 되면 stage area 라는 보이지 않는 공간에 대한 이해를 하고 git 을 운영하게 되는데요. github 에 버전 컨트롤을 하게 되면 stage area 가 존재하지 않는데, 이런 차이를 이해하려면 어떻게 받아 들여야 할까요? 앗.. 추가로 로컬에 git 을 설치하게 되면 실제로 파일들이나 브랜치 관련 정보는 실제 어디에 저장되어 누적되는지도 궁금합니다~! 😊 😊
