안녕하세요 선생님강의 잘 듣고 있습니다! 다름이 아니라 선생님 강의 중 'JSX로 UI 표현하기' 편을 듣고 있는데import를 이용해서 CSS파일을 연결하는 부분에서 막혔습니다강의와 똑같이 작성했는데 스타일 적용이 안되는 이유가 뭘까요?화면에 오류 표시도 안뜨는데 코드에 문제가 있는지 궁금합니다 

docker-compose up을 사용하면 initdb: error: directory "/var/lib/postgresql/data" exists but is not emptyinitdb: hint: If you want to create a new database system, either remove or empty the directory "/var/lib/postgresql/data" or run initdb with an argument other than "/var/lib/postgresql/data". 라는 오류가 자꾸 발생합니다. 삭제하고 다시 해도 해결이 안되서 질문남깁니다. 어떻게 해결해야하나요.

loadUserByUsername 메서드에서 username 으로 조회잘되고 조회된 MemberDto는 log 출력도 잘되는데 다음 단계에서 "Encoded password does not look like BCrypt" 라는 warn 과 함꼐 "Failed to process authentication request" 로 자격증명에 실패했다고 합니다.DB의 패스워드는 암호화 되어 잘 저장된거 확인됩니다제가 무언가를 잘못 작성한건지파라미터로 보낸 password 는 어디서 encode해야 하는건지 아니면 다른 문제가 있는건가요?

조은님 안녕하세요 🙂 강의 잘 보았습니다!강의를 보다가 문득 궁금한 점이 있는데요! import 문 통해서 절대경로로 파일을 불러올 때, 전역에 있는 tsconfig.json 내에서 파일별로 일일이 수동 설정을 해주어야하는 걸로 아는데 조은님께서는 자동으로 @가 붙여진 형태로 불러와지는 거 같아서요! 혹시 따로 설정 어떻게 하셨는지 여쭤봐도 괜찮을까요?

안녕하세요. 현재 react 로 구성되어 있는 프로젝트를 next.js 로 마이그레이션 하기 위해 강의 신청해서 들었습니다.마이그레이션 도중 질문이 있어서 글 남겨봅니다.1) 기존 react 에서 navigate 의 state 값으로 전달하던 데이터 들이 있습니다. 전달된 데이터는 location state 로 가져와서 사용했구요.2) next 12 버전 까지는 query 에 객체를 담아서 보낼수 있고 url 도 as 를 이용해서 제어할 수 있는걸 확인했습니다.3) 하지만 13버전 이후부터 next/router -> next/navigate 로 변경되면서 query 객체, as 가 삭제되어진 걸로 확인되는데 페이지 이동시 데이터를 전달하러면 url 에 그냥 꼬라박는 방법 뿐인지 질문 드립니다.

섹션3 recoil을 테스트하는 방법 3:50에cy.url().should('include','/');를 통해서 root page로 잘 이동하는지 확인한다고 하신부분에서,'/'는 어떤 페이지에서든 include가 되어 테스트가 통과될것 같은데 혹시 rootpage를 검증하기위한 다른 방법은 없을까요?

일전에 동일한 문제로 질문 올렸는데, 혹시나 제 코드에 발견되지 않은 오타나 문제가 있을까하여 제로초님 깃에서 다운받은 ch4폴더로 실행해도 동일한 문제 발생합니다. MacOs: Ventura 13.6.4크롬브라우저로 보고있습니다.DB연결문제는 Postgresql은 버전을 낮춰서 Homebrew로 설치하고, Username을 맥os 유저네임으로 변경하니까 다행히 연결이되었습니다.그런데 여전히, 회원가입후 리다이렉트 안되는 현상과 심지어 회원가입 된 Postgresql 테이블에 User정보도 잘 들어가있고, 회원가입된 유저의 id,비번으로 로그인해도 로그인도 안됩니다.package.json 버전정보:클라이언트에서 리턴받은 값:서버에서 나오는 console:무엇이 문제일까요? 

Create React App에서 Next.js로 마이그레이션하기 의 깃허브 소스도 npm i 하면 에러가 발생합니다. $ npm installnpm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR!npm ERR! While resolving: react-scripts@5.0.1npm ERR! Found: typescript@5.3.3npm ERR! node_modules/typescriptnpm ERR! typescript@"^5.3.3" from the root projectnpm ERR! peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3npm ERR! node_modules/fork-ts-checker-webpack-pluginnpm ERR! fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1npm ERR! node_modules/react-dev-utilsnpm ERR! react-dev-utils@"^12.0.1" from react-scripts@5.0.1npm ERR! node_modules/react-scriptsnpm ERR! react-scripts@"5.0.1" from the root projectnpm ERR! 1 more (tsutils)npm ERR!npm ERR! Could not resolve dependency:npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1npm ERR! node_modules/react-scriptsnpm ERR! react-scripts@"5.0.1" from the root projectnpm ERR!npm ERR! Conflicting peer dependency: typescript@4.9.5npm ERR! node_modules/typescriptnpm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1npm ERR! node_modules/react-scriptsnpm ERR! react-scripts@"5.0.1" from the root projectnpm ERR!npm ERR! Fix the upstream dependency conflict, or retrynpm ERR! this command with --force or --legacy-peer-depsnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.npm ERR!npm ERR!npm ERR! For a full report see:npm ERR! C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-03-02T03_03_34_358Z-eresolve-report.txt  관련한 안내 좀 부탁합니다.

vite 로 작성한 경우를 마이그레이션 하는데요.강의에 따라서 진행하였는데 최종 아래처럼 에러가 발생합니다.Require stack:\node_modules\next\dist\server\dev\next-dev-server.jsvite\node_modules\next\dist\server\dev\next-dev-server.jsvite\node_modules\next\dist\server\next.jsvite\node_modules\next\dist\server\lib\start-server.jspackage.json 은 아래와 같아요.{ "name": "next-migration-02-vite", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "next dev", "build": "next build", "lint": "next lint", "start": "next start" }, "dependencies": { "next": "^14.1.1", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/node": "20.11.24", "@types/react": "^18.2.56", "@types/react-dom": "^18.2.19", "@typescript-eslint/eslint-plugin": "^7.0.2", "@typescript-eslint/parser": "^7.0.2", "@vitejs/plugin-react": "^4.2.1", "eslint": "^8.56.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", "typescript": "^5.2.2", "vite": "^5.1.4" } } 관련해서 안내좀 부탁드립니다.좋은 주말 되세요~

이제는 promise chain이나 async await 문으로 콜백함수를 처리해야 하는 것으로 보입니다. 다음과 같이 코드를 수정해서 돌아가는 것을 확인했으니 활용하시면 좋을 것 같아요! // index.jsapp.post('/login', (req, res) => { // 이메일이 DB에 있는지 확인 User.findOne({ email: req.body.email }) .then (async (user) => { if (!user) { throw new Error("제공된 이메일에 해당하는 유저가 없습니다.") } // 비밀번호가 일치하는지 확인 const isMatch = await user.comparePassword(req.body.password); return { isMatch, user }; }) .then(({ isMatch, user }) => { console.log(isMatch); if (!isMatch) { throw new Error("비밀번호가 틀렸습니다.") } // 로그인 완료 return user.generateToken(); }) .then ((user) => { // 토큰 저장 (쿠키, localstorage ...) return res.cookie("x_auth", user.token) .status(200) .json({ loginSuccess: true, userId: user._id }); }) .catch ((err) => { console.log(err); return res.status(400).json({ loginSuccess: false, message: err.message }); }) }); // User.jsuserSchema.pre('save', function( next ) { // 비밀번호 암호화 const user = this; if(user.isModified('password')) { bcrypt.genSalt(10, function(err, salt) { if (err) { return next(err); } bcrypt.hash(user.password, salt, function(err, hash) { if (err) { return next(err); } user.password = hash; return next(); }); }); } else { return next(); } }); userSchema.methods.comparePassword = function(plainPassword) { // 암호화된 비밀번호와 같은지 체크 const user = this; return bcrypt.compare(plainPassword, this.password) } userSchema.methods.generateToken = function() { // jwt 생성 user = this; const token = jwt.sign(user._id.toJSON(), 'secretToken'); user.token = token; return user.save(); }

안녕하세요 강의 도움 많이 받고 타입스크립트 + 리액트 조합으로 서비스 만들고 있습니다. 강의에 테스트코드 관련 내용은 없어 무관한 질문 죄송합니다 ㅠjest로 테스트 코드를 작성하려고 하는데 설정에 무슨 오류가 있는지 도무지 테스트가 되지 않습니다.. 여러 블로그 글이랑 챗 gpt참고해서 수정해도 안되는데 혹시 타입스크립트에서 jest 쓰려면 다른 설정을 해줘야 하는건가요?도움 주시면 감사드리겠습니다 ..

물질에게 클릭이벤트를 주어 보이는 시점이 바뀌거나 물체가 이동할수있게 하고싶습니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.이런 오류가 나오면서 따로 실행이 되지 않습니다

기본적으로 캐싱된 데이터가 있으면, 그 데이터를 가지고 오는 것으로 알고 있는데,  const { data} = useQuery({ queryKey: ['posts', 'recommends'], queryFn: getPostRecommends});const data = queryClient.getQueryData(['posts', 'recommends']); 두 가지 차이점이 있는지 궁금합니다.

안녕하세요 제로초님 강의 잘 보고 있습니다.다름아니라 무한스크롤 부분 구현중(개인 프로젝트에 해당 부분만 먼저 적용중이라 jsonplaceholder API로 호출하고 있습니다) fetchNextPage가 2번씩호출이 되어서 delay도 조정해보았는데 계속 2번씩호출이 되서 로직에 혹시 문제가 있는지 봐주실수 있을지부탁드립니다.0. 콘솔에 확인한 결과처음 화면에 ref가 렌더되고 그 이후 data fetching이 완료되어 isFetcing이 false가 되었는데, data를 map으로 div로 뿌리는 렌더링 과정에 시간이 소모되어 inView는 true && isFetching도 false가 되어서 div가 화면에 나타나고 ref div를 가리기 전에 data fetching을 한번씩 더 하고 있는 상황입니다.감사합니다

package.json에서 "scripts": { "start": "export NODE_OPTIONS=--openssl-legacy-provider && webpack serve", "build": "webpack" },를 추가해주면 open-ssl 관련 에러가 사라집니다.

안녕하세요 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);