173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Only Javascript만으로 배우는 하이브리드앱 패키징
window.plugins.OneSignal.setAppId(); 위 코드 입력 시 화면이 black screen으로 표시됩니다. 하지만 onesignal 연동도 잘되고 푸시 메시지 발송되 잘 됩니다. 원인이 무엇일까요? android 구버전과 최신버전 모두에서 그렇습니다.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
1번 질문 next9 버전을 다운받아서 실행 했더니 오류가 나서 찾아봤는데 node버전이 높아서 호환 관련 문제로 실행이 안되는 오류가 있었습니다. next14 버전으로 진행했는데 앞으로도 괜찮나요? 2번 질문 pages 폴더안에 index.js파일은 /이고 그 외에 이름은 /profile, /signup 구조인것 같은데 어떤 경우에 폴더구조를 사용하고 어떤 경우에 js파일의 이름을 변경해서 사용해야 하는지 궁금합니다.
해결됨
Next + React Query로 SNS 서비스 만들기
PostRecommends에서 전달한 post를 Post 컴포넌트에서 받아 표시하면 User에서만 오류가 발생합니다. User에 대한 정보를 다 받아오는데 Post 컴포넌트에서는 아무것도 표시되지 않습니다. 프로필 탭을 눌러 User.id 페이지로 이동하면 오류가 발생합니다. Cannot read properties of undefined (reading 'User') User에 옵셔널 체이닝을 붙여도 동일한 오류가 발생합니다. Post 코드 첨부합니다. import { Post as IPost } from "@/model/Post"; dayjs.locale("ko"); dayjs.extend(relativeTime); type Props = { noImage?: boolean; post: IPost; }; export default function Post({ noImage, post }: Props) { const target: IPost = post; if (Math.random() > 0.5 && !noImage) { target?.Images.push( { imageId: 1, link: faker.image.urlLoremFlickr() }, { imageId: 2, link: faker.image.urlLoremFlickr() }, { imageId: 3, link: faker.image.urlLoremFlickr() }, { imageId: 4, link: faker.image.urlLoremFlickr() } ); } return ( <PostArticle post={target}> <div className={style.postWrapper}> <div className={style.postUserSection}> <Link href={`/${target.User?.id}`} className={style.postUserImage}> <img src={target.User.image} alt={target.User.nickname} /> <div className={style.postShade} /> </Link> </div> <div className={style.postBody}> <div className={style.postMeta}> <Link href={`/${target.User.id}`}> <span className={style.postUserName}>{target.User.nickname}</span> <span className={style.postUserId}>@{target.User.id}</span> · </Link> <span className={style.postDate}> {dayjs(target.createdAt).fromNow(true)} </span> </div> <div>{target.content}</div> <div> <PostImages post={target} /> </div> <ActionButtons /> </div> </div> </PostArticle> ); }
미해결
[리뉴얼] React로 NodeBird SNS 만들기
프론트 axios에서 baseurl을 https://api.count101.shop으로 설정했는데 요청을 보내보니깐 request url이 https://count101.shop/https/api.count101.shop/user/autoLogin 이런식으로 앞에 https://count101.shop이 붙어버리는데 어디를 수정해야 될 지 모르겠습니다,,
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
상품 등록시에 판매자 데이터를 넣는거같은데 gpl query문에서 seller, buyer를 어떤 형식으로 작성해야 되는지 모르겠습니다 데이터는 fetchUserLoggedin으로 넣는게 맞는지도 궁금합니다
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요. 첫번째 질문은 onMutate vs onSuccess 인데 사실 낙관적 업데이트를 해주냐 안해주냐에 따라서 기호에 따라 다른 경우는 알겠습니다. 제가 궁금한거는 onSuccess invalidatequeries 를 무지성으로 사용해도 query-key외 따로 전달 되는 params값이 중요하진 않은 것 같아서 쉽게 적용 했었던 기억이 있는 것 같습니다/ 예를 들면 onSuccess를 해주는 mutation에 invalidatequeries로 invalidatequeries(['key', {...}]) 를 굳이 안하고 invalidatequeries(['key']) 요거만 해줘도 새로 캐싱된 API를 새로 조회 하는 것 같더라구요. 근데 onMutate를 쓰려는 경우에 getQueryData 에 query-key 정보와 그에 매칭하는 파라메터를 정확하게 넘겨주지 않으면 undefined 같은데 애초 설계 할때 getQueryData뒤에 보내는 파라메터를 잘 가져 올 수 있게 해야 할지 혹시 다른 방법이 있는지 궁금합니다. query에서 find해서 찾기는 보장이 안되는 것 같구요? 이건 사용자가 셀렉트 박스로 막 선택해서 조회 다시 이전것 조회 요런식으로 하다보니 마지막으로 선택된 파람 정보가 명확하진 않더라구요. 현재는 혹시 모르니 전부 searchParams로 개편은했지만.... 실제 프로젝트에서는 어드민성(?) 서비스를 제공 해서 ux는 딱히...?????? 엄청 중요한 않기도 했고 지식도 부족해서 onMutate 대신에 onSuccess를 썼지만 보통은 좀 어떻게 잘 써야하는지 궁금합니다. 2번째 질문은 이건 진짜 뭘 더 써야하는지 모르겠습니다. 쓰임에 따라 다르게 써야한다면 어떤 경우인지 취향에 차이라면 취향것 쓰면 되는건지 궁금합니다
미해결
[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
제목 그대로입니다. 출처 명시하여 요약된 내용을 정리해서 올려도 될까요 ?
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
yarn add express 을 여러번 하고, 구글링을 통해 현재는 node_modules 가 생성되지 않는 것까지 파악했습니다. { "name": "NestJS", "packageManager": "yarn@4.2.2", "dependencies": { "express": "^4.19.2" } } 현재 의존성이 다음과 같이 세팅되어 있는데 맨 위 사진처럼 cannot find modules 가 나오는데, 방법이 있을까요? - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 코드팩토리 통합 링크 https://links.codefactory.ai Flutter 강의를 구매하시면 코드팩토리 디스코드 서버 플러터 프리미엄 채널에 들어오실 수 있습니다! 디스코드 서버에 들어오시고 저에게 메세지로 강의를 구매하신 이메일을 보내주시면 프리미엄 채널에 등록해드려요! 프리미엄 채널에 들어오시면 모든 질의응답 최우선으로 답변해드립니다!
미해결
[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문
async/await 그리고 promise 에 대한 부분이 윗부분 강의에서 나오지 않았는데 어디를 먼저 듣고 와야하는 걸까요 ? 아니면 이 부분은 제가 따로 책으로 공부하고 들어야하는 건가요 ?
미해결
Next + React Query로 SNS 서비스 만들기
수업을 다 듣고 저 스스로 코드를 짜던중 갑자기 놓친부분이 있는 것 같아 여쭤봅니다. 혹시 <search/page.tsx> export default function Search({ searchParams }: Props) { 여기서 이 search/page.tsx의 매개변수는 누가 넘겨주는 걸까요?
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
안녕하세요. 강의 잘 듣고 있습니다. 막히는 부분에서 부분별로 강의를 들으면서 하는데, 개념 잡기에는 좋은데.. 실무에서 변형하면서 사용하려니 막히는 부분이 생기네요.. ㅡ.ㅜ; 우선 주문 데이타를 기가별로 조회를 하려고 하는데, 안되고 있습니다. 구글링과 스택쪽을 찾아봐도 딱히 잡히는것도 없고.. gpt가 알려준대로 해도 안되네요.. db는 postgreSQL로 최신버전이며.. 구성은 nest.js + prisma + swagger + graphQL로 구성되어 있으며, 버전은 최신버전으로 현재 구성된 상태입니다. // schema.prisma model Order { .... order_date DateTime? } // orders.controller.ts async getOrdersByDateRange( @Query('start_date') start_date: string, @Query('end_date') end_date: string, ): Promise<Order[]> { const startDate = new Date(start_date); const endDate = new Date(end_date); if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) { throw new BadRequestException('날짜 형식이 잘못되었습니다.'); } return this.ordersService.getOrdersByDateRange(startDate, endDate); } // orders.service.ts async getOrdersByDateRange( start_date: Date, end_date: Date, ): Promise<Order[]> { const orders = await this.prisma.order.findMany({ where: { order_date: { gte: new Date(start_date.setHours(0, 0, 0, 0)), // 시작일 00:00:00 lte: new Date(end_date.setHours(23, 59, 59, 999)), // 종료일 23:59:59.999 // gte: start_date, // 이것도 안됨 // lte: end_date, // 이것도 안됨 }, //order_date: Between(start_date, end_date), }, }); if (!orders || orders.length === 0) { throw new NotFoundException( `기간 내에 주문 데이터가 없습니다.`, ); } 디비쪽 데이타를 이와 같습니다. 입력 값은 start_date : 2024-05-01 end_date : 2024-06-05 이렇게 전달해서 조회하는데, 아무런 데이타를 못 가져오고 있습니다. request url : http://localhost:3000/orders/dateRange?start_date=2024-05-01&end_date=2024-06-05 response body: { "message": "Order with ID dateRange not found.", "error": "Not Found", "statusCode": 404 } 이처럼 출력되고 있습니다. 아무리 해 봐도 안되어서 질문 드립니다. 알려주시면 감사하겠습니다.. ㅜ.ㅜ
미해결
Next + React Query로 SNS 서비스 만들기
저는 미리보기하면 PostRecommend.tsx부분이 아예 안뜨는데 뭐가 잘못된지 모르겠어서 질문드립니다. (단, 화면에 정상적으로 post들은 문제없이 뜹니다.) <PostRecommend.tsx>의 코드는 아래입니다. "use client" import Post from "../../_component/Post"; import { useQuery } from "@tanstack/react-query" import { getPostRecommends } from "../_lib/getPostRecommends" import { Post as IPost } from "@/app/model/post"; export default function PostRecommend(){ const {data} = useQuery<IPost[]>({queryKey:['posts','recommends'],queryFn:getPostRecommends}); return data?.map((post)=> <Post key={post.postId} post={post}/> ) } 또한 Post.tsx에서 넘겨받은 post를 console.log해봤는데 undefined가 나와 이것과 연관되어있지않나 싶어서 Post.tsx의 코드도 올리겠습니다. import style from './post.module.css'; import Link from "next/link"; import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; import 'dayjs/locale/ko'; import ActionButtons from "@/app/(afterLogin)/_component/ActionButtons"; import PostArticle from "@/app/(afterLogin)/_component/PostArticle"; import {faker} from '@faker-js/faker'; import PostImages from "@/app/(afterLogin)/_component/PostImages"; import { Post as IPost } from '@/app/model/post'; dayjs.locale('ko'); dayjs.extend(relativeTime) type Props = { noImage?: boolean, post:IPost, } export default function Post({ noImage,post }: Props) { const target = post; console.log("+++++++@@@@@@"+target); return ( <PostArticle post={target}> <div className={style.postWrapper}> <div className={style.postUserSection}> <Link href={`/${target.User.id}`} className={style.postUserImage}> <img src={target.User.image} alt={target.User.nickname}/> <div className={style.postShade}/> </Link> </div> <div className={style.postBody}> <div className={style.postMeta}> <Link href={`/${target.User.id}`}> <span className={style.postUserName}>{target.User.nickname}</span> <span className={style.postUserId}>@{target.User.id}</span> · </Link> <span className={style.postDate}>{dayjs(target.createdAt).fromNow(true)}</span> </div> <div>{target.content}</div> {!noImage && <div> <PostImages post={target} /> </div>} <ActionButtons/> </div> </div> </PostArticle> ) }
해결됨
Next + React Query로 SNS 서비스 만들기
게시물 업로드할 때 status: 500 Internal Server Error 가 나옵니다. 게시물 업로드 함수는 아래와 같습니다. const onSubmit = async (e: React.FormEvent) => { e.preventDefault(); const formData = new FormData(); formData.append("content", content); imgPreview.forEach((img) => { img && formData.append("images", img.file); }); await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts`, { method: "post", credentials: "include", body: formData, }); }; 작성한 폼데이터를 전송한 응답을 출력해보니 status:500, Internal Server Error가 나옵니다. 네트워크 탭에서 확인해보니 formData는 제대로 전송되는 듯해요. 서버 로그로 확인한 결과입니다. 서버에서 문제가 발생한걸까요 ?
미해결
Next + React Query로 SNS 서비스 만들기
Suspense로 Streaming하여 최적화하기(feat. loading.tsx, error.tsx) 해당 강의 예제 코드를 보려고 github에서 이리저리 굴러봐도 강의 예제코드와 동일한 코드가 보이지 않아서 질문 올리게 되었습니다. 혹시 suspense hook / reactQuery로 suspense 사용해보기에 관한 맛만 보여주시고 깃에서는 확인 불가능한걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
만약 도커로 백엔드 실행하기싫고, 내 로컬에서 백엔드 실행한다고하면 mongoose .connect("mongodb://my-database:27017/mydocker") .then(() => { console.log("DB 연결 성공"); }) .catch((err) => console.log("DB 연결 실패", err)); connect부분을 로컬호스트:27017로만 변경하면 되는거는 알겠는데.. 너무 번거로운거같은데 혹시 .env에 설정하는 방식같은게 없을까요? 예를들면 프로덕션, 개발모드에 따라서env를 바꿀수있잖아유 그런것처럼 도커컨테이너 환경 혹은 그냥 로컬에서 백엔드 실행했을때환경 이런걸 구분할수있는 방법은없나유?
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
AI 답변이 어느정도 편리할 수 있단 건 인정하지만, 질문 답변도 강의서비스에 포함된 것인데 어느 순간부터 강의제공자님의 직접답변은 달리지 않고 AI 답변만 달리네요. 그것만으로 전혀 충분하지 않은데 말이죠 그리고 AI 답변은 기존 데이터가 없으면 답변을 못해줍니다. 강의제공자로부터 피드백을 받을 수 있을 것을 기대하고 강의를 수강하는데 이렇게 질문답변 조차 제대로 해결이 되지 않고 있는 것은 문제라고 봅니다. 몇년 동안 강의를 걸어놓으 실 거면, 그리고 여러 API를 사용하실 거면 적어도 일년에 한번은 UI나 기능에 변화나 업데이트 가 있는지 확인하고 강의에 반영해주셔야 할 것 같은데 아직도 2022년 버전을 그대로 강의에 걸어두셔서 현재 UI와 완전달라 강의 진행이 제대로 안되고 있습니다. 이게 정말 제대로 되고 있는게 맞나요? 무료 강의도 아니고 돈내고 듣는 강의에서 기본적인 내용 업데이트 및 강의에 포함된 질문 답변조차 제대로 진행 되지 않는다는 건 매우 실망 스럽습니다. 강의 제공자님의 빠른 직접 답변과 피드백 부탁드립니다.
미해결
Next + React Query로 SNS 서비스 만들기
http.post('/api/logout', () => { console.log('로그아웃'); return new HttpResponse(null, { headers: { 'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0' } }) }), 위 코드가 제로초님이 로그아웃을 위한 handler를 짜놓으신 건데 정작 로그아웃을할때는 const onLogout = () => { signOut({ redirect: false }) .then(() => { router.replace('/'); }); }; 위와 같이 그저 signOut 함수만 사용하고있으며 로그인때와 같이 따로 providers에서 fetch 경로를 설정해준것도아닌데 next-auth에서는 어떻게 signOut의 경로가 /api/logout인지 아는건가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 graphql 부분에서 조금 헷갈려서 질문을 드립니다. 1. 이 부분에서 왼쪽부분에서 판매자 이름이 철수이고 createProductInput은 마우스, 정말 좋은 마우스 그리고 가격을 사용자가 저렇게 마우스 가격등을 input에 작성하면 name, detail, price가 생성된다라는 뜻으로 이해하면 좋을까요? 그리고 그 밑에 _id는 윗부분에 마우스라고 생성해서 나온 마우스라는 제품의 id를 보낸다는 뜻인지도 궁금합니다.
미해결
Next + React Query로 SNS 서비스 만들기
isPending은 데이터를 불러오고 있을 때, true가 되고 isLoading 은 쿼리가 처음으로 실행될 때 true 가 되는 것으로 알고 있습니다. 제가 이해하기로는 두 속성의 개념이 상당히 많이 겹칠 수 있을 것 같은데, 왜 이렇게 개별로 있는 것인지 궁금합니다.
미해결
Next + React Query로 SNS 서비스 만들기
http.post('/api/users', async ({ request }) => { console.log('회원가입'); // return HttpResponse.text(JSON.stringify('user_exists'), { // status: 403, // }) return HttpResponse.text(JSON.stringify('ok'), { headers: { 'Set-Cookie': 'connect.sid=msw-cookie; HttpOnly;Path=/;Max-Age=0' } }) }), 현재 위 코드가 제로초님의 회원가입 코드인데 로그아웃을 할때 세션을 만료하기위해서 Max-Age=0을 넣는것은 이해가 되지만 왜 굳이 회원가입을 할때도 Max-Age=0을 붙이신건가요? 회원가입시 쿠키가 왜 필요한지와 필요하다고하더라도 왜 굳이 바로 Max-Age=0을 추가해서 바로 만료시켜버리는지가 궁금합니다!
