카테고리 추가시 이미 존재하는 경우 예외 처리 const ERROR_CATEGORY_DUPLICATE = "이미 등록된 카테고리입니다."; const { register, handleSubmit, setError, formState: { errors }, } = useForm(); const categoryTemplate = useRecoilValue(categoryTemplateAtom); const addCategorySubmit = async (data: IAddCategoryForm) => { if (categoryTemplate[data.categoryName]) return setError("categoryName", { message: ERROR_CATEGORY_DUPLICATE }, { s..
전체적인 스타일링 변경 중간완성을 한 데 이어 모달창 디자인을 개선하려고 한다. MyLikes💖 스타일링 변경 중간완성 이전 포스팅에서 프로젝트 전체 디자인을 새롭게 변경하기로 계획했다. 피그마로 초안을 작성하고 코드로 옮기는데 대략 3주정도 걸렸다. 중간완성은 했고 부분부분 보완하고 추가할 기능이 보 hahagarden.tistory.com Figma 디자인 특히 선택형 필드의 옵션값을 추가하는 방법으로 여러 사이트에서 사용하는 해시태그를 추가하는 UI를 적용해보기로 했다. 쉼표를 입력하면 입력한 텍스트가 박스형식으로 변하고 지울 수도 있다. Tagify라는 라이브러리로 손쉽게 구현 가능한데, 직접 연습해보기로 했다. 결과 직접 구현해보니 눈에 잘 안들어와서 디자인을 조금 바꾸었다. 분홍색깔을 더 잘어..
이전 포스팅에서 프로젝트 전체 디자인을 새롭게 변경하기로 계획했다. 피그마로 초안을 작성하고 코드로 옮기는데 대략 3주정도 걸렸다. 중간완성은 했고 부분부분 보완하고 추가할 기능이 보여서 조금 더 작업을 해야할 것 같다. MyLikes💖 전체적인 스타일링 변경하기(Figma 디자인) MyLikes 프로젝트 기능구현을 거의 완성해간다. 예외 케이스를 더 추가하고, 리팩토링이 남았다. 그런데 중간에 사람들에게 보여줬더니 디자인이 조금 구리다는 피드백을 받았다....😅 나도 동감 hahagarden.tistory.com 스타일링 적용 후 중간완성본 Restructure 아무래도 첫 프로젝트이고, 개념이 많이 없는 상태에서 시작하다보니 라우팅이 무분별하게 되어있었고 프로젝트 구조가 복잡했다. 불필요한 컴포넌트와..
MyLikes 프로젝트 기능구현을 거의 완성해간다. 예외 케이스를 더 추가하고, 리팩토링이 남았다. 그런데 중간에 사람들에게 보여줬더니 디자인이 조금 구리다는 피드백을 받았다....😅 나도 동감하는 바여서... 대문짝만한 헤더와 색깔... 최대한 깔끔하게 만들고 싶었는데 색 조합이 어려웠다 ㅋㅋ 어떻게 손을 봐야할지 ... 이 참에 스타일링을 다시 하기로 결심했다. 피그마로 다음과 같이 만들었다. 이제 코드를 이리저리 옮기면서 다시 스타일링을 해보자~
문제상황 처음 테이블 목록은 1위 타이타닉, 2위 헤어질 결심, 3위 세 얼간이이다. 데이터를 수정하면 랭킹순서대로 정렬되지 않는다. (드래그앤드롭으로 순위를 변경하는 것은 문제없이 잘 된다.) 데이터 수정 후 내가 지정한 랭킹(1위, 2위, 3위) 순서가 아니라, 데이터베이스에 데이터를 추가한 시간 순서대로(2위 헤어질 결심, 1위 타이타닉, 3위 세 얼간이) 정렬이 되고 있다. 🩹 초기 구현 리스트 데이터를 수정하면 파이어베이스의 snapshot기능으로 자동으로 업데이트된 데이터를 가져온다. 이 때 가져온 쿼리데이터로 likes상태를 업데이트 해준다. 데이터베이스에는 데이터가 생성된 시간 순서대로 정렬이 되어있고, 이 순서대로 쿼리데이터를 가져오며, likes상태(배열)에도 이 순서대로 저장된다. 한..
🙌 github commit 🙌 refactor: change state logic, rendering position and modal-event, sty… · hahagarden/project-machine@9a975fa …le: add ModalBackground github.com 1. 전체 모달창 로직 수정 🩹 초기구현 MyLikes프로젝트에 모달창이 3종류 있다. 카테고리 추가창(addCategoryModal), 리스트 등록창(RegisterModal), 리스트 수정창(UpdateModal). 초기에 모달창을 켜는 상위컴포넌트, 모달창을 그리는 컴포넌트 두 개에서 모달에 대한 상태가 공통적으로 사용되어 전역상태로 관리하였다. 켜지면 true, 꺼지면 false였다. 그런데 부모-자식 관계이고,..
6개월 전에 작성한 코드를 리팩토링을 하려고 한다. 상태를 다루기 위해서 전역상태만 사용했는데 상태 끌어올리기를 사용하여 로직을 더 효율적으로 개선할 수 있을 것 같고, 이벤트는 핸들러에 전달인자를 넘겨주는 방법으로 코드를 줄일 수 있을 것 같다. 특히 UpdateModal컴포넌트 부분이 지금 보니 왜 이렇게까지 비효율적으로 했는지 모르겠다. 💬 1. UpdateModal 로직 수정 🩹 초기 구현 초기에는 어떤 리스트를 더블클릭하면 해당 리스트를 수정하기 위한 모달 창이 나타나고, 서버에서 데이터를 받아와 해당 데이터로 input을 초기화한다. Table컴포넌트에서 리스트를 더블클릭하고, UpdateModal컴포넌트에서 리스트의 데이터를 렌더링하여 한 상태를 두 컴포넌트에서 사용하였다. 처음에는 상태 끌..
My Life Playlist 음악 어플리케이션의 플레이리스트처럼 내가 좋아하는 것들 목록을 만들고 순위를 조정하고 저장할 수 있는 웹 사이트이다. 진행기간: 2022년 9월~ 2022년 10월 프로젝트 개요 노래, 영화, 도서, 음식 등 카테고리를 생성하고, 타이핑 필드와 선택 필드를 추가할 수 있다. 타이핑 필드는 리스트 추가 시 사용자가 직접 타이핑한 값을 저장하고, 선택 필드는 카테고리 생성 시 원하는 옵션들을 같이 생성하여 리스트 추가 시 사용자가 선택한 옵션 값을 저장한다. TypeScript, React, firebase, Recoil, styled-components, react-hook-form, react-beautiful-dnd 회원가입과 로그인, 유효성 검사 카테고리 동적으로 생성하..
- Total
- Today
- Yesterday
- 맥 깃허브 데스크탑
- 깃허브 데스크탑 로그아웃
- 구글서치콘솔
- 공릉 밀크티
- sitemap
- 회고
- 태릉삼겹살
- 태릉 꼬치
- 춘천맛집
- 롯데월드 매직패스 프리미엄
- 공릉맛집
- 롯데월드 키오스크
- 이수 맛집
- 티스토리
- 공릉 맛집
- 공릉 술집
- 태릉맛집
- 롯데월드 보조배터리
- 공릉 카페
- 공릉 이자카야
- solo project
- 태릉 이자카야
- 신불당 술집
- Til
- 을지로맛집
- 홍천 삼겹살
- 공릉 꼬치
- 티스토리검색
- 춘천닭갈비
- 태릉 술집
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |