묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
다크모드 관련해서 질문드립니다.
안녕하세요 선생님.제가 사용하고 있는 맥의 시스템 테마를 라이트 모드에서 다크모드로 바꾸니까 클론하고 있는 사이트를 열었을 때 글자들이 다 안 보이더라구요.아마 다크모드임을 인식하고 글자가 하얗게 됐는데 배경은 검정색으로 바뀌지 않아서 그런것 같습니다. 그런데 또 희한하게 트윗을 작성하는 부분(무슨 일이 일어나고 있나요 부분)은 검정색 배경으로 바뀌어 있습니다. 다크 모드에 대응해서 사이트를 보여주기 위해서는 별도의 라이브러리나 CSS 적용을 해야하는 것일까요?
-
미해결Next + React Query로 SNS 서비스 만들기
queryKey를 배열 두개로 설정한 특별한 이유가 있을까요?
다른 코드를 뜯어보고있는데 거기에는 querykey가 이런식으로 배열 한개로 되어있더라고요 두개일경우는 두번째 키가 변수로 들어갈 경우에만 그렇게 되어있던데 강사님께서는 무조건 두개로 지정한 이유가 있을까싶어서요 두개로 했을때 어떤 효과가 있어서 그렇게 하신건지에 대해 궁금합니다. await queryClient.prefetchQuery({ queryKey: ["listItems"], queryFn: getList, });
-
미해결Next + React Query로 SNS 서비스 만들기
post와 postarticle 질문있습니다.
안녕하세요.강의에서 Post 서버컴포넌트에서 PostArticle을 분리하시면서 article 하나 바꾸자고 서버컴포넌트를 클라이언트 컴포넌트로 바꾸기 아깝다고 하시면서 PostArticle 컴포넌트로 따로 분리하셨는데요, 왜 아까운건지 이유를 자세히 알고싶습니다.GPT에도 물어봤는데 이해가 잘 안가서.. 이렇게 질문드립니다ㅠㅠ 자세히 설명해주시면 정말 감사할것같습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
피그마 코드가 안보여서 실습하기가 너무힘들어요
개발자도구도 안켜지고 입문자용 강의인데 눈대중으로 만들어보라는것도 좀.. 노션에라도 따로 어떤식으로 진행해야한다고 적어주셨으면 하네요 그래도 돈을 몇십만원 주고 진행하는 강의인데..
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
해시태그 검색관련 질문있습니다.
자주 질문을 드려 죄송합니다. ㅠㅠ 모르는게 많아서 ㅠㅠ그 해시태그 부분을 작업 하고 있는데 제가 해시태그를 클릭하게 되면 예를 들러 123123을 클릭을 한다 라고 하면 기존 아래에서 검색이 될시 이런식으로 해시태그가 123123만 나오고 나머지 것들은 안나오는 현상이 나오고 있습니다. 코드 같은 경우는 알려주신데로 router.get("/:hashtag", async (req, res, next) => { try { const users = req.user ? req.user.id : null; const offset = (parseInt(req.query.page) - 1) * 10 || 0 const { count, rows: post } = await Post.findAndCountAll({ offset: offset, limit: 10, // DESC 최신순 ASC 오래된순 order: [ ["createdAt", "DESC"] ], include: [ { model: Hashtag, where: { hashtag: req.params.hashtag }, attributes: ["hashtag"], through: { attributes: [] }, }, { model: Image, attributes: ["src"], },{ model: User, attributes: ["nickName"], }], attributes: [ "id", "title", "createdAt", "view", "content", // 좋아요 수 [Sequelize.literal("(SELECT COUNT(*) FROM `Like` WHERE `Like`.`postId` = `Post`.`id`)"), "count"], // 좋아요 여부 [Sequelize.literal("IF((SELECT `postId` FROM `Like` WHERE `Like`.`postId` = `Post`.`id` AND `Like`.`userId` = " + users + "), 1, 0)"), "like"], ], }) const posts = post.map((post) => { const format = post.toJSON() format.hashtag = format.Hashtags.map((tag)=>tag.hashtag) format.src = format.Images.map((img) => img.src).join("") format.nickname = format.User.nickName format.content = format.content.replace(/<[^>]+>|<img.*?>/g, ""); delete format.Images; delete format.User; delete format.Hashtags; return format; }) res.status(201).json({ count, posts }) } catch (error) { console.error(error) next(error) } })이렇게 작성을 하였는데 찾아 보니 where: { hashtag: req.params.hashtag },이렇게 작성을 하게 되면 해당 해시태그에 해당하는 게시물이 불러와 지기는 하는데 검색된 해시태그만 뽑아서 나타나지게 되니 where: { hashtag: { [Op.contains]: [`${req.params.hashtag}`] } },이런식으로 작성을 하면 된다고 해서 써봣는데 "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ''asd' LEFT OUTER JOIN Images AS Images ON Post.`id` = Images.`PostId` LE' at line 1", sql: "SELECT count(`Post`.`id`) AS count FROM Posts AS Post INNER JOIN ( PostHashtag AS Hashtags->PostHashtag INNER JOIN Hashtags AS Hashtags ON Hashtags.`id` = Hashtags->PostHashtag.`HashtagId`) ON Post.`id` = Hashtags->PostHashtag.`PostId` AND Hashtags.`hashtag` <@ 'asd' LEFT OUTER JOIN Images AS Images ON Post.`id` = Images.`PostId` LEFT OUTER JOIN Users AS User ON Post.`UserId` = User.`id`;",이런 에러가 나더라구요... 왜 images에 관련된 문구가 나오는지는 모르겟지만.... 혹시 mysql에서 contains메소드가 사라진건지 아닌지 혹시 고칠수 잇는건지 궁금합니다.제 sequelize 버전은 6.35.2 입니다. ㅠㅠ
-
해결됨Next + React Query로 SNS 서비스 만들기
fetch의 옵션과 관련한 질문드립니다.
강의영상 5분대에서fetch 속에 들어가는 cache등과 같은 옵션등은 https://developer.mozilla.org/ko/docs/Web/API/fetchmdn web doc에서의 fetch 문서를 찾아 문법을 확인하다 이해가 잘 안되는 점이 두개가 있어 문의 드립니다.credentials, headers, cache는 찾았는데 next는 못찾았는데 이 부분은 어느 자료를 보고 사용법을 확인할 수 있는지 모르겠네요. 혹시 next에서 인식하기 위해 태그를 추가하는 것이라면...next: {tags: ['rooms']},에서 rooms 빼고는 고정해서 사용하는 것인가요?headers 부분에서 {Cookie: cookies().toString()} 처럼 key-value 형식을 갖춘 객체로 넣는 것은 필수인가요?그리고 이것과 별개로 제가 쿠키에 어떤 정보들이 저장되는지 잘 몰라서 cookies().toString()에는 어떤 정보들이 담기는 것인지 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
피그마에서 코드가 안보임
해당 강의 내용에서 피그마 사이트에 입장하면, 코드가 보이지 않습니다. 혼자 스스로 코드를 짜보려고 하는데, 아직은 도움이 필요하여 찾아보니 유료 버전을 구입해야 보인다고 하는데..이럼 학습 진도는 어떻게 나가나요...? 속상합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
처음에 패키지 생성만 해도 콘솔에 뜨는 오류가 있던데 이게 뭔가요? Extra attributes from the server
app-index.js:35 Warning: Extra attributes from the server: class at html at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11) at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11) at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:84:9) at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:307:11) at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:182:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:114:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:161:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:538:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:129:11) at RSCComponent at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:145:11)프레임 1개 더 표시 패키지 생성만 했는데 콘솔에 찍히는 오류가 있던데그냥 로컬에서 실행해서 뜨는 오류인건가요?
-
미해결Next + React Query로 SNS 서비스 만들기
page.module.css
안녕하세요! 강의 잘 듣고 있습니다.module이 붙어있으면 각 페이지에서 쓰는 left, right를 구별해준다고 하셨는데page.module.css 가 app 폴더 안에 있어서 전부 다 적용이 되고 있는데 만약 login파일에서 left를 쓰고 signup파일에서도 다른 css를 적용하는 left를 쓰고 싶다면 이 둘은 어떻게 구분을 하나요? page.module.css에 left를 두번 작성하나요..?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
새로운 강의버전은 언제 나오나요 ?
새소식에 올라온 솔로트립을 기반으로 한 새로운 강의는 언제쯤 올라오나요?
-
미해결[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Slider은(는) JSX 구성요소로 사용할 수 없습니다. 오류가 발생해요ㅠㅠ
이 문제가 해결이 안돼서 진도를 못나가고 있습니다ㅜㅜ구글링하니 버전이 달라서 그렇다고 해서 package.json파일도 삭제하고 다시 설치하고 이것저것 다 해봤는데도 도저히 해결이 안되네요.. 살려주세요ㅠㅠㅠ
-
미해결Next + React Query로 SNS 서비스 만들기
혹시 suspense를 아직 적용하지 않은 상태여도 useSuspenseQuery를 적용해도 되나요
영상 마지막에서 말하는 것처럼 웬만한 경우에 추천된다면, suspense를 아직 적용하지 않은 상태에서도 useQuery 대신에 useSuspenseQuery를 써도 동작하는데 문제 없는 건가요?
-
해결됨Next + React Query로 SNS 서비스 만들기
js 문법과 관련해서 응용방안에 대해 문의드립니다.
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 서비스 만들기
회원가입-status 201 Ok- 리다이렉트 안되는 현상
일전에 동일한 문제로 질문 올렸는데, 혹시나 제 코드에 발견되지 않은 오타나 문제가 있을까하여 제로초님 깃에서 다운받은 ch4폴더로 실행해도 동일한 문제 발생합니다. MacOs: Ventura 13.6.4크롬브라우저로 보고있습니다.DB연결문제는 Postgresql은 버전을 낮춰서 Homebrew로 설치하고, Username을 맥os 유저네임으로 변경하니까 다행히 연결이되었습니다.그런데 여전히, 회원가입후 리다이렉트 안되는 현상과 심지어 회원가입 된 Postgresql 테이블에 User정보도 잘 들어가있고, 회원가입된 유저의 id,비번으로 로그인해도 로그인도 안됩니다.package.json 버전정보:클라이언트에서 리턴받은 값:서버에서 나오는 console:무엇이 문제일까요?
-
해결됨Next + React Query로 SNS 서비스 만들기
개념이 잘서지 않아서, ssr/csr관련 seo 문제
어떤 답변중 csr로 해도 metadata 설정으로 seo 가 가능하다 본듯합니다. ssr이 seo에 유리하다하여 ssr방식으로 해보려 한 이유도 일부있는데 csr로도 충분히 커버가 가능한것인지요?선생님의 의견여쭙고 싶습니다. 감사합니다!
-
해결됨Next + React Query로 SNS 서비스 만들기
generic type과 관련하여 문의드립니다.
useQuery사용할 때 <> 속에 넣는 generic type이 <쿼리함수로 나오는 값, 오류시 나오는 값, 최종 결과, 키로 넣는 값>의 타입이라는 것을 강의 및 검색을 통해서 인지하였습니다.그런데 공식문서 검색을 해보니 이런 설명을 안해주는거 같더라고요.https://tanstack.com/query/latest/docs/framework/react/reference/useQueryhttps://tanstack.com/query/latest/docs/framework/react/typescript혹시 타입스크립트에서 generic type에 어떤것을 넣어야 하는지 모르는 경우에는 어떻게 찾는게 일반적인 방법인가요?
-
해결됨Next + React Query로 SNS 서비스 만들기
실제 현업에서 특정 페이지 진입 시, replace 또는 redirect 만 시키는 경우가 있을까요?
로그인 모달에서 발생하는 문제 해결하기(router.replace) 위 강의 시청 중 질문드립니다.실제로 위와 같이 login 페이지에서 어떠한 주요 로직 실행없이다른 페이지(i/flow/login)로 replace 또는 redirect만 시키는 경우가 있을까요?실제로 이런 동작이 필요한 경우가 있다면 어떤 경우에 필요하게 될 지 궁금합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
js 문법 관련하여 질문드립니다.
제가 아직 타입스크립트 문법에 익숙하지 않아서 강의 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기능을 제공하는 웹사이트에서 검색결과 주소에 물을표를 넣는 이유도 그냥 일반적인 약속 같은 것인지 같이 궁금합니다.
-
미해결[손에 익는 Next.js] Part 2 - 마이그레이션하기
Create React App에서 Next.js로 마이그레이션하기 의 깃허브 소스도 npm i 하면 에러가 발생합니다.
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 관련한 안내 좀 부탁합니다.