172만명의 커뮤니티!! 함께 토론해봐요.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
엔티티 클래스 만들기 챕터에서 테이블 왜 두개 만들어진 건가요? 엔티티 클래스 만들기 챕터 8분 36초에서 테이블이 왜 두개 만들어 졌나요?
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
NavigationBar 강의를 시청했습니다. 배경색을 작성하지 않으시던데 그렇게 하신 이유가 있으신가요?
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
IconButton의 경우 alt에만 defaultValue를 작성하시던데 iconPath는 작성하지 않으시는 특별한 이유가 있으신가요? 어떤 기준으로 defaultValue 작성 여부를 판단하시는지도 궁금합니다!
해결됨
Next + React Query로 SNS 서비스 만들기
Next.js의 fetch는 requiest Memoization과 data Memoization를 이용해서 사용하는 것으로 이해했습니다. header랑 body를 보내서 api에 재 요청 하지않고 캐싱하는 것을 확인 했는데요 만약에 useQueryhook을 사용한다고 가정하면, useQuery 도 데이터 캐싱기능을 staleTime 등으로 핸들링 할 수 있기에 Next.js의 fetch 캐싱기능을 꺼야 적절할까요? "no-cache"를 해서 useQuery의 캐싱기능만 이용하는 것이 간결하고 시점을 통일 할 수 있을 것 같아서 질문드립니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요. 좋은 강의 잘 수강하고 있습니다! 강의를 듣던 중 궁금한게 있어 질문드립니다. 정적 사이트 생성 (SSG)는 빌드 타임에 데이터를 서버로 요청하고 받아온 후 렌더링을 미리 해둔다고 이해했는데, 이렇게 되면 사용자가 페이지를 요청한 시점에는 서버의 데이터가 달라졌을 수 있는게 아닌가 하는 의문이 남습니다. 또한 이렇게 된다면 서버의 데이터가 변경될 때마다 매 번 프로젝트를 새로 빌드해야하는 것일까요? 제가 잘못 이해한 부분이 있는지 궁금합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
Next.js는 오직 초기 접속시에만 html 파일을 불러와 Hydration 하고 그 이후의 페이지 이동은 리액트의 CSR 방식으로 처리된다고 알고 있습니다. 그런데 Page Router 에서 getServerSideProps 를 사용할 때 매 요청마다 사전 렌더링을 통해 html을 생성하는 것으로 알고 있습니다. 그러면 초기 접속이 아니더라도, getServerSideProps 를 사용한 페이지로 이동하면 Next 서버에서 클라이언트에게 html을 응답해주는 건가요? 서버로부터 html을 응답받는 것이 맞다면 어떻게 깜빡임 없이 화면 전환이 자연스럽게 되는지, 그리고 이렇게 되면 페이지 이동이 리액트의 CSR 방식으로 처리된다고 말할 수 없는건지 궁금합니다 😭 서버로부터 html을 응답받는 것이 아니라면, 클라이언트에서 어떤 값을 서버로부터 받아 렌더링을 하는건지 궁금합니다. getStaticProps 를 사용할 때와 유사하게 json 파일이 생성되어서 이 json 파일을 클라이언트에게 응답해주는 건가요?
해결됨
한 입 크기로 잘라먹는 Next.js
서버 컴포넌트에서 클라이언트 컴포넌트에 직렬화 되지 않는 props는 전달 할 수 없다 RSC payload: RSC 렌더링 결과 + 연결된 클라이언트 컴포넌트 위치 + 서버 -> 클라이언트 컴포넌트에 전달하는 props 값 q1. 사전 렌더링 과정에서 서버 컴포넌트를 직렬화 할 때, 여기에 서버 -> 클라이언트 컴포넌트로 전달하는 props 값이 포함되는데 이 값이 함수이면 직렬화 할 수 없기 때문에 props에 함수를 사용할 수 없는 건가요?? q2. 서버->서버, 클라이언트->클라이언트 props는 RSC payload와(직렬화) 관계 없기 때문에 props에 함수 사용이 가능한 건가요??
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
다음처럼 설정이나 이런 곳에는 한글 적용이 잘 되는데 Error lens 플러그인 설치 후 에러 알려주는 부분에서는 영어로만 됩니다.!
미해결
따라하며 배우는 리액트 네이티브 기초
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/eventQuery http://localhost:5000/api/dialogflow/eventQuery 둘다 답이 옵니다. 다만 터미널과 아래 처럼 브라우저에서 인사말이 오지 않습니다. 시작하면 처음에 이벤트쿼리문이 오게 하려면 어떻게 해야하나요? 메번 감사합니다
해결됨
한 입 크기로 잘라먹는 Next.js
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 마스터)
The authenticity of host ' github.com (20.200.245.247)' can't be established. ED25519 key fingerprint is SHA256:+DiY3wvvV 위와같은 문구가 뜨고 안되네요. ㅠㅠ
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
이렇게 뜨는데 어떤 익스텐션 설치해야될까요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요. useQuery로 가져온 data가 console로 찍어보면 두번찍히는데 왜 렌더링이 두번도는지 알 수 있을까요?
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
!e.nativeEvent.isComposing 해당 코드가 이해가 되지 않아 찾아보았지만(아래 설명..), 정확히 어떻게 쓰이는지 잘 모르겠습니다. 설명 좀 부탁합니다. ev.nativeEvent.isComposing 은 복잡한 문자 입력 도중 발생하는 이벤트를 처리하기 위한 속성으로, IME를 통한 입력이 완료되지 않았을 때 특정 키 이벤트를 무시하는 데 사용됩니다. 이를 통해 불완전한 입력에 대한 처리를 방지할 수 있습니다
미해결
코드로 배우는 React 19 with 스프링부트 API서버
세션 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의 소스가 아닙니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
public ResponseEntity searchLinkOrderNumberOutput( @ApiParam("주문 번호") @RequestParam(required = false) List<String> orderNumbers, @ApiParam(name = "startDate", value = "yyyyMMdd", required = true) @RequestParam String startDate, @ApiParam(name = "endDate", value = "yyyyMMdd", required = true) @RequestParam String endDate, @ApiParam(name ="confirmationStatus", value="확정여부(Y/N)") @RequestParam String confirmationStatus, @ApiParam(name = "pageSize", value = "한 페이지에 보여줄 주문 개수 (미 입력시 기본값 20)") @RequestParam(defaultValue = "20") int pageSize, @ApiParam(name = "pageNumber", value = "데이터를 조회 할 페이지 숫자 (미 입력시 기본값 1)") @RequestParam(defaultValue = "1") int pageNumber) { 궁금한 점이 있습니다 선생님 만일 controller에서 string으로 날짜값을 받으면 이제 별도의 파싱작업을 거쳐서 LocalDateTime 형식으로 변환해 줘야하는데 LocalDateFormatter을 사용하면 해당 작업을 생략할 수 있는건가요???
미해결
코드로 배우는 React 19 with 스프링부트 API서버
@Override public PageResponseDTO<ProductDTO> searchList(PageRequestDTO pageRequestDTO) { log.info("----------------------searchList-------------------------"); Pageable pageable = PageRequest.of( pageRequestDTO.getPage() -1, pageRequestDTO.getSize(), Sort.by("pno").descending()); QProduct product = QProduct.product; QProductImage productImage = QProductImage.productImage; // from 절 JPQLQuery<Product> query = from(product); // join // @ElementCollection을 join 할때는 아래와 같이 사용해야합니다. // product.imageList를 productImage로 사용하겠다. query.leftJoin(product.imageList, productImage); query.where(productImage.ord.eq(0)); Objects.requireNonNull(getQuerydsl()).applyPagination(pageable,query); List<Tuple> productList = query.select(product,productImage).fetch(); // 쿼리를 실행시키기 위함. long count = query.fetchCount(); log.info("======================="); log.info(productList); return null; } 이 코드에서 return 값을 넘기고 싶어서 수정하는데 어떻게 해야 값이 넘어가는지를 잘 모르겠습니다... TodoSearchImpl에서는 new PageImpl<>() 사용하셔서 넘기셨는데 여기서는 어떻게 처리해야 될까요?? 2. ProductServiceImpl의 getList() 메서드와 동일한 역할인거같은데, ProductSearchImpl 에서는 querydsl을 사용하셔서 보여주신거고 ProductServiceImpl에서는 jpa를 사용하는 방법을 보여주신게 맞는지 궁금합니다!
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Context를 이용하여 props를 분리하고, onUpdate, onCreate같이 한번만 수행되는 함수들은 useMemo를 이용하여 메모이제이션을 한다고 했습니다. 아래 코드처럼요 const memoDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete, }; }, []); 그런데 이전 시간에 각각의 함수를 useCallback를 통해 메모이제이션 했는데 한번 더 하는 이유가 이해 가지 않아 질문 드립니다. 아래 코드처럼 useCallback를 통해 처음 렌더링 될 때만 실행되고 이후에는 실행되지 않도록 코드를 작성 했는데 맨 위의 코드처럼 한번 더 감싼? 이유가 잘 이해가 되지 않습니다. const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", targetId: targetId, }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", targetId: targetId, }); }, []);
