172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
강사님 안녕하세요. 수업 내용 외의 질문 드립니다. 강사님께서는 Next.js 프레임워크를 사용하실 때 어떻게 디버깅하시는지 궁금합니다. 구글링을 통해서 vscode에서 launch.json 설정을 한다든가 하는 글은 봤는데 제가 설정을 잘못했는지 잘 동작하지 않기도 하고 Next.js 환경에서의 디버깅 설정에 대한 글이 많이 없더라구요. 그래서 Next.js 이용 개발자들은 디버깅 툴을 따로 사용하지 않고 개발하는지, 강사님께서 디버깅을 하신다면 어떻게 하시는지 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
문제1 vcs내에 cmd에서는 node -v, npm -v의 버전이 잘 나오는데 bit bash 환경에서는 사진과 같이 오류가 나옵니다 어러번 node.js를 삭제하고 깔아봤는데 계속 이럽니다 문제2 git bash환경에서 오류가 떠 cmd에서 시도를 해보았습니다. 명령프롬프트(cmd)에서는 node, npm, yarn의 버전이 잘 나오지만 vsc내에 cmd에서는 나머지의 버전은 잘 나오지만 yarn의 버전이 나오질 않습니다. 버전을 모두 확인 후 npx create-next-app를 해야하는데 앞의 문제들 때문에 그런지 npx create-next-app가 실행이 되지 않습니다. 초반 세팅 과정 때문에 시간을 너무 잡아먹는 것 같아요 도와주세요 ㅠㅠ
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 해당 강의에서 날짜를 해당 월의 1일 0시0분0초부터 말일의 23시 59분 59초 설정해서 범위로 해당되는 값을 찾을 수 있또록 아래와 같이 작성을 하셨는데요 beginTime <= item.createdDate && item.createdDate <= endTime 궁금한 부분은 날짜를 범위 안에 넣지 않고 같은 연도와 월이 있는 값을 불러오는 방법도 있을 것 같은데 어떤 차이가 있는지 알고 싶습니다.
미해결
Next + React Query로 SNS 서비스 만들기
강의 잘 듣고 있습니다. dependencies와 devDependencies의 차이에 대해서 궁금한데요, 둘의 차이점은 앱 배포 시 포함이 되느냐 안되느냐의 차이로 알고 있습니다. 그런데 tanstack-query나, date-fns를 devDependencies에 설치하고 vercel에 배포를 하더라도 배포된 프로덕션 환경에서 정상적으로 작동하는데요, 이에 대한 챗 gpt의 답변은 다음과 같습니다. Vercel의 배포 프로세스 Vercel은 next build 를 실행하여 프로젝트를 빌드하고, 필요한 의존성을 설치합니다. 이때 dependencies 와 devDependencies 모두가 설치됩니다. 배포 환경에서도 devDependencies 의 패키지가 포함될 수 있는 이유는 Next.js의 빌드 시점 에 이 패키지가 필요하기 때문입니다. 예를 들어, @tanstack/react-query 는 런타임에 필요한 라이브러리인데, 이를 devDependencies 에 넣어두었더라도 next build 과정에서 번들된 코드에 포함됩니다. 따라서 Vercel에서 배포 후에도 런타임에 사용 가능합니다. React Query와 런타임 의존성 @tanstack/react-query 는 런타임에 작동해야 하는 의존성입니다. 따라서 빌드 결과물에 포함 되며, devDependencies에 설치된 상태라도 번들링 과정에서 런타임에 필요한 모든 코드를 포함합니다. @tanstack/react-query-devtools 는 개발 도구용이지만, 프로덕션 환경에서는 기본적으로 UI가 렌더링되지 않아 에러를 발생시키지 않습니다. dependencies 와 devDependencies 의 차이 dependencies : 런타임에 반드시 필요한 의존성. devDependencies : 개발 및 빌드 단계에서만 필요한 의존성. Next.js에서는 빌드 과정에서 사용하는 패키지든, 런타임에 사용하는 패키지든 모두 번들링되기 때문에 devDependencies 에 패키지가 있어도 문제가 없는 것처럼 보일 수 있습니다. Vercel이 에러 없이 작동하는 이유 @tanstack/react-query 는 devDependencies 에 있지만, 빌드 과정에서 번들링되어 클라이언트 코드로 전달되었기 때문에 런타임에서 정상적으로 작동합니다. 프로덕션 환경에서 ReactQueryDevtools 가 기본적으로 비활성화 상태라 에러가 뜨지 않습니다. 답변이 잘 이해가 안되어서 그러는데 빌드 시점에 dependencies와 devDependencies에 있는 모든 라이브러리가 설치되는건가요? 아니면 devDependencies에 있는 라이브러리라도 런타임 시점에 필요하다면 빌드 시에 설치가 되어 프로덕션 환경에 포함되는건가요? 제가 이해한 바로는, devDependencies에 있는 라이브러리더라도, 런타임 환경에서 필요한 라이브러리라면 알아서 분류하여 프로덕션 환경에 포함되도록 설치한다고 이해하였는데, 이렇게 된다면 dependencies와 devDependencies의 경계가 모호해지는 것 아닌가요?
미해결
코드로 배우는 React 19 with 스프링부트 API서버
강의를 따라서 코딩하고 실행시켜 봤는데 아래와 같은 내용으로 에러가 발생했습니다. 어떤 곳이 문제가 있는 알려 주신다면 감사하겠습니다. 혹시 확인하고 싶으신 게 있다면 알려 주셨으면 합니다. :: Spring Boot :: (v3.4.1) 2025-02-11T11:28:59.109+09:00 INFO 2836 --- [apiserver] [ Test worker] o.z.apiserver.service.TodoServiceTests : Starting TodoServiceTests using Java 21.0.5 with PID 2836 (started by zzamp in C:\Users\zzamp\Desktop\apiserver\apiserver) 2025-02-11T11:28:59.110+09:00 INFO 2836 --- [apiserver] [ Test worker] o.z.apiserver.service.TodoServiceTests : No active profile set, falling back to 1 default profile: "default" 2025-02-11T11:28:59.445+09:00 INFO 2836 --- [apiserver] [ Test worker] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JPA repositories in DEFAULT mode. 2025-02-11T11:28:59.484+09:00 INFO 2836 --- [apiserver] [ Test worker] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 32 ms. Found 1 JPA repository interface. 2025-02-11T11:28:59.760+09:00 INFO 2836 --- [apiserver] [ Test worker] o.hibernate.jpa.internal.util.LogHelper : HHH000204: Processing PersistenceUnitInfo [name: default] 2025-02-11T11:28:59.801+09:00 INFO 2836 --- [apiserver] [ Test worker] org.hibernate.Version : HHH000412: Hibernate ORM core version 6.6.4.Final 2025-02-11T11:28:59.824+09:00 INFO 2836 --- [apiserver] [ Test worker] o.h.c.internal.RegionFactoryInitiator : HHH000026: Second-level cache disabled 2025-02-11T11:28:59.996+09:00 INFO 2836 --- [apiserver] [ Test worker] o.s.o.j.p.SpringPersistenceUnitInfo : No LoadTimeWeaver setup: ignoring JPA class transformer 2025-02-11T11:29:00.015+09:00 INFO 2836 --- [apiserver] [ Test worker] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Starting... 2025-02-11T11:29:00.071+09:00 INFO 2836 --- [apiserver] [ Test worker] com.zaxxer.hikari.pool.HikariPool : HikariPool-1 - Added connection org.mariadb.jdbc.Connection@72f24a84 2025-02-11T11:29:00.073+09:00 INFO 2836 --- [apiserver] [ Test worker] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Start completed. 2025-02-11T11:29:00.107+09:00 INFO 2836 --- [apiserver] [ Test worker] org.hibernate.orm.connections.pooling : HHH10001005: Database info: Database JDBC URL [Connecting through datasource 'HikariDataSource (HikariPool-1)'] Database driver: undefined/unknown Database version: 10.11.10 Autocommit mode: undefined/unknown Isolation level: undefined/unknown Minimum pool size: undefined/unknown Maximum pool size: undefined/unknown 2025-02-11T11:29:00.552+09:00 INFO 2836 --- [apiserver] [ Test worker] o.h.e.t.j.p.i.JtaPlatformInitiator : HHH000489: No JTA platform available (set 'hibernate.transaction.jta.platform' to enable JTA platform integration) 2025-02-11T11:29:00.580+09:00 INFO 2836 --- [apiserver] [ Test worker] j.LocalContainerEntityManagerFactoryBean : Initialized JPA EntityManagerFactory for persistence unit 'default' 2025-02-11T11:29:00.892+09:00 WARN 2836 --- [apiserver] [ Test worker] JpaBaseConfiguration$JpaWebConfiguration : spring.jpa.open -in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open -in-view to disable this warning 2025-02-11T11:29:01.216+09:00 INFO 2836 --- [apiserver] [ Test worker] o.z.apiserver.service.TodoServiceTests : Started TodoServiceTests in 2.251 seconds (process running for 3.134) Mockito is currently self-attaching to enable the inline-mock-maker. This will no longer work in future releases of the JDK. Please add Mockito as an agent to your build what is described in Mockito's documentation: https://javadoc.io/doc/org.mockito/mockito-core/latest/org/mockito/Mockito.html#0.3 WARNING: A Java agent has been loaded dynamically (C:\Users\zzamp\.gradle\caches\modules-2\files-2.1\net.bytebuddy\byte-buddy-agent\1.15.11\a38b16385e867f59a641330f0362ebe742788ed8\byte-buddy-agent-1.15.11.jar) WARNING: If a serviceability tool is in use, please run with -XX:+EnableDynamicAgentLoading to hide this warning WARNING: If a serviceability tool is not in use, please run with -Djdk.instrument.traceUsage for more information WARNING: Dynamic loading of agents will be disallowed by default in a future release Hibernate: select t1_0.tno,t1_0.complete,t1_0.content,t1_0.due_date,t1_0.title from tbl_todo t1_0 where t1_0.tno=? No value present java.util.NoSuchElementException: No value present at java.base/java.util.Optional.orElseThrow(Optional.java:377) at org.zerock.apiserver.service.TodoServiceImpl.get(TodoServiceImpl.java:24) at org.zerock.apiserver.service.TodoServiceTests.testGet(TodoServiceTests.java:20) at java.base/java.lang.reflect.Method.invoke(Method.java:580) at java.base/java.util.ArrayList.forEach(ArrayList.java:1596) at java.base/java.util.ArrayList.forEach(ArrayList.java:1596) Java HotSpot(TM) 64-Bit Server VM warning: Sharing is only supported for boot loader classes because bootstrap classpath has been appended > Task :test TodoServiceTests > testGet() FAILED java.util.NoSuchElementException at TodoServiceTests.java:20 타깃 VM에서 연결 해제되었습니다. 주소: 'localhost:4408', 전송: '소켓' 2025-02-11T11:29:32.264+09:00 INFO 2836 --- [apiserver] [ionShutdownHook] j.LocalContainerEntityManagerFactoryBean : Closing JPA EntityManagerFactory for persistence unit 'default' 2025-02-11T11:29:32.265+09:00 INFO 2836 --- [apiserver] [ionShutdownHook] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Shutdown initiated... 2025-02-11T11:29:32.268+09:00 INFO 2836 --- [apiserver] [ionShutdownHook] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Shutdown completed. > Task :test FAILED 1 test completed, 1 failed FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':test'. > There were failing tests. See the report at: file:///C:/Users/zzamp/Desktop/apiserver/apiserver/build/reports/tests/test/index.html * Try: > Run with --scan to get full insights. BUILD FAILED in 36s 5 actionable tasks: 5 executed
해결됨
[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
const TypedNumber = (num : any) => { setNumber((prev) => { if (prev === "0") return num; return prev+ num; }); }; num 타입으로 인해 오류가 나서 any로 지정을 해야만 하는데요.. 강사님 코드에는 any 타입을 지정안해 오류가 아나는데 차이가 뭔가요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
사진과 같구요. Node.js, Code Runner 설치했습니다. 오류 코드도 구글링해 봤는데 해결 방법을 못 찾겠어서 올려 봅니당...
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 실습용 백엔드 서버에 대해 궁금한점이 있습니다. 강의에서 한입북스라는 서버를 가지고 실습을 하는데 이 서버는 날씨api, 영화api와 같이 그냥 도서 데이터가 들어있는걸 가져온다는건가요? 아니면 서버사이드렌더링으로 만들어 놓은 페이지 같은걸 가져오기 위함인가요?
미해결
Next.js 시작하기
Prettier을 비활성화했음에도 어디서 오류가 나는지 모르겠습니다.
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
vscode (windows)사용 기존) mydjango02 폴더--> django 설치 --> startproject --> manage.py 생성 질문 1) mydjango 03 폴더 --> django 설치 --> django runserver가 돌아가지 않습니다. 질문 2) 이전에 따라하기에선 django runserver가 돌아갔었는데 디버그시 mydjango.py가 나타나지 않았습니다. 그래서 실습을 기존에 설치된 manage.py로 했는데 제가 어느 부분에서 실수 할 가능성이 있을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useState대신 useEffect를 사용하는 이유는 이벤트핸들러 동작시 useState는 비동기를 제공하지 않아 setCount가 동작을 마치기 전 console.log가 실행되어 setCount이후 적용되는 count를 console에 찍지 못하고 리렌더링되기 이전의 state만 console에 찍히기 때문에 useState대신 useEffect를 사용한다고 하셔서 혹시나 하고 useEffect대신 useState를 사용하고 대신 이벤트 핸들러에 async await를 적용했더니 useEffect에서 제공하는 기능이 실행되는것을 확인했습니다. 여기서 궁금한점은 useState+async await와 useEffect간의 차이점을 알고싶습니다. const onClickHandler = async (value) => { await setCount(count+value) console.log(count) }
해결됨
한 입 크기로 잘라먹는 Next.js
module.css 에서 :global 에 대한 궁증즘이 생겨 문의드립니다. 1번 방법 .header { height: 60px; font-weight: bold; font-size: 18px; line-height: 60px; :global(a) { color: black; text-decoration: none; } } 2번 방법 .header { height: 60px; font-weight: bold; font-size: 18px; line-height: 60px; :global { a { color: black; text-decoration: none; } } } 3번 방법 :global(a) { color: black; text-decoration: none; } 4번 방법 :global .header a { color: black; text-decoration: none; } 위 방법 모두 아래와 같은 에러가 뜨고 있습니다. Selector ":global" is not pure (pure selectors must contain at least one local class or id) 제가 숙지하기로는 css nested 문법은 최신문법으로 sass,postcss 등이 없어도 지원이 되고있는 걸로 알고 있어서 처음에는 sass,postcss 등 설치없이 진행했다가 안되서 모두 설치해 보고 위를 모두 실행해 봤는데도 같은 에러가 나고 있습니다. 어떻게 하면 에러가 나지 않을까요? 참고로 저는 퍼블리셔로 일하고 있는데 현재 일하고 있는 프로젝트에서는 :global 을 아래와 같이 사용하고 있는 중입니다. .header { height: 60px; font-weight: bold; font-size: 18px; line-height: 60px; :global { a { color: black; text-decoration: none; } } } 여기 프로젝트 소스가 복잡하기도 하고 얕은 지식으로 분석을 해보긴 했으나 해결이 안되고 있습니다. 한입 넥스트를 진행하면서 :global 를 적용하려고 테스트해봤지만 잘 안되어 문의드리오니 소중한 답변 부탁드립니다.
해결됨
한 입 크기로 잘라먹는 Next.js
선생님 데이터 베이스관련 질문드립니다. superbase에서 핑 확인해봐도 값이 안오고 데이터베이스가 죽어버린거 같은데 이럴경우 금액을 늘려야 하나요? 무료가 리소스 얼마나 제공하는지를 모르겠네요 오류코드 같이 첨부합니다. [Nest] 11338 - 02/10/2025, 3:19:23 PM ERROR [ExceptionsHandler] Invalid `this.prisma.book.findMany()` invocation in /Users/wi/WebstormProjects/onebite-books-server-main/src/book/book.service.ts:27:35 24 } 25 26 async findAllBooks() { → 27 return await this.prisma.book.findMany( 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`. PrismaClientInitializationError: Invalid `this.prisma.book.findMany()` invocation in /Users/wi/WebstormProjects/onebite-books-server-main/src/book/book.service.ts:27:35 24 } 25 26 async findAllBooks() { → 27 return await this.prisma.book.findMany( 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 (/Users/wi/WebstormProjects/onebite-books-server-main/node_modules/@prisma/client/runtime/library.js:122:7154) at In.handleAndLogRequestError (/Users/wi/WebstormProjects/onebite-books-server-main/node_modules/@prisma/client/runtime/library.js:122:6188) at In.request (/Users/wi/WebstormProjects/onebite-books-server-main/node_modules/@prisma/client/runtime/library.js:122:5896) at l (/Users/wi/WebstormProjects/onebite-books-server-main/node_modules/@prisma/client/runtime/library.js:127:11167) at BookService.findAllBooks (/Users/wi/WebstormProjects/onebite-books-server-main/src/book/book.service.ts:27:12) at /Users/wi/WebstormProjects/onebite-books-server-main/node_modules/@nestjs/core/router/router-execution-context.js:46:28 at /Users/wi/WebstormProjects/onebite-books-server-main/node_modules/@nestjs/core/router/router-proxy.js:9:17
미해결
실무 중심! FE 입문자를 위한 React
학습 링크 어디에서 확인할 수 있나요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 타입스크립트 강의를 보고 있는 중인데 영상대로 tsconfig.json 파일에 { "$schema": " https://json.schemastore.org/tsconfig ", "_version": "2.0.0", "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "module": "esnext", "moduleResolution": "bundler", "target": "es2015", "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "isolatedModules": true, "jsx": "react-jsx", "noEmit": true, "noFallthroughCasesInSwitch": true, "resolveJsonModule": true, "skipLibCheck": true, "strict": true } } 이렇게 넣으니 아래 이미지처럼 오류가 뜨는데 찾아봐도 왜 오류가 뜨는지 잘 모르겠습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Button.jsx?t=1739152459356:22 Uncaught TypeError: Cannot read properties of undefined (reading 'to') at Button ( Button.jsx?t=1739152459356:22:17 ) An error occurred in the <Button> component. Consider adding an error boundary to your tree to customize error handling behavior. Visit https://react.dev/link/error-boundaries to learn more about error boundaries. Error Component Stack at Button ( Button.jsx?t=1739152290133:19:112 ) at App (<anonymous>)
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. 강의를 마치고 혼자 구현을 해보고 있는데, 로그인과 인증 관련해서 궁금한 부분이 있습니다. 프론트에 로그인한 유저인지의 판단을 미들웨어에서 auth함수로 next 서버를 통해 하고있는데,로그인 후에 접속 가능한 페이지를 이동할때마다 무조건 서버에 체크를 해주어야 하나요? 데이터 페칭은 리액트 쿼리를 설명하며 말씀해주신것 처럼 컨텐츠에 따라 판단해서 캐싱하고 새로 받아오고의 개념이 이해가 되었는데, 세션체크라고 해야 할까요? 로그인 후에 이 유저가 로그인이 되어있는지에 대한 체크를 서버에 얼마나 자주 해주어야 하는지 모르겠습니다. 현재는 미들웨어에서 로그인이 필요한 페이지에 auth함수를 호출하여 프론트 서버에서 체크를 하고, api를 호출할때는 쿠키에 next-auth의 세션 토큰과 서버에서 발급한 세션 아이디를 담아서 서버에서 로그인과 인증 확인을 하고있는것으로 이해를 했습니다. 현재는 혼자서 nestjs를 통해 jwt 토큰 2개 (access,refresh)을 발급해서 구현을 해보고있는데, 로그인이 필요한 페이지로 이동한다면 무조건 미들웨어에서 토큰 확인을 서버를 통해 해주어야 하는건가 잘 모르겠어서 질문 드립니다.. 강의 정말 잘 듣고 도움이 많이 됐습니다. 감사합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 오픈 채팅방에 참여하려 하는데 인원수가 꽉 찬 거 같습니다ㅜㅜ
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
<Counter onTotal={handleTotal} /> <hr/> <Counter onTotal={handleTotal}/> <hr/> <Counter onTotal={handleTotal}/> 여기서 Counter.jsx에서 console.log 를 추가했고 버튼 세 개 중 하나만 눌러도 <Counter /> 세 개 전체가 리렌더링 됩니다. (log 가 세번찍힘) 왜그런건가요 ?
해결됨
한 입 크기로 잘라먹는 Next.js
선생님 Suspense는 그러면 언제언제 써야하는건가요?? 어떤 함수일때 빌드시 오류나는지 다 알수는 없으니 빌드시 마다 확인을 해야할까요? 기존 page router와 다른게 뭔가 CSR SSR SSG ISR 이렇게 배우다가 갑자기 정적페이지 동적페이지 하는게 나오는데 랜더링 방식이랑 같은의미인건지... 궁금합니다.
