173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
revalidateTag를 사용하더라도 결국 Review page가 모두 리렌더링 되는 것으로 보입니다. 이는 자연스러운 동작일까요? 그렇다면,ReviewDetail에서 사용하고 있는 API (책 상세 정보 가져오기)는 굳이 호출될 필요가 없는데 추가 호출이 되는 것 아닐까요? 이런 상황에서 revalidateTag를 사용하는 게 좋은 방법이 맞는지 궁금합니다!
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
위에 그림이 제가한 코드를 돌렸을떄 나오는 그림인데 강의 실습에서는 버튼이 새로로 정렬되지않고 위에 붙어있는 형식 이런 형식으로 나왔는데 코드에 차이점이 아예 없어 뭐가 문제인지 궁금합니다
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
섹션 12. Context의 > 11.3 분리하기에 대한 질문입니다. 강의에서 처럼 TodoDispatchContext로 분리한 후 함수인 { onCreate, onUpdate, onDelete } 에 대해 useMemo처리를 함으로 재생성이 일어나지 않도록 하는 것에 대해 잘 이해되었습니다. 그런데 궁금한 것은, 그렇다면 위 객체에서 처리한 useCallback은 필요없는 것은 아닌지요? 문의드립니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요? 그랩선생님, 수고가 많으십니다. 다름이 아니라 강의 [컴포넌트 사용하기] 강의를 진행하던 중 2가지 에러가 발생하여 질문을 하게 되었습니다. 첫번째 에러는 아래 사진으로 첨부합니다. 첫번째 에러 사진의 크롬 브라우저 제목은 listing directory / 라고 뜹니다. 그다음에 src디렉토리에 가서 App.js를 열면 첨부사진 처럼 입력된 소스화일 내용이 아래와 같이 뜨는데 어떻게 해야 크롬 브라우저로 로고까지 뜨게 되나요? 그리고 두번째 에러는 실제 소스 파일 폴더에 가서 App.js 파일을 선택 후 엔터(실행)하니 아래 사진과 같은 에러가 발생하였습니다. --> 이 두가지 에러를 어떻게 하면 해결 할 수 있는지 상세한 설명과 자세한 답변 부탁드립니다. 감사합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
getTime() 메서드 사용 질문드립니다 home pivoteDate -> new Date() startTime, EndTime => getTime() new onSubmit -> onCreate ( input.createdDate.getTime(), input.emotion,input.content ) const [input, setInput] = useState({ createdDate: new Date(), emotionId: 3, content: "", }); Edit const onSubmit = (input) => { onUpdate( params.id , input.createdDate.getTime(), input.emotionId, input.content ); }; getTime() 메서드를 썼다 안 썼다 하는 것 같은데 언제 쓰고 안 쓰는지 이유가 궁금합니다.
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
안녕하세요 강사님. 템플릿이 명확하게 정의가 되지 않는데, 혹시 템플릿 한번만 정의해주시면 안될까요, 저는 지금 두리뭉실하게만 머리속에 있습니다.. 질문 받아주셔서 감사합니다.
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
로그인 후 개발자 도구 쿠키에 x_auth 정상적으로 확인 DB에도 토큰 정상적으로 값 입력된 것 확인 로그아웃 버튼을 클릭 시 401 에러 발생, 토큰 삭제 x server/index.js app.post('/api/users/login', async (req, res) => { try { const user = await User.findOne({ email: req.body.email }); if (!user) { return res.json({ loginSuccess: false, message: "제공된 이메일에 해당하는 유저가 없습니다." }); } // 비밀번호가 일치하는지 확인한다. const isMatch = await user.comparePassword(req.body.password); if (!isMatch) { return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다." }); } // 비밀번호가 일치하다면 토큰을 생성한다. const tokenUser = await user.generateToken(); res.cookie("x_auth", tokenUser.token) .status(200) .json({ loginSuccess: true, userId: user._id }); } catch (err) { return res.status(400).send(err); } }); app.post('/api/users/logout', auth, async(req, res) => { try { await User.findOneAndUpdate({ _id: req.user._id }, { token: "" }); res.clearCookie("x_auth"); return res.status(200).send({ logoutSuccess: true }); } catch (err) { return res.json({ logoutSuccess: false, message: err.message }); } }); User.js userSchema.methods.comparePassword = function(plainPassword, cb) { const user = this; return bcrypt.compare(plainPassword, user.password); }; userSchema.methods.generateToken = function() { var user = this; // jsonwebtoken을 이용해서 토큰을 생성한다. var token = jwt.sign(user._id.toJSON(), 'secretToken'); user.token = token; return user.save(); }; userSchema.statics.findByToken = async function(token) { const user = this; try { // 토큰을 decode합니다. const decoded = jwt.verify(token, 'secretToken'); // 디코딩된 정보를 이용해 유저를 찾습니다. const userData = await user.findOne({ "_id": decoded, "token": token }); return userData; } catch (err) { throw new Error("유효하지 않은 토큰입니다."); } }; auth.js const { User } = require("../models/User"); function auth(req, res, next) { // 인증 처리한다. // 클라이언트 쿠키에서 토큰을 가져온다. const token = req.cookies.x_auth; if (!token) { return res.status(401).json({ isAuth: false, message: "토큰이 제공되지 않았습니다." }); } // 토큰을 복호화한 후 유저를 찾는다. User.findByToken(token) .then((user) => { if (!user) { return res.status(401).json({ isAuth: false, message: "유효하지 않은 토큰입니다." }); } // 토큰과 유저정보를 다음 단계로 전달한다. req.token = token; req.user = user; next(); }) .catch((err) => { return res.status(401).json({ isAuth: false, message: err.message }); }) }; module.exports = { auth }; 서버의 경로를 절대 경로로 기입하지 않으면 404 에러 발생 5000 포트로 데이터 전송, cors로 3000 포트로 이동하도록 설정 const corsOptions = { origin: 'http://localhost:3000', // 클라이언트 주소 credentials: true // 쿠키를 포함하도록 }; app.use(cors(corsOptions));
해결됨
한 입 크기로 잘라먹는 Next.js
error.tsx를 app 폴더 바로 아래에 둬도 footer에서 발생하는 오류는 잡히지 않습니다. app layout에서 발생하는 에러는 error.tsx로 잡히지 않는걸까요?
해결됨
한 입 크기로 잘라먹는 Next.js
book type은 왜 지정하지 않는지 궁금합니다. 그리고 왜 book type은 지정하지않아도 typescript에서 체킹(?)을 하지 않는지도 궁금합니다. 항상 강의잘보고있습니다. 감사합니다. 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
뭔가 빠트렸나 했더니, isModified() 때문에 비밀번호 변경이 아닌 신규 데이터 저장시에는 next() 를 호출해버리네요 에러도 없어서 파악이 좀 오래걸렸네요 if(user.isModified("password") 부분을 !user.isModified("password") 로 수정하고 해결되었네요 ※ 같은 문제 겪으시는분 계시면 참고하세요!
해결됨
한 입 크기로 잘라먹는 Next.js
PS C:\Users\Master\Desktop\onbite-next> npm run dev npm ERR! Missing script: "dev" npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: C:\Users\Master\AppData\Local\npm-cache\_logs\2024-11-18T14_22_23_262Z-debug-0.log 이런 오류가 발생했습니다..
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요, 9.4 강의 최적화 후 배포 빌드때 문제가 발생했습니다. - 에러메시지 book/[id]/page.tsx 소스코드 server는 이미 배포가 되어있고.. vercel 서버 URL도 환경설정 잘 적용된거 확인했고. 로컬에서 npm run build까지 잘되었는데 혹시 any타입 빌드를 해결하려고 (.)book/[id]/page.tsx에서 이런식으로 프롭스를 넘겨서 발생한 문제일까요..?
미해결
한 입 크기로 잘라먹는 Next.js
스트리밍은 Fetch 등 서버 컴포넌트에서 비동기 실행되는 것들이 완료되기 전에 로딩 화면 같은 것을 보여주는 것이라 이해했습니다. 그렇다면, 스트리밍을 사용하기 않는다면 API를 호출하고 이를 기다린 후, 이에 대한 데이터가 HTML에 포함되어 SEO에 도움을 줄 것 같은데요. 스트리밍을 사용한다면 HTML에 로딩 데이터가 보여집니다. 이를 해결할 수 있는 방법이 있나요? 아니면, 이는 SEO를 고려하지 않는 곳에서 사용해야 하는 기법인지 궁금합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
PS C:\Users\Master\Desktop\onebite-books-server-main> npx prisma db push Environment variables loaded from .env Prisma schema loaded from prisma\schema.prisma Datasource "db": PostgreSQL database "postgres", schema "public" at " aws-0-ap-northeast-2.pooler.supabase.com:6543 " 이렇게 뜨고 성공했다는 문구는 안 뜹니다..
해결됨
Next + React Query로 SNS 서비스 만들기
https://github.com/ZeroCho/z-com/blob/master/src/auth.ts#L16 배포하신 깃헙에서 궁금한점이 생겨서 질문드립니다 1. signOut에서 백엔드로 로그아웃 요청만 보내고 authorize()처럼 쿠키값을 set해주지 않았으니 connect.sid는 남아있는게 맞나요? 2. next auth 세션값이 지워지면서 프론트서버와 인증이 끊기는데 프론트서버에서 굳이 백엔드로 요청을 보내는 이유가 뭘까요? 백엔드 서버에 로그 남기기 위해서인가요?
해결됨
[React 2부] 고급 주제와 훅
안녕하세요. 강사님! 학습 중에 궁금한 점이 생겼는데, 제가 이해하고 있는 내용이 맞는지 궁금해 질문 드립니다! const obj1 = { a: 1 }; const obj2 = { a: 1 }; const obj3 = obj1; console.log(obj1 === obj2); // false console.log(obj1 === obj3); // true 자바스크립트에서 객체나 배열을 비교할 때 기본적으로 참조를 비교하는 것으로 알고 있습니다. 즉, 1번에서 두 객체가 같은 값을 가지고 있으나 메모리 주소가 달라 false를 출력하고, 2번에선 같은 메모리 주소를 참조해 true를 출력하는 것으로 알고 있습니다 여기서부터 제가 궁금했던 내용입니다! 캐시된 filteredPosts를 사용해 렌더링하는 경우를 가정했을 때 : const filteredPosts = MyReact.useMemo(filterPosts, [posts, tag]); filteredPosts는 useMemo를 통해 filterPosts 함수로 생성된 배열을 클로저 공간에 넣어두고, posts와 tag가 변경되지 않는다면 항상 똑같은 값을 FilteredPosts로 전달 => <FilteredPosts posts={filteredPosts} /> const FilteredPosts = MyReact.memo(({ posts }) => { ... } // FilteredPosts는 캐시된 filteredPosts를 memo 함수로 전달 => function memo(TargetComponent) { return (nextProps) => { ... const [prevValue, prevProps] = TargetComponenet.memorizedState; if (prevProps === nextProps) { return prevValue; } ... } } 그럼 여기 전달된 nextProps(캐시된 filteredProps)는 당연히 같은 메모리를 참조하니 깊은 비교 없이 참조 비교만으로도 비교가 가능하지 않나? 싶었습니다. filteredPosts는 결과적으로 useMemo로 캐시되어있고, 새로 생성된 배열이 아니니 메모리 주소가 동일해 prevValue가 리턴되지 않을까? 했는데 아니더라구요.. useMemo를 통해 filteredPosts 배열의 참조는 동일하게 유지되고 있는건 맞는데, { posts: filteredPosts } 이렇게 FilteredPosts 컴포넌트에 전달되는 props 객체가 매번 새로운 객체로 생성돼서 그런건가? 싶은데 이게 맞는지 궁금해서 질문 드립니다..
미해결
따라하며 배우는 리액트 네이티브 기초
강의에서 <android:exported="false"> 부분 이후 안드로이드 실행시 Execution failed for task ':app:checkDebugDuplicateClasses'. 오류가 나면 gradle.properties 파일에 아래 부분을 추가해보세요 android.useAndroidX=true android.enableJetifier=true
미해결
따라하며 배우는 리액트 네이티브 기초
선생님 이다음 remote push 부분 강의가 없습니다. 누락된걸까요?
미해결
Next + React Query로 SNS 서비스 만들기
form으로 put, patch, delete 요청이 안되는걸로 알고있는데 그럼 msw로 목업 요청을 작성할때랑 실제 서버를 작성할때랑 컴포넌트를 두개만들어서 해야하나요?
해결됨
한 입 크기로 잘라먹는 Next.js
Next.js로 사전 렌더링을 하여 서버에서 html을 채워서 클라이언트에 응답해줄때 초기로딩 속도가 빨라진다는 개념은 이해가 됩니다. 다만, 제가 확인하고 싶은 부분은 다음과 같습니다. Next.js로 SSR을 구현할때 API 요청과 같이 서버에서 동적인 데이터를 통해 html을 채워서 응답하는 경우에는 요청마다 서버에서 JS를 실행해야 할 것입니다. 이 경우에 CSR보다 초기 로딩 속도가 빠르다고 장담할 수 있나요? (FCP, TTI 모두 어떤 상황에서든 우세할까요?)
