100일은 해야지

일단 할 일 목록을 만들기 전에 count랑 같은 레포에 넣을 것이기 때문에, counter를 누르면 counter가 나오고 todolist를 누르면 ToDoList가 나오도록 UI를 바꿔줬다. 👊 Todo-List 만들기 1. 액션 타입, 액션 생성자 함수, 리듀서 설정 src/modules/todo.js 2. 루트 리듀서 만들기 한 프로젝트에 여러 개의 리듀서가 있을 때 한 리듀서로 합쳐서 사용한다. 이를 루트 리듀서라고 부른다. 나는 counter와 todos 두 개의 리듀서가 있다. 고로 합쳐야 한다. 리듀서를 합치는 것은 리덕스 내장 함수인 combineReducers를 사용한다. 👉🏻 'modules' 폴더에 index.js 파일을 생성한다. src/modules/index.js 👉🏻 'src..

시작하기 | Axios Docs 시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코 axios-http.com axios 받아올 것이기 때문에 공식문서를 참조했다. yarn add axios로 axios먼저 깔고 나는 회원가입 쪽을 연결했는데 회원가입에서 이메일 중복확인이나 닉네임 중복확인을 하기 위해서 get 요청을 했는데 왜 그런지 모르다가 중복확인할 때 post로 하는 블로그가 있어서 post요청으로 해보자 해서 post요청으로 하니 Response 잘 받아와 짐. 근데 조회하는건데 get이 아니라 post를 쓰..

와이어프레임 개인프로젝트에도 와이어프레임이 필요한가... 에 대해서 잘 모르겠지만 보는 눈을 기르는 건가... 싶지만 협업할때의 중요성을 알기 위해서인가.... 도 싶지만 일단 다시 만들기는 했다. 그냥 만들었던 것 조금 다듬어서 만드니 시간이 별로 안 걸리기는 했다. 이제 개인프로젝트 고치러 가야지...

4주 차 회고(06.19~06.25) 벌써 4주 차가 지나고 지금 5주 차째!! 4주 차에는 많은 일을 한 것은 아님 그냥 게시글 등록 UI 만든 정도? 잠깐 쉬어가는 시간이라고 생각함 이때 공부했어야 하는데.... 일단 이번주는 게시판 새 글 작성에 대한 것을 했다. input으로 쓰기에는 좀 긴 것 같아서 본문 입력창을 textarea태그로 해놨다. 거기다 textarea의 속성으로 row를 주면 줄 수만큼 크기가 커지고 사용자가 마음대로 본문창의 크기를 늘리고 줄이는 게 좋을 것 같아서 결정. 글 작성창에서 x를 누르면 진짜 닫기를 누를 건지 확인하는 모달창이 또 뜨게 만들었다. 사진은 최대 3개까지 담을 수 있고 담긴 사진을 미리 보기 할 수 있게 했다. 사진 위에 X버튼을 누르면 지워진다. 아직..

나의 개인프로젝트인 RandomShop을 살려보려고 한다. 포트폴리오에 넣을 수 있을 정도로는 만들어 놔야하니까... 일단 초반 기술 스택은 TypeScript , React, Vite, Firebase, styled component 다섯 개다. 여기에 나는 tailwindcss & daisyUI를 더할 예정이다. 기능은 원래 firebase : 백엔드 서비스 연동, 회원가입 및 로그인, 구글 소셜로그인 음식 검색 및 검색 키워드 자동완성 음식 필터링(카테고리 분류) + 페이지네이션 카트 담기 위시리스트 이 정도이고, 와이어 프레임 초안은 아래에 있다. 너무 초... 라해 https://www.figma.com/file/sOrN4ihZAG0myOJTVpGYLn/wireframe?type=design&n..

저번에 만들었던 모달 안에 게시글 등록 폼을 작성할 예정 일단 img파일을 넣기 위해서 type=file인 Input 태그를 사용할 예정임 import { useRef } from "react"; import { TiPlus } from "react-icons/ti"; import NewBoardForm from "./BoardForm"; function NewBoardBtn() { const dialogRef = useRef(null); const Open = () => { dialogRef.current?.showModal(); }; const Close = () => { dialogRef.current?.close(); }; return( 등록 ) 뭔가 애매하다... ui좀 바꿔야 할 것 같아서 U..

드디어 가계부를 마무리했다! 중간중간에 변경 사항이 좀 있어서 계속 바꾸다 보니 엄청 밀려서 끝냈다 그리고 계속 Prop으로 넘기고 넘기다 보니 여러 개의 기능을 같이 쓰는 페이지를 만들 때 헷갈리고 오류가 자꾸 생겨서 힘들어하다가 아... recoil 사용하기로 했지? recoil로 전역상태관리하기로 했던 게 뒤늦게야 생각이 나서 그때부터는 술술 풀렸다. 그 대신 리코일은 지금 한창 쓰려고 노력하는 중이라 useRecoilState 코드가 많아졌다. 아직 조금 서툴러서 그런가 보다 하고 넘기려 함 차차 나아지겠지. 4주 차 때 리팩토링 하면서 정리할 거니 되었다. 그리고 이번에 react-datepicker라는 라이브러리 써봤다. 처음에는 조금 어려웠지만 https://reactdatepicker.co..

나는 모달창을 띄우고 싶다. 팀 프로젝트에서 새로운 게시글을 등록하려고 할 때 모달창을 띄워서 거기서 작성하려 함 daisyUi를 사용하고 있어서 거기서 모달창 디자인 따왔다. window.my_modal_3.showModal()}>open modal ✕ Hello! Press ESC key or click on ✕ button to close window.my_modal_3.showModal() 여기서 오류남 없대요 'Window & typeof globalThis' 형식에 'my_modal_3' 속성이 없습니다. 나는 바닐라 자바스크립트가 아닌 타입스크립트를 사용하니 오류가 뜨는거겠쥐 훔.. 그럼 dialog태그에 대해서 찾아봐야쥬 dialog태그를 넣는 것 자체로는 아무 기능을 하지 않는다... ..