100일은 해야지

React Query: 동적 데이터 관리를 위한 도구 (Feat. 열일) 리액트 쿼리를 다뤄보지 않았다. 이번에 팀프로젝트하면서 처음 다뤄봄... 결론은 좋은 녀석 깔끔한 녀석 일단 리액트 쿼리에 3가지 핵심 개념 Query, Mutation, Cache 이번에 사용한 것은 use Mutation이다. 뮤테이션은 서버에 데이터를 변경하는 요청, 뮤테이션을 통해 데이터를 갱신하고 그 후의 쿼리 결과를 업데이트해서 최신 데이터 유지가 가능하게 해 준다. 먼저 데이터 변경 로직을 구현한 후 interface editProps { postId: number; text: string; } export const editPosts = async ({ postId, text }: editProps) => { try ..

Input type=checkbox에서 갑자기 오류가 뜬다. 작동은 잘 되긴 하는데... provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. onChange핸들러 없이 prop양식에 넣었다니... input은 그냥 창을 띄우기위한 버튼이라 없는 셈치고 label에 onClick을 해줬는데 setOpenForm(true)}> + 그걸 onChange로 바꿔줬는데 변화 없이 오류가 뜨고 i..

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..

나는 모달창을 띄우고 싶다. 팀 프로젝트에서 새로운 게시글을 등록하려고 할 때 모달창을 띄워서 거기서 작성하려 함 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태그를 넣는 것 자체로는 아무 기능을 하지 않는다... ..

1주 차는 너무 슝슝 지나갔다. 백엔드분들의 개인과제도 안 끝나고 해서 정말 의미 없게 보낸 듯... 그냥 진짜 pre기획이랑 와이어프레임도 간단히 짜고 회의할 때 점점 기능들을 뺐더니 1주 차 멘토링 때 더 보완하라는 말이 나왔..... 다 정말 우리 팀이 뺀 기능들을 쏙쏙 골라서 이러면 더 좋지 않을까요 하시는데 하하하하 회의 더 해보겠습니다. 하고 기능을 더 추가했다. 2주 차는 시작했다는 것에 의의를 둠 그냥 와이어프레임 나온 대로 ui 짜고 목데이터를 이용해서 약간의 기능을 넣었달까... 그 와중에 멍청하게 한 시간 날려먹은 멍청 시간도 있었다... 나는 퍼센트를 구하고 싶은데 왜 0%만 나오는가? 함수를 넣으면 안 되나? 왜 안되지? 이제까지 잘만했는데 오만 생각 다함 진짜 한 시간 동안 허튼..

시맨틱 태그(Semantic Tag) 내용에 대해 아무것도 알려주지 않는 태그나 태그 등과는 다르게 시맨틱 태그는 웹 페이지 내의 내용에 의미와 콘텍스트를 제공하는 HTML 태그입니다. 즉, 페이지에 내용을 표시하는 '방법'을 지정하는 것이 아닌 내용의 '목적'이나 '의미'를 설명하도록 설계된 것이죠 주로 쓰는 시맨틱 요소 정리 : 웹 페이지의 헤더 섹션을 정의할 때 사용합니다. 일반적으로 제목이나 로고 머리말 같은 요소들이 들어갑니다. : 웹 페이지의 탐색 섹션을 정의할 때 사용합니다. 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크들이 들어갑니다. : 블로그 게시물 또는 뉴스 기사와 같은 웹 페이지 내에 포함된 콘텐츠를 정의하는 데 사용됩니다. : 웹 페이지 내에서 내용 섹션을 정의하는..