개요 기존 query와 zustand 둘 다 익숙치 않아서 조금은 직관적인 zustand로만 작업을 이어왔다. 기능 개발이 어느정도 마무리되고 리팩토링하면서 코드개선에 들어갔다. import { addCategory, removeCategory, updateCategoryName } from '@/server/api/supabase/menu-category'; import { useMutation, useQueryClient } from '@tanstack/react-query'; const enum QUERY_KEY { MENU_CATEGORY = 'menu-category', } export const useSetCategories = () => { const queryClient = useQuery..
const submitupdateMenuItemHandler = async (e: React.FormEvent) => { // 옵션 삭제시 필터링 const missingInMenuOptions = origineMenuOptions.filter(item => menuOptions.some(menu => menu.menu_id === item.menu_id), ); const missingItems = missingInMenuOptions.filter(item => !menuOptions.some(menu => menu.id === item.id)); if (missingItems.length > 0) { missingItems.forEach(async item => { removeChangeMenuOpt..
const changeMenuOptionItemHandler = (e: React.ChangeEvent) => { const { name, value } = e.target; console.log(name, value); setOptionDetail({ ...optionDetail, [name]: value }); }; 공통적으로 사용되는 input handler에 이름과 useState를 동일시 시켜 해당 코드처럼 작성 할 수 있다. 자꾸 까먹어서 정리
최종 프로젝트를 진행하면서 code convention을 정리했는데 다른 프로젝트에서도 사용하기 좋아서 정리해보았다 컴포넌트 파일은 파스칼 케이스로 작성 e.g) ComponentsTest.tsx 페이지명은 indexPage.ts (끝에 Page명 표기) 일반 .ts 파일은 케밥 케이스로 작성 (ex. common.ts, date-helper.ts) app 폴더 하위 페이지 파일 이름은 케밥 케이스로 작성 컴포넌트 & 분리 rafce 스니펫 사용 const Component () => { return } export default Component;파일 이름 폴더 트리 project-root/ |📂 src/ | |📂 assets | |📂 app | | |📄 layout.tsx | | |📄 not-foun..
![]()
1. 개발환경 FE - REACT - TYPESCRIPT - NEXT JS - REACT QUERY - ZUSTAND - TAILWIND CSS Manage - YARN BERRY DB - SUPABASE Library - swiper.js - moment.js - google calendar API - 결제 : toss pay - 사업자등록 인증 : brobill ( 공공 API ) 관리 - Slack과 Github 연동해서 깃 알림을 받아서 무슨 내용을 푸시했는지, 사이트 에러 메시지 관리 내용 팀명 : 매직 포스 팀원 : 5명(+1명) - 개발자 5명, 디자이너 1명 주제: 음식점을 찾은 손님들에게는 모바일 친화적인 키오스크 UI를 보여주면서, 주문을 간편화 시키고 음식점 사장님들에게는 값 비싸고,..
프로젝트 심화 후기 yachaechae/DailyC (github.com)
개요 심화 프로젝트를 진행하면서 서브 이미지를 5개 선택하는 포멧을 작성할려고 한다. 이미지를 선택하는 순간 supabase에 업로드가 되고 결과로 나온 url을 프리뷰 화면으로 보여줄려고 했다. url을 올리면서 name이 지정한 걸로 바뀌기 때문에 배열안에 객체로 보여줘야겠다는 생각을 했다. useState 일단 key에 name을 지정해 주고 다음 key을 두고 value는 빈값으로 넣었다 const [subImgObject, setSubImgObject] = useState([ { name: "subImg1", url: "" }, { name: "subImg2", url: "" }, { name: "subImg3", url: "" }, { name: "subImg4", url: "" }, { na..
Typescript로 공부를 본격적으로 들어갔다. Typescript는 javscript의 동적 언어의 문제점을 보완해서 정적인 언어의 모습을 흉내내기 위한 컴파일러라는게 느껴졌다. 앞으로는 모든 작업에 Typescript로 작업을 들어가게 될거 같은데 그 중 Todo-list를 새롭게 적용해봤다. types 우선 todo에 대한 타입을 declare declare type Todo = { id: number; title: string; content: string; isDone: boolean; }; useTodos props로 드릴링하게 된다면 ts에선 어떻게 사용하는게 맞을까란 고민을 하면서 작업을 해봤다. js에선 객체만 남겨주면 됐는데 확실한 타입을 알고 넘겨줘야 할거같다는 느낌을 받았다. ex..
![]()
요약 리액트 아웃소싱 프로젝트 - 크롤링 kakao map 데이터 크롤링 작업 고민한 내용 처음 기획 단계에서 고민한 내용은 네이버에서 검색한 리스트들을 불러와서 별점과 리뷰수를 보여주는 것이었다. 근데 네이버지도 API, 카카오맵 API 둘 다 별점과 리뷰는 보여주지 않는다는 것이었다. 그래서 내린 결정은 데이터를 크롤링해와서 뿌려주는 걸로 결정을 했다. 네이버지도 같은 경우 리스트들이 iframe으로 하나씩 데이터를 다른데서 불러오기 때문에 크롤링에 어려움이 있었다. 그래서 데이터 긁어오기 용이한 카카오지도를 크롤링 하기로 했다. 1. index.js 일단 리액트로만으론 크롤링이 불가능했다. 정적인 페이지에서 크롤링이 가능한데, 리액트는 동적프레임워크다보니 호환이 되지 않았다. 그래서 백엔드로 nod..
