173만명의 커뮤니티!! 함께 토론해봐요.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
따라 치면서 실습하는데 적용이 안 되길래 삽질 하다가 혹시나 싶어서 강의 자료를 다운 받아 npm run start 해 보았는데요 그것도 이렇게 적용이 안 되게 보이네요... 뭐가 문제일까요? ㅜ.ㅜ
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 94강 13:55초를 보면 콘솔 창에 next-dev.js?3515:20 Invalid href passed to next/router: /u//r/ test02/043hzrH/test44 , repeated forward-slashes (//) or backslashes \ are not valid in the hre 와 같은 에러가 떠있습니다. [username].tsx에서 <Link href={`/u/${comment.post?.url}`}> 을 불러 올때 url에 '/r/test02/043hzrH/test44'가 담겨 오면서 슬래쉬(//)가 2번 입력되어 생기는 에러 같습니다. 제공된 소스코드에도 위와 같이 입력되어 있어요. 아래와 같이 '/'를 지우고 링크를 href에 넣어주면 에러가 사라지는데 이게 맞을까요? <Link href={`/u${comment.post?.url}`}>
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 백엔드 entities에서 Post, Sub, Comment는 아래와 같이 import Post from "../entities/Post" import Sub from "../entities/Sub" import Comment from "../entities/Comment" 처럼 불러올 수 있게 작성하셨는데 User만 import {User} from "../entities/User" 중괄호를 넣어서 불러와야 합니다. export default class User extends BaseEntity 가 아닌 export class User extends BaseEntity 로 작성한 이유가 있을까요?
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 81강을 수강중입니다. src/pages/r/[slug]/[identifier]/[slug].tsx 작성중 {post.voteScore} 를 콘솔로 찍어보면 undefined가 나와서 페이지에 노출되지 않습니다. 타입을 voteScore? : number 로 한게 문제인가해서 ?를 지워보았지만, 증상은 동일했고 api를 불러오면서 voteScore는 0으로 초기화되지 않은채 받는것 같아요. 그러던 중 백엔드의 Post.ts를 살펴보았더니 get voteScore()를 get V oteScore()로 오타 아닌 오타를 가져가서 초기화 되지 않았단걸 알아내었습니다. 누군가에게 도움이 되시길 바라며
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
영상에 따라서 단순하게 cookie-parser 설치하고 import cookie-parser 한다음에 app.use(cookieParser()) 진행하면 상단에 이미지처럼 에러가 발생하더라구요. cookie-parser을 제거하면 cookie가 정상적으로 저장되는 것을 볼 수 있었습니다. 어떤 부분을 놓친 것일까요 server.ts import express from "express"; import morgan from "morgan"; import { AppDataSource } from "./data-source" import authRoutes from "./routes/auth"; import subRoutes from "./routes/subs"; import cors from 'cors'; import dotenv from 'dotenv'; import cookieParser from "cookie-parser"; const app = express(); dotenv.config(); app.use(cors({ origin: process.env.ORIGIN, credentials: true })) app.use(express.json()); app.use(morgan('dev')); app.use(cookieParser()) app.get("/", (_, res) => res.send("running")); app.use('/api/auth', authRoutes); app.use("/api/subs", subRoutes); const PORT = process.env.PORT; console.log('PORT', PORT) app.listen(PORT, async () => { console.log(`server running at http://localhost:${PORT}`); AppDataSource.initialize().then(async () => { console.log("data initialize...") }).catch(error => console.log(error)) })
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
강의 내용 중 useMemo 부분의 실습이 없어서 질문드립니다. Component.js로 컴포넌트를 작성하고 App.js에서 컴포넌트를 호출해봤는데요. App.js .. <div>{<Component a={1} b={5} />}</div> ... Component.js ... useMemo(() => compute(a,b),[a,b]); ... 이렇게 작성했을 때 useMemo가 제대로 작동하고 있는지 확인하고 싶은데요. useEffect는 console.log로 확인이 됐는데 useMemo는 어떻게 확인을 할 수 있을까요? (useEffect랑 useMemo는 방식이 달라서 useEffect에 로그를 찍어봤자 useMemo를 확인할 수 없었어요...)
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
firebase admin 코드 추가 강의 부분 여기는 저같은 JS와 리액트까지만 어느 정도 알고 있는 프론트엔드 초급 수준 => 강의 소개에 나온 대상자 수준에서 볼 때 frebase-admin.ts 작성이 설명이 (많이) 생략된 부분도 많고 어렵다는 생각이 듭니다. 그래도 그냥 아~~고렇구나 하고 일단 넘어갔습니다. 아래는 제 기준 뇌정지 부분 정지 정리했습니다. 혹시 다음에 공부하시는 분들도 참고하시라고요ㅠ 7:50초 강의를 3번 돌려보고 30분 넘게 꼼꼼하게 코드 치고 모르는 건 최대한 구글링했습니다아 1.공식문서도 참고하라는 페이지가 2초 화면에 나오고 사라졌는데 나왔는데 여기가 맞나요 https://firebase.google.com/docs/admin/setup 선생님이 하신 거처럼 안하고(제가 이해가 되지 않는 코드는 안쓰는 게 낫지 않을까요?) 공식문서대로 나온대로 쓰는 거랑 무슨 차이인가요 2.싱글톤 패턴...갑자기요? ㅠㅠ 패알못이라서 왜 여기서 싱글톤 패턴 사용하는지 몰겠어요 3. 자바스크립트 에서 클래스 생성하는 문법 까먹어서 뇌정지 모먼트 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes public static, instance, private 등 한번 배우고 까먹은 용어들이 줄줄이 설명없이 나와서 멈추고 찾아봤어요 4.환경초기화 하는 메서드는 왜 bootstrap이라는 이름으로 정하셨나요 제가 아는 bootstrap은 프론트엔드 라이브러리가 전부인데요 이 이름으로 정한 이유가 궁금했어요 5. 05:33 function 처럼 실행하지 않고 field 처럼 실행할꺼라는 말이 무슨 말일까요 6. 썬더클라이언트..다운로드 받은 건 기억이 나는데 설명을 안해주심 대충 느낌은 알았어요 포스트맨 같은 거네요 일단 그래도 config 파일이라서 울면서 넘어가겠읍니다..저빼고 초급자들은 다 이해하셨을까요 저만 5시간 강의 + 추가 50시간 개인학습되는 거 아니겠쥬 앞으로도 계속 마이크로 수강평 남길게요...
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 redux-toolkit에 next-redux-wrapper와 redux-persist 연결하는데 질문드립니다. import userReducer from "@slice/userSlice"; import commonSlice from "@slice/commonSlice"; import localSlice from "@slice/locals"; export const persistConfig = { key: "root", version: 0, whitelist: ["locals"], storage, }; export const rootReducer = (state, action) => { if (action.type === HYDRATE) { return { ...state, ...action.payload, }; } return combineReducers({ user: userReducer, common: commonSlice, locals: localSlice, })(state, action); }; export const reducer = persistReducer(persistConfig, rootReducer); 이렇게 초기 셋팅을 해주었고, export const store = configureStore({ reducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }).concat(logger), devTools: process.env.NEXT_PUBLIC_NODE_ENV !== "production", }); export const persistor = persistStore(store); const setupStore = (context: any): EnhancedStore => store; const makeStore: MakeStore<any> = (context: any) => setupStore(context); export const wrapper = createWrapper<Store>(makeStore); export default wrapper; 이렇게 스토어를 만들었습니다. 그런데 문제가.. persist에서 rehydrate에서는 저장된 값이 유지 되어있으나. next-redux-wrapper의 hydrate에서 초기 스테이트값을 다시 저장해버리는 문제가 있습니다. 둘중 하나를 버려야 할까요? 아니면 셋팅이 잘못된걸까요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요. 모달창 을 띄우고 스크롤을 하면 모달창 밖에 화면이 스크롤이 되는데 이부분도 useRef를 이용해서 막을 수 있을까요??
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요? 강의를 무사히 다듣고 따라 했는데 로컬에서는 문제가 없다가 .env파일과 next.config, 하드코딩된 url 주소를 다 바꿔주었는데도 ec2 환경에서 에러가 뜹니다.
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
로그인을 하지않은 상태에서는 loadUser함수에 의해 /auth/me로 router로 호출이 되어 user미들웨어는 담긴 쿠키가 없으니 next()로 넘어서 auth미들웨어에서 unauthenticated 에러가 뜹니다 로그인을 안한 상태라고 401 에러가뜨는게 맞는건지.. 강의대로 재대로 따라했는지 잘 모르겠어서 질문드립니다 제공된 소스코드랑 비교해도 다른점을 모르겠네요 로그인만 하면 에러는 당연히 안뜨네요
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
const emailUser = await User.findOneBy({ email }); const usernameUser = await User.findOneBy({ username }); if (emailUser) errors.email = '이미 사용 중인 이메일입니다.'; if (usernameUser) errors.username = '이미 사용 중인 이름입니다.'; if (Object.keys(errors).length > 0) { return res.status(400).json(errors); } 이런방식과 QueryBuilder는 뭐가 다른지 왜 그렇게 하는지 궁금합니다.. 연휴에도 질문드려 송구하네요..에고 ^^
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
도커를 사용하지 않으면 postgresql을 사용하지 못하는것인가요? 정말 잘 몰라서 그러는데 도커를 사용해 postgresql을 이용하는것에 장점이 궁금합니다
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
커뮤니티생성 - 커뮤니티 생성핸들러 생성하기(2) 까지 강의를 들은 상황에서 첫 로그인은 network status가 200이 뜨는데 그 다음부터는 어느 페이지든 접근시 GET /api/auth/me 304 가 나옵니다. routes/auth.ts 에서 [변경전] const me = async (_: Request, res: Response) => { return res.json(res.locals.user) } [변경후] const me = async (_: Request, res: Response) => { return res.status(200).json(res.locals.user) } 바꾸었으에도 계속 그러네요.. 왜 그런지 아시나요 아래와 같은 글을 발견했지만 캐싱 이후 그냥 304를 날린다는데 이게 맞는건가요..? https://www.inflearn.com/questions/14571
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
이러한 API_URL은 어떻게 알 수 있을까요 ? https://www.themoviedb.org 사이트에 정보가 나와있는 걸까요 ?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
선생님 강좌 하다보니까 스타일 관련이 좀어려운 부분이 있는데요 혹시 스타일 쉽게 구현하는 법이 있나요? 미디어쿼리 z인덱스니 포지션 이런거 한번에 해결해주는 툴은 없는지요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
const {data:moviedetail} = await axios.get(`movie/${movieId}`,{params:{append_to_reponse:'videos'}}) setmovie(moviedetail) `movie/${movieId}`,{<---------- 이부분이요 params:{append_to_reponse:'videos'}}); 선생님 저 윗 부분은 1. 중괄호로 params를 묶으신건 어떤걸 의미하는건가요? 2.append_to_response:'videos' 이부분은 문법인가요? 감사합니다
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
도커 컨테이너도 실행 잘 되고, 서버 연결도 잘되서 localhost : 4000에서 서버도 잘 띄워집니다. 그런데, 데이터베이스만 연결이 안되는 것 같아요 ㅠㅠ npm run dev 만 하면 이런 에러가 납니다. // docker-compose.yml // data-source.ts 환경변수로도 해봤는데 안되서, 일단은 postgres, password로 입력해 놓은 상태입니당 ㅜ Docker Desktop에 컨테이너에서 로그 같은 기능이 있길래 봤는데 자꾸 비밀번호 인증에 실패 했다고만 나오고 구글링해도 모르겠어용 ㅠㅠ reddit-postgres | 2022-08-28 02:13:17.747 UTC [1] LOG: database system is ready to accept connections reddit-postgres | 2022-08-28 02:13:52.751 UTC [33] FATAL: password authentication failed for user "postgres" reddit-postgres | 2022-08-28 02:13:52.751 UTC [33] DETAIL: Connection matched pg_hba.conf line 100: "host all all all scram-sha-256"
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
선생님 안녕하세요? 강의 잘 듣고 있습니다. Styled Component를 이용한 비디오 배너 만들기에서 iframe에서 src에 movie.videos.results가 없을 경우 오류가 생깁니다. 저는 여기에 옵셔널 체이닝(?.)을 걸어 만약에 movie.videos.results이 없을 경우 undefined를 반환하게 하는 방식으로 해결했습니다. 이렇게 한 경우 오류 페이지가 보이는 대신 동영상을 재생할 수 없다고 뜹니다. 이렇게 하는 방법도 괜찮은지, 혹시 더 좋은 방법이 있다면 가르쳐 주세요. 감사합니다. src={`https://www.youtube.com/embed/${movie.videos.results[0]?.key}?controls=0&autoplay=1&loop=1&playlist=${movie.videos.results[0]?.key}`}
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
TypeError: dispatch is not a function at _callee$ (login.tsx?11e1:20:10) at tryCatch (runtime.js?ecd4:45:16) at Generator.invoke [as _invoke] (runtime.js?ecd4:274:1) at prototype.<computed> [as next] (runtime.js?ecd4:97:1) at asyncGeneratorStep (_async_to_generator.mjs?949a:3:1) at next ( async_to_generator.mjs?949a:25:1) 라는 에러가 뜨는데 어디가 문젠지 모르겠습니다.. ㅠ
