173만명의 커뮤니티!! 함께 토론해봐요.
미해결
코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
MongoDB compass에서 new connection에서 말씀하신 대로 mern, merntest, admin 이렇게 설정해주고, connect 버튼을 눌렀는데 Authentication failed라는 오류가 뜹니다. 어느 부분에서 오류가 난 건가요..?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
현재 vercel에 정상 배포한 후 확인해보았는데 src/pages/Diary.jsx 에 존재하는 if (!curDiaryItem) { return <div>데이터 로딩중...</div>; } 이렇게 설정한 부분만 보이고 기존에 보여져야 할 것들이 모두 안보이는데 이유를 모르겠습니다 ㅠ 그리고 <meta property="op:image" content="/thumbnail.png" /> 로 지정해주었는데 왜 이것만 잘 안되는지 모르겠습니다.. 현재 vercel 주소입니다. https://emotion-diary-sable-theta.vercel.app/ github repo주소입니다. https://github.com/jjacksang/one-bite-react-v2
미해결
Next + React Query로 SNS 서비스 만들기
지금 제로초님은 벡엔드와 프론트서버를 구분해두셨고 백엔드서버는 ec2에 올리지않아서 백엔드와 관련된 것들은 작동하지 않는 상태인데, 만약에 fetch할때 백엔드서버주소가 아닌 프론트쪽 경로로 해서 하면 본 강좌에서 한것과 같이 ec2로 배포를 해도 작동을 할까요? 아니면 이경우 배포방법이 달라지나요?
미해결
Next + React Query로 SNS 서비스 만들기
게시물 추천 탭에서는 게시하기 버튼 클릭하면 게시물 업로드가 잘 작동됩니다. 그러나 팔로우 중 탭에서 게시하기 버튼을 클릭하면 에러가 발생합니다. 게시물 게시하기 코드는 아래와 같습니다. const mutation = useMutation({ mutationFn: async (e: React.FormEvent) =>{ e.preventDefault(); const formData = new FormData(); formData.append("content", content); imgPreview.forEach((img) => { img && formData.append("images", img.file); }); return fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts`, { method: "post", credentials: "include", body: formData, }); }, onSuccess: async (response) => { const newPost = await response.json(); setContent(""); setImgPreview([]); if (queryClient.getQueryData(["posts", "recommends"])) { queryClient.setQueryData( ["posts", "recommends"], (prev: { pages: Post[][] }) => { const shallow = { ...prev, pages: [...prev.pages] }; shallow.pages[0] = [...shallow.pages[0]]; shallow.pages[0].unshift(newPost); return shallow; } ); } if(queryClient.getQueryData(["posts", "followings"])) { console.log("get", queryClient.getQueryData(["posts", "followings"])); queryClient.setQueryData( ["posts", "followings"], (prev: { pages: Post[][] }) => { const shallow = { ...prev, pages: [...prev.pages] }; shallow.pages[0] = [...shallow.pages[0]]; shallow.pages[0].unshift(newPost); return shallow; } ); } }, onError: (error) => { console.error(error); alert("업로드 중 에러가 발생했습니다"); }, }); 최근 새소식을 보고 useSuspenseQuery 가 문제가 있다는 것을 보고 Suspense 없애고 기존에 사용한 TabDecider 컴포넌트로 변경했습니다. // src\app\(afterLogin)\home\page.tsx export default async function Home() { const session = await auth(); return ( <main className={styles.main}> <TabContextProvider> <Tab /> <PostForm me={session} /> <TabDecider /> </TabContextProvider> </main> ); } 네트워크 탭에서 posts 요청은 성공했다고 나와있습니다. 새로고침하면 업로드가 제대로 되지만 게시하기 버튼 클릭하면 onError 에서 발생하는 '업로드 중 에러 발생' 알림창이 나옵니다. react-query devtools에서 mutation 에러를 확인하니 인피니트 스크롤링하는 pages에 관한 오류가 나왔습니다. FollowingPosts 컴포넌트와 PostForm에서 queryClient.getQueryData(["posts","followings"] 에서 받는 데이터를 출력해보니 아래와 같은 데이터 구조를 가지고 있습니다. FollowingPosts 컴포넌트 코드는 다음과 같습니다. export default function FollowingPosts() { const { isPending, data } = useQuery<PostType[]>({ queryKey: ["posts", "followings"], queryFn: getFollowingPosts, staleTime: 60 * 1000, gcTime: 300 * 1000, }); if (isPending) return <Loading />; console.log("data2", data); return data?.map((post) => <Post key={post.postId} post={post} />); } FollowingPosts 컴포넌트에서는 useInifiniteQuery 가 아닌 useQuery 를 통해 데이터를 받아와서 데이터 안에 있는 pages가 없어서 이런 오류가 나오는걸까요?? 우선 useInfiniteQuery 로 변경해 게시물을 등록하면 잘 작동되는 것은 확인했습니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요! 강의와 직접적으로 관련된 질문은 아니지만 도저히 해결책을 도저히 찾기가 어려워서 질문 글 올립니다.. 하나의 Next.js 프로젝트에서 백엔드 api를 구성할 때, node.js와 파이썬 서버리스 함수를 함께 사용할 수 있나요? 백엔드로 파이썬 서버리스 함수를 단독으로 사용하는 것은 가능한 것 같은데, 동일한 프로젝트에서 node.js 서버리스 함수와 함께 사용할 수 있는지가 궁금합니다..
해결됨
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
// 숙제1 next가 아닌 이전것 prev를 구하기 // 숙제2 삽입이 시간복잡도가 O(n)인데 O(1)으로 변경하기 (hint tail) class Node { constructor(value) { this.value = value; this.next = null; this.prev = null; } } class LinkedList { constructor(length = 0) { this.length = length; this.head = null; this.tail = null; } add(value) { const newNode = new Node(value); if (this.head === null) { this.head = newNode; this.tail = newNode; } else { /* 수정 const [prev] = this.#search(this.length - 1); this.tail.prev = prev; this.tail.next = newNode; newNode.prev = this.tail; this.tail = newNode; */ newNode.prev = this.tail; this.tail.next = newNode; this.tail = newNode; } this.length++; return this.length; } search(index) { return this.#search(index)[1]?.value; } prevSearch(index) { return this.#search(index)[0]?.value; } currentAndPrevNode(index) { return this.#search(index); } #search(index) { let count = 0; let prev; let current = this.head; while (count < index) { prev = current; current = current?.next; count++; } return [prev, current]; } remove(index) { const [prev, current] = this.#search(index); if (prev && current) { if (!current.next) { // 마지막 노드 삭제일경우! prev.next = null; // 마지막 노드 삭제일때 이전 노드의 next를 null로 만들어주면 끝 this.tail = prev; // 마지막 노드를 삭제 했기 때문에 tail을 이전 노드로 바꾸어주어야 한다. } else { // 중간 삭제 일때 prev.next = current.next; current.next.prev = prev; // 현재 노드의 next노드의 이전 노드 prev를 prev 노드로 변경 } this.length--; return this.length; } else if (current) { // index 0일 때 this.head = current.next; this.length--; return this.length; } else { // 삭제하고자 하는 대상이 없을 떄 // 아무것도 안함 } } } const linkList = new LinkedList(); linkList.add(1); // 삭제 linkList.add(2); linkList.add(3); linkList.add(4); linkList.add(5); // 삭제 linkList.add(6); linkList.add(7); linkList.add(8); // 삭제 console.log(linkList.search(6)); // 7 console.log(linkList.prevSearch(2)); // 2 console.log(linkList.tail.prev.value); // 마지막 꼬리의 이전이니까 7 console.log(linkList.remove(0)); // 첫번째 삭제 7 console.log(linkList.prevSearch(2)); // 3 console.log(linkList.tail.prev.value); // 마지막 꼬리의 이전이니까 7 console.log(linkList.remove(6)); // 마지막 삭제 6 console.log(linkList.tail.prev.value); // 삭제후 꼬리 이전이니까 6 console.log(linkList.tail.next); // null console.log(linkList.remove(3)); // 5 const [prev, cur] = linkList.currentAndPrevNode(3); // 첫번째 튜플은 이전노드 두번째 튜플은 현재 노드 console.log(prev.value); // 4 console.log(prev.next.value); // 6 console.log(cur.value); // 6 console.log(cur.prev.value); // 4 ::) prev와 tail을 추가 하였고 add 메서드와 remove 메서드를 수정 하였습니다. 질문1) 연결리스트 구현 숙제에 해당하는 정답 코드인지 리뷰 부탁드려도 될까요? 질문2) tail만 사용 했을때는 O(1) 시간복잡도를 가지게 add 메서드를 구현했었는데 prev가 추가되면서 const [prev] = this. #search (this.length - 1); 로직을 추가하여 prev를 구해서 O(1)가 아니게 된것 같은데 무언가 더 좋은 방법이 있을것 같습니다! (저는 고민 해봤는데 모르겠습니다)
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
5장까지 너무나도 좋은 강의 감사하며 잘듣고 있습니다. 질문이 있는데요 왜 useTodoController를 TodoList 컴포넌트에서 가져와서 직접쓰지 않고 TodoContainer에서 불러와서 props로 주는건가요?? TodoList로 바로 받으면 TodoContainer도 만들 필요 없지 않나요??
미해결
김일한의 리액트(React) 개발자를 위한 실습을 통한 입문 과정
시중 서점에 판매되는 책중에, 이 강의를 따라 배우며 같이 볼 수 있는 교재 있으면 알려주시면 좋겠습니다.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
Image 의 특정 컬럼만 select 하고 싶어서 find 옵션에 아래와 비슷하게 적용했더니, transform 데코레이터가 적용이 되지 않네요. chatGPT 에게 물어보니 transform 데코레이터 적용을 받으려면 QueryBuilder 를 쓰라는데, 가독성이 떨어질 것 같아서 찜찜하네요. 다른 방법은 없을까요? 아니면 일단 그냥 인강대로 쭉 진행한 다음 Prisma 로 빠르게 마이그레이션 한 다음에 이런 고민을 진행하는 게 나으려나요? export const POST_FIND_OPTIONS: FindManyOptions<PostsModel> = { select: { id: true, ..., images: { path: true } }, relations: ['images', 'author'], };
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
백엔드 run은 가능하지만, front에서 run이 안되더라구요. 원인은 webpack 관련 에러인 것을 확인했고, chat gpt를 통해 에러 해결하려 하니, 또 다른 에러가 발생했습니다. 제가 잘못 건들인건지 잘 모르겠지만, 왜 그런지 알고 싶습니다. 혹시나 해서 깃도 같이 올려드립니다. https://github.com/bukwon/boiler-plate
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
좋은 강의 감사합니다! DB에는 파일명만 저장되어있고 post POST 요청보낼때도 파일명만 보내는데, 어떻게 post get요청을할때 public/posts가 붙는건가요?
미해결
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를 실행하려는데 해당 에러가 발생했습니다. 어떻게 해결해야 할까요? 검색해도 나와있지 않습니다
미해결
[리뉴얼] 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 강의를 구매하시면 코드팩토리 디스코드 서버 플러터 프리미엄 채널에 들어오실 수 있습니다! 디스코드 서버에 들어오시고 저에게 메세지로 강의를 구매하신 이메일을 보내주시면 프리미엄 채널에 등록해드려요! 프리미엄 채널에 들어오시면 모든 질의응답 최우선으로 답변해드립니다!
