173만명의 커뮤니티!! 함께 토론해봐요.
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이 문제가 해결이 안돼서 진도를 못나가고 있습니다ㅜㅜ 구글링하니 버전이 달라서 그렇다고 해서 package.json파일도 삭제하고 다시 설치하고 이것저것 다 해봤는데도 도저히 해결이 안되네요.. 살려주세요ㅠㅠㅠ
미해결
Next + React Query로 SNS 서비스 만들기
영상 마지막에서 말하는 것처럼 웬만한 경우에 추천된다면, suspense를 아직 적용하지 않은 상태에서도 useQuery 대신에 useSuspenseQuery를 써도 동작하는데 문제 없는 건가요?
해결됨
Next + React Query로 SNS 서비스 만들기
useEffect(() => { if (inView) { !isFetching && hasNextPage && fetchNextPage(); } }, [inView, isFetching, hasNextPage, fetchNextPage]); 여기서 !isFetching && hasNextPage && fetchNextPage(); 이 부분은 셋 모두가 truthy일때(앞의 두개의 boolean은 true이고 마지막의 함수는 return값이 존재할 때) 마지막 함수의 return값이 호출되는 구조인 것으로 이해되는데, 그렇다면 함수를 두개를 묶고서, 예를 들면 boolean&&함수1()&&함수2() boolean을 &&으로 묶어도 해당 boolean이 true이면 두개의 함수가 차례대로 실행되는건가요? 예시에서, 함수1과 함수2의 return값이 존재한다고 하면 함수1, 함수2 순서로 차례대로 실행되게 할 수 있겠네요? 그리고 한쪽의 함수라도 return값이 null이나 undefined되는 경우라면 두개의 함수결과가 모두 안나오게 만들고요. 제가 생각한 응용방식이 맞을까요?
미해결
Next + React Query로 SNS 서비스 만들기
일전에 동일한 문제로 질문 올렸는데, 혹시나 제 코드에 발견되지 않은 오타나 문제가 있을까하여 제로초님 깃에서 다운받은 ch4폴더로 실행해도 동일한 문제 발생합니다. MacOs: Ventura 13.6.4 크롬브라우저로 보고있습니다. DB연결문제는 Postgresql은 버전을 낮춰서 Homebrew로 설치하고, Username을 맥os 유저네임으로 변경하니까 다행히 연결이되었습니다. 그런데 여전히, 회원가입후 리다이렉트 안되는 현상과 심지어 회원가입 된 Postgresql 테이블에 User정보도 잘 들어가있고, 회원가입된 유저의 id,비번으로 로그인해도 로그인도 안됩니다. package.json 버전정보: 클라이언트에서 리턴받은 값: 서버에서 나오는 console: 무엇이 문제일까요?
해결됨
Next + React Query로 SNS 서비스 만들기
어떤 답변중 csr로 해도 metadata 설정으로 seo 가 가능하다 본듯합니다. ssr이 seo에 유리하다하여 ssr방식으로 해보려 한 이유도 일부있는데 csr로도 충분히 커버가 가능한것인지요? 선생님의 의견여쭙고 싶습니다. 감사합니다!
해결됨
Next + React Query로 SNS 서비스 만들기
useQuery사용할 때 <> 속에 넣는 generic type이 <쿼리함수로 나오는 값, 오류시 나오는 값, 최종 결과, 키로 넣는 값>의 타입이라는 것을 강의 및 검색을 통해서 인지하였습니다. 그런데 공식문서 검색을 해보니 이런 설명을 안해주는거 같더라고요. https://tanstack.com/query/latest/docs/framework/react/reference/useQuery https://tanstack.com/query/latest/docs/framework/react/typescript 혹시 타입스크립트에서 generic type에 어떤것을 넣어야 하는지 모르는 경우에는 어떻게 찾는게 일반적인 방법인가요?
해결됨
Next + React Query로 SNS 서비스 만들기
로그인 모달에서 발생하는 문제 해결하기(router.replace) 위 강의 시청 중 질문드립니다. 실제로 위와 같이 login 페이지에서 어떠한 주요 로직 실행없이다른 페이지(i/flow/login)로 replace 또는 redirect만 시키는 경우가 있을까요? 실제로 이런 동작이 필요한 경우가 있다면 어떤 경우에 필요하게 될 지 궁금합니다.
해결됨
Next + React Query로 SNS 서비스 만들기
제가 아직 타입스크립트 문법에 익숙하지 않아서 강의 5분 36초 쯤에 나오는 부분이 제대로 이해하고 있는게 맞는지 문의 드립니다. 지금 const {data : IPost[] | undefined}의 data와 const { data : Session | null}의 data가 겹쳐서 후자를 const { data: session Session | null} 으로 수정하였는데, 이 경우엔 앞의 const {data : IPost[] | undefined} 의 데이터는 IPost[] | undefined 둘 중 하나의 타입을 가지는 value가 되고 const { data: session : Session | null} 에서 data는 key가 되고 session이 Session | null둘 중 하나의 타입을 가지는 value가 입력되는 것이지요? 그러면 data. 라고 적으면, key로 사용된 data는 인식이 안되고 value로 사용된 data가 인식이 되어서 IPost[] 배열의 데이터를 가져오는 것이 되나요?
해결됨
Next + React Query로 SNS 서비스 만들기
강의 시간 1분대에서 /api/users/:userId/posts 에서 userId앞에 :를 넣는 것이 일반적인 약속이나 특정한 이유때문에 넣는 것인지 알고 싶습니다. 그리고 search기능을 제공하는 웹사이트에서 검색결과 주소에 물을표를 넣는 이유도 그냥 일반적인 약속 같은 것인지 같이 궁금합니다.
미해결
실습으로 끝장내는 웹 크롤링과 웹 페이지 자동화 & 실전 활용
안녕하세요 선생님 강의 듣고 있는 이광희라고 합니다. 올려주신 강의로 텔레그램 자체 API를 써서 메세지 전송하기까진 했는데요 이미지를 전송하려고 보니 거의 모든 블로그, 유튜브 설명들이 파이썬 텔레그램봇으로 설명 하더라구요 근데 이 봇이 v20으로 바뀌면서 비동기 프로그래밍(?)이 된거 같습니다. 설명하고 있는 코드들이 다 과거 버전 코드들이네요. 그래서 위키에 직접 가서 코드를 보고 있는데요 import asyncio import telegram async def main(): bot = telegram.Bot("TOKEN") async with bot: print(await bot.get_me()) if __name__ == '__main__': asyncio.run(main()) 그냥 위키에 나오는 간단한 코드인데도 RuntimeError: asyncio.run() cannot be called from a running event loop 이런 에러가 계속 뜹니다. async 부터 공부하려고 다른 유튜브를 찾아서 import asyncio async def main(): await asyncio.sleep(1) print('hello') asyncio.run(main()) 이런 간단한 코드를 입력해도 똑같은 오류가 뜨네요... 이벤트 메인 루프가 실행되고 있는 동안에 함수가 작동할수 없다 그런 내용인거 같은데 위키에 있는 그대로 따라해도 에러가 나니 비전공자 입장에서는 어떻게 해야 좋을지 모르겠네요. 경영학과 출신 직장인이 실무에서 쓰려고 파이썬을 배우고 있는데 물어볼곳이 여기밖에 없어 여쭤봅니다ㅠㅠ 좀 도와주세요 깃헙? 말고 국내 파이썬 qna있는 커뮤니티라도 알려주시면 가서 좀 물어보고 싶은데 그게 어디인지도 모르겠네요.
해결됨
손에 익는 Next.js - 마이그레이션하기
Create React App에서 Next.js로 마이그레이션하기 의 깃허브 소스도 npm i 하면 에러가 발생합니다. $ npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: react-scripts@5.0.1 npm ERR! Found: typescript@5.3.3 npm ERR! node_modules/typescript npm ERR! typescript@"^5.3.3" from the root project npm ERR! peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3 npm ERR! node_modules/fork-ts-checker-webpack-plugin npm ERR! fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1 npm ERR! node_modules/react-dev-utils npm ERR! react-dev-utils@"^12.0.1" from react-scripts@5.0.1 npm ERR! node_modules/react-scripts npm ERR! react-scripts@"5.0.1" from the root project npm 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.1 npm ERR! node_modules/react-scripts npm ERR! react-scripts@"5.0.1" from the root project npm ERR! npm ERR! Conflicting peer dependency: typescript@4.9.5 npm ERR! node_modules/typescript npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1 npm ERR! node_modules/react-scripts npm ERR! react-scripts@"5.0.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm 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 관련한 안내 좀 부탁합니다.
해결됨
손에 익는 Next.js - 마이그레이션하기
vite 로 작성한 경우를 마이그레이션 하는데요. 강의에 따라서 진행하였는데 최종 아래처럼 에러가 발생합니다. Require stack: \node_modules\next\dist\server\dev\next-dev-server.js vite\node_modules\next\dist\server\dev\next-dev-server.js vite\node_modules\next\dist\server\next.js vite\node_modules\next\dist\server\lib\start-server.js package.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" } } 관련해서 안내좀 부탁드립니다. 좋은 주말 되세요~
미해결
Next + React Query로 SNS 서비스 만들기
prefetch를 꼭 써야하는 건가요? 써야할 때와 안써도 될 때가 있는건가요??
미해결
Next + React Query로 SNS 서비스 만들기
react-query ssr 설정하기인데 어느 부분이 ssr 설정인지 잘모르겠습니다 어느부분인가요?? export async function getPostRecommends({ pageParam }: Props) { const res = await fetch( `http://localhost:9090/api/postRecommends?cursor=${pageParam}`, { next: { tags: ["posts", "recommends"], }, } ); // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error("Failed to fetch data"); } return res.json(); }
해결됨
Next + React Query로 SNS 서비스 만들기
조금 있다가 잘 짜는법에 대해 설명한다 하였는데, 제가 놓친것인지 다음강의에 나오는 내용인지 못들은 기분입니다. 일단 다음 강의 보다가 까먹고 놓치지 않기 위해 문의합니다. 우선 앞에 ""으로 표기한것은 함수 이름 설정하듯이 자기가 의도한대로 넣을 수 있고 몇개를 입력하든 상관 없는 것인가요? params 같은 경우는 마지막에 한번만 객체나 특정 타입 형식으로 넣을 수 있는 것인가요? 추가적으로 export default function SearchResult({searchParams}:Props){ ... 에서 searchParams가 객체로 한번 더 묶여서 정의되어 들어가는 이유는 그냥 편의상 그런 것일까요? type SearchParams= { q: .....} 로 정의하고 export default function SearchResult(searchParams:SearchParams){ ... 같은 식으로 넣어도 문제 없이 진행할 수 있는지, 아니면 {}객체로 한번 더 묶는 이유가 있는 것인지 궁금합니다.
해결됨
Next + React Query로 SNS 서비스 만들기
강의이기 때문에 react-queary, zustand, context.API 세가지를 보여주지만 실제로는 하나만 쓰면 된다하여서 처음 강의에 나오던 context.API로만으로 코드를 짜려고 다른 것들은 대충 넘겨 들었는데요. 어느정도 코드 짜보다가 react-query 부분을 다시 듣고나서보니 react-query는 또 느낌이 다른것 같네요. 그런데 혹시 서버액션 쪽에서 첫번째 동작 이후에 쓰로틀이 들어가게 코드를 짜두면 context내의 서버 데이터 갱신할 때도 react-queary의 stale 같은 기능을 만들 수 있는 거겠죠? 해당 기능은 그렇게 구현한다고 하여도, 지금 앞뒤로 강의 다시 들어보니 캐싱 관리같은건 또 다른 차원이거 같아서 결국에 react-queary를 병행해야만 하는건가 싶네요. 다른 질문 답변을 보니 강사님도 react-queary는 데이터 패칭용으로 다른 상태관리 라이브러리와 병행해서 쓰시는것 같고요.
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
안녕하십니까? 결측값 채우기 중 최빈값 관련해서,, m = X_train['workclass'].mode()[0] 여기서 mode()과 mode()[0]의 차이는 무엇인지요? 즉 [0]의 쓰임이 무엇인지? 다른 중앙값, 평균 등은 이런게 없는데 왜 최빈값만 이런게 뒤에 붙는지요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
Entity.ts에 추가한 toJSON() { return instanceToPlain(this); } 이 코드가 들어가면 404에러가 뜹니다. 저 코드를 빼면 돌아가긴 합니다만 이미지(아바타)가 안보이고요.. 그리고 이런 에러가 나서 구글링 한 후 config를 이렇게 바꿨는데, 이게 문제인가.. 싶기도 하고요.. 너무 궁금한데 제발 꼭 좀 아시는 분 답변 부탁드려요
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
이제는 promise chain이나 async await 문으로 콜백함수를 처리해야 하는 것으로 보입니다. 다음과 같이 코드를 수정해서 돌아가는 것을 확인했으니 활용하시면 좋을 것 같아요! // index.js app.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.js userSchema.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(); }
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 강좌를 듣다가 궁금한게 생겨서 질문드립니다. 사진을 첨부했는데요, 사진처럼 현재 작성하지도 않은 타입을 회색글씨로 미리 보여주는? 라이브러리 같은데 이름을 알고싶습니다. 수업 내용에 관한 질문이 아니라 죄송합니다.
