Intro안녕하세요.오늘은 Next.js에서 next-auth 없이 애플 로그인을 구현한 과정을 정리하려고 합니다. 소셜 로그인을 구현한다면 대부분 카카오톡, 구글, 네이버를 많이 떠올리실 것 같은데요.이번 저희 팀의 서비스는 앱이어야 접근성이 높아지는 '기록' 서비스이기 때문에 앱 출시를 해야 했습니다. (ㅠㅠ)iOS에서 설치할 수 있는 앱, 즉 앱스토어에 출시하기 위해서는 반드시 애플 로그인이 구현되어야 합니다.그렇기 때문에 이번에 처음으로 애플 로그인을 구현하게 되었어요. 다른 소셜 로그인들은 수월하게 진행한 반면 애플 로그인은 매우 챌린징한 요소들이 있었습니다. 1. 부족하고 오래된 레퍼런스애플 로그인을 웹에서, Next.js로 구현한 레퍼런스가 거의 없었습니다.있어도 최소 6개월 ~ 몇 년 전 ..
Intro안녕하세요. 오늘은 디프만에서 맡은 역할 중 하나인 공통 컴포넌트 제작에 대해서 정리를 해보겠습니다.프론트에서 화면을 구현할 때, 여러 페이지에서 공통적으로 쓰이는 컴포넌트가 있을 것입니다. 만약 똑같은 디자인의 버튼을 메인 페이지에서도 사용하고, 마이페이지에서도 사용할 경우하나의 버튼만 만들어서 두 곳에서 import 하면 훨씬 간단하겠죠? 프로덕트의 스케일이 크면 클수록 아주 작은 아이콘부터 모달, 탭, 바텀 시트 등 여러 컴포넌트가 많은 페이지에 사용됩니다.저는 이번에 탭 컴포넌트와 버튼 컴포넌트를 담당하게 되었습니다. 디자이너와 프로그래머의 만남이라는 이름대로 이번 프로젝트에서는 디자이너 분들이 모든 uiux를 담당해주셨는데요.디자이너 분들이 디자인 시스템을 완성하면 프론트엔드는 이것을 ..
Intro이번 서비스에서 내가 맡은 부분은 소셜 로그인이다.백엔드는 spring security로, 프론트에서는 next 14로 해당 기능을 개발한다. 개발 단계에 들어가기 앞서 서버와 미스컴으로 next-auth라는 조금 쉬운 길을 가지 못했고,React로만 개발을 해서 next에 대해 제대로 이해하지 못했던 시행착오부터그렇다면 next에서는 어떻게 해야 하는지의 과정을 정리하려고 한다. React에서는 됐다고요기존에 React로 로그인 기능을 구현할 때는 서드파티 라이브러리인 react-cookie와 axios interceptor를 사용했다.로그인 시 서버로부터 응답을 받으면 accessToken은 쿠키에, refreshToken은 로컬 스토리지에 setCookie()로 저장하고,axios head..
Intro디프만 15기에 이름을 올린지 벌써 두 달이 지났다.우리 팀은 치열한 아이데이션과 기획 단계를 거쳐 수영 기록 서비스를 목표로 1차 MVP를 개발하고 있다. 개발 경험이 적은 나에게는 11명의 팀원들과 합을 맞추는 것도 큰 챌린지지만,이번 프로젝트는 무엇보다 기술적으로 챌린지가 많이 있다. (그만큼 성장도 많이 하고 있다!) 현재 기술 스택은 크게 NEXT, PandaCSS, pnpm, jotai, Storybook인데 제대로 써본 것이 단 1개도 없다! 🙃게다가 이후 애플워치 연동과 React Native 또는 PWA로 앱화 하는 작업도 필요해서 첩첩산중이다. 메인 기술부터 러닝 커브가 있었기에 스타일링만은 제발 익숙한 스택으로 추진하고 싶었지만,내게 익숙한 것은 Styled-componen..
디프만 15기지원 이유때는 바야흐로 작년 9월 우리 홍삼팀 백엔드 노루스름 님과 너디너리의 데모데이에 참석했을 때였다.비전공 + 개발 입문 = 말도 못하는 감자인데다 아무 것도 모르는 그 행사장을 돌아 다니면서 아쉬움이 많이 들었다. 생각없이 복전하지 말고 개발 할걸... 그리고 거기서 자신들이 만든 서비스를 홍보하는 사람들이 너무 반짝이고 뜨거워보여서 부러운 마음이 들었다.나도 하고 싶다는 생각이 들었지만 난 늙었고 ㅋㅋ 내 실력으론 불가능... 까진 아니어도 한참 걸리겠지 싶었다.그래도 그렇게 사람들과 서비스를 기획하고 런칭하고 홍보하는 순간이 있으면 재밌겠다고 생각했다. 노루스름 님이 다른 개발자 커뮤니티도 몇 개 알려주어서 이런 게 하나 뿐이 아니구나! 세상에 하고 여러 군데를 둘러봤는데...다 ..
