묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
Tailwind CSS IntelliSense 작동이 안되요...
안녕하세요 Tailwind CSS IntelliSense 작동이 안되서 그러는데 확인해 본 결과로 index.css에서@import "tw-animate-css"; 이거와@layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; }}이 코드가 들어가면 작동을 하지 않습니다 혹시 이게 왜 그럴까요...?
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
useState 훅
const [count,setCount] = useState(0);선언되어 있을때()=>setCount(count+1);(count)=>setCount(count +1); 강의에서는 2번 처럼 사용 하던데 1번 처럼 사용해도 상관없나요? 차이가 있나요?
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
onSettled와 setQueryData
안녕하세요 선생님! 낙관적 업데이트(2) 강의 마지막에 onSettled를 통해 update가 종료된 후 기존 캐시 무효화 후 db에서 다시 받아와서 갱신시켜주는 로직을 작성한걸로 알고있는데 이때 onMutate 내부에서 setQueryData를 통해 별도의 업데이트된 정보를 캐시에 세팅시켜주는 로직은 필요가 없어지게 되는건가용? export function useUpdateTodoMutation() { const queryClient = useQueryClient(); return useMutation({ mutationFn: updateTodo, onMutate: async (updatedTodo) => { await queryClient.cancelQueries({ queryKey: QUERY_KEY.todo.list, }); const prevTodos = queryClient.getQueryData<Todo[]>(QUERY_KEY.todo.list); /* 이부분 */ queryClient.setQueryData<Todo[]>(QUERY_KEY.todo.list, (prevTodo) => { if (!prevTodo) return []; return prevTodo.map((item) => item.id === updatedTodo.id ? { ...item, ...updatedTodo } : item, ); }); /* //이부분 */ return { prevTodos, }; }, onError: (error, variable, context) => { if (context && context.prevTodos) { queryClient.setQueryData<Todo[]>( QUERY_KEY.todo.list, context.prevTodos, ); } }, onSettled: () => { queryClient.invalidateQueries({ queryKey: QUERY_KEY.todo.list, }); }, }); }
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
(4.13) setQueryData 질문드립니다
queryClient.setQueryData를 사용할 때, 단순히 새 값을 바로 전달하는 경우와 업데이트 함수를 사용하는 경우가 있던데, 각각 언제 사용해야 하는지 명확히 구분이 잘 안 돼요. 어떤 기준으로 사용하면 되는지 설명해주실 수 있을까요?..
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
실무에서의 JWT에 대해서 질문드려요
JWT가 이론적으로는 DB에 액세스하는 과정없이 인증이 가능하다고는 하지만,, jwt.io같은데서 payload의 조회를 쉽게 할 수 있기도 하다보니 웬만한 개인정보를 넣는 것은 지양하는 걸로 알고 있습니다. 실무에서는 사실상 payload에 userId정도만 넣어두고, 서버에서 이 JWT를 받아 디코딩하여 받은 userId로 DB에 액세스하여 유저정보를 가져와서 유효한 유저인지 파악한 다음 클라이언트에 응답하는 것이 일반적인 케이스가 아닌가.. 그러면 세션과 큰차이가 사실상 없는 것이 아닌가 궁금하여 질문드립니다!
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
prettier 자동 적용 관련 이슈
안녕하세요다른 분들이 올리신 prettier 관련 질문글과 동일하게 prettier 적용 이슈 발생하여 문의글 남깁니다.이전 질문글들에 답변 해주신 것 참고해서 해결하려고 하였으나 여전히 되지 않더라구요.무슨 문제일까요? prettier 확장 설치 확인 파일명을 .prettierrc 에서 .prettierrc.json 으로 바꿔봤음에도 되지 않음Default Formatter 설정 확인FormatOnSave 옵션 활성화 확인프로젝트별 설정 파일 확인git repo 링크 남겨놓습니다https://github.com/seonyoungg/onebite-exam
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
css intellisense 적용하면 prettier가 안됩니다.
npm i -D prettier prettier-plugin-tailwindcss명령어 실행하고.prettierrc파일생성후 { "plugins": ["prettier-plugin-tailwindcss"] }코드 작성후 저장하면 원래 적용되던 빈 줄 없애는 것도 적용 안되고<div className="underline text-7xlfont-bold text-red-500 "> 이부분도 정렬이 안됩니다.format on save 체크되어 있고, default formatter도 prettier-code formatter로 되어 있습니다.
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
강의에서 저장하면 자동으로 import 되는건 뭔가요?
강의에서는 useState같은걸 쓸때 자동으로 위에 import 가 추가되는데 그건 어떻게 적용하는건가요?
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
prettier
강의 내용대로 하였는데 저장 할때는 정렬이 되지 않고터미널에 npx prettier --write src/App.tsx 를 입력 하여야 작동하는데 이유가 뭘까요...
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
6.8) initialState 타입을 as State로 단언하신 이유가 궁금합니다.
zustand 세션 스토어를 만드는 과정에서 타입을const initalState: State = { //... }가 아닌const initalState = { //... } as State;로 선언하신 이유가 궁금합니다
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
network 탭 리퀘스트 관련 질문
(네트워크 필터 설정을 잘못했던 게 문제였습니다.😂 감사합니다.)안녕하세요, 이정환 강사님.강의 잘 듣고 있습니다. (6.10) 비밀번호 재설정 구현 강의에서,인증 메일 주소를 복사해서 붙여넣기 하니까 Network 탭에 해당 리퀘스트만 들어오고 'verify~'로 시작하는 리퀘스트는 없더라구요.링크에 접속했을 때 리디렉션은 잘 됩니다.200 ok인 걸로 봐서 정상 작동하는 것 같긴 한데, 문제가 있는 걸까요? 감사합니다.
-
해결됨타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
CRUD어떤 방식의 API 활용하는지 궁금합니다.
이 강의가 restAPI 기반인지, graphQL 기반 CRUD 구현인지 궁금합니다.
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
여러 사진 중 일부 사진의 허용 사이즈 초과로 실패한 경우에 대해
안녕하세요 정환님! 항상 강의 감사한 마음으로 잘 듣고 있습니다. 이번 이미지 업로드 구현하기2 강의를 끝까지 듣고 따라하던중 스토리지에 이미지 업로드 병렬로 요청 시 제가 업로드 시도한 이미지 4장 중 1장이 허용 사이즈 초과로 스토리지 업로드 요청이 실패 했었는데요, 당연히 이미지 업로드 실패로 await deletePost(post.id);가 호출되 post.id를 받기위해 먼저 생성한 포스트가 삭제되어 포스트 자체가 안된것처럼 동작했습니다. 근데 storage에서는 업로드 요청이 실패된 이미지를 제외하고 나머지 3장의 이미지가 저장이 되어있더라고요!간단하게 4장 병렬 이미지 업로드 요청 > 3장 성공 1장 실패 > 이미지 업로드 일부 실패로 포스트 삭제 > storage에는 성공한 3장의 이미지만 존재, 포스트는 없음 이 상태여서 혼자 찾아봐서 추가해봤는데 맞는지도 궁금하고 맞다면 다른 분들도 비슷한 상황에서 도움이 될까 싶어 올립니다!!images.ts 파일에 스토리지에서 이미지 삭제하는 비동기 요청 함수export async function deleteImages(filePath: string[]) { const { data, error } = await supabase.storage .from(BUCKET_NAME) .remove(filePath); if (error) throw error; return data; } post.ts > createPostWithImages 함수 에서 try, catch문 밖에 업로드전 생성한 filePath 저장할 배열 값을 갖는 변수 선언 const uploadedFilePaths: string[] = []; const imageUrls = await Promise.all( images.map((image) => { const fileExtension = image.name.split(".").pop() || "webp"; const fileName = `${Date.now()}-${crypto.randomUUID()}.${fileExtension}`; const filePath = `${userId}/${post.id}/${fileName}`; uploadedFilePaths.push(filePath); return uploadImage({ file: image, filePath, }); }), );uploadImage 리턴 전에 생성한 filePath값 저장catch문에서if (uploadedFilePaths.length > 0) { await deleteImages(uploadedFilePaths); }조건문 추가 최종 결과병렬 요청중 일부의 요청이 파일의 크기 초과 등으로 실패하면throw error > await deletePost(post.id); if (uploadedFilePaths.length > 0) { await deleteImages(uploadedFilePaths); } throw error;포스트 삭제, 스토리지 이미지 삭제글을 잘 못써서 가독성이 떨어지는 부분은 양해부탁드립니다..
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
예제코드 실행
예제코드 다운받은거 실행시킬때는 04-04, 04-05와 같이 폴더 기준으로 다음예제 넘어갈때마다 npm install, npm run dev두개명령어 쳐서 실행시키는거 맞나요? 추가로 예제 코드에서 안하고 직접 처음부터 만들어서 하려면 처음에 했던 npm create vite@latest . 이 명령어로 하는거 맞죠?
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
회원가입, 로그인 요청 시 400 에러
안녕하세요강의 열심히 듣고 있는데 회원가입, 로그인 성공하고 요청 보낼 때 요청이 잘 들어왔다가 한 0.5초 뒤에 400에러로 바뀝니다.코드는 모든 부분이 똑같은데 혹시 왜 이러는걸까요??의심가는 행동은 section05를 다 듣고 section06 폴더를 만들고 section05에서 사용한 파일을 그대로 복사하여 사용 중인데, 이 부분에서 문제가 있을까요?
-
미해결한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
Supabase 외 다른방법
안녕하세요. 강의 듣다 질문 드리는데요강의에서는 supabase를 사용하는데요 그러면 supabase가 아닌 다른 DB(Mysql, PostgreSQL 등) 를 사용한다면 auth.ts 는 다른 방식으로 사용을 해야 되나요? 아니면 별도의 인증 라이브러리가 있을까요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
현재 Windows에서 VsCode로 작업 중인데 추후에 IOS도 가능하게 하려면
현재 Windows환경에서 강의를 수강했습니다.그래서 android 만 테스트할 수 있었고, 중간에 IOS를 위한 환경 세팅은 Window환경에서 할 수 있는 범위만을 수행했습니다.그래서 궁금한 것은 추후에 맥 환경에서 개발을 할 수 있게 되었다 했을 때 강의에서 나오는 IOS 환경 설정은 모두 마쳤다면(Xcode에서 수행해야하던 세팅 모두)npm pod-install위 명령어만 쳤을 때 바로 IOS도 사용가능할까요?아니면 IOS 세팅이나 설치 모두 강의처럼 순서대로 진행해야할까요?
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
수업 자료 없나요?
전 강의들은 PDF으로 있었는데이번에는 수업자료가 없는거 같은데 맞나요?ㅠ
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
Redux 연결이 안된걸까요?
안녕하세요 쌤!redux 사용을 이번 예제를 통해 처음 알게되었는데요.console.log 로 찍을때는 잘 내려오던 user 정보가 redux 에서는 안찍히고 isLogin 값만 보여서요 ㅠㅁㅠ 여러번 돌려봤지만 어떤 부분에서 놓친 것인지 잘 모르겠어서 질문드립니다! zustand, immer 모두 설치 잘되었는데 연결이 안된 문제일까요?.? 카카오 구현하기 6까지 끝낸 상태이고 모든 기능은 잘 동작해요(로그인, 로그아웃, 프로필 가져오기 등) 혹시 몰라 github 링크도 첨부해봅니다!https://github.com/YounaJ00/blog
-
해결됨한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편
11강 수업자료가 수업영상입니다.
안녕하세요.11강 수업자료를 다운로드 받아보니 해당 수업영상입니다. 괜찮을까요?