프로젝트/가말다 - 마일스톤

이전에 참여했던 가말다 프로젝트에서 소셜 로그인 기능을 구현한 경험이 있다. 별도의 회원가입을 하지않고 구글과 네이버, 카카오와 같은 외부 소셜 계정을 기반으로 간편하게 회원가입 및 로그인할 수 있어 많은 웹과 앱 어플리캐이션에서 사용하고 있다. 이때 사용했던 것이 OAuth 2.0 프로토콜을 사용하는 Naver Login API인데 오늘은 OAuth에 대해 알아보자. OAuth란? OAuth는 유저가 비밀번호를 제공하지 않고 다른 웹사이트 상의 유저의 정보에 대해 웹사이트 혹은 애플리케이션의 접근 권한을 부여할 수 있는 수단으로서 사용되는 접근 위임을 위한 개방형 표준이다. OAuth의 구성요소 구분 설명 Resource Owner 웹 서비스를 이용하려는 유저, 자원(개인 정보)의 소유주, 사용자 Re..

이번 글을 단순 기록용으로 작성할 예정이다. 최근 가말다 프로젝트의 리펙토링을 하던 중 유저의 프로필 이미지가 불러오지 않는 오류를 발견했다. 처음에는 리펙토링 도중 새롭게 작성한 코드 때문인줄 알았다. 하지만 원인은 다른 곳에 있었다. 에러의 원인을 어떻게 찾았냐 하면.... 브라우저의 콘솔 창을 보고 알게 되었다. 최근 가말다 서비스의 도메인을 변경한 기록이 있다. 기존에 사용했던 도메인은 .site이었지만 새롭게 변경한 도메인은 .co.kr이다. 이미지 서버의 도메인도 당연히 변하게된다. 기존 http://gamalda.site:(이미지서버 포트)/(이미지 주소) 변경 http://gamalda.co.kr:(이미지서버 포트)/(이미지 주소) 그런데 이미지 서버에서 Client로 이미지 주소를 보내줄..

리펙토링을 진행하게된 계기 방치하고 있던 프로젝트가 있었다. 이 프로젝트를 진행할 때 꽤나 공을 들인 프로젝트였는데 코테준비다, 시간이 없다 등 지금 생각하면 배부른 핑개를 대며 프로젝트를 방치했었다. 하지만, 최근 원티드 프리온보딩을 통한 좋은 코드와 SOLID 원칙에 대한 강의를 듣고 프로젝트의 코드들을 전체적으로 살펴봤다. 지금 보니 아주 난장판이였다. import { ReactComponent as GamaldaSVG } from 'assets/svg/gamaldalogo.svg'; import naverLogin from 'assets/png/naver_login.png'; import { useEffect, useRef } from 'react'; import { Link } from 'rea..

프로젝트에서 유저와 프로젝트에 사용할 이미지를 저장하기 위한 이미지 서버를 팀 동료가 구축했다. [express] 라즈베리파이 이미지서버 사용 라즈베리파이를 활용해서 이미지서버를 올려보았다. 간단하게 이미지를 받으면 이를 파일로 저장하고, url로 해당 이미지를 띄워주는 간단한 기능을 하는 서버라 크게 어려울 것은 없다. 라이브 supersfel.tistory.com 이미지 서버에서 Post요청과 Delete요청으로 이미지 파일을 관리할 수 있게 구축했기에 이제는 FE에서 이미지 파일을 관리할 수 있는 API를 개발하면 된다. 파일 자체를 서버로 보내는것은 개발 공부를 하면서 처음 해보는 것이기에 조사를 해봤다. 이미지 파일을 자바스크립트 단에서 변형없이 비동기로 제출하려면 form-data 객체를 이용..

어떤 일이 있었나.... 유저가 속한 프로젝트들을 보여주기 위해 유저의 정보를 이용해 DB에 유저가 속한 프로젝트들의 정보를 가져와야 했다. DB에서 프로젝트들의 정보를 가져오기 까지 완료했다. 그렇다면 가져온 데이터는 어떻게 보관해야 할까? 라는 의문이 들었다. 가공은 객체 형식으로 된 데이터를 가져왔기에 비교적 쉽게 가공이 된다 치자. 내가 고민한 보관 방법은 Redux의 store에 보관을 해도 될까였다. 데이터를 가져올 방법을 고민하던 중 보게 된 react-query의 useQuery의 설명문을 보다 이런 의견을 보게되었다. 이 의견을 보니.... 흠.... 아무래도 우리가 만들고 있는 서비스가 실시간 수정이 가능도 하고, 다른 유저가 프로젝트에 새로 입장해도 안보여지면 이상할 것 같았다. 그래..

기본적으로는 fetch로 쿠키를 주고 받지를 않지만, 쿠키를 주고 받으려면 credentials를 설정해줘야한다. fetch는 Promise 객체를 반환한다.(HTTP Error는 반환하지 않는다.) credentials를 사용하는 예시를 적어두어야 겠다. 나중에 사용할 수 있기 때문..... 1. 자격 증명이 포함되게 보내는 경우 fetch(`${process.env.REACT_APP_API_URL}/naver_login/logout`, { method: 'get', credentials: 'include' }) 2. 요청하는 URL과 호출 스크립트가 동일한 Origin을 가졌을 때만 자격증명을 보내는 경우 fetch(`${process.env.REACT_APP_API_URL}/naver_login/l..