react

개요 방학 동안 진행할 프로젝트에서 React Query를 쓰게 되었다. 현업에서는 거의 필수라는 말을 듣고 이게 대체 뭐길래?! 싶었다. 프로젝트 프론트 리더분이 저번에 내가 만든 UMC 미션을 보시고, React Query를 쓰면 따로 로딩 화면을 만들지 않아도 된다고 하셔서 더 기대가 된다. React Query란? React Query는 데이터 캐싱, Fetching, 동기화를 쉽게 해주는 라이브러리다. Redux 단점 1. 장황한 Boilerplate 코드 Redux 기본 원칙을 만족시켜야 하기 때문에 코드가 너무 장황해진다. Redux-toolkit을 써서 좀 줄였긴 하지만 여전히 하나의 API 요청을 처리하기 위해 여러 개의 Action, Reducer를 만들어야 한다. 2. API 요청을 ..

개요 프론트엔드 개발을 하다 보면 쿼리 파라미터 값을 추출해야 할 때가 있다. URLSearchParmas() 방법만 알고 있었는데 UMC 웹 스터디를 진행하면서 useLocation을 알게 되었다. 방법1. useLocation()사용 useLocation은 현재 페이지 경로 정보 객체를 반환하는 react-router-dom 함수다 search 속성에 쿼리 파라미터 정보가 있으니 이를 사용하면 된다. import React from 'react'; import { useLocation } from 'react-router-dom'; function MyComponent() { // useLocation 훅을 사용하여 현재 경로 정보를 가져옴 const location = useLocation(); /..

개요 프로젝트에서 소셜 로그인을 쓰기로 해서 카카오 로그인을 구현해야 했다. 카카오 developers 공식 문서와 많은 블로그들(진짜 거짓말 안 하고 모든 블로그를 다 본 것 같다...) 을 봤는데도 어려운 점이 있었다... 프로젝트 시작할 때 포기했다가 프로젝트가 중후반쯤 온 지금에서야 드디어 완성을 했다...ㅠㅠ 결론은... 프론트에서 카카오 로그인을 구현하는 건 진짜 간단하다..!! 백엔드 개발자분과 충분히 회의를 안 하고 바로 시작해서 좀 엉켰던 것 같다. 프론트에서 인가코드를 백엔드로 넘겨주고, 토큰을 받는 형식으로 진행해야 편한 것 같당☺️☺️ [카카오 소셜 로그인 과정] 1. 로그인 버튼을 누른다. (클릭하면 kakaoAuthUrl로 가게 설정) 2. KakaoAuthUrl에서 로그인 처리..

개요 프로젝트에서 클릭한 위치에 이미지를 배치하고, 새로고침을 해도 이미지가 고정되어야 하는 페이지가 있었다. 그런데 문제는 웹앱이다보니 기기가 달라지면 그 위치가 달라지는 문제가 있었다. 해결법 1. 현재 창의 X,Y 좌표를 구한다. getBoundingClientRect().x getBoundingClientRect().y 2. 브라우저에서 사용자에게 웹페이지가 보여지는 영역의 x,y 좌표를 구한다. clientX clientY 3. 2번에서 1번을 뺀 값을 이미지가 들어갈 컴포넌트의 높이, 너비로 나누어주고, 100을 곱한다. 매번 컴포넌트 높이, 너비가 달라지기 때문에 비율을 구한 것이다. ✳️컴포넌트의 높이, 너비 구하는 법 컴포넌트 속성에 ref = {componentRef}를 해주고, 아래 ..

지금 만들고 있는 페이지가 버튼을 클릭했을 때 페이지가 바뀌지 않고 처리할 것들이 많아서 useState를 이렇게나 많이 써버렸다... 사실 이 hook을 자유자재로 잘 쓰지는 못 했었는데 이번 기회에 아주 확실하게 익히게 되었다. 몇 가지 정리를 해보자면 1. styled-components을 이용해 스타일을 적용할 때 useState를 이용해 그 값을 바꾸고자 한다면 props로 넘겨주면 된다! const Sticker_Img = styled.img` display: flex; width: ${(props) => props.size}; height: ${(props) => props.size}; margin: 2vw; `; const [imgSize, setImgSize] = useState("37v..