구 게시글/Breaking 프로젝트

피그마 SVG 파일 추출시 컴포넌트상에서 다른 이미지 생성

피그마에서 svg파일로 추출해서 프로젝트에 넣어서 사용하고 있었다 그러던 중 문제가 발생하였다 직접 파일을 볼때는 정상 작동 하였지만 React 코드 상에서 불러올때는 다른파일 이미지가 불러와 지는 것이다. 이유는 정말 참신했다 피그마에서 svg파일을 export할시에 svg파일에 있는 pattern의 id값이 각 svg의 고유값이 아닌 전부다 pattern0을 띄우고 있기 떄문이었다. // svg 파일중에 있는 코드 rect라는 태그의 fill이 pattern0을 가르키고 있다 여기서 지정하는 pattern0은 바로 밑에있는 pattern 태그를 뜻한다 이 pattern에서 이미지를 불러오게 된다 하지만 이게 페이지 단에 업로드가 되면 문제가 된다. 피그마에서 image가 있는 모든 파일들을 svg로 ..

QueryString(부제: 카카오 로그인)

카카오 로그인 오류 js sdk를 이용하여 카카오 로그인을 구현하던 중에 발생하였다. 프론트단에서 카카오로그인으로 인가 코드를 받고 토큰을 받아 와야 로그인이 완료가 되는데 토큰을 못받아 왔다 인가코드는 js sdk를 사용해서 구현을 할 수 있었지만 토큰은 rest API post method를 이용해서 받아와야 했다 export const postAccessCode = (data) => { const headers = { 'Content-Type': 'application/x-www-form-urlencoded', }; return axios({ method: 'post', url: KAKAO_PATH.OAUTH_TOKEN, headers: headers, data: data, }); }; 필수설정을 ..

소셜 로그인(카카오, 구글)

로그인 전략 카카오 로그인과 구글 로그인을 사용하였으며 oauth를 사용해서 로그인 하였다 우리는 jwt토큰으로 로그인을 한다. oauth 2.0 방법 사용 사진은 카카오 로그인 방식이지만 구글 또한 같은 전략을 사용한다. 카카오 로그인 전략으로는 클라이언트가 카카오에 로그인 요청을한 후 인가코드를 받아서 우리 서버로 전송후 백엔드에서 카카오로 코드를 주어 토큰을 받는 방식으로 동작한다. 다만 지금 우리 프로젝트 같은 경우에서는 벡엔드 팀이 안드로이드 팀은 토큰을 바로 백엔드에 넘겨주어 프론트도 똑같이 인가코드를 주는 것이 아닌 토큰을 주는것으로 해달라고 요청하였다 프론트 로그인 흐름 카카오서버에 로그인 요청 인가코드 발급 인가코드를 카카오서버에 전달 토큰을 받음 토큰을 벡엔드로 전달 로그인 flow i..

프론트엔드의 JWT

jwt토큰은 쿠키 세션 처럼 인증방법의 한 종류이다 출처: https://www.bezkoder.com/jwt-json-web-token/ jwt 인증방법 cookie session 인증 방법 둘의 공통점은 서버에 어떤 값을 주고 원하는 데이터를 받는다는 점이다 기존의 쿠키 세션은 세션아이디를 통해서 서버에 저장되어있는 데이터를 불러오지만 jwt는 서버에서 유효한지만 체크하고 데이터를 넘겨준다 JWT 토큰 - 구조 jwt는 기본적으로 토큰안에 데이터가 들어있다. Header, Payload, Signature 3부분으로 이루어지는데 각각의 부분은 Base64Url로 인코딩되어 있어 디코드를 하여 데이터를 얻는다. ( 보통 인증할때 백엔드에서 유효하면 디코드 해서 데이터를 넘겨준다) 단 여기서 인코딩은 암..