안녕하세요 jest 테스트코드 작성을 위한 사전세팅중위와 같이 코드를 작성 후 실행하였더니이러한 에러가 발생하였습니다.jest를 사용하며 import라는 구문을 사용하지 못한다는 에러같은데 해결 방법이 있을까요??

공유해주신 프로젝트 clone해서 수정 없이 npm run unit-test 명령어 실행 시, 아래 이미지와 같이 export().toBeInTheDocument()를 찾지 못해 진도를 나가지 못하고 있습니다.. 혹시 해결방안을 알려주실 수 있으실까요?구글링 검색 시, import "@testing-library/jest-dom"; 을 테스트 파일 가장 상위에 두라고 하는데 이미 되어 있고 다른 해결책들도 실행해보았지만 해결하지 못했습니다.노드 버전은 20.10.0 , 18.19.0 , 18.14.0 에서 실행했을 때, 모두 실패했습니다..

섹션 3. 리액트와 API서버 통신 - 목록처리(1) 학습중인데요. serverData를 console.log로 찍어보면 current가 항상 0입니다. 어디서 확인해야할까요?

productRepository.selectList 호출시 이미지 리스트를 List객체로 반환되는 방법을 알고 싶습니다. 아래의 코드를 보면 이미지리스트는 한개(pi.ord=0)만 가져오는데요.imageList의 모든값이 List객체에 담겨 Page<Object[]>에 포함되는 방법을 알고 싶습니다. Page<Object[]> result = productRepository.selectList(pageable);@Query("select p, pi from Product p left join p.imageList pi where pi.ord = 0 and p.delFlag = false") Page<Object[]> selectList(Pageable pageable); 

안녕하세요. 디렉토리 구조를 afterlogin과 beforelogin구조로 나누어서 로그인을 분기치고 있고 auth.ts에서 서버로 부터 전달받은 토근값을 넣고 미들웨어에서 세션을 유무를 확인하여 login페이지로 리다이렉트 시키고 있습니다.  afterlogin과 beforelogin으로 디렉토리가 어떤방식으로 나뉘는지 로직이 궁금합니다. 관련된 훅이 있는것인지??2. 실제 상용화된 서비스라고하면 로그인이 풀리는것을 방지하기 위해 BE로 토근값을 요청할텐데, 관련 로직은 어떤방식으로 구현하는게 좋은방법인지 요청드립니다.

비번 확실히 틀리지 않았는데 계속 오류 뜨길래, 완전 삭제후 다시 설치해서 비번 쉬운걸로 다시 설정하고 입력해도 계속 비번오류 뜹니다.

안녕하세요 제로초님.인터넷창에 직접 주소를 입력하거나 새로고침 시 뒤에 배경화면이 사라지는 것에 대하여 질문있습니다. 먼저<Link href='/i/flow/signup' className={styles.signup}>를 클릭 시에는 인터셉터 라우팅이 트리거 되어 src/app/(beforeLogin)/layout.tsx에 있는 children으로 인해 배경화면에 main컴포넌트가 보여지며 인터셉터된 @modal 은 modal부분에 보여집니다. 그런데 직접 주소창에/i/flow/signup' 를 입력하여 접근하거나 새로고침하면 배경화면에 main컴포넌트가 사라지게 되는데 이것의 이유는 직접 접근할 때 인터셉에 걸리지 않게되고, childrend에는 i/flow에 있는 폴더들이 보여지며 defalut.tsx가 배경화면으로 보여지기 때문인가요?     

/src/.env 파일에 VITE_SOME_KEY = 123이렇게 설정하고, App.jsx에 function App() { return(<>{import.meta.env.VITE_SOME_KEY} <Counter/> </> )}export default App;이렇게 설정했습니다. 근데 왜 화면엔 123이 출력이 안되는 걸 까요 ㅠ? 오류 메시지도 없고..강의랑 똑같이 했는데 왜 안나올끼요 ..

안녕하세요 또 이렇게 질문을 해서 죄송합니다. 마지막 강의까지 다 듣고 배포까지 했는데 갑자기 홈 화면에 오른 화살표를 클릭을 하면 지금 1월 인데 누르면 3월로 이동 됩니다. 그런데 1월에서 2월 넘어갈때만 그래요 뒤로 가는건 잘 작동합니다. 홈 강의 다시 보고 틀린거 있나 확인했는데 못 찾아서 이렇게 연락드려요 https://github.com/jeain/Diary

import React, { useState } from 'react'; import { Button } from "../../ui/button"; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DialogClose } from "../../ui/dialog"; import { Input } from "../../ui/input"; import SelectBox from "./SelectBox"; function UserRegistrationButton() { const [id, setId] = useState(''); const [name, setName] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [ip, setIp] = useState(''); const [selectedAuthority, setSelectedAuthority] = useState(""); const items = [ { value: '1', label: '일반' }, { value: '2', label: '마스터' }, ]; const handleDataChange = (newData) => { setSelectedAuthority(newData); }; const handleSubmit = () => { console.log({ id, name, password, confirmPassword, ip, selectedAuthority }); }; return ( <Dialog> <DialogTrigger asChild> <Button className="w-full">사용자 등록</Button> </DialogTrigger> <DialogContent className="w-full max-w-2xl"> <DialogHeader> <DialogTitle className="text-variant-h4-bold">사용자 등록</DialogTitle> </DialogHeader> <div className="grid gap-5 py-3"> <div className="flex gap-3"> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 아이디 </div> <Input id="userId" className="col-span-8" value={id} onChange={e => setId(e.target.value)} /> </div> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 이름 </div> <Input id="name" className="col-span-8" value={name} onChange={e => setName(e.target.value)} /> </div> </div> <div className="flex gap-3"> <div className="grid grid-cols-10 w-full"> <div className="text-sm grid col-span-2 content-center"> 비밀번호 </div> <Input id="password" className="col-span-8" type="password" value={password} onChange={e => setPassword(e.target.value)} /> </div> <div className="grid grid-cols-10 w-full"> <div className="text-sm grid col-span-2 content-center"> 비밀번호 확인 </div> <Input id="confirmPassword" className="col-span-8" type="password" value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)} /> </div> </div> <div className="flex gap-3"> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 권한 </div> <SelectBox className="col-span-8" items={items} onDataChange={handleDataChange} /> </div> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 접속 IP </div> <Input id="IP" className="col-span-8" value={ip} onChange={e => setIp(e.target.value)} /> </div> </div> </div> <DialogFooter> <div className='flex justify-center gap-5'> <DialogClose asChild> <Button onClick={handleSubmit} size="xxl">등록</Button> </DialogClose> <DialogClose asChild> <Button variant="secondary" size="xxl">취소</Button> </DialogClose> </div> </DialogFooter> </DialogContent> </Dialog> ); } export default UserRegistrationButton; import React, { useState, useEffect } from 'react'; import { Select, SelectValue, SelectTrigger, SelectContent, SelectItem, } from '../../ui/select'; interface SelectBoxProps { className?: string; items: { value: string; label: string }[]; onDataChange: any; } const SelectBox: React.FC<SelectBoxProps> = ({ className, items, onDataChange }) => { const [selectedValue, setSelectedValue] = useState(""); const sendDataToParent = (payload) => { onDataChange(payload); console.log(payload, selectedValue) }; return ( <Select> <SelectTrigger className={className}> <SelectValue placeholder="권한을 선택하세요." /> </SelectTrigger> <SelectContent> {items.map(item => ( <SelectItem key={item.value} value={item.value} onClick={() => sendDataToParent(item.label)}> {item.label} </SelectItem> ))} </SelectContent> </Select> ); }; export default SelectBox;제 코드인데요 현재 shadcn/ui를 쓰면서 진행중인데요셀렉트 박스가 하위컴포넌트이고 상위 컴포넌트로 셀렉트 박스가 선택한 값을 보내고 싶은데 할 수 있는 방법 다 해도 안되더라고요 현재 코드는 콜백함수를 이용하여 데이터를 호출하려고 했는데 실패했습니다. 이럴 때는 무조건 리덕스나 리코일 같은 전역으로 상태관리를 해서 값을 주는 방법 밖에는 없나요 ? 아니면 다른 방법이 있으면 알려주세요

강사님 SPA, MPA, SSR , CSR과 리액트 Hooks 등의 개념에 대해 찾다보면 참고 문서와 링크 없고, 내용에 틀린부분도 있어보이는 블로그가 종종 있더라구요. 이러한 경우 강사님은 어디서 주로 찾으시는지 궁금합니다.

제시해주신 방식대로는 마크다운으로 작성하는 이미지가 링크를 작성하기까지만 하고 나오지 않는 경우가 대부분입니다. 이유는 모르겠네요. 잠깐 나왔었는데.. 또 안나옵니다. 이유가 있을까요.  조건과 지시를 다양하게 걸었더니 제대로 답변을 못하네요. ^^; 특히 일기를 제멋대로 쓰는 부분이 있습니다. 어떤때는 내가쓴것처럼 잘 쓰는데 어떤때는 제멋대로 씁니다. ㅎㅎ 그래도 이런 시도를 해볼수 있어서 좋습니다.

안녕하세요 선생님 front, back nginx 한 뒤로둘다 https라고 바뀌고 인증서도 있긴한데,Front(502 Bad Gateway)라고 나오고back(welcome to nginx) 라고만 나오는 상태입니다.(설치는 Nginx Ubuntu20보고 했습니다https://certbot.eff.org/instructions?ws=nginx&os=ubuntufocal&tab=standard)문제1)그래서 첫번째 문제로 back에서 sudo npx pm2 logs --err --lines 200를 해보았을 땐 아래와 같은 경고가 나왔습니다.0|app | Warning: connect.session() MemoryStore is not 0|app | designed for a production environment, as it will leak 0|app | memory, and will not scale past a single process.질문1)찾아보니까 express-session 미들웨어의 기본 메모리 저장소(MemoryStore)를 사용할 때 MemoryStore가 개발 환경에서는 적합하지만, 실제 프로덕션 환경에서는 메모리 누수 문제와 단일 프로세스 제한으로 인해 적합하지 않아 프로덕션 환경에서는 Redis, MongoDB 등의 세션 저장소를 사용하라는데, 그럼 front 화면이 나오는건지 궁금합니다,, 문제2)그리고 두번째 문제로 back에서 tail /var/log/nginx/error.log를 했을 땐 아래와 같은 에러가 나왔습니다. ubuntu@ip-172-31-12-59:~/react_nodebird/back$ tail /var/log/nginx/error.log 2024/01/24 12:19:54 [warn] 420260#420260: conflicting server name "api.luckyhaejin.com" on 0.0.0.0:80, ignored 2024/01/24 12:19:54 [notice] 420260#420260: signal process started질문2)찾아보니 Nginx 설정 파일 내에서 api.luckyhaejin.com이라는 서버 이름(server name)이 80 포트에서 두 번 이상 선언되었음을 나타내는 에러라는데 어떤 부분이 잘못되었는지 잘 모르겠어서 어딜 확인하면 좋을지 문의 드립니다. 질문3)강의에서 Ubuntu서버만 바꿔주고 로컬은 바뀌는 부분 이없는거같아서 Ubuntu서버에서만 바꿔줬는데, 그럼 로컬에도 Ubuntu에 설치한 것 다 포함해서 코드까지 다 바꿔준 뒤 Ubuntu에서 git pull 다시 해줘야할까요,,? 현재 설정된 내용)front=> /etc/nginx/nginx.conf => server관련(글을 옮겨적으니까 들여쓰기 해서 정리 한게 코드가 전부 합쳐져서 사진으로 올립니닷,,)front/pacakage.json에서 start부분에 3060 잘 되어있음front => /etc/nginx/nginx.conf front/config/config.js에서 backUrl설정 잘 되어있음back => /etc/nginx/nginx.confback => app.js(사진이 보기 편하실거같아서 코드랑 둘다올려욧)const express = require('express'); const cors = require('cors'); const session = require('express-session'); const cookieParser = require('cookie-parser'); const passport = require('passport'); const dotenv = require('dotenv'); const morgan = require('morgan'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const userRouter = require('./routes/user'); const hashtagRouter = require('./routes/hashtag'); const db = require('./models'); const passportConfig = require('./passport'); const path = require('path'); const hpp = require('hpp'); const helmet = require('helmet'); dotenv.config(); const app = express(); db.sequelize.sync() .then(() => { console.log('DB 연결 성공'); }).catch(console.error); passportConfig(); if(process.env.NODE_ENV === 'production'){ app.use(morgan('combined')); app.use(hpp()); app.use(helmet()); app.use(cors({ origin: 'https://luckyhaejin.com', credentials: true })); } else { app.use(morgan('dev')); } app.use('/', express.static(path.join(__dirname, 'uploads'))); app.use(express.json()); app.use(express.urlencoded({extended:true})); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, //자바스크립트로 접근하지못하게 secure: true, //일단 false로 하고 https적용할 땐 ture domain: process.env.NODE_ENV = 'production' && '.luckyhaejin.com' //도메인 사용할 경우 }, })); app.use(passport.initialize()); app.use(passport.session()); app.get('/', (req, res) =>{ res.send('hello express'); }); app.use('/posts', postsRouter); app.use('/post', postRouter); app.use('/user', userRouter); app.use('/hashtag', hashtagRouter); app.listen(3065, () => { console.log('서버 실행 중'); }); back => /etc/nginx/nginx.conf사용중인 Os) macOS

기존 생성했던 npx create-react-app my-app 명령어로 생성했던 my-app 실제 경로로 들어가서 폴더 삭제하고npm uninstall -g create-react-appnpm install -g create-react-appnpx create-react-app my-app수행 시 C:\Program Files\nodejs>npx create-react-app my-appNeed to install the following packages:create-react-app@5.0.1Ok to proceed? (y) ynpm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.node:fs:1380 const result = binding.mkdir( ^Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\my-app' at Object.mkdirSync (node:fs:1380:26) at module.exports.makeDirSync (C:\Users\김진구\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\fs-extra\lib\mkdirs\make-dir.js:23:13) at createApp (C:\Users\김진구\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:257:6) at C:\Users\김진구\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:223:9 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { errno: -4048, code: 'EPERM', syscall: 'mkdir', path: 'C:\\Program Files\\nodejs\\my-app'}Node.js v20.11.0 에러가 발생합니다.어떻게 조치해야할까요 ??

제가 궁금한건 다른 페이지에 있을 때에도 스냅샷 함수를 가동시켜 비용이 계속해서 발생하는 것을 막기위해 온스냅샷 함수를 unsubscribe, 구독취소하는 코드인데요어째서 제가 읽기에는 unsubscribe = ~ 온스냅샷함수 ~...return () => unsubscribe함수 실행useEffect cleanup기능으로 언마운트시 온스냅샷함수를 정지하려는데 다시 온스냅샷함수를 실행? 제가 어떻게 잘못 이해하는건지 모르겠어요 .. ㅠㅠexport default function Timeline() { const [tweets, setTweet] = useState<ITweet[]>([]); let unsubscribe: Unsubscribe | null = null; const fetchTweets = async () => { const tweetsQuery = query( collection(db, "tweets"), orderBy("createdAt", "desc"), limit(25) ); unsubscribe = await onSnapshot(tweetsQuery, (snapshot) => { const tweets = snapshot.docs.map((doc) => { const { tweet, createdAt, userId, username, photo } = doc.data(); return { tweet, createdAt, userId, username, photo, id: doc.id, }; }); setTweet(tweets); }); }; useEffect(() => { fetchTweets(); return () => { unsubscribe && unsubscribe(); }; }, []); }

import { API_URL } from "./config/constants.js"; import avatarImg from "./assets/icons/avatar.png"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, } from "react-native"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import Carousel from "react-native-reanimated-carousel"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]); const [banners, setBanners] = React.useState([]); React.useEffect(() => { axios .get(`${API_URL}/products`) .then((result) => { const products = result.data.products; setProducts(products); }) .catch((error) => { console.log("error :", error); }); axios .get(`${API_URL}/banners`) .then((result) => { const banners = result.data.banners; setBanners(banners); }) .catch((error) => { console.log("error :", error); }); }, []); return ( <GestureHandlerRootView> <View style={styles.container}> <ScrollView> <Carousel data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} sliderWidth={Dimensions.get("window").width} itemWidth={Dimensions.get("window").width} itemHeight={200} renderItem={(obj) => { return ( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.imageUrl}` }} resizeMode="contain" /> </TouchableOpacity> ); }} /> <Text style={styles.headline}>판매되는 상품들!</Text> <View style={styles.productList}> {products.map((product, index) => { return ( <View key={index} style={styles.productCard}> {product.soldout === 1 && <View style={styles.productBlur} />} <View> <Image style={styles.productImg} source={{ uri: `${API_URL}/${product.img_url}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={avatarImg} /> <Text style={styles.productSellerName}> {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.created_at).fromNow()} </Text> </View> </View> </View> ); })} </View> </ScrollView> </View> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ headline: { fontSize: 24, fontWeight: "800", marginTop: 10, marginBottom: 10, }, container: { flex: 1, backgroundColor: "#fff", paddingTop: 32, margin: 10, }, productCard: { width: "100%", borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 10, }, productBlur: { position: "absolute", top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, productImg: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 14, }, productPrice: { fontSize: 16, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 14, }, productDate: { fontSize: 14, }, productList: { alignItems: "center", }, bannerImage: { width: "100%", height: 200, }, }); 어떤 오류메세지도 뜨지않고,에뮬레이터에 화면이 출력되지않는 문제가 발생합니다.Carousel을 적용하기전에는 화면 잘 출력되었는데,Carousel을 적용하니 화면이 출력되지않네요..Error: PanGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.이러한 오류가 발생해서GestureHandlerRootView 태그로 최상단에 묶어주니 저 오류는 사라졌는데,애뮬레이터의 화면이 출력되지 않는 문제가 발생합니다.서버는 잘 연결되어있는걸 확인햇습니다..뭐가문제일까요

안녕하세요 선생님!좋은 강의 정말 감사하게 듣고 있습니다.선생님의 강의를 듣다보니, Next.js 13의 Data Fetching 방법이 React Query과 유사함을 느꼈습니다.(주니어라 부족함이 있어 실제론 유사하지 않을 수도 있지만..!) Next 13의 데이터 패칭 방법이 react 에서 React Query를 사용하여 서버 API의 데이터를 일정 시간동안 fresh 상태로 갖고 있는것 stale한지 chach로 체크하는 것 모두 흡사 하다고 느꼈습니다. React Query의 가장 큰 강점은 클라이언트-서버간의 데이터 동기화가 가장 큰 장점이라고 생각하는데 만약 Next 13의 데이터 패칭 방법을 사용한다면번거로운 React Query의 보일러코드들을 사용하지 않아도 React Query의 장점을 그대로 살려 쉽게 사용할 수 있을 것 같아보입니다! 따라서, Next 13에선 React Query가 무한스크롤 외에 사용할 일이 거의 없을 것만 같아보이는데...! 어떻게 생각하실지 의견이 궁금합니다...!next 13과 react query 조합은 앞으로 거의 사용하지 않게 되는 걸까요? 선생님의 고견을 나눠주시면 감사하겠습니다~!바쁘실텐데 번거롭게 해드려서 죄송합니다!감사합니다!

안녕하세요, Counter 컴포넌트 호출 회수를 디버깅 하기 위해 console.log("counter 호출!"); 구문을 아래와 같이 추가해주었는데, 강사님과는 다르게 저는 처음 렌더링 될 때와 count의 상태 값이 변화할 때 마다 counter 호출이 두 번씩 일어납니다. 이유가 무엇일까요..? 아무리 생각해봐도 이유를 모르겠습니다. 위 브라우저 콘솔 사진은 최초 렌더링 되고나서 개발자도구를 켰을 때 모습입니다. 처음부터 두 번이 호출되어 있고, 그 이후에도 count의 상태를 변화시킬 때 마다 두 번씩 로그에 찍힙니다. 

 8강 10분56초에서 하늘색 허공에 클릭하시는데 페이지가 이동하는것 같은데요. 어떻게 하신것인지 궁금해서 질문드립니다. 글자를 클릭해야 하는것 아닌가요? 근데 영상에서 동작은 또 잘되네요...?... 제가 잘 몰라서 이해를 잘못한걸까여?... 아래는 제 코드입니다..

좋은 내용 감사합니다.프롬프트 내용중에 "Translate Into Korean~" 이라는 내용으로 답변을 한글로 받게 됩니다.혹시 [events] 밑에 오는 사용자 입력값과 동일한 언어로 결과를 받고 싶다면 어떻게 작성하면 될까요?강의 내용을 기준으로 다국어 서비스를 만들려고 하는데, 영어가 짧아서 질문 드려요