개발개발/WorkRoot_워크루트12 [리팩토링] LinkHere : 모달 UX를 개선해보자 LinkHere 서비스에서 모달에서 사용자 경험을 개선하기 위해 추가한 기능들은 아래 4가지 이다. (기능이라고 하기에도 소소한..ㅎ) 1. 링크 추가 시 폴더 default 선택 2. 링크 추가 시 폴더가 없다면 폴더 생성 모달을 띄우기3. 모달에 값 입력 시 input에 포커스 4. 모달에 값 입력 후 '엔터' 눌렀을때도 제출하기 1. 링크 추가 시 폴더 default 선택 2. 링크 추가 시 폴더가 없다면 폴더 생성 모달을 띄우기 기존 서비스에서 유저가 회원가입을 하고 서비스를 이용하려고 할때 마주치는 화면은 바로 이것이다.당연히 추가하기 버튼을 누르게되고, 그 다음에는 링크가 추가되는 것이 유저가 기대하는 자연스러운 동작이다.그러나 링크를 추가할 폴더를 선택해야하기 때문에 에러 토스트를 만나게 .. 2025. 2. 4. [리팩토링] LinkHere : 링크 저장 서비스 linkbrary 프로젝트를 리팩토링했다.서비스 이름 및 색상 테마 변경Linkbrary → Link Here LinkHere저장한 링크 어디있지? Link, Here!linkhere.vercel.app* og image가 티스토리에서 잘 안나오는 문제가 있었는데 권장 사이즈인 1200x630px 로 하니 잘 나온다. 💢 랜딩페이지, 로그인 페이지를 제거하고 메인 페이지와 사이드바로 변경주요 기능인 링크를 추가하고, 조회하는 것에 집중하고자 페이지를 개편했다.또한 게스트 계정을 추가하여 회원가입 없이 프로젝트를 경험해볼 수 있도록 했다. 내부적으로는, 주요 기능인 링크와 폴더 불러오는 로직을 SSR 에서 CSR 로 수정했다.getServerSideProps → React query (tanstack.. 2025. 2. 4. 어이없는 실수 2 - API 요청 시 Swagger 를 잘 보자 !! 1. 스웨거에서 이미지 업로드를 할때 key값으로 image를 정의해놨는데 나는 백날천날 file로 해놨던것..!! 2. 사용자가 작성한 폼을 POST 요청 보낼때 formData 를 보내야 한다고 생각해서 (아주 어이없는 하ㅏㅎ..) headers 의 content-Type : multipart/formData 로 작성했다 try { const response = await axios.post("/라우터 경로", formData, { headers: { "Content-Type": "multipart/form-data" }, }); 스웨거에서는 application/json으로 요구하고 있었다. Content-Type는 서버에 보내는 데이터의 형식을 명시하는 HTTP .. 2025. 1. 13. 어이없는 실수 1 - 커스텀 훅에서 함수, 변수 가져올때 구조분해 할당하기 (This expression is not callable) This expression is not callable. Type '{ uploadImages: (files: File[]) => Promise; }' has no call signatures.ts(2349)const uploadImages: { uploadImages: (files: File[]) => Promise; } 🧨 onChange 핸들러에서 useImageUpload 이라는 커스텀훅을 사용하려는데 타입 에러가 남 !!! 💥바보 아니야?훅 가져올때 구조분해 할당 { } 을 안해줌;;;;;;; const { uploadImages } = useUploadImages();1. "This expression is not callable" - "이 표현식은 호출할 수 없.. 2025. 1. 13. Ensure that calls to `useSearchParams()` are wrapped in a Suspense boundary. > Ensure that calls to `useSearchParams()` are wrapped in a Suspense boundary.https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout Missing Suspense boundary with useSearchParamsUsing App Router Features available in /appnextjs.org빌드 에러가 발생했다.친절하게 해결방법까지 알려준다.Reading search parameters through useSearchParams() without a Suspense boundary will opt the entire page into client-side ren.. 2025. 1. 9. 리액트 훅 폼 (React Hook Form) 트러블 슈팅 2 - 여러 유형의 폼 데이터 제출하기 리액트 훅 폼 (React Hook Form) 트러블 슈팅 1 - 여러 탭에 걸친 폼 데이터 제출하기(watch, setValue) 리액트 훅 폼 (React Hook Form) 트러블 슈팅 1 - 여러 탭에 걸친 폼 데이터 제출하기(watch, setValue 사용위 슬라이드는 사용자가 알바 공고를 작성하기 위한 페이지이다.1. 모집 내용 2.모집 조건 3. 근무 조건 총 세가지 탭을 작성해서 전체 폼 데이터를 제출해야 한다. 🤔간단한 게시글이나 댓글memoryelim.tistory.com에 이어서 유형별 input 값 리액트 훅폼에 등록하는 방법 정리해보기! 유형별 input 값 리액트 훅폼에 등록하기 ~~ input 타입 별로 정리해보자 ~~ 1. Text 제일 간단히 구현했다.register.. 2025. 1. 9. 이전 1 2 다음
