173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님! 완강하고 지금 구글 로그인 구현중입니다. 구글로 로그인하다가 마지막에 인가토큰받는 부분에서 404 에러가나는데 이유를 모르겠습니다... 도와주세요 ㅠ_ㅠ
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
build 할때는 별 문제없이 build 가 되었는데, vercel 에서 배포할때 문제가 발생했습니다. 에러는 import 시 오탈자 문제로, 직접 로그를 분석하여 해결했는데요. 궁금한점은 빌드 시에는 별 문제없었는데, 배포환경에서는 왜 문제가 발생하여 정상적으로 진행이 안되었는지가 궁금합니다. 항상 좋은 강의 감사합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 네스트 서버에서 아래와 같은 에러가 발생해서 보니 커넥션 관리가 안되고 있더라고요 prisma disconnect 추가하시면 좋을 거 같습니다. 강의 잘 보았습니다 감사합니다. PrismaClientInitializationError: Invalid prisma.review.findMany() invocation: Can't reach database server at aws-0-ap-northeast-2.pooler.supabase.com:5432 Please make sure your database server is running at aws-0-ap-northeast-2.pooler.supabase.com:5432. at In.handleRequestError (/var/task/node_modules/@prisma/client/runtime/library.js:122:7154) at In.handleAndLogRequestError (/var/task/node_modules/@prisma/client/runtime/library.js:122:6188) at In.request (/var/task/node_modules/@prisma/client/runtime/library.js:122:5896) at async l (/var/task/node_modules/@prisma/client/runtime/library.js:127:11167) at async ReviewService.findBookReviews (/var/task/dist/src/review/review.service.js:32:16) at async /var/task/node_modules/@nestjs/core/router/router-execution-context.js:46:28 at async /var/task/node_modules/@nestjs/core/router/router-proxy.js:9:17
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
assets에 있는 파일이 번들링이 된다면 assets에 이미지같은것들을 넣으면 될까요??? public에있는 파일들은 '최종번들에 복사되어진다'고 하셨는데 이말이 무슨뜻인지 잘이해가 안가서그러는데 부가설명해주시면 감사하겠습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오 강의를 보다가 질문이 생겼습니다. defaultValue 와 value 의 차이가 defaultValue 는 기존값이 수정되고, value 는 수정이 안된다는 것 뿐인가요? 그렇다면 value 는 값을 수정할 수 없으므로 readOnly 라는 코드를 빼도 되는것 아닌가요? 그리고 아래의 코드는 삼항연산자로 되어 있는데 (props.address !=="" ) 이 거짓일때는 게시물 수정할 때를 의미하는것이 맞나요? 제가 정확히 이해하고 있는지 의심이 들어서 질문 올립니다! 그리고 BoardCommentWrite.presenter컴포넌트에서 value={props.writer} 라고 되어 있는데 defaultValue={props.writer} 라고 되어도 문제 없는게 맞나요? <S.Input placeholder="작성자" onChange={props.onChangeWriter} value={props.writer} /> <S.Address readOnly value={ props.address !== "" ? props.address : props.data?.fetchBoard.boardAddress?.address ?? "" } />
미해결
코드로 배우는 React 19 with 스프링부트 API서버
목록처리(2) 에서 refresh 까지 다 하고 하단에 페이지 넘버를 클릭하면 어떨때는 두번 눌러야 화면이 넘어가는 경우가 있습니다. 브라우저 개발자 도구의 콘솔탭에서 확인해보니 아래 이미지처럼 current가 각기 다르게 두번 불러오는데요(현재 2페이지에서 1페이지를 눌렀을때의 결과 입니다.) 리액트에서 두번 불러오는거에 대해서 언급하신게 있었는데 제가 놓친부분이 있는건지... 이렇게 되는 이유를 모르겠습니다. 혹시 몰라 압축파일로 제 구글 드라이브에 올려놓았습니다. ( https://drive.google.com/drive/folders/1TQxdqkRD8xvXIHzVoI5fp2hm_HZaE0aT ) 감사합니다.
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
<h2 class="text-2xl">폰트 두께 조절</h2> <p class="font-light">Lorem ipsum dolor sit amet.</p> <p class="font-semibold">Lorem ipsum dolor sit amet.</p> <p class="font-bold">Lorem ipsum dolor sit amet.</p> <p class="font-extrabold">Lorem ipsum dolor sit amet.</p> <p class="font-black">Lorem ipsum dolor sit amet.</p> 위와 같이 했는데, 화면 볼때 굵기가 모두 같습니다. f12눌러서 확인해보면 font-weight이 700, 800 으로 다른데, 보이는건 똑같네요. 이유가 뭘까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
eslint 설치할 때 3개 중에 마지막 3번째 선택지가 없어서 수업질문 참고해서 yarn add eslint@8.0.1 설치를 하였습니다. 그다음에 npx eslint --init를 했는데 마지막에 강사님화면에서는 Would you like to install them now? · No / Yes 이렇게 되어있고 여기서 yes하면 Which package manager do you want to use? npm yarn pnpm 이런식으로 뜨는데 저는 Would you like to install them now with npm? · No / Yes 이렇게 바로 떠서 yes를 누르면 바로 설치가 됩니다.(no 눌려도 그냥 설치돼요) 근데 설치하고 나면 이런 사진과 같은 오류가 떠요 안되는 경우 방법으로 1. yarn.lock, node_modules, .eslintrc.js 파일을 지워주시고, 2. 다시 한 번 위의 순서로 eslint를 설치해 주세요! 이것도 다 따라했는데 계속 똑같아요 지피티한테 물어보니까 주요 경고 및 문제: package-lock.json 감지 경고 프로젝트에 yarn.lock 과 package-lock.json 이 동시에 존재합니다. Yarn과 npm을 섞어 사용하면 의존성 문제나 충돌이 발생할 수 있으므로, 하나의 패키지 매니저만 사용하는 것이 좋습니다. 해결책: package-lock.json 파일을 삭제하고 Yarn을 계속 사용하거나, 반대로 Yarn을 포기하고 npm을 사용하세요. 의존성 경고 ( peer dependency 불일치) 예를 들어, @typescript-eslint/eslint-plugin 이 eslint 버전 8.57.0 이상을 요구하지만 현재 설치된 버전은 8.0.1입니다. 해결책: 경고를 무시하지 않고, 요구 사항에 맞는 최신 버전을 설치하세요 yarn add eslint@^8.57.0 eslint@8.0.1 버전 경고 설치된 eslint 버전 8.0.1은 더 이상 지원되지 않는 버전입니다. 최신 버전으로 업그레이드하세요. 해결책 yarn add eslint@latest 의존성 중 사용 중단된 모듈 예를 들어, glob@7.2.3 과 inflight@1.0.6 이 더 이상 지원되지 않습니다. 이는 주로 간접 의존성에서 발생하며, 해당 모듈의 최신 버전으로 업데이트하거나, 의존성을 최신으로 맞춰야 할 수 있습니다. 이런식으로 알려주는데 뭐 아무거나 못건들겠어요 잘못될 것같아서 뭐가 잘못된걸까요 ?
미해결
Three.js로 1인칭 3D 웹사이트 만들기
우선 원인은... MeshObject 클래스 속성 중 differenceY 의 값에 OR 연산자를 사용., main.js 에서 ground 변수에 '0' 문자열 값을 할당해서 그런데요. ground 는 y 속성값을 할당하지 않았기 때문에 MeshObject 클래스에서 info.y 는 undefined 이고, this.y 는 "this.height / 2 + this.differenceY" 의 계산이 적용되서 " 0.1 / 2 + '0' " 즉, 문자열 '0.20' 이 출력됩니다. 산술 연산자 '+' 가 들어가게되면, 그 계산식의 결과값은 반드시 문자열이 나옵니다. x, y, z, differenceY 는 모두 좌표와 연관된 값으로, 모두 숫자 데이터 타입을 할당받아야 하는 일관성이 필요한데 ground, floor 에서만 differenceY 가 문자열을 받아 발생한 이슈입니다. 강의를 들어보던 중 강사님께서 처음에 숫자 0 을 사용하셨고, this.differenceY 속성에 값을 할당할때 OR 연산자를 쓰심으로인해 숫자 0 이 null/undefined 로 인식되는 것 때문에 문자열로 바꾸신거 같더라구요. 조금 더 정확하게 하자면, OR 연산자가 아닌 ?? 연산자를 사용해 숫자 0을 값 그대로 사용할 수 있도록 바꾸고 ground 에도 문자열 '0' 이 아닌 숫자 0 을 넣어주면 될것같습니다. x, y, z 에 곱하기 1을 하는 추가코드는 필요없어집니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 궁금한 게 있는데 알려주신 react loading skeleton 라이브러리는 리액트 19와 호환되지 않아서 react 18을 써야하는데,next 15는 리액트 19 rc 버전을 사용하고 있는데요. next 15 + react18로 사용을 해도 앱 라우터가 동작은 하던데, next 15 + react18로 사용하면서 라이브러리 들을 쓰는 게 좋을까요? next 15 + react19 rc로 쓰는 게 좋을까요? 관련해서 검색해보면 next 15 + react18은 앱라우터를 못 쓴다고만 되어있더라고요. 강사님의 개인적인 의견이 궁금해서 여쭤봅니다
해결됨
입문자를 위한, ES6+ 최신 자바스크립트 입문
올려주신 ebook 내용 중 [mdn 이벤트 참조] url 페이지가 삭제되어서 업데이트가 필요해보입니다. 관련 수강목록: JavaScript 입문(ES6+) > 이벤트 다루기1 페이지 경로: JavaScript 입문(ES6+) > HTML 이벤트 https://gymcoding.notion.site/HTML-eaef81ea24c8447ebe7a9c5dfbe65dab 현재 연결된 MDN url (삭제됨) : https://developer.mozilla.org/ko/docs/Web/Events 재연결 되어야하는 MDN url: https://developer.mozilla.org/en-US/docs/Web/API/Element 새로찾은 mdn링크는 한국어버전을 못찾아서 영어버전 url 전달드립니다. 강의 잘 보고 있습니다~ 감사합니다! *^^*
해결됨
코어 자바스크립트
안녕하세요 실행컨텍스트부터 영상이 나오지 않은 것 같습니다. 1강은 잘 나오는데 그 후부터는 나오질 않습니다 로딩만 계속 도네요.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 리액트 부분에 대해 강의를 듣다가 vite라는 내용이 나오던데 이 vite를 설치하니 src나 index.html 등등 여러 파일들이 설치가 되고 src폴더에서는 App.tsx 파일명으로 나오더라구요. 여기서 조금 헷갈리는 것이 npx create-react-app 설치와 비슷한데 이 vite는 정확히 무엇이고 또 npx create-react-app 이 부분과 다른건지도 궁금합니다.
미해결
인터랙티브 웹 개발 제대로 시작하기
스크롤이 처음과 끝이 아닌 중간 위치에 있을 때 창의 크기를 변환하면 스크롤 비율이 달라져서 그런지 화면이 z축을 기점으로 순간이동을 합니다. 이것을 부드럽게 하기 위해서는 어떠한 방법이 있을까요?
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
패스트 캠퍼스에서 올린 강의에 대한 질문을 어디에 올려할지 모르겠어서 여기에 남깁니다. 아키텍처 대통합은 언제 올라나요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
영상 7:53 부분에 코드를 완성하면, regionList에 있는 region 클릭 시, 영상처럼 region 별로 cities가 나와야 하지만, 아래 에러가 생겨서 정상적으로 로딩이 안됩니다. 혹시 어떤 문제 인지 알려주시면, 너무 고맙습니다. 감사합니다! app.js 코드는 아래와 같이 입력했습니다. 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 } 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(), searchWord: getSearchWord(), region: "", cities: "", }; const header = new Header({ $app, initialState: { 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, searchWord: searchWord, cities: cities, }); }, }); const regionList = 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, searchWord: "", cities: cities, }); }, }); const cityList = new CityList({ $app, initialState: this.state.cities, handleLoadMore: async () => { const newStartIdx = this.state.startIdx + 40; const newCities = await request( newStartIdx, this.state.region, this.state.sortBy, this.state.searchWord ); this.setState({ ...this.state, startIdx: newStartIdx, cities: { cities: [...this.state.cities.cities, ...newCities.cities], isEnd: newCities.isEnd, }, }); }, }); const cityDetail = new CityDetail(); this.setState = (newState) => { this.state = newState; cityList.setState(this.state.cities); header.setState({ sortBy: this.state.sortBy, searchWord: this.state.searchWord, }); regionList.setState(this.state.region); }; const init = async () => { const cities = await request( this.state.startIdx, this.state.region, this.state.sortBy, this.state.searchWord ); console.log(cities); this.setState({ ...this.state, cities: cities, }); }; init(); } regionList.js 코드는 아래와 같이 입력했습니다. export default function RegionList({ $app, initialState, handleRegion }) { this.state = initialState; this.$target = document.createElement("div"); this.$target.className = "region-list"; this.handleRegion = handleRegion; $app.appendChild(this.$target); this.template = () => { const regionList = [ "🚀 All", "🌏 Asia", "🕌 Middle-East", "🇪🇺 Europe", "💃 Latin-America", "🐘 Africa", "🏈 North-America", "🏄 Oceania", ]; let temp = ``; regionList.forEach((elm) => { let regionId = elm.split(" ")[1]; temp += `<div id=${regionId}>${elm}</div>`; }); return temp; }; this.render = () => { this.$target.innerHTML = this.template(); if (this.state) { let $currentRegion = document.getElementById(this.state); $currentRegion && ($currentRegion.className = "clicked"); } else { document.getElementById("All").className = "clicked"; } const $regionList = this.$target.querySelectorAll("div"); $regionList.forEach((elm) => { elm.addEventListener("click", () => { this.handleRegion(elm.id); }); }); }; this.setState = (newState) => { this.state = newState; this.render(); }; this.render(); }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 피그마 접속 하려고 하는데 이런 팝업창이 뜨면서 안열립니다.. 구글검색 후 webGL 설정하는 것 까지 해보았는데 안열리네요 ㅠㅠ
해결됨
코드로 배우는 React 19 with 스프링부트 API서버
package org.zerock.apiserver.service; import lombok.extern.log4j.Log4j2; import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.zerock.apiserver.DTO.PageRequestDTO; import org.zerock.apiserver.DTO.TodoDTO; import org.zerock.apiserver.Service.TodoService; import java.time.LocalDate; @SpringBootTest @Log4j2 public class TodoServiceTests { @Autowired TodoService todoService; @Test public void testGet() { Long tno = 50L; log.info(todoService.get(tno)); } @Test public void testResister() { TodoDTO todoDTO = TodoDTO.builder() .title("Title...") .content("Content...") .dueDate(LocalDate.of(2023,12,30)) .build(); log.info(todoService.resister(todoDTO)); } @Test public void testGetList() { PageRequestDTO pageRequestDTO = PageRequestDTO.builder().build(); log.info(todoService.getList(pageRequestDTO)); } } 마지막 테스트를 진행하는데 로그가 안찍히네요... 2024-12-02T17:01:47.099+09:00 INFO 13948 --- [ Test worker] o.z.apiserver.service.TodoServiceTests : org.zerock.apiserver.DTO.PageResponseDTO@4dea763c 이런식으로만 찍히는데.. 원래 위에 테스트들은 문제없이 잘 됐는데 왜 안되는걸까요?
해결됨
한 입 크기로 잘라먹는 Next.js
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강의자님께서는 강의에서 어떤 코드 정렬 기능을 쓰고 계신지 궁금합니다. 단축키를 이용하시는 것 같은데 저는 똑같이 안되는 것 같습니다.
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
yarn add --dev husky 명령어를 사용후, npx husky install 명령어를 사용했는데 husky - install command is DEPRECATED 라는 오류가 계속해서 발생합니다. .git도 생성되어 있는데 어떻게 해결해야할지 모르겠어서 질문합니다
