묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션16 husky
git도 다운받았고 터미널도 git bash가 작동이 됩니다.근데 husky 다운이 안되네요. .git can't be found 따라하는데 계속 이 문장만 자꾸 뜹니다.그래서 인강에 나온 방법처럼 하지 않고 학습자료에 나와있는거 처럼 따라했는데 괜찮나요?학습자료 방법으로 해도 괜찮나요 추가 질문) git 을 계속 재설치해서 husky를 깔아도 .git can't be found만 뜨는데요. 왜그런걸까요
-
해결됨실무에 바로 적용하는 스토리북과 UI 테스트
Visual Test
스토리북 자체에 Action 탭 오른쪽에 Visual Test라는 탭이 있는걸 확인했습니다.<Chromatic을 활용한 Visual 테스트> 강의와 같은 내용을 기능인가 해서 여쭤봅니다! 같은 기능인데 좀 더 확인하기 쉽게 탭으로 스토리북에서 제공하고있는건가 해서요..ㅎㅎㅎ
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
4.1) 빌드 시 오류 질문 드립니다.
안녕하세요. 4.1) 앱 라우터의 데이터 페칭 강의를 수강하고 build를 진행했는데Generating static pages (0/6) [ ] ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout이런식으로 오류메시지가 출력돼서 메시지에 있는 공식문서를 참고하여 아래와 같이 searchbar.tsx를 수정하였는데요.// searchbar.tsx "use client"; import { Suspense, useEffect, useState } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import style from "./serachbar.module.css"; function Search() { const router = useRouter(); const searchParams = useSearchParams(); const [search, setSearch] = useState(""); const q = searchParams.get("q"); useEffect(() => { setSearch(q || ""); }, [q]); const onChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => { setSearch(e.target.value); }; const onSubmit = () => { if (!search || q === search) return; router.push(`/search?q=${search}`); }; const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Enter") { onSubmit(); } }; return ( <div className={style.container}> <input value={search} onChange={onChangeSearch} onKeyDown={onKeyDown} /> <button onClick={onSubmit}>검색</button> </div> ); } export default function Searchbar() { return ( <Suspense> <Search /> </Suspense> ); } 이런식으로 Suspense로 감싸줬는데도 동일한 오류메시지가 출력돼서 해결방법을 검색해보다가// loading.tsx import React from "react"; export default function Loading() { return <div>Loading...</div>; } app 폴더 아래에 loading.tsx 파일을 생성하니 정상적으로 build가 되었습니다.공식문서를 참고하여 Suspense를 감싸줬는데도 해결이 되지 않은 이유가 궁금합니다!강사님께서 따로 Suspense 관련 언급을 안하신 건 next버젼과 관련이 있을까도 싶어 package.json 파일도 함께 첨부합니다.// package.json{ "name": "section04", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "react": "19.0.0-rc-f994737d14-20240522", "react-dom": "19.0.0-rc-f994737d14-20240522", "next": "15.0.0-rc.0" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "15.0.0-rc.0" } } 답변해주시면 감사하겠습니다!!그리고 혹시 다른 강의도 찍으실 계획이 있는지 궁금합니다! ㅎㅎ 강의 너무 잘 듣고 있습니다 좋은 강의 감사합니다!!^^
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
엔티티 클래스 만들기 챕터에서 테이블 왜 두개 만들어진 건가요?
엔티티 클래스 만들기 챕터에서 테이블 왜 두개 만들어진 건가요? 엔티티 클래스 만들기 챕터 8분 36초에서 테이블이 왜 두개 만들어 졌나요?
-
해결됨실무에 바로 적용하는 스토리북과 UI 테스트
NavigationBar 배경색
NavigationBar 강의를 시청했습니다.배경색을 작성하지 않으시던데 그렇게 하신 이유가 있으신가요?
-
해결됨실무에 바로 적용하는 스토리북과 UI 테스트
defaultValue 질문 드립니다!
IconButton의 경우 alt에만 defaultValue를 작성하시던데 iconPath는 작성하지 않으시는 특별한 이유가 있으신가요?어떤 기준으로 defaultValue 작성 여부를 판단하시는지도 궁금합니다!
-
해결됨Next + React Query로 SNS 서비스 만들기
useQuery + fetch에 대해 메모이제이션 질문드립니다.
Next.js의 fetch는 requiest Memoization과 data Memoization를 이용해서 사용하는 것으로 이해했습니다. header랑 body를 보내서 api에 재 요청 하지않고 캐싱하는 것을 확인 했는데요 만약에 useQueryhook을 사용한다고 가정하면, useQuery 도 데이터 캐싱기능을 staleTime 등으로 핸들링 할 수 있기에 Next.js의 fetch 캐싱기능을 꺼야 적절할까요? "no-cache"를 해서 useQuery의 캐싱기능만 이용하는 것이 간결하고 시점을 통일 할 수 있을 것 같아서 질문드립니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
정적 사이트 생성 (SSG)에서 빌드 타임에 데이터를 요청한다면 사용자는 최신 데이터가 아닌 데이터를 받게 되는 것 아닌가요?
안녕하세요. 좋은 강의 잘 수강하고 있습니다!강의를 듣던 중 궁금한게 있어 질문드립니다. 정적 사이트 생성 (SSG)는 빌드 타임에 데이터를 서버로 요청하고 받아온 후 렌더링을 미리 해둔다고 이해했는데, 이렇게 되면 사용자가 페이지를 요청한 시점에는 서버의 데이터가 달라졌을 수 있는게 아닌가 하는 의문이 남습니다. 또한 이렇게 된다면 서버의 데이터가 변경될 때마다 매 번 프로젝트를 새로 빌드해야하는 것일까요? 제가 잘못 이해한 부분이 있는지 궁금합니다.
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
getServerSideProps를 사용한 페이지의 navigation 방식이 궁금합니다
Next.js는 오직 초기 접속시에만 html 파일을 불러와 Hydration 하고 그 이후의 페이지 이동은 리액트의 CSR 방식으로 처리된다고 알고 있습니다.그런데 Page Router 에서 getServerSideProps를 사용할 때 매 요청마다 사전 렌더링을 통해 html을 생성하는 것으로 알고 있습니다.그러면 초기 접속이 아니더라도, getServerSideProps를 사용한 페이지로 이동하면 Next 서버에서 클라이언트에게 html을 응답해주는 건가요?서버로부터 html을 응답받는 것이 맞다면 어떻게 깜빡임 없이 화면 전환이 자연스럽게 되는지, 그리고 이렇게 되면 페이지 이동이 리액트의 CSR 방식으로 처리된다고 말할 수 없는건지 궁금합니다 😭서버로부터 html을 응답받는 것이 아니라면, 클라이언트에서 어떤 값을 서버로부터 받아 렌더링을 하는건지 궁금합니다. getStaticProps를 사용할 때와 유사하게 json 파일이 생성되어서 이 json 파일을 클라이언트에게 응답해주는 건가요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
3.5) RSC 주의사항, 4번째 주의사항 관련 질문 입니다
서버 컴포넌트에서 클라이언트 컴포넌트에 직렬화 되지 않는 props는 전달 할 수 없다RSC payload: RSC 렌더링 결과 + 연결된 클라이언트 컴포넌트 위치 + 서버 -> 클라이언트 컴포넌트에 전달하는 props 값q1. 사전 렌더링 과정에서 서버 컴포넌트를 직렬화 할 때, 여기에 서버 -> 클라이언트 컴포넌트로 전달하는 props 값이 포함되는데 이 값이 함수이면 직렬화 할 수 없기 때문에 props에 함수를 사용할 수 없는 건가요??q2. 서버->서버, 클라이언트->클라이언트 props는 RSC payload와(직렬화) 관계 없기 때문에 props에 함수 사용이 가능한 건가요??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Vscode 한글 설정이 잘 안되요
다음처럼 설정이나 이런 곳에는 한글 적용이 잘 되는데Error lens 플러그인 설치 후 에러 알려주는 부분에서는 영어로만 됩니다.!
-
미해결따라하며 배우는 리액트 네이티브 기초
Android에서 vector icon이 깨지고 한자로 보이면 어떻게 수정해야하죠?
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import React from 'react'; import Home from './src/screens/Home'; import Profile from './src/screens/Profile'; import FriendProfile from './src/screens/FriendProfile'; import EditProfile from './src/screens/EditProfile'; import Search from './src/screens/Search'; import Activity from './src/screens/Activity'; import { NavigationContainer } from '@react-navigation/native'; import Status from './src/screens/Status'; import Ionic from 'react-native-vector-icons/Ionicons'; const Stack = createNativeStackNavigator(); const Tab = createBottomTabNavigator(); const getTabBarIcon = (route, focused, size, color) => { let iconName; color = 'black'; if (route.name === 'Home') { iconName = focused ? 'home-sharp' : 'home-outline'; size = focused ? size + 8 : size + 2; } else if (route.name === 'Search') { iconName = focused ? 'search' : 'search-outline'; } else if (route.name === 'Activity') { iconName = focused ? 'heart' : 'heart-outline'; } else if (route.name === 'Profile') { iconName = focused ? 'person' : 'person-outline'; } return <Ionic name={iconName} size={size} color={color} />; }; const BottomTabScreen = () => { return ( <Tab.Navigator screenOptions={({ route }) => ({ tabBarHideOnKeyboard: true, tabBarShowLabel: false, headerShown: false, tabBarStyle: { height: 70, }, tabBarIcon: ({ focused, size, color }) => getTabBarIcon(route, focused, size, color), })} > <Tab.Screen name="Home" component={Home} /> <Tab.Screen name="Search" component={Search} /> <Tab.Screen name="Activity" component={Activity} /> <Tab.Screen name="Profile" component={Profile} /> </Tab.Navigator> ); }; const App = () => { return ( <NavigationContainer> <Stack.Navigator screenOptions={{ headerShown: false }}> <Stack.Screen name="Bottom" component={BottomTabScreen} /> <Stack.Screen name="Status" component={Status} /> <Stack.Screen name="FriendProfile" component={FriendProfile} /> <Stack.Screen name="EditProfile" component={EditProfile} /> </Stack.Navigator> </NavigationContainer> ); }; export default App; { "name": "ReactNativeInsta", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-navigation/bottom-tabs": "^6.6.1", "@react-navigation/material-top-tabs": "^6.6.14", "@react-navigation/native": "^6.1.18", "@react-navigation/native-stack": "^6.11.0", "react": "18.3.1", "react-native": "0.75.2", "react-native-safe-area-context": "^4.10.9", "react-native-screens": "^3.34.0", "react-native-vector-icons": "^10.1.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.75.2", "@react-native/eslint-config": "0.75.2", "@react-native/metro-config": "0.75.2", "@react-native/typescript-config": "0.75.2", "@types/react": "^18.2.6", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.3.1", "typescript": "5.0.4" }, "engines": { "node": ">=18" } }
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기
이벤트 쿼리문제입니다
포스트맨에서는 이벤트 쿼리가 답이 옵니다. http://localhost:3000/api/dialogflow/eventQueryhttp://localhost:5000/api/dialogflow/eventQuery 둘다 답이 옵니다. 다만 터미널과 아래 처럼 브라우저에서 인사말이 오지 않습니다. 시작하면 처음에 이벤트쿼리문이 오게 하려면 어떻게 해야하나요?메번 감사합니다
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
Head 태그의 공통화 사용
MetaData 라는 컴포넌트를 만들어서Head태그를 공통화 시켜서 props로 title과 description, 그리고 image는 옵셔널로 받으려고 하는데각 페이지들의 렌더링 방식에 영향을 미치는지 궁금합니다!
-
미해결[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
설치 관련 질문
npx create-react-native-app@latest 요거 터미널에 입력하니까, ⚠ This tool does not initialize new React Native projects. 뜨는데, 어떻게 해결하면 좋을까요?
-
해결됨기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
깃 push가 안되서 ssh를 한참해메고 있습니다. ㅠㅠ
The authenticity of host 'github.com (20.200.245.247)' can't be established.ED25519 key fingerprint is SHA256:+DiY3wvvV위와같은 문구가 뜨고 안되네요. ㅠㅠ
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
vitest Extension 알려주세요.
이렇게 뜨는데 어떤 익스텐션 설치해야될까요?
-
미해결Next + React Query로 SNS 서비스 만들기
렌더링
안녕하세요. useQuery로 가져온 data가 console로 찍어보면 두번찍히는데 왜 렌더링이 두번도는지 알 수 있을까요?
-
미해결실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
2.1 강의 질문있습니다.
!e.nativeEvent.isComposing 해당 코드가 이해가 되지 않아 찾아보았지만(아래 설명..), 정확히 어떻게 쓰이는지 잘 모르겠습니다. 설명 좀 부탁합니다. ev.nativeEvent.isComposing은 복잡한 문자 입력 도중 발생하는 이벤트를 처리하기 위한 속성으로, IME를 통한 입력이 완료되지 않았을 때 특정 키 이벤트를 무시하는 데 사용됩니다. 이를 통해 불완전한 입력에 대한 처리를 방지할 수 있습니다
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
세션 10번 완성 소스가 잘못올라온거 같아요
세션 10번 강의 보면서 따라가고 있는데 org.springframework.dao.DataIntegrityViolationException: could not execute statement [(conn=335) Cannot add or update a child row: a foreign key constraint fails (`apidb`.`tbl_cart_item`, CONSTRAINT FKs7vg62w3nq7igdxgssq1u0biw FOREIGN KEY (`product_pno`) REFERENCES tbl_product (`pno`))] [insert into tbl_cart_item (cart_cno,product_pno,qty) values (?,?,?) returning cino]; SQL [insert into tbl_cart_item (cart_cno,product_pno,qty) values (?,?,?) returning cino]; constraint [null] 에러가 나오더라구요..그래서 제가 세션 10 완성 소스 보면서 잘못된 곳을 찾아 보려는데 ... 올라건 소스가 잘못된거 같아요... 세션 10의 소스가 아닙니다.