173만명의 커뮤니티!! 함께 토론해봐요.
미해결
React Native with Expo: 제로초에게 제대로 배우기
npm ls react "react": "19.0.0", npm ls react-native "react-native": "0.79.2", npm ls expo = "expo": "~53.0.9", 문제: expo go 앱에서 제가 빌드한 앱을 실행하면 로딩이 계속되다가 위와 같은 화면이 뜹니다. 터미널에서도 에러를 찾을 수 없어서 이렇게 질문 드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
강의 찍으실 때 어떤 프로그램 쓰면 선생님처럼 화면녹화도하면서 마우스로 네모박스도 그리고 그림도 그릴 수 있는거에요? 너무 궁금해요. 아 그리고 강의가 너무 꼼꼼해서 아직까진 아주 이해가 잘됩니다. 감사합니다.
미해결
맛집 지도앱 만들기 (React Native & NestJS)
카카오 이미지 uri는 카카오쪽 서버 도메인까지 모두 포함하고 있는데, 로컬호스트 도메인까지 앞에 붙여주는 것 같아서 그 부분이 정정되어야 할 것 같습니다?
미해결
React Native with Expo: 제로초에게 제대로 배우기
EAS서비스 없이 react native처럼 로컬에서 빌드해서 사용 할 수 있는 방법이 있는지 궁금합니다.
미해결
찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)
안녕하세요 선생님 금일 수강신청 및 프로젝트해보면서 오류가 발생하여 질문드립니다. 우선 프로젝트를 clone하고 pnpm install로 의존성을 설치했습니다. 그리고 docker compose -f docker-compose/redis/redis-compose.yml up -d 를 실행하였는데 아래와 같은 결과가 나왔습니다. network ludgi-network declared as external, but could not be found 어떻게 조치하면 될까요~?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 ~ 수업내용과 똑같이 코드작성을 하고 마지막에 실행을 했는데, 페이지 이동하기와 뒤로가기도 잘 되는데 Tost 메세지가 안뜹니다. 해당 수업 자료로 실행을 해바도 같은데 무슨 문제일까요 ?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 서버 액션에 관해 궁금한 점이 생겨 질문드립니다. 일단 제가 강의를 보고 실습하면서 느꼈던 서버 액션의 큰 장점은 다음과 같습니다. 브라우저에서 서버 측에서 사용되는 함수를 실행할 수 있다. => 별도의 백엔드 API를 구현하지 않고도 DB에 직접적으로 접근하는 등의 작업이 가능 브라우저와의 상호작용을 하면서도 컴포넌트를 서버 컴포넌트로 유지할 수 있다. 하지만 1번 장점의 경우 혼자 풀스택으로 개발하지 않고 백엔드 개발자와 함께 개발하는 경우에는, 주로 이번 강의와 같이 서버 액션 함수 내에서 별도의 API를 호출하게 될 것이라 생각됩니다. 이런 경우에도 기존의 방식대로 onSubmit 등을 사용해서 API를 호출하는 것보다, 2번 장점을 위해 서버 액션을 사용하는 것이 바람직 할지 궁금해 질문드립니다! state를 이용해 실시간 validation이 이루어져야 하는 곳이 아니라면 유용할 것 같다고 생각이 들지만, 구글링을 해봐도 최신 기술이라 그런지 실제 적용 사례를 잘 찾아볼 수 없어 질문 드립니다!
해결됨
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
선생님 게시글이 슬러그 필드를 이용해서 고유의 url 형성되는건 알겠는데 만약 제목글이 같은 글의 경우 같은 url이 만들어지면 같은 제목의 여러개의 동일한 url이 생기는게 아닌가요? 조금 이해가 안가서요...
미해결
배달앱 클론코딩 [with React Native]
brew install --cask zulu@17 리액트 네이티브 공식문에서 위에 명령어로 설치하라고 나와 있습니다. 강의 영상과 다른데 이전에 찍은 영상이라 다른건가요? 강의에서는 11 버전 설치하라고 하셨는데 17버전으로 진행해도 괜찮을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 1.3) 실습용 백엔드 서버 세팅 이후 terminal 에서 npm run start 로 Swagger UI 까지 작동이 되었는데요. 2.1) Page Outer를 소개합니다. 에서 npx create-next-app@14 section02 를 진행하고 나면, npm run start 시 에러가 나고 있습니다. SSR 강의를 진행하면서 계속해서 백엔드 서버에 접속을 못하는데 왜 이러는 걸까요? error 사진파일 첨부하였습니다.
해결됨
인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트
혹시 커서ai말고 젯브레인ai로 강의를 진행해도 진행에 어려움이 없을까요?
미해결
한 입 크기로 잘라먹는 Next.js
안녕하세요, 정환님 궁금한게 있습니다. 동적 경로를 갖는 page.tsx 파일 안에 generateStaticParams 라는 함수를 설정하게되면, 경로에 해당하는 모든 페이지는 모두 Static Page로 만들어지는 것으로 알고 있습니다. return하지 않은 URL Parameter를 갖는 페이지에 대해서도 동일하다고 봤었는데요 그렇다면 , 도서 id999번까지 있다고 가정해볼게요 return [{id:"1"}] 이렇게만 작성해도 999번까지 static page가 되는게 맞을까요 ?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 해당 수업 내용을 안드로이드로 실행시켰을때 세 가지 내용중 두 가가지는 잘 나오는데 기종정보는 alert가 안뜨는데 왜 그런걸까요 ??
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
선생님~ 커서에서 코드 수정하고 연동된 깃허브에 커밋도 시켜주었는데, 버셀에 최종 마스터가 뜨지 않는데 왜 이런걸까요? ㅠㅠ 어제 저녁 이것땀시 너무 #&!@ 해서 ㅠㅠ 커서에 '최종1'이 마스터로 된 화면이고요.. 깃허브에 최종1이 master 로 되어 있는것 같구요? 근데 버셀에서는 그전단계로만 되어 있어서요 ㅠㅠ (근데 사실 이것도 어제 저녁에 계속 마스터로 안되 있어서 버셀에 있는 프로젝트 계속 지우면서 최신 깃허브 가져온거거든요?) 깃허브에 버셀에 제대로 업뎃이 안되는데, 어디부터 봐야할지 좀 도움 좀 주세요~
해결됨
한 입 크기로 잘라먹는 Next.js
index.tsx에 getStaticProps로 변경하고 검색을 하면 데이터가 나오질 않습니당..!ㅠ0ㅠ 검색을 한 뒤 페이지를 이동하면 오류 내용은 아래와 같습니다. 챗지피티한테 물어봐도 감이 안 와서 질문 올려봅니다.. import SearchableLayout from "@/components/searchable-layout"; import style from "./index.module.css"; import { ReactNode } from "react"; import BookItem from "@/components/book-item"; import { InferGetStaticPropsType } from "next"; import fetchBooks from "@/lib/fetch-books"; import fetchRandomBooks from "@/lib/fetch-random-book"; export const getStaticProps = async () => { console.log("인덱스 페이지"); const [allBooks, recoBooks] = await Promise.all([ fetchBooks(), fetchRandomBooks(), ]); return { props: { allBooks, recoBooks, }, }; }; export default function Home({ allBooks, recoBooks, }: InferGetStaticPropsType<typeof getStaticProps>) { return ( <div className={style.container}> <section> <h3>지금 추천하는 도서</h3> {recoBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> <section> <h3>등록된 모든 도서</h3> {allBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> </div> ); } Home.getLayout = (page: ReactNode) => { return <SearchableLayout>{page}</SearchableLayout>; };
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
안녕하세요 선생님.. 선생님 강의를 따라하다가, 회원 가입한 사람 모두가 글을 쓸수 있는 낚서장 같은 블로그를 만들었는데, 회원 가입 페이지나 등록 등을 커서에서 만들어서 잘 동작하는것 같고, 수파베이스에서도 세팅을 해주었는데, 회원가입에서 이메일과 비번을 입력하면 제게 확인 메일이 와야 하는데 오질 않네요. 이거 혹시 smtp 서비스를 추가해야 되는건가요?
미해결
한 입 크기로 잘라먹는 Next.js
아래 동일한 문제로 고통받는 분들이 계시는 것 같아서 깔끔하게 정리해서 올려드립니다. 1.운영체제 및 환경설정 -맥북 m1, 윈도우 11 2.이슈발생 -터미널 내 npx prisma db push 입력 시, 아래 오류 발생 -오류코드 : 아래 문자열 3.해결방안 -여러가지 해결방안이 있겠지만, 저는 아래와 같이 해결했습니다. -prisma 폴더 > schema.prisma 파일 > 14번째 줄, directUrl 삭제 (*아래처럼) 변경 전 변경 후 -.env 파일 > directURL 설정하지 않기 (*아래처럼!!! / 단, keyword는 본인 키워드로 변경 필수!) 그리고, npx prisma db push 입력 시, 문제없이 실행!! 4.원인분석 -아마도 DATABASE_URL과 DIRECT_URL을 둘 다 사용할 때, 뭔가 문제가 발생했던 것 같습니다. 물론 .env 파일 내 DIRECT_URL 키 생성 후 정상적인 값을 입력해보기도 했지만, 저는 계속 동일한 문제가 발생했기 때문에 그냥 서버 연결 방식을 1개만 선택했는데, 이 방법으로는 잘 되었습니다. 혹시나 저와 동일한 문제로 고민하실까 해서 완벽하지는 않지만, 공유드립니다. 감사합니다.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
최신 cursor에는 project rules 작성 시에 타입을 정할 수 있는데 4가지 중에 어떤 타입으로 하면 되는지, 패턴 "app/**/*.{ts,tsx}"은 어디에 넣어야할지도 같이 업데이트 해주시면 좋을 것 같습니다 !
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 ~ 해당 수업 그대로 했는데 실행시 헤더만 보이고 page.tsx 에 작성된 <div>내용입니다 ~</div> 네 줄 내용이 안나옵니다. 수업 두세번 보면서 점검을 했는데 ..어디를 수정해야 할지 모르겠습니다. 아래는 제 코드 캡처해서 올립니다. 실행시는 아래처럼 내용이 안뜹니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 싸이월드 만들기 1탄 피드백 부탁 드립니다. 과제 완성 후 레퍼런스 코드를 참고해서 확인도 하였는데 궁금한 점이 있습니다. figma에 있는 '오늘의 기분' select 박스 화살표 모양을 따라해 보고 싶어 아이콘을 사용했는데 아래 코드에서 select 태그 위에 아이콘이 잘 겹치도록 하는 부분이 어려운 것 같습니다. 이렇게 두 요소를 겹치도록 할 때 크기, 위치 같은 요소를 어떻게 계산하여 맞게 지정할 수 있을까요? <!DOCTYPE html> <html lang="ko"> <head> <title>정현아님의 미니홈피 :: 사이좋은 사람들, 싸이월드</title> <link href="./styles/index.css" rel="stylesheet"> <script src="https://kit.fontawesome.com/f9748babc2.js" crossorigin="anonymous"></script> </head> <body> <div class="background"> <div class="outerbox"> <div class="wrapper"> <div class="wrapper__left"> <div class="wrapper__left__header"> <div class="today"> <!-- 각각의 span 박스를 만들어서 관리 --> <span>TODAY</span> <span>0</span> <span> | TOTAL</span> <span>12345</span> </div> </div> <div class="wrapper__left__body"> <div class="left__body__header"> <div class="left__body__header__gray"></div> <div class="left__body__header__line"></div> </div> <div class="left__body__profile"> <div class="left__body__profile__content"> <i class="fa-regular fa-face-smile"></i> 이름 </div> <div class="left__body__profile__content"> <i class="fa-solid fa-envelope"></i> Phone </div> <div class="left__body__profile__content"> <i class="fa-solid fa-phone"></i> E-mail </div> <div class="left__body__profile__content"> <i class="fa-solid fa-star"></i> 인스타그램 </div> </div> <div class="left__body__body"></div> <div class="left__body__footer"> <div class="left__body__footer__title"> 오늘의 기분 </div> <div class="left__body__footer__box"> <select class="left__body__footer__select"> <option selected="true">기쁨 😊</option> <option>슬픔 😢</option> <option>화남 😠</option> <option>행복 🥰</option> </select> <span class="left__body__footer__icon"><i class="fa-regular fa-square-caret-down"></i></span> </div> </div> </div> </div> <div class="wrapper__right"></div> </div> </div> </div> </body> </html> * { box-sizing: border-box; margin: 0px; /*위 옆 공백 제거*/ } .background { width: 1024px; height: 600px; /* background-color: bisque; */ background-image: url("../images/background.png"); padding: 20px 0px 0px 20px; /*위 오른쪽 아래 왼쪽 - 시계방향*/ } .outerbox { width: 808px; height: 544px; /* background-color: tomato; */ background-image: url("../images/outerbox.png"); } .wrapper{ display: flex; flex-direction: row; /* background-color: rebeccapurple; */ padding: 32px 0px 0px 32px; } .wrapper__left { width: 208px; height: 472px; /* background-color: bisque; */ display: flex; flex-direction: column; } .wrapper__left__header { width: 100%; height: 30px; /* background-color: aqua; */ display: flex; flex-direction: row; justify-content: center; align-items: center; } .today { font-size: 9px; } .wrapper__left__body { width: 100%; height: 100%; /*형제 속성을 제외한 나머지만 가져감*/ /* background-color: steelblue; */ border: 1px solid grey; border-radius: 15px; background-color: white; display: flex; flex-direction: column; align-items: center; padding: 20px 30px; } .left__body__header { width: 100%; display: flex; flex-direction: column; } .left__body__header__gray { width: 148px; height: 133px; background-color: grey; } .left__body__header__line { border-top: 1px dotted black; margin: 12px 0px; /*상하여백 좌우여백*/ } .left__body__profile { width: 100%; display: flex; flex-direction: column; } .left__body__profile__content { height: 12px; font-size: 10px; /* margin: 0px 0px 8px 0px; */ margin-bottom: 10px; color: #999999; } .left__body__footer { /* padding: 110px 0px 0px 0px; */ width: 100%; margin-top: 100px; } .left__body__footer__title, .left__body__footer__select { font-size: 11px; } .left__body__footer__box { position: relative; margin-top: 5px; } .left__body__footer__select { width: 141px; appearance: none; } .left__body__footer__icon { position: absolute; width: 18px; height: 18px; top: 2px; right: 2px; pointer-events: none; /* 아이콘을 클릭해도 뒤의 select가 반응하도록 설정 */ } .wrapper__right { width: 524px; height: 472px; /* background-color: violet; */ }
