안녕하세요. 중고거래 경매 서비스 미어켓의 백엔드 개발자 정승주입니다. 이번 글에서는 세션을 활용한 중복 로그인 도입과 그 과정에서 만나게 된 이슈를 해결한 과정에 대해 이야기를 해볼까 합니다. 세션을 사용한 이유와 세션을 활용한 로그인 방식에 대해 알고 싶다면, 이전 글을 이용해 주세요! 간단한 도입 배경앞 글에서 말씀드렸듯이, 미어켓 서비스 정책에는 사용자의 접근 통제를 중요시 여기다 보니 중복 로그인을 막아야 한다는 정책이 있었어요. 따라서 중복 로그인 방지 기능을 두어 다른 브라우저 혹은 기기에서 같은 사용자가 로그인을 하면, 이전에 사용했던 기기 또는 브라우저는 로그인이 풀리게 되어 다시 인증을 해야 하는 절차를 거치도록 설계했어요.현재 미어켓에서는 세션을 사용하고 있었고, 스프링 시큐리티에서는..

안녕하세요! 미어켓 프론트엔드 개발자 노윤지입니다.😊지난 글에서는 미어켓에서는 아토믹 디자인 패턴이 무엇인지와 이 방법론을 도입한 이유를 소개했었어요.이번에는 미어켓 팀이 아토믹 디자인 패턴을 도입한 방식와 실제 사용 후기를 나눠볼게요."아토믹 디자인 패턴은 멘탈 모델이기 때문에, 팀 내에서 아토믹 디자인 패턴 규칙을 정립해야 한다."미어켓 팀은 다른 팀들의 사례를 분석하여 각 팀이 아토믹 디자인 패턴을 도입하면서 새로운 규칙을 만들고 있음을 알게 되었어요. 미어켓 팀도 추상적인 패턴을 구체화할 필요가 있었죠.Atomic Design Pattern 사용 규칙미어켓 팀에서는 크게 4가지 규칙을 정했어요. 1. 디렉터리 구조 통일하기프로젝트의 디렉터리 구조는 다음과 같이 구성했어요.src/├── compo..

안녕하세요! 미어켓 프론트엔드 개발자 이예진입니다 😊이번에는 프론트엔드 팀이 API를 어떻게 호출하고 사용했는지 알려드리겠습니다.일반적으로 API 호출하는 방식// 게시글 목록 가져오기const posts = axios.get('') .then((res) => res.data) .catch((error) => console.error(error));// 게시글 등록const result = axios.post( '', { title: '제목 없음', content: '내용 없음' }, { withCredentials: true }, ) .then((res) => res.data) .catch((error) => console.error(error));물론 이렇게 호출해도 혼자..