index.js app.get('/api/users/logout', auth, (req,res)=>{ // Usermodel에서 id를 찾고 token을 지워줌 User.findOneAndUpdate({ _id: req.user._id }, { token: "" }) console.log(req.user._id) try{ return res.status(200).send({ success: true }) } catch(err){ return res.json({ success: false, err }); } })auth.js let auth = (req, res, next)=> { // 인증 처리를 하는 곳 // client 쿠키에서 토큰을 가져온다. let token= req.cookies.x_auth; // 토큰을 복호화 후 유저를 찾는다. User.findByToken(token, (err,user)=>{ if(err) throw err; if(!user) return res.json({ isAuth: false, error: true}) req.token= token; req.user= user; next(); })User.js userSchema.statics.findByToken= function(token, cb){ var user= this; //토큰 디코드 jwt.verify(token,'secretToken', function(err, decoded){ //유저 아이디를 이용하여 유저를 찾은 후 // 클라이언트에서 가져온 token과 DB에 보관된 TOKEN이 일치하는지 확인 user.findOne({"_id": decoded, "token": token}) .then((user)=>{ cb(null, user); }) .catch((err)=>{ return cb(err); }) }) }index.js / auth.js / User.js 첨부하겠습니다.도저히 왜 토큰이 DB에서 사라지지 않는지 궁금합니다 ㅠㅠ

page.tsx에서 Fragment를 사용해서 left와 right를 감싸주셨는데 이 때, page.module.css의 .container 스타일이 자동으로 적용이 되는 건가요 ??export default function Main() { return ( <> <div className={styles.left}> {/* Image -> 넥스트가 알아서 이미지 최적화 시켜줌 */} <Image src={zLogo} alt="logo" /> </div> <div className={styles.right}> <h1>지금 일어나고 있는 일</h1> <h2>지금 가입하세요.</h2> {/* a 태그 대신 Link 사용 -> 페이지가 새로고침 되어 넘어감, 리액트나 넥스트에서는 새로고침 되는 행동 X*/} <Link href="/i/flow/signup" className={styles.signup}> 계정 만들기 </Link> </div> </> ); }저는 코드를 똑같이 작성 했는데도 이렇게 다른 스타일이 적용되어 column 형식으로 나누어져 보입니다. 그래서 직접적으로 스타일을 적용시키기 위해export default function Main() { return ( <div className={styles.container}> <div className={styles.left}> {/* Image -> 넥스트가 알아서 이미지 최적화 시켜줌 */} <Image src={zLogo} alt="logo" /> </div> <div className={styles.right}> <h1>지금 일어나고 있는 일</h1> <h2>지금 가입하세요.</h2> {/* a 태그 대신 Link 사용 -> 페이지가 새로고침 되어 넘어감, 리액트나 넥스트에서는 새로고침 되는 행동 X*/} <Link href="/i/flow/signup" className={styles.signup}> 계정 만들기 </Link> </div> </div> ); }이렇게 최상위 div에 className으로 container를 지정해주었는데구조가 이런식으로 변경이 되었고, right의 내용이 다 나타나지 않아서 적용이 잘 된 것 같진 않는데 어떻게 해결하면 될까요 ?

제 프로젝트강사님의 프로젝트 제 프로젝트는 스크롤이 무조건 안되고 일기장 화면이 꽉 찹니다.aspect-ratio도 둘 다 auto로 되어있고 개발자 도구로 확인해보았는데 해결되지 않아 질문 드립니다. 기본 설정에서 빼먹은 게 있을까요?

안녕하세요 제로초님!1) 백엔드에 데이터 요청 시 필요한 쿠키(로그인 후 발급되는 액세스토큰)을 브라우저에 저장해서 사용해야한다고 하셨고, 저 또한 이전에 리액트로만 개발했을 때 그렇게 진행했었는데요,next.js가 아직 서툴고 next-auth의 역할이 완전이 이해가 되지 않아서 조금 헷갈리는 부분이 있습니다. 저는 백엔드에서 발급해준 액세스토큰을 auth.ts jwt callbacks를 통해 user값에서 가져와 token에 저장한 뒤, session callbacks에서 이 token을 session에 저장해 놓았고 만료된 토큰 갱신하는 로직까지 callbacks에서 설정해놓았는데요. 이렇게 구현을 해도 되는 건가요? 보안에 문제가 있을까요? 만약 쿠키에 저장해서 사용하는 방식으로 바꿔야한다면 만료된 토큰의 갱신처리 즉 refreshToken요청 코드는 어디에 작성을 해야하나요..? (리액트에서는 axios를 사용해서 axios.interceptor.response에서 401 jwt만료 에러가 발생시에 refreshtoken을 요청하는 방식으로 구현했었습니다.) 2) 그리고 회원가입과 같은 POST 요청시에 form action을 이용해 server action을 사용하는 것과 form onsubmit으로 post 요청하는 것과 어떤 차이가 있는 건가요..? server action으로 post 요청시 넘겨주는 formData를 찍어보면 JSON형식이 아니라 백엔드에서 type오류가 넘어오는데 server action을 사용하려면 백엔드도 같이 설정을 해줘야하나요?

안녕하세요.10분 30초 쯤에useEffect(() => { }, [originData, isEdit]);여기서 만약 dependency array에 빈 배열을 전달해주면 구체적으로 어떤 문제가 생기나요?home에서 일기 수정하기 버튼이나 새로 만들기 버튼을 누를 때마다 DiaryEditor가 mount 된다고 생각하여 빈 배열을 넣어줘도 된다고 생각했는데, 그게 아니라 리렌더가 되는 건가요?  

안녕하세요 제로초님 강의 수강중에 질문이 있어서요강의에 10분08초를 확인해보시면 response가 성공 실패 유무를 떠나서 await되버려서 catch로 넘어가지 않는 이유는 무엇일까요 ?로그인모달은 클라이언트에서 처리하고 회원가입은 서버액션으로 처리한다는 설명을 영상 후반부에 해주셨는데 이러한 경우와 연관이 있는 걸까요 ? 구글링해도 잘 확인이 안되어서요! 항상 감사합니다.

안녕하세요 제로초님! 로그인 관련하여 질문드립니다!1) 백엔드에서 response로 넘겨주는 access token이 있어서 이걸 session에 넣어 api 요청할 때마다 헤더에 담아 인증 하려고 하는데요, 로그인 후 next-auth signIn함수를 통해 자동으로 authjs.session-token이 생성되는데 그럼 이 토큰은 언제 쓰이는 건가요? 백엔드에서 넘겨주는 토큰이 있어도 next-auth를 사용해도 되는 건가요?2) 로그인 기능과 관련해서 https://next-auth.js.org/v3/tutorials/refresh-token-rotation를 참고해 토큰 갱신 로직을 jwt callbacks 안에 구현을 해보았습니다. client 에서 session을 호출할 때마다 jwt callback이 실행되기 때문에 로그인 시 저장해 놓은 토큰(accesstoken)이 만료되었는지를 확인할 수 있다고 생각했고 위처럼 구현했습니다. 토큰이 만료가 되면 retun token대신 refreshAccessToken(token) 함수를 호출해 새로운 토큰을 return 해주었고, response도 정상적으로 옵니다.다만 jwt callback이 동시간대에 한번만 실행되는 것이 아니라 여러번 실행이 되고 있고, session callback에서도 업데이트된 token이 확인될거라 생각했지만, session callback에서는 예전 토큰이 조회가 되는 상황입니다. next-auth callbacks가 jwt -> session 순으로 호출되는 것으로 알고 있어서 jwt에서 업데이트된 token을 리턴해주면 session에서 이를 받을 거라고 생각했는데.. 왜 업데이트가 되지 않는 건지 궁금합니다.

안녕하세요 수강중인데요지금까지 수강 마치고 항상 프로그램 실행이 정상적으로 돌아갓는데이번 reac hook form 강의에서 코드 실행해보면register 화면에서 유효성 검사 기능이 동작하질 않습니다강의 참고하여 vs로 필요한 install 전부 설치하엿고 에러도 없엇습니다이상해서 react hook 관련 구글링을 통해 다른 방법으로도 적용해보앗지만 여전히 동작을 안합니다원인을 모르겟네요  import React from 'react' import { useForm } from 'react-hook-form' import { useDispatch } from 'react-redux' //import { registerUser } from '../../store/thunkFunctions' const RegisterPage = () => { const { register, handleSubmit, formState: { errors }, reset } = useForm({ mode: 'onChange' }) //const dispatch = useDispatch(); const onSubmit = ({ email, password, name }) => { // dispatch(registerUser(body)); reset(); } const userEmail = register("email",{ required: { value : true, message : "필수 필드입니다."}, }); const userName = { required: "필수 필드입니다." } const userPassword = { required: '필수 필드입니다.', minLength: { value: 6, message: "최소 6자입니다." } } return ( <section className='flex flex-col justify-center mt-20 max-w-[400px] m-auto'> <div className='p-6 bg-white rounded-md shadow-md'> <h1 className='text-3xl font-semibold text-center'> 회원가입 </h1> <form className='mt-6' onSubmit={handleSubmit(onSubmit)}> <div className='mb-2'> <label htmlFor='email' className='text-sm font-semibold text-gray-800' >Email</label> <input type='email' id="email" className='w-full px-4 py-2 mt-2 bg-white border rounded-md' {...register('email', userEmail)} /> { errors?.email && <div> <span className='text-red-500'> {errors.email.message} </span> </div> } </div> <div className='mb-2'> <label htmlFor='name' className='text-sm font-semibold text-gray-800' >Name</label> <input type='text' id="name" className='w-full px-4 py-2 mt-2 bg-white border rounded-md' // {...register('name', userName)} /> {/* { errors?.name && <div> <span className='text-red-500'> {errors.name.message} </span> </div> } */} </div> <div className='mb-2'> <label htmlFor='password' className='text-sm font-semibold text-gray-800' >Password</label> <input type='password' id="password" className='w-full px-4 py-2 mt-2 bg-white border rounded-md' {...register('password', userPassword)} /> { errors?.password && <div> <span className='text-red-500'> {errors.password.message} </span> </div> } </div> <div className='mt-6'> <button type='submit' className='w-full px-4 py-2 text-white duration-200 bg-black rounded-md hover:bg-gray-700'> 회원가입 </button> </div> <p className='mt-8 text-xs font-light text-center text-gray-700'> 아이디가 있다면?{" "} <a href='/login' className='font-medium hover:underline' > 로그인 </a> </p> </form> </div> </section> ) } export default RegisterPage

제가 블로그를 만들어 보고 잇는데 해당 게시물을 보면 조회수가 증가하는데 같은 ip일경우에는 30분을 기준으로 조회수가 증가하게 작업을 하려고 합니다.이때 제가 게시물 조회시 ip와 해당 게시물의 id를 저장하는 테이블을 만들어서 작업을 해보려는데 이때 ip만 db상에서 암호화 한다면 보안상으로 안전할까요??

ex) pages/section19/19-04-image-with-board/index.tsx// ... export default function ImageUploadPage(): JSX.Element { // ... const onChangeFile = async ( e: ChangeEvent<HTMLInputElement>, ): Promise<void> => { const file = e.target.files?.[0]; console.log(file); const isValid = checkValidationFile(file); if (!isValid) return; const result = await uploadFile({ variables: { file, }, }); console.log(result.data?.uploadFile.url); setImgUrl(result.data?.uploadFile.url ?? ""); }; // ... }이렇게 이미지를 선택하기만 해도 uploadFile 함수로 인해 storage에 이미지파일이 저장되어 주소를 받아오 것으로 이해하고 있는데 이 상태에서 새로고침을 하거나 사이트 꺼버리면 storage에 이미지파일은 그대로 저장된 채로 유기되어 용량이 낭비되는 것이 아닌가 하는 의문이 들었습니다. 그렇지 않다면 상관없지만 이렇게 선택만하고 중단할 경우 이미 storage에 저장된 이미지가 자동으로 삭제되지는 않을 것 같고 useEffect의 return 안에 입력정보가 DB에 저장되지 않은 채로 사이트가 꺼지거나 새로고침되면 storage에 선택만 했던 이미지를 지우도록 조건문으로 코드를 작성해주면 storage의 용량이 낭비되는 문제를 해결할 수 있지 않을까요?? 혹은 더 옳바른 방법이 있는지, 제가 잘못 이해하고 있는지, 그리고 제가 말한 방법대로 또는 강사님이 생각하시는 더 옳바른 방법으로 코드를 작성하게 됐을 때의 예시 코드를 보여주시면 감사드리겠습니다.

module.css 스타일을 바꿨을때 화면에 바로 적용안되는 문제는 왜 그럴까요?? 새로고침을 해도 적용이 안되고 프론트 서버를 재실행 시켜야 바뀐 스타일이 적용이 됩니다.

안녕하세요. 선생님 제가 해당 강의를 유데미에서 수강중인 것을 모르고 실수로 또 구매를 했습니다. 현재 환불 기간이 지나 환불이 불가능한 것으로 확인되어 혹시 해당 강의를 한입 크기로 잘라먹는 타입 스크립트로 변경이 가능한지 문의드립니다. 해당 강의는 아직 수강하지 않았습니다. 제가 아마 할인 기간에 여러 강의 신청할때 같이 신청한거 같은데, 지금 보니 유데미에도 동일 강의를 신청했었네요. 필요시 유데미 강의 결제한 내역 인증도 가능합니다. 동일한 강의를 듣기에는 좀 부담이 있어서 혹시 넓으신 아량으로 강의 변경 또는 환불이 가능한지 문의드리겠습니다.환불이 될 경우 다시 한입 크기 타입 스크립트 강의를 신청하겠습니다.감사합니다.

안녕하세요. 문의남깁니다.맥에서 expo-cil 설치가 안됩니다." zsh: command not found: npm " 요런 메세지가 나오는데 어떤 방법으로 진행해야하나요?  

강사님께서 올려주신 도표 강의 자료 5개 파일이 모두 확장자가 없어서 이걸 혹시 어떻게 열어볼 수 있을까요? 

git 프로그램에서, code 확인 후에npx lite-server --baseDir 1-vanilla 실행하면npm ERR! code ENOENTnpm ERR! syscall lstatnpm ERR! path C:\Users\ostri\AppData\Roaming\npmnpm ERR! errno -4058npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\ostri\AppData\Roaming\npm'npm ERR! enoent This is related to npm not being able to find a file.npm ERR! enoentnpm ERR! A complete log of this run can be found in: C:\Users\ostri\AppData\Local\npm-cache\_logs\2024-02-24T09_12_51_599Z-debug-0.log 상기 에러메세지가 발생하는데, 혹시 어떻게 해결할 수 있을까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이렇게 하면, 블로그 낫 파운드가 뜹니다. ㅠㅠ_order : 'desc' 가 없으면 블로그가 잘 떠요 axios.get(`http://localhost:3001/posts`, { params : { _page: page, _limit: 5, _sort: 'id', _order: 'desc', }

안녕하세요 선생님의 강의를 듣고 배워서 제 프로젝트에 적용시키고 있습니다.제 프로젝트는 naver map api를 사용해서 지도 서비스를 만드는 프로젝트인데요.지도위에 마커를 눌렀을 때 모달이 뜨는 기능을 구현하는 중 인터셉팅 라우트를 사용해야할지그냥 일반 모달을 사용해야할지 고민이 되서 질문드려요.인터셉팅 라우트를 써보고 싶긴하지만 제가 만들 기능엔 적합한 방법이 아니라 생각되는데제 생각이 맞는건지 확인하고 싶습니다.

안녕하세요. 강의 잘 듣고 있습니다.다름이 아니라 강의와 깃헙 소스코드가 달라서 문의드려요. mocks/zustand.js의 코드인데요.const { create: actualCreate } = await vi.importActual('zustand'); import { act } from '@testing-library/react'; // 앱에 선언된 모든 스토어에 대해 재설정 함수를 저장 const storeResetFns = new Set(); // 스토어를 생성할 때 초기 상태를 가져와 리셋 함수를 생성하고 set에 추가합니다. export const create = createState => { const store = actualCreate(createState); const initialState = store.getState(); storeResetFns.add(() => store.setState(initialState, true)); return store; }; // 테스트가 구동되기 전 모든 스토어를 리셋합니다. beforeEach(() => { // 👈 이 부분 act(() => storeResetFns.forEach(resetFn => resetFn())); });깃헙 소스코드는 위와 같이 beforeEach를 사용하지만 강의에서는 afterEach로 설명해주시고 있습니다.주석도 마찬가지로 다릅니다.무엇이 맞는 걸까요?

안녕하세요! 좋은 강의 감사합니다:)궁금한 점이 있어서 질문 남깁니다.devMiddleware이 웹팩에서 빌드한 파일에 대한 경로라고 이해했습니다. 그런데 output.publicPath에 빌드할 파일 위치 적어주고 index.html에서 빌드한 파일을 불러오는 데 굳이 devMiddleware를 설정해주는 이유가 뭔가요..?devMiddleware를 제거해도 정상적으로 빌드되고 결과물도 똑같은 것 같아요..ㅠ

안녕하세요! 강의를 듣고 테스트 코드를 연습중에 질문이 있어서 글을 작성하게 되었습니다.제가 테스트 코드를 작성하려는 프로젝트에서 공용 컴포넌트 중 Pagination 컴포넌트에 유닛 테스트 코드를 작성하려고 합니다.제가 생각한 테스트 흐름은 실제 유저가 Pagination 컴포넌트의 화살표 버튼 클릭시 현재 페이지가 1이 증가하는 것처럼 테스트 코드를 구현하려고 했습니다.하지만 Pagination 컴포넌트에는 setCurrentPage 함수를 주입 받아서 처리하기 때문에 유닛 테스트에서는 클릭으로 current page 값이 증가하는 것을 확인할 수는 없고 spy 함수를 통해 setCurrentPage가 실행되는 것까지만 확인하는게 맞는건가요?? 두서없는 글 읽어주셔서 감사합니다!