100일은 해야지

Step1. 인가코드 받기 인가코드는 Authorization, 사용자가 동의한 항목에 대해서 접근권한을 획득하는 것이다. 일단 kakao developers의 rest API를 사용할 것이기 때문에 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 카카오 디벨로퍼 사이트에 가입을 한 후 애플리케이션을 추가한다. 애플리케이션을 추가하고 추가된 애플리케이션을 클릭하면 앱키가 발급된다. 그리고 앱키가 나온 바로 왼쪽에 앱설정에서 플랫폼을 클린한 후 사이트 도메인을 입력하면 된다. 혼자 공부한다면 localhost만 입력해도 되지만 배포를 할 것이기 때..

해시태그를 구현해 보려고 함 📝 형식 해시태그 글자의 수는 10글자 이하 엔터키로 넣기 최대 5개 => 더 입력하려고하면 modal이나 alert 띄워주기 태그한 목록 띄워주기 해시태그 지울 수 있게 하기 엔터일 때만 값을 추가 해야 되기때문에 e.key === "Enter"를 넣었다. const tagDown = (e) => { if (e.key === "Enter" && tagLists.length === 5) { setInputValue(""); console.log("5개임 바이"); } else if (e.key === "Enter") { setTagLists([...tagLists, inputValue]); setInputValue(""); } }; 태그 setInputValue(e.targe..

카카오로그인 예전에 개인 프로젝트를 하면서 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..

시작하기 | 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를 쓰..