172만명의 커뮤니티!! 함께 토론해봐요.
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
뒤로 이동 버튼을 눌러 페이지 전환이 잘 되었음을 검증하고 싶으면 history web api 등을 이용해서 검증하는게 더 올바르지 않나요?? 왜 useNavigate 의 반환 함수의 인자로 검증하는지 궁금합니다~
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
무한로딩 되면서 접속이 안되요 ㅠㅠ
해결됨
Next.js 15로 완성하는 실전 YouTube 클론 개발
ErrorBoundary component ( react-error-boundary ) 는 client component 인데 수업에서는 server component 에서 사용하고 있는걸로 확인됩니다. 괜찮을까요?
미해결
스프링 부트와 리액트로 구현하는 소셜 로그인
socialLoginSpa1703 소스코드를 다운받고 인텔리제이로 프로젝트를 열었습니다. jdbc 설정대로 mysql을 생성하였고 bootRun으로 실행시키면 프로젝트는 실행됩니다. 강의와같이 localhost:8080 이 접속이 안되고 localhost 에 대한 액세스가 거부됨 이 페이지를 볼 수 있는 권한이 없습니다. HTTP ERROR 403 가 뜹니다. 확인 부탁드려요 2025-06-07T13:23:42.478+09:00 INFO 46412 --- [ restartedMain] c.e.demo.SocialLoginSpa1703Application : Starting SocialLoginSpa1703Application using Java 17.0.15 with PID 46412 (C:\Users\HP\Desktop\�Ǽ�ȣ\Project\SocialLoginSpa1703\build\classes\java\main started by HP in C:\Users\HP\Desktop\�Ǽ�ȣ\Project\SocialLoginSpa1703) 2025-06-07T13:23:42.483+09:00 INFO 46412 --- [ restartedMain] c.e.demo.SocialLoginSpa1703Application : No active profile set, falling back to 1 default profile: "default" 2025-06-07T13:23:42.566+09:00 INFO 46412 --- [ restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : Devtools property defaults active! Set 'spring.devtools.add-properties' to 'false' to disable 2025-06-07T13:23:42.566+09:00 INFO 46412 --- [ restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : For additional web related logging consider setting the 'logging.level.web' property to 'DEBUG' 2025-06-07T13:23:44.141+09:00 INFO 46412 --- [ restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JPA repositories in DEFAULT mode. 2025-06-07T13:23:44.275+09:00 INFO 46412 --- [ restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 119 ms. Found 2 JPA repository interfaces. 2025-06-07T13:23:45.451+09:00 INFO 46412 --- [ restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port 8080 (http) 2025-06-07T13:23:45.477+09:00 INFO 46412 --- [ restartedMain] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2025-06-07T13:23:45.478+09:00 INFO 46412 --- [ restartedMain] o.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/10.1.39] 2025-06-07T13:23:45.585+09:00 INFO 46412 --- [ restartedMain] o.a.c.c.C.[Tomcat].[ localhost ].[/] : Initializing Spring embedded WebApplicationContext 2025-06-07T13:23:45.587+09:00 INFO 46412 --- [ restartedMain] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 3018 ms 2025-06-07T13:23:45.876+09:00 INFO 46412 --- [ restartedMain] o.hibernate.jpa.internal.util.LogHelper : HHH000204: Processing PersistenceUnitInfo [name: default] 2025-06-07T13:23:46.037+09:00 INFO 46412 --- [ restartedMain] org.hibernate.Version : HHH000412: Hibernate ORM core version 6.5.3.Final 2025-06-07T13:23:46.427+09:00 INFO 46412 --- [ restartedMain] o.h.c.internal.RegionFactoryInitiator : HHH000026: Second-level cache disabled 2025-06-07T13:23:47.214+09:00 INFO 46412 --- [ restartedMain] o.s.o.j.p.SpringPersistenceUnitInfo : No LoadTimeWeaver setup: ignoring JPA class transformer 2025-06-07T13:23:47.301+09:00 INFO 46412 --- [ restartedMain] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Starting... 2025-06-07T13:23:47.595+09:00 INFO 46412 --- [ restartedMain] com.zaxxer.hikari.pool.HikariPool : HikariPool-1 - Added connection com.mysql.cj.jdbc.ConnectionImpl@3419a5dd 2025-06-07T13:23:47.600+09:00 INFO 46412 --- [ restartedMain] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Start completed. 2025-06-07T13:23:49.656+09:00 INFO 46412 --- [ restartedMain] o.h.e.t.j.p.i.JtaPlatformInitiator : HHH000489: No JTA platform available (set 'hibernate.transaction.jta.platform' to enable JTA platform integration) 2025-06-07T13:23:49.824+09:00 INFO 46412 --- [ restartedMain] j.LocalContainerEntityManagerFactoryBean : Initialized JPA EntityManagerFactory for persistence unit 'default' 2025-06-07T13:23:50.469+09:00 INFO 46412 --- [ restartedMain] o.s.d.j.r.query.QueryEnhancerFactory : Hibernate is in classpath; If applicable, HQL parser will be used. 2025-06-07T13:23:51.243+09:00 WARN 46412 --- [ restartedMain] 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-06-07T13:23:52.357+09:00 INFO 46412 --- [ restartedMain] o.s.b.d.a.OptionalLiveReloadServer : LiveReload server is running on port 35729 2025-06-07T13:23:52.418+09:00 INFO 46412 --- [ restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port 8080 (http) with context path '/' 2025-06-07T13:23:52.428+09:00 INFO 46412 --- [ restartedMain] c.e.demo.SocialLoginSpa1703Application : Started SocialLoginSpa1703Application in 10.793 seconds (process running for 11.915) 2025-06-07T13:24:32.032+09:00 INFO 46412 --- [nio-8080-exec-2] o.a.c.c.C.[Tomcat].[ localhost ].[/] : Initializing Spring DispatcherServlet 'dispatcherServlet' 2025-06-07T13:24:32.032+09:00 INFO 46412 --- [nio-8080-exec-2] o.s.web.servlet.DispatcherServlet : Initializing Servlet 'dispatcherServlet' 2025-06-07T13:24:32.035+09:00 INFO 46412 --- [nio-8080-exec-2] o.s.web.servlet.DispatcherServlet : Completed initialization in 2 ms 2025-06-07T13:24:32.090+09:00 INFO 46412 --- [nio-8080-exec-2] c.e.d.security .JwtAuthenticationFilter : doFilterInternal
미해결
React Native with Expo: 제로초에게 제대로 배우기
강의 잘 따라가다가 로그인까지 성공했는데 20강부터 갑자기 add,activity,user탭을 눌러도 전환이 안돼요.. home이랑 search만 전환이 됩니다. 에러도 안떠서 어디부터 잘못된건지 감이 안 오는데 어떤 파일을 확인해야 할까요? app/(tabs)_layout.tsx 입니다 import { Ionicons } from "@expo/vector-icons"; import { type BottomTabBarButtonProps } from "@react-navigation/bottom-tabs"; import { Tabs, useRouter } from "expo-router"; import { useContext, useRef, useState } from "react"; import { Animated, Modal, Pressable, Text, TouchableOpacity, View } from "react-native"; import { AuthContext } from "../_layout"; export default function TabLayout(){ const router=useRouter(); const [isLoginModalOpen,setIsLoginModalOpen]=useState(false); const {user}=useContext(AuthContext); const isLoggedIn = !!user; const openLoginModal=()=>{ setIsLoginModalOpen(true); }; const closeLoginModal=()=>{ setIsLoginModalOpen(false); }; const toLoginPage= ()=>{ setIsLoginModalOpen(false); router.push("/login"); } const AnimatedTabBarButton=({ children, onPress, style, ...restProps }: BottomTabBarButtonProps)=>{ const scaleValue=useRef(new Animated.Value(1)).current; const handlePressOut=()=>{ Animated.sequence([ Animated.spring(scaleValue,{ toValue:1.2, useNativeDriver:true, speed:200, }), Animated.spring(scaleValue,{ toValue:1, useNativeDriver:true, speed:200, }), ]).start(); } return ( <Pressable onPress={onPress} onPressOut={handlePressOut} style={[{ flex: 1, justifyContent: "center", alignItems: "center" }, style]} android_ripple={{ borderless: false, radius: 0 }} > <Animated.View style={{ transform: [{ scale: scaleValue }] }}> {children} </Animated.View> </Pressable> ); } return ( <> <Tabs backBehavior="history" screenOptions={{ headerShown:false, tabBarButton: (props)=><AnimatedTabBarButton {...props}/>, }} > <Tabs.Screen name="(home)" options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="home" size={24} color={focused ? "black":"gray"}/> ), }} /> <Tabs.Screen name="search" options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="search" size={24} color={focused ? "black":"gray"}/> ), }}/> <Tabs.Screen name="add" listeners={{ tabPress:(e)=>{ e.preventDefault(); if(!isLoggedIn){ openLoginModal(); } } }} options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="add" size={24} color={focused ? "black":"gray"}/> ), }} /> <Tabs.Screen name="activity" listeners={{ tabPress:(e)=>{ e.preventDefault(); if(!isLoggedIn){ openLoginModal(); } }, }} options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="heart-outline" size={24} color={focused ? "black":"gray"}/> ), }}/> <Tabs.Screen name="[username]" listeners={{ tabPress:(e)=>{ e.preventDefault(); if(!isLoggedIn){ openLoginModal(); } }, }} options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="person-outline" size={24} color={focused ? "black":"gray"}/> ), }}/> <Tabs.Screen name="(post)/[username]/post/[postID]" options={{ href:null, }} /> </Tabs> <Modal visible={isLoginModalOpen} transparent={true} animationType="slide" > <View style={{ flex:1, justifyContent:"flex-end", backgroundColor:"rgba(0,0,0,0.5)" }}> <View style={{backgroundColor:"white",padding:20}}> <Pressable onPress={toLoginPage}> <Text>Login Modal</Text> </Pressable> <TouchableOpacity onPress={closeLoginModal}> <Ionicons name="close" size={24} color='#555'/> </TouchableOpacity> </View> </View> </Modal> </> ); }
해결됨
React Native with Expo: 제로초에게 제대로 배우기
ios환경에서 어떻게 해야되는 지 알려주시면 감사하겠습니다.
미해결
Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로
<리스트> <레코드1/> <레코드2/> </리스트> 일 경우… 리스트단에서 use client로 한 후 zustand에서 리스트 자체를 통으로 관리해야하는가? 각각의 레코드에 use client를 한 후 데이터를 받으면 zustand에 리스트를 만들어 레코드별로 hash(Map)으로 등록해 관리해야하는가? 레코드에는 좋아요, 조회수 등이 표시됨. 제 생각은 1번은 SEO가 중요한건 각각 레코드 (상세페이지) 이므로 zustand에서 통으로 넣어 관리하면 되니 구현 및 데이터 신뢰도에서는 나아보이는데 하나바뀌면 전부 렌더링되니까 애매한거같고 2번은 서버에서 모두 다 가져와서 초기속도는 빠르고 seo에 좋으나 zustand에 통으로 못넣고 데이터 자체를 내가 직접관리하는 구조라 구현 및 데이터 신뢰 측면에서는 골치아플거같은데… 무엇이 일반적인 구현방식인지 모르겠습니다. 도와주세요 ㅠㅠ
미해결
[React / VanillaJS] UI 요소 직접 만들기 Part 1
<리스트> <레코드1/> <레코드2/> </리스트> 일 경우… 리스트단에서 use client로 한 후 zustand에서 리스트 자체를 통으로 관리해야하는가? 각각의 레코드에 use client를 한 후 데이터를 받으면 zustand에 리스트를 만들어 레코드별로 hash(Map)으로 등록해 관리해야하는가? 레코드에는 좋아요, 조회수 등이 표시됨. 제 생각은 1번은 SEO가 중요한건 각각 레코드 (상세페이지) 이므로 zustand에서 통으로 넣어 관리하면 되니 구현 및 데이터 신뢰도에서는 나아보이는데 하나바뀌면 전부 렌더링되니까 애매한거같고 2번은 서버에서 모두 다 가져와서 초기속도는 빠르고 seo에 좋으나 zustand에 통으로 못넣고 데이터 자체를 내가 직접관리하는 구조라 구현 및 데이터 신뢰 측면에서는 골치아플거같은데… 무엇이 일반적인 구현방식인지 모르겠습니다. 도와주세요 ㅠㅠ
미해결
Next + React Query로 SNS 서비스 만들기
<리스트> <레코드1/> <레코드2/> </리스트> 일 경우… 리스트단에서 use client로 한 후 zustand에서 리스트 자체를 통으로 관리해야하는가? 각각의 레코드에 use client를 한 후 데이터를 받으면 zustand에 리스트를 만들어 레코드별로 hash(Map)으로 등록해 관리해야하는가? 레코드에는 좋아요, 조회수 등이 표시됨. 제 생각은 1번은 SEO가 중요한건 각각 레코드 (상세페이지) 이므로 zustand에서 통으로 넣어 관리하면 되니 구현 및 데이터 신뢰도에서는 나아보이는데 하나바뀌면 전부 렌더링되니까 애매한거같고 2번은 서버에서 모두 다 가져와서 초기속도는 빠르고 seo에 좋으나 zustand에 통으로 못넣고 데이터 자체를 내가 직접관리하는 구조라 구현 및 데이터 신뢰 측면에서는 골치아플거같은데… 무엇이 일반적인 구현방식인지 모르겠습니다. 도와주세요 ㅠㅠ
해결됨
한 입 크기로 잘라먹는 Next.js
<리스트> <레코드1/> <레코드2/> </리스트> 일 경우… 리스트단에서 use client로 한 후 zustand에서 리스트 자체를 통으로 관리해야하는가? 각각의 레코드에 use client를 한 후 데이터를 받으면 zustand에 리스트를 만들어 레코드별로 hash(Map)으로 등록해 관리해야하는가? 레코드에는 좋아요, 조회수 등이 표시됨. 제 생각은 1번은 SEO가 중요한건 각각 레코드 (상세페이지) 이므로 zustand에서 통으로 넣어 관리하면 되니 구현 및 데이터 신뢰도에서는 나아보이는데 하나바뀌면 전부 렌더링되니까 애매한거같고 2번은 서버에서 모두 다 가져와서 초기속도는 빠르고 seo에 좋으나 zustand에 통으로 못넣고 데이터 자체를 내가 직접관리하는 구조라 구현 및 데이터 신뢰 측면에서는 골치아플거같은데… 무엇이 일반적인 구현방식인지 모르겠습니다. 도와주세요 ㅠㅠ
미해결
React Native with Expo: 제로초에게 제대로 배우기
안녕하세요 제로초님 강의 잘 보고 있습니다. 카카오 로그인을 구현하는 중에 문제가 생겨 어찌해서 해결했는데 해결된 이유가 궁금해서 질문드립니다! 1. 에러로그 TypeError: queryString.stringify is not a function 이라는 에러가 나서 찾아보니 query-string 버전 충돌이 있는 것 같아 query-string을 @7.1.3 버전으로 설치하니 해결이 되었습니다. pnpm-locl.yml을 보니 query-string을 아래와 같이 두 버전을 같이 쓰고 있었습니다. query-string@7.1.3: dependencies: decode-uri-component: 0.2.2 filter-obj: 1.1.0 split-on-first: 1.1.0 strict-uri-encode: 2.0.0 query-string@9.2.0: dependencies: decode-uri-component: 0.4.1 filter-obj: 5.1.0 split-on-first: 3.0.0 2. 사용하고 있는 패키지들 1) @react-native-kakao/core @react-native-kakao/core@2.4.0(expo@53.0.10(@babel/core@7.27.4)(@expo/metro-runtime@5.0.4(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0)))(react-native-webview@13.13.5(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0))(react@19.0.0))(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0))(react@19.0.0))(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0))(react@19.0.0)': dependencies: crypto-js: 4.2.0 query-string: 9.2.0 react: 19.0.0 2) @react-navigation '@react-navigation/core@7.10.0(react@19.0.0)': dependencies: '@react-navigation/routers': 7.4.0 escape-string-regexp: 4.0.0 nanoid: 3.3.11 query-string: 7.1.3 위의 에러로그에서와 같이 tab layout에 접근하려 할 때 react-navigation의 getPathFromState.js에서 query-string의 import에서 문제가 발생하는 것 같았는데 정확히 어떤 문제인지 잘 모르겠네요.. lockfile과 node_modules를 삭제해도 동일하게 query-string은 두가지 버전으로 설치되었고 만약 package.json에 query-string을 7버전으로 명시적으로 설치하지 않으면 탭 레이아웃의 모든 페이지들에서 저 오류가 납니다. 일단 query-string 패키지 설치를 해서 오류를 해결하긴 했지만 정확한 이유를 모르겠어서 질문드립니다 ! 아래는 GPT에게 질문시 답변한 내용입니다. GPT 답변 내용 query-string@9.x 는 ESM-only라서 CommonJS 방식의 import ( import * as queryString ) 시 undefined 가 반환됨 React Navigation 내부의 getPathFromState.ts 에서 queryString.stringify(...) 호출 시 에러 발생 의존성 충돌로 인해 런타임 크래시가 발생하는 것으로 보임 ❓ 질문드리고 싶은 점 이러한 충돌을 예방하기 위한 공식적인 방법은 무엇인가요? (예: pnpm.overrides 로 강제 버전 고정) 혹시 다른 라이브러리에서도 이와 같은 ESM-CJS 충돌을 방지하기 위한 일반적인 best practice가 있을까요? // package.json "dependencies": { "@expo/vector-icons": "^14.1.0", "@react-native-async-storage/async-storage": "2.1.2", "@react-native-kakao/core": "^2.4.0", "@react-native-kakao/user": "^2.4.0", "@react-navigation/bottom-tabs": "^7.3.10", "@react-navigation/elements": "^2.3.8", "@react-navigation/native": "^7.1.6", "@rneui/themed": "4.0.0-rc.8", "@supabase/supabase-js": "^2.49.9", "expo": "~53.0.9", "expo-blur": "~14.1.4", "expo-build-properties": "~0.14.6", "expo-constants": "~17.1.6", "expo-dev-client": "~5.1.8", "expo-font": "~13.3.1", "expo-haptics": "~14.1.4", "expo-image": "~2.1.7", "expo-linking": "~7.1.5", "expo-router": "~5.0.6", "expo-splash-screen": "~0.30.8", "expo-status-bar": "~2.2.3", "expo-symbols": "~0.4.4", "expo-system-ui": "~5.0.7", "expo-web-browser": "~14.1.6", "query-string": "^7.1.3", "react": "19.0.0", "react-dom": "19.0.0", "react-native": "0.79.2", "react-native-gesture-handler": "~2.24.0", "react-native-reanimated": "~3.17.4", "react-native-safe-area-context": "5.4.0", "react-native-screens": "~4.11.1", "react-native-url-polyfill": "^2.0.0", "react-native-web": "~0.20.0", "react-native-webview": "13.13.5", "zustand": "^5.0.5" },
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
CH5-1에서 언급해주신 특정 IP만 접속 가능한 화이트리스트, 블랙리스트 기능 혹시 강의 예정 있으실까요?? 막상 언급하시니 궁금해서요...
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
help 에서도 영어만 선택할 수 있게 나오고, 한국어 설정이 안보이네요. 어떻게 해결해야할까요
해결됨
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
안녕하세요. 강의 내용과 다르게 author 데이터가 안나와서 콘솔로그 찍어서 확인해보니, properties.Author.people 항목에 name이 없네요. 다른 데이터는 조회되고 있는데 왜 안나오는지 도저히 답을 찾을 수 없네요. 공식문서 봐도 응답형식 같은게 바뀐건 아닌것 같아보입니다. AI Assistant에 여러번 질문해봐도 명확한 해결책을 찾지 못했습니다. 이 부분때문에 진도를 나가기 쉽지 않은 상황인데 빠른 답변 부탁드립니다.
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
yarn serve로 production 빌드시에 Cannot find module /lecture-1/node_modules/serve/bin/serve.js' 에러가 발생합니다. https://github.com/performance-lecture/lecture-1 여기서 해당 패키지 clone 하고 yarn으로 serve 실행시에 이같은 에러가 발생하는 것 같은데요. 이거 해결 방법이 있을까요?
미해결
React Native with Expo: 제로초에게 제대로 배우기
버전 npm ls react 19.0.0 npm ls react-native 0.79.2 npm ls expo 53.0.9 안녕하세요 다크모드 UI를 깃허브에서 복사했는데 전까지 잘 되던 app/(tabs)/_layout.tsx 에서 post 탭을 안보이게 하는 코드가 제대로 작동하지 않습니다. 기기에서도 (post)/[us... 경로의 탭이 보이고 있습니다. 그 뒤로 제 예전 코드로 다시 돌려봐도 탭이 사라지지 않고 계속 보이는데, 어디서부터 꼬인건지 감이 안잡힙니다ㅠ 문제가 발생한 걸로 추측되는 코드입니다. <Tabs.Screen name="(post)/[username]/post/[postID]" options={{ href: null, }} />
미해결
Next + React Query로 SNS 서비스 만들기
프라이빗 컴포넌트로 잡은 것과 그냥 컴포넌트로 잡은 것의 차이가 없지 않나요? 컴포넌트를 예로 강의를 찍어 주셨는데 폴더만 더 늘어나고 좋은 예는 아닌듯합니다. 프라이빗 폴더가 어떨 때 왜 필요한지를 알려주는게 더 교육적일 것 같아 글 남깁니다. 컴포넌트 자체가 재사용성을 갖는 것이기에 내부 구성요소만 표기하는 프라이빗은 큰 의미가 없을 것 가은데요. 컴포넌트 외 폴더라고 해도 와닿지는 않습니다. 어차피 컴포넌트로 사용하면 uri 에도 잡히지 않고 말이죠. 전체적으로 폴더 구조만 더 복잡해지는 것 같아요
미해결
React Native with Expo: 제로초에게 제대로 배우기
처음에 제로초님 따라한다고 pnpm build --platform android --profile development 로 한 번 실행을 했습니다. 이 때 go 를 설치하라는 말이 안나와서 '뭔가 이상하다' 했는데요. 이후에는 pnpm run android 로 켜면 development 로 켜집니다. 신기한 건 s 를 누르면 expo go 모드로는 잘 넘어가요. 그런데 Expo Go 앱이 보이지 않아 빌드를 선택해볼 수 가 없습니다. .
미해결
코드로 배우는 React 19 with 스프링부트 API서버
안녕하세요, 강의 잘 수강하고 있습니다 다만 강의랑 자료랑 달라서 물어보고 싶어서 글을 남깁니다. 1. ch3 압축파일에 강의와는 다르게 압축파일에는 search 클래스가 없습니다. ch4 알집파일 todo.d.ts파일에 아래와 같이 writer를 추가하는 게 맞는 건지 궁금합니다. interface TodoModify { tno: number, title: string, writer: string dueDate: string | null, complete: boolean }
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요~ 강의 잘 보고 있습니다! vanilla-extract 적용해보려고 하는데 패키지 설치하고 config설정까지 했는데 해당 에러가 나서 질문드립니다. next.config.ts파일과 globalTheme.css.ts, layout.ts중에 문제가 있을까요?? 파일 이름도 문제가 없고 코드 그대로 사용했는데도 해당 에러가 나서 next15에서 vanilla-extract 적용을 할 수 없는건지 궁금해서 여쭤봅니다.. 감사합니다 // package.json // next.config.ts import type { NextConfig } from "next"; const { createVanillaExtractPlugin // eslint-disable-next-line @typescript-eslint/no-require-imports } = require('@vanilla-extract/next-plugin'); const withVanillaExtract = createVanillaExtractPlugin(); const nextConfig: NextConfig = { /* config options here */ experimental: { serverActions: { bodySizeLimit: '10mb', // Set the body size limit for server actions } }, async rewrites() { return [ { source: '/upload/:slug', destination: `${process.env.NEXT_PUBLIC_BASE_URL}/upload/:slug`, // Matched parameters can be used in the destination }, ] }, }; module.exports = withVanillaExtract(nextConfig); // globalTheme.css.ts import {assignVars, createGlobalTheme, createGlobalThemeContract, globalStyle} from "@vanilla-extract/css"; export const global = createGlobalThemeContract({ background: { color: 'bg-color' }, foreground: { color: 'fg-color' }, }) const whiteGlobalTheme = { background: { color: 'rgb(255, 255, 255)' }, foreground: { color: 'rgb(0, 0, 0)' }, } const darkGlobalTheme = { background: { color: 'rgb(0, 0, 0)' }, foreground: { color: 'rgb(255, 255, 255)' }, } createGlobalTheme(':root', global, whiteGlobalTheme); // 실제 적용 globalStyle(':root', { '@media': { '(prefers-color-scheme: dark)': { vars: assignVars(global, darkGlobalTheme), } } }) globalStyle('*', { boxSizing: 'border-box', padding: 0, margin: 0, }) globalStyle('html', { '@media': { '(prefers-color-scheme: dark)': { colorScheme: 'dark', } } }); globalStyle('html, body', { maxWidth: '100dvw', overflowX: 'hidden', }) globalStyle('body', { color: global.foreground.color }) globalStyle('a', { color: 'inherit', textDecoration: 'none', }) // layout.tsx import type {Metadata} from 'next' import {Inter} from 'next/font/google' import './globalTheme.css'; import {MSWProvider} from "@/app/_component/MSWComponent"; import AuthSession from "@/app/_component/AuthSession"; if (process.env.NEXT_RUNTIME === 'nodejs' && process.env.NODE_ENV !== 'production' && process.env.MSW_ENABLED !== 'false') { const {server} = require('@/mocks/http') server.listen() } const inter = Inter({subsets: ['latin']}) export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', } type Props = { children: React.ReactNode, }; export default function RootLayout({children}: Props) { return ( <html lang="en"> <body className={inter.className}> <MSWProvider> <AuthSession> {children} </AuthSession> </MSWProvider> </body> </html> ) }
