묻고 답해요
135만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
수업 외적질문...
이건 수업 외적인 질문인데요. 목소리가 달라서 다른 강사님이시지만.. 똑같은 코드팩토리 Flutter 수업듣고있는데요TypeScript 와 Nest js 를 사용하시면 React Native 를 학습하시고사용하시는게 나을수도 있을텐데 , Flutter 를 선택하신 이유가 있나요 ??React Native 가 성능이 비교적 Flutter 보단 안좋다고 하지만 큰 기업들에선 React Native 도 많이 사용하고 있던데 그럼 쓰는사람에 따라 다른게 아닐까?? 생각도 했거든요
-
해결됨React 기반 Gatsby로 기술 블로그 개발하기 v2
Github Actions 배포 이후 ReadMe만 보이는 에러
깃허브 액션으로 배포하는 강의 자료부분 하는 중인데build가 완료돼도 배포된 사이트에선 리드미 파일만 보이는데 무슨 문제인지 잘 모르겠습니다ㅠhttps://github.com/jihun-24k/jihun-24k.github.io
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
alias 경로 설정 오류
안녕하세요 제로초님components 의 alias 경로가 오류가 나서요 질문 드립니다저는 src 폴더를 추가해서 한번 더 감싼 구조에서 이에 맞게 alias 경로를 세팅했는데요import { TextField, Button } from '@components'; 이렇게 불러오면 components 폴더의 index 파일이 자동으로 인식되는 걸로 알고 있는데, 에러가 뜨더라구요그래서 import { TextField, Button } from '@components/index'; 로 해야 정상적으로 불러오던데 왜 index를 별도로 입력해야 하는지 모르겠어서요반면 @assets alias 경로에 있는 icons는 index 입력 없이 index 파일을 잘 불러와서 문제가 없더라구요 // webpack.config.ts alias: { '@assets': path.resolve(__dirname, './src/assets'), '@hooks': path.resolve(__dirname, './src/hooks'), '@components': path.resolve(__dirname, './src/components'), '@layouts': path.resolve(__dirname, './src/layouts'), '@pages': path.resolve(__dirname, './src/pages'), '@utils': path.resolve(__dirname, './src/utils'), '@typings': path.resolve(__dirname, './src/typings'), }, // tsconfig.json "paths": { "@assets/*": ["./src/assets/*"], "@hooks/*": ["./src/hooks/*"], "@components/*": ["./src/components/*"], "@layouts/*": ["./src/layouts/*"], "@pages/*": ["./src/pages/*"], "@utils/*": ["./src/utils/*"], "@typings/*": ["./src/typings/*"] }
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
강의 다 듣고 수료증 받을 수 있죠?
강의 다 들으면 수료증 받을 수 있죠?제출해야되서요..
-
미해결Slack 클론 코딩[실시간 채팅 with React]
fetcher 함수의 data 값이 두번 찍히는 이유
Login.tsx에서 swr로 호출한 users의 data 값을 return 직전에 console 로그로 찍어봤는데요네트워크 탭에서는 users 요청은 한번 밖에 없었는데undefined와 false가 연달아서 찍히더라구요다른 질문에서 답변해주신 내용을 보니 데이터 로딩중엔 undefined라고 말씀해주셨는데, 맨 처음 컴포넌트가 렌더링될 때 useSWR이 api를 호출하게 되고 이때 console.log(data)는 아직 데이터가 로딩 중이라서 undefined가 찍히게 되고, 이후 데이터 로딩이 완료되면 useSWR이 다시 호출되어? false가 찍히는 프로세스로 이해했는데 맞는걸까요그렇다면 useSWR로 api호출 시 무조건 최소 2번 렌더링될 수 밖에 없는걸까요?// Login.tsx import React, { useState, useCallback, useEffect } from 'react'; import { TextField, Button } from '@components/index'; import { Link, Navigate } from 'react-router-dom'; import { useInput } from '@hooks/useInput'; import { LogoSlack } from '@assets/icons/'; import axios from 'axios'; import useSWR from 'swr'; import fetcher from '@utils/fetcher'; const Login = () => { // useSWR은 get으로 요청한 데이터를 받아와서 저장한다. // mutate : 내가 원할 때 SWR 호출하기 const { data, error, mutate } = useSWR('http://localhost:3095/api/users', fetcher, { dedupingInterval: 5000, // 주기적으로 호출하지만, dedupingInterval 기간 내에는 캐시에서 불러온다 }); const [logInError, setLogInError] = useState(false); const [email, setEmail, onChangeEmail] = useInput(''); const [password, setPassword] = useInput<string>(''); const onChangePassword = useCallback( (e: React.ChangeEvent<HTMLInputElement>) => { setPassword(e.target.value); }, [email, password, data], ); const onSubmit = useCallback( (e) => { setLogInError(false); axios .post( 'http://localhost:3095/api/users/login', { email, password }, { withCredentials: true, }, ) .then(() => { mutate(); }) .catch((error) => { setLogInError(error.response?.status === 401); }); }, [email, password], ); console.log(data); // if (data) return <Navigate to="/workspace/channel" />; return ( <div className="max-w-[400px] mx-auto px-[20px]"> <h1 className="flex justify-center pt-[60px] pb-[20px]"> <LogoSlack /> <span className="blind">Slack</span> </h1> <TextField label="이메일 주소" type="email" value={email} onChange={onChangeEmail} /> <TextField label="비밀번호" type="password" value={password} onChange={onChangePassword} /> {logInError && <p className="mb-[20px] mt-[-10px] text-red-500 font-normal">로그인 실패</p>} <Button text="로그인" onClick={onSubmit} /> <p className="mt-[10px] text-center"> Slack을 처음 사용하시나요? <Link to="/sign" className="ml-[4px] text-blue-600"> 회원가입 </Link> </p> </div> ); }; export default Login;
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
로그인/소셜로그인 테이블 설계 관련 궁금증 관련 질문입니다.
강좌를 들은 후, 소셜로그인을 구현하다가 의문점이 생긴 부분이 있어 어떠한 방식으로 접근하는 것이 궁금하여 질문을 남깁니다.상황일반 회원가입시에는, 이메일 비밀번호 + 해당 서비스에 필요한 필수 정보들을 받고, 해당 내용을 클라이언트로 부터 받아 user테이블에 저장하는 상황입니다.소셜 로그인 같은 경우에는, 정보를 받을 수 있는 것이 제한이 되어있어, 추가적으로 필요한 정보들을, 소셜 로그인 성공 이후, 클라이언트 측에서 회원가입시 필요한 정보들을 받을 수 있는 화면으로 이동시켜, 해당 정보를 받아서, 부족한 정보들을 채워넣는 것으로 알고 있습니다.궁금점.소셜로그인 로그인 후, 신규 유저이기에 서비스 이용에 필요한 필수 부가정보 입력을 받기위해, 회원가입 창으로 이동시켜, 부가 정보를 입력받는다면 크게 문제가 없습니다.하지만, 앱을 사용하다보면은 데이터가 끊긴다거나, 배터리가 방전된다거나, 알수없는 이유로, 로그인은 되었으나, 필수 부가정보를 입력하지 못하고, 꺼지는 경우가 있습니다. 필수 부가정보를 꼭 받아야 하는 경우라면 이 부분에 대해서 어떻게 처리해야하나요?필수 정보를 채웠는지 여부를 확인하는 column을 boolean으로 User 테이블에 추가하여, 클라이언트에서 해당 Column으로 부가정보를 입력받지 않았으면 메인화면으로 가지않고, 회원가입 스크린으로 리다이렉 시키는 이런 로직을 작성해야하나요?필수 정보를 채웠는지 여부를 확인하는 column 없이 이런 경우에 처리할 수 있는 방안이 있는지 궁금하고, 현업에서는 어떤식으로 테이블을 설계하는지 궁금합니다!
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
소셜로그인 User 테이블 관련 질문 있습니다.
소셜로그인을 구현하다가 의문점이 생긴 부분이 있어 어떠한 방식으로 접근하는 것이 궁금하여 질문을 남깁니다.상황일반 회원가입시에는, 이메일 비밀번호 + 해당 서비스에 필요한 필수 정보들을 받고, 해당 내용을 클라이언트로 부터 받아 user테이블에 저장하는 상황입니다.소셜 로그인 같은 경우에는, 정보를 받을 수 있는 것이 제한이 되어있어, 추가적으로 필요한 정보들을, 소셜 로그인 성공 이후, 클라이언트 측에서 회원가입시 필요한 정보들을 받을 수 있는 화면으로 이동시켜, 해당 정보를 받아서, 부족한 정보들을 채워넣는 것으로 알고 있습니다.궁금점.소셜로그인 로그인 후, 신규 유저이기에 서비스 이용에 필요한 필수 부가정보 입력을 받기위해, 회원가입 창으로 이동시켜, 부가 정보를 입력받는다면 크게 문제가 없습니다.하지만, 앱을 사용하다보면은 데이터가 끊긴다거나, 배터리가 방전된다거나, 알수없는 이유로, 로그인은 되었으나, 필수 부가정보를 입력하지 못하고, 꺼지는 경우가 있습니다. 필수 부가정보를 꼭 받아야 하는 경우라면 이 부분에 대해서 어떻게 처리해야하나요?필수 정보를 채웠는지 여부를 확인하는 column을 boolean으로 User 테이블에 추가하여, 클라이언트에서 해당 Column으로 부가정보를 입력받지 않았으면 메인화면으로 가지않고, 회원가입 스크린으로 리다이렉 시키는 이런 로직을 작성해야하나요?필수 정보를 채웠는지 여부를 확인하는 column 없이 이런 경우에 처리할 수 있는 방안이 있는지 궁금하고, 현업에서는 어떤식으로 테이블을 설계하는지 궁금합니다!
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
SequelizeEagerLoadingError: User is not associated to Post!
안녕하세요 제로초님, User 테이블이랑 Post테이블이 관계설정이 안되어있다는 에러가 떠서 문의드립니다. 분명 시퀄라이즈 관계설정하는 부분 빠짐없이 모두 따라했는데 이런 오류가 뜹니다.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
overridFindOptions
안녕하세요 코팩님! 개인 프로젝트를 하다가 약간의 오점을 발견해서 질문드립니다.위 사진과 같이 paginate함수의 overrideOptions 파라미터에 where필터를 새로 작성하는 순간,기존에 composeOptions에서 작성한 where필터를 아예 무시해버리게 되는 것 같습니다. 그래서 첫 번째 페이지는 정상적으로 응답이 오는데, next에 담긴 링크를 눌러보면 똑같이 첫번째 페이지가 응답으로 오게되는 것 같아요.위와같은 증상이 뒷부분의 paginateComments에서도 똑같이 발생합니다. 첫번째 페이지는 작동이 잘 되기때문에 영상에서는 넘어가신 듯 한데,여러 방법을 써봤지만 해결책이 보이지 않아서 질문드립니다ㅠ
-
해결됨실무에 바로 적용하는 스토리북과 UI 테스트
StoryBook 관련 궁금 사항입니다.
Next.js를 사용하는 경우 이미지 최적화를 위해 next/image 에서 제공하는 Image 컴포넌트를 사용합니다! 이를 활용해서, 스토리북 컴포넌트를 만들 경우, React에서 이를 활용할 수 있을지 궁금합니다.현재, React-Native-Cli에서 프로젝트를 진행하고 있습니다. React-Native-Cli(View, Text, Pressable)와, React, Next에서 모두 활용 가능한, 공용 스토리북 컴포넌트를 현실적으로 만들 수 있는지, 실무에서는 각각 따로 분리해서 개발을 진행하는지 여부가 궁금합니다!타입스크립트로 만든 스토리북 패키지를, 자바스크립트를 활용한 (타입스크립트를 사용하지 않는) 프로젝트에서 활용가능한지도 궁금합니다!프로젝트를 진행하면, 스토리북과 함께 한개의 레포지토리로 관리하는 것이 좋은지, 아니면, 따로 분리해서 두개의 레포지토리로 관리하는 것이 좋은지 궁금합니다!개발 시작시, 먼저 스토리북으로 컴포넌트를 제작 후, 개발을 진행하는 것이 좋은지, 아니면, 개발을 진행해가며, 그때 그떄 공용 컴포넌트로 쓰일 만한 것들을 스토리북으로 만들어나가는 것이 좋은지 강사님의 경험상 괜찮은 방법을 알려주시면 감사하겠습니다!!
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
cursor 기반 페이지네이션 page 기반 페이지네이션
cursor 기반 페이지네이션과page 기반 페이지네이션에서어떤 상황에서 cursor 를 사용하고 어떤 상황에서는 page 기반 사용해도 될까요 ??insert , delete 에 대한 요청이 잦은 서비스 라면 cursor 를 사용하고주로 get 에 대한 요청밖에 거의 없을것 같은 서비스라면 page 기반 페이지네이션을 사용하면 될까요 ?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
내림차순 next 토큰 로직 작성하기 질문
안녕하세요 ㅎ강의 잘듣고 있습니다.내림차순 정렬 부분을 듣고있다가createQueryBuild 을 사용해서 하는것은 어떻게 생각하시나요 ??
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
제네릭 질문
커스텀 훅에서 사용된 제네릭에 대해서 공부하다가 궁금한게 생겨서요.아래 테스트 코드에서'+' 연산자는 'T' 및 'T' 유형에 적용할 수 없습니다. 라는 에러 코드가 발생하는 이유가 이해가 안 가서요위 함수는 사용한다면 아래 처럼 숫자 또는 문자인 타입으로 쓰일텐데, 그러면 return 값에서 + 연산자가 number + number 또는 문자열 + 문자열로 실행되어 문제가 없을 것 같은데 에러가 뜨는 이유가 모르겠어서요add<number>(1, 2); add<string>('1', '2');지피티에 질문해보니 함수 오버로드를 쓰거나 return 값에 any를 쓰라곤 하는데 잘못된 방법 같고 extends로 타입 제한을 걸어도 같은 에러가 뜹니다function add<T extends number | string>(x: T, y: T): T { return x + y; }제가 참고한 제네릭 레퍼런스 자료입니다https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Generic-%ED%83%80%EC%9E%85-%EC%A0%95%EB%B3%B5%ED%95%98%EA%B8%B0#%EC%A0%9C%EB%84%A4%EB%A6%ADgenerics_%EC%86%8C%EA%B0%9C
-
해결됨실무에 바로 적용하는 스토리북과 UI 테스트
type-error 해결 방법 질문
import type { Meta, StoryObj } from "@storybook/react"; import { fn } from "@storybook/test"; import TagList from "../components/TagList"; // 버튼 컴포넌트의 메타 정보를 나타냄 const meta = { // 경로 title: "List/TagList", component: TagList, parameters: { layout: "centered", }, tags: ["autodocs"], argTypes: { tagList: { control: "array", description: "태그 리스트", docs: ["tag1", "tag2", "tag3"], }, onTagClick: { action: "clicked", description: "버튼 클릭 이벤트", }, }, args: { onTagClick: fn(), }, } satisfies Meta<typeof TagList>; export default meta; type Story = StoryObj<typeof meta>; export const Default: Story = { args: { tagList: ["tag1", "tag2", "tag3"], }, }; 위와 같이 코드를 작성했을 떄, tagList의 control 부분에서 타입 에러가 발생합니다. TS2322: Type "array" is not assignable to type Control | undefined어쨰서 undefined가 들어갈 수 있는지 알고 싶습니다.
-
해결됨실무에 바로 적용하는 스토리북과 UI 테스트
스토리북 설치시 에러 발생 관련 질문입니다.
vite로 react + typescript 설치 후 storybook 설치시 위와 같은 에러가 발생하는데 해결방법이 있을까요?
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
npx react-native run-android 시 에러
계속 에러를 해결해보려했지만 어디부분이 잘못된건지 알고싶어 글 남깁니다처음에 프로젝트를 생성하고 나서 안드로이드는 실행되지만 해당 프로젝트 화면은 나오지않아 npx react-native run-android로 다시 실행하면 사진과 같은 에러가 발생합니다.Gradle , JDK와 관련된 에러같은데 삭제를 시도해보고 다시 설치해봣지만해결되지 않네요 ㅠ어디 부분이 문제인지 몰라 일단 몇개 사진 첨부합니다.!zshrc
-
미해결React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
dom / svg / canvas
혹시 웹에서 원하는 곳에 이미지를 애니메이션으로 보내거나 웹을 구성할때 canvas로는 좌표를 찍어 위치를 조정하기 쉬워보이는데 dom / svg를 활용할땐 웹에 원하는 곳으로 배치하기 위해선 그리드를 활용해야하나요 보통?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core
PickType
현재 PickType 활용하기를 듣고있습니다.위에서 PickType 은 값을 반환을 하고 Pick 은 타입을 반환한다고 말씀을 주셨는데요.PickType 이 값을 반환 한다는 말씀이실제로 어떤 값을 반환하는것이 아니라 request dto 역할로 데이터가 key : value 로 들어오니까 단순 타입이 아니라 값을 받기때문에 값을 반환한다 라고 이해를 해야할까요 ??
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
피그마 파일 임포트가 안됩니다.
맛집 파일 업로드 하려고 하면 unable to import file 이라고 뜨네요.
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
react query 질문입니다.
양질의 강의 잘 듣고있습니다.queryKey: [queryKeys.POST, queryKeys.GET_POSTS],쿼리키에 다음과 같이 굳이 POST를 넣어주는 이유가 그룹화 하기위함인가요? 나중에 서비스가 커질 경우 어떤 항목의 get_posts인지 구분이 힘들어질수 있어서 그런것인지 궁금합니다.만일 그렇다면 useMutateDeletePost()에서 queryClient.invalidateQueries({queryKey: [queryKeys.POST]});로 처리하면 POST관련 모든 캐시가 지워지는건가요?