목록개발일지 (74)
HYEWON JUNG의 개발일지
프로젝트 명 나의 쾌변 일지 프로젝트 설명 프로젝트 주제 선정 이유 갑자기 화장실이 급한 적이 많았던 우리가 필요해서 우리가 만드는 웹페이지로, 화장실과 더불어 휴지를 구매할 수 있는 가까운 편의점까지 표시하였다. 더불어 일기형식으로 나의 쾌변 일지를 작성하여 나의 상태를 확인할 수 있고, 정보 공유와 고민을 질의 응답하는 커뮤니티도 있으면 좋을 것 같아서 만들어보았다. 한 줄 정리 큰 일을 볼 때 힘겨운 사람들을 위한 & 당신만 변비가 있는 게 아니야! 와이어 프레임 열띤 회의의 장 상세 구성 전제 레이아웃 구성(커뮤니티 부분은 가려서 보이지 않도록) 2. 로그인 화면 3. 회원가입 화면 4. 로그인 시 헤더 5. map 6. 프로필 7. 쾌변일지(달력) 8. 쾌변일지 (새로 글 작성) 9. 쾌변일지 ..
목표 정신차리기 목표 달성여부 조금 많이 해이해진 것 같다. 이렇게나 자기주도학습을 못하다니! 미쳤어! 게으름을 피운죄로 앞으로의 잠은 없겠지.. 미처 하지 못한 것들을 꼭 미쳐야한다. 최종 시작 전까지! next 강의 완강 후 과제 수행 => 포트폴리오 만들기 코드잇 강의도 듣기 스탠다드 수업 돌려보기 남의 포트폴리오 탐색하기 react hook 활용 렌더링이 최적화 될 수 있도록 하기. 더 많은 프로젝트를 만들어보기
목표 쿼리 졸업하기 새로 알게 된것/ 오늘의 코드 2023.12.21 - [React] - React -Query React -Query 기존 미들웨어의 한계 - 보일러플레이트 : 코드량이 너무 많다. - 규격화 문제 : redux는 비동기 데이터 관리를 위한 전문 라이브러리가 아니다. 쿼리의 강점 - 쉽고 책임에서 자유롭다 - 직관적이 hyewonjung-coding.tistory.com 지금까지 redux, query를 배웠는데 추가로 recoil을 배웠다. 아직 잘 모르겠지만 저번에 로그인 기능을 만들 때 recoil을 사용한 사람들이 많이 보여서 실습해보면 좋을 것 같다고 생각이 들었다. 간단하게 이해하기론 R CUD redux const 변수 =useSelect((state)=>{ return ..
목표 query key 상수 선언 새로 알게 된것/ 오늘의 코드 react query에서 휴먼에러를 줄이기 위해서 query key들을 상수로 선언해서 사용할 수 있는데 이것을 내 과제에 대입해서 사용할 것 이다. 우선 hook 폴더를 만든 뒤 keys.constant.ts를 만들어 준다. export const QUERY_KEY = { TODOS: 'todos' }; 이렇게 해준다음에 const handleRemoveButton = () => { deleteMutation.mutate(todo.id, { onSuccess: () => { queryClient.invalidateQueries(QUERY_KEY.TODOS); } }); }; 이런 식으로 넣어주면 된다. 그리고 useMutation 같은경우..
목표 과제 정리 새로 알게 된것/ 오늘의 코드 typescript를 이용하며 해맸던 것 1. map은 어떻게 사용해야할까// 콜백함수의 인자도 타입이 필요하다! {data .filter((item: TodoItem) => item.isDone === !isActive) .map((item: TodoItem) => { return ; })} 나같은 경우 model폴더에서 type을 지정해 둔것이 있어서 사용하면 된다. map의 인자인 item은 결국 data속에 각각의 todo인거니 "id": "1e147b21-3c93-a961-0ce3-3a7efded3ca4", "title": "방 치우기", "content": "큰방, 침실 위주로!", "isDone": false 이렇게 4가지를 담은 객체 타입이 필..
목표 과제 완료하기 새로 알게 된것/ 오늘의 코드 react-query 기본 세팅 하기 index.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { QueryClient, QueryClientProvider } from 'react-query'; const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); const queryClient = new QueryClient(); root.render(..