100일은 해야지

카카오로그인 예전에 개인 프로젝트를 하면서 firebase로 일반 로그인과 구글 로그인을 구현한 적이 있었는데, 카카오 로그인은 안 해봐서 이 부분을 내가 맡아보겠다고 했다. 처음에 내가 해야 할 일은 아래 이미지에서 step1. 까지, 카카오에서 인가 코드를 받고 백에다가 그 인가 코드를 넘겨주는 것이라 생각했다. 하지만 백엔드분과 프론트엔드의 다른 분과 회의를 했을 때 step2. 토큰까지 받아서 그 토큰을 백에다가 넘겨주는 것까지 해야 한다고 하셔서 일단 하기는 함. 보안을 강화해야 할 카카오 액세스토큰과 리프레쉬토큰을 프론트에서 다룬다? 조금 의아하긴 하지만 뭔가 백에서도 자체 로그인할때 액세스토큰과 리프레쉬토큰을 프론트에 넘겨주고 그것을 프론트에서 관리해야하니까 맞는것 같기도.. 그래서 이부분은..

새로 시작한 팀프로젝트. 6주간 진행되는 거였지만 이번에 명절이 포함되어서 7주 동안의 프로젝트가 되었다. 내가 속한 팀은 BE 4명, FE 2명의 구성으로 총 6명이다. 이번에 같이 하시는 프론트엔드 분이 css관련 라이브러리를 한번도 안써보셨다고 했다. 라이브러리의 편리함을 이미 수없이 많이 느껴본 나는.... 음… 라이브러리를 안쓰고 어떻게 했더라? 일단 나만 라이브러리를 써봤으니 그냥 선택권을 같이 하시는 분께 넘겼다. 라이브러리를 안쓰신다고 하면 이왕 이렇게 된거 css 다시 공부하고 좋지 뭐 라는 생각했기 때문에 상관이 없긴 했다. 결론은 ui 라이브러리 안쓰고 그냥 scss(sass)로 하기로 결정. 1주차에는 개발기획을 짜고 개발을 들어가는 주여서 와이어 프레임짜고 UI 디자인을 하느라 c..

ZeroToTen(Save-Game) 팀 프로젝트 1차 마무리가 어제 끝났다. 1차 마무리라고 한 것은 우리 팀이 하고 싶은 기능들이 많았지만 할 수 있는 것부터 우선순위를 정해서 해왔기에 후순위로 밀린것들이 많았기 때문에 6주간의 팀 프로젝트 기간까지 마무리할 수 있는 기능을 정한 후 그것만 끝냈기 때문.. 그래서 후순위의 기능들이나 추가로 더 하고 싶은 것들을 의논한 후 프로젝트를 보완하기로 함 팀프로젝트를 하면서 멘토님들께서는 지금까지의 팀들을 보면 프로젝트 기간이 끝난 후에 못 할 가능성이 많다고... 그래서 일단 시간이 되는 사람들은 계속 만들고 취업하거나 시간이 안 되는 사람들은 어쩔 수 없다 생각하며 만들기로 했다. 이번 프로젝트를 하면서 좀 더 공부해야 할 부분들도 보고 팀원들과 소통하는..

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버튼을 누르면 지워진다. 아직..

저번에 만들었던 모달 안에 게시글 등록 폼을 작성할 예정 일단 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..