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..
TDD란성공/실패 케이스를 작성한 테스트 코드를 먼저 구현하고 해당 테스트 케이스에 맞게 코드를 구현하는 것이전까지 진행한 방식은 컴포넌트를 먼저 만들고 기능 구현을 한 다음에 테스트 코드를 붙인 거라 TDD라고 할 수는 없다고 한다. 회원가입 로직으로 TDD를 진행해보자.SignupPage.tsx에 있던 ui는 모두 지워준다.// signup.cy.jsdescribe('회원가입 테스트', () => { it('사용자는 이메일과 비밀번호를 사용해서 회원가입한다', () => { // given - 회원가입 페이지에 접근한다 cy.visit('/signup'); // when - 이메일과 비밀번호를 입력한다 + 비밀번호와 비밀번호 확인값이 일치한다 // then - 회원가입 버튼이 ..
Cypress cloud 환경 설정첫 번째 테스트 자동화 도구는 cypress cloud다.cypress에서 무료로 제공하는 클라우드로, 테스트가 돌아가면 각 테스트에 대해 대시 보드를 볼 수 있다.또한 에러나 스펙에 대해서도 확인할 수 있고, pr이나 push가 발생했을 때 자동으로 테스트를 실행할 수도 있다.이것을 실행하기 위해 먼저 환경 설정을 해보자. Testing Frameworks for Javascript | Write, Run, Debug | CypressSimplify front-end testing with Cypress' open-source app. Explore our versatile testing frameworks for browser-based applications an..
스토리북UI 컴포넌트를 독립적으로 개발하고 문서화 할 수 있는 환경을 제공하는도구UI 컴포넌트에 story(UI 컴포넌트의 state를 의미)를 부여해서 렌더링을 테스트 한다. (ex. button - disabled, enabled, primary 등) 스토리북은 단순히 프론트엔드 개발자가 UI 컴포넌트를 테스트 하는 용도 뿐만 아니라, 디자인 시스템 구축에 중요한 역할을 한다.개발한 컴포넌트가 디자인 가이드에 맞는지, 스타일이 일관성 있는지, 재사용성 및 문서화와 더불어 프론트엔드 - 프론트엔드, 프론트엔드 - 디자이너 간의 협업과 의사소통이 수월해질 수 있도록 도와준다. 설치npx storybook@latest init 공식 문서 참고 (yarn은 yarn berry를 사용해야 에러가 없는데 저는..
Cypress로 공통 컴포넌트 테스트 하기 주문을 테스트 하려고 한다.이 때 사용자는 배달/주문 중 원하는 유형을 하나 선택할 수 있다./ 페이지에 오면 배달 버튼과 포장 버튼이 보인다.배달 버튼을 클릭하면 /food-type으로 이동하면서 여러 음식 종류가 노출되어야 한다. describe('주문을 테스트 한다', () => { it('사용자는 배달/주문 중 원하는 유형을 선택할 수 있다', () => { cy.visit('/'); cy.get('[data-cy=deliveryBtn]').should('be.visible').as('deliveryBtn'); cy.get('[data-cy=pickupBtn]').should('be.visible').as('pickupBtn'); ..
Cypress Testing Frameworks for Javascript | Write, Run, Debug | CypressSimplify front-end testing with Cypress' open-source app. Explore our versatile testing frameworks for browser-based applications and components.www.cypress.io 최신 웹 애플리케이션에 대한 E2E 테스트를 쉽게 생성하고, 시각적으로 디버그하고, 지속적 통합 빌드를 통해 자동으로 실행할 수 있는 테스트 도구 Cypress 설치 및 환경 설정npm install --save-dev cypress // package.json"cypress": "npx cypre..
로직이메일로 로그인을 하는 기능을 구현하려고 한다.회원가입과 유사한데 이메일 + 비밀번호 입력 후 로그인을 시도했을 때 로그인이 실패하면 에러 메세지가 나오게 해야 한다.하지만 실제로 HTTP 요청을 보낸다는 점에서 회원가입과 차이가 있다. 예제에서 사용하는 LoginPage에서는 useMutation이라는 훅을 사용하고 있다.비동기로 로그인 요청을 처리하고 요청이 실패할 경우 에러를 던지는 코드다.const useLogin = () => useMutation( ["login"], async (loginInfo: LoginProps) => postLogin(loginInfo), { onError() { throw Error("login failed"); }..
패키지 매니저란?소프트웨어 개발 과정에서 라이브러리나 프레임워크와 같은 외부 패키지 관리를 용이하게 해주는 도구로, 이를 통해 패키지의 설치, 업데이트, 삭제 등을 쉽고 효율적으로 관리할 수 있다. Node.js 환경에서 가장 널리 사용되는 패키지 매니저는 Node.js의 기본 패키지 매니저인 npm(node package manager) 이외에도 yarn, pnpm과 같은 다양한 패키지 매니저가 사용되고 있다. npm, yarn, pnpm 비교하기이들 모두 Node.js 환경에서 사용되는 패키지 매니저지만 각 패키지 매니저는 독자적인 설계 철학과 목표를 가지고 개발되었기 때문에 내부 동작 방식과 제공하는 기능에서 차이가 있다. npm가장 널리 사용되는 패키지 매니저로 커뮤니티와 패키지 수가 아주 많다...
발견한 에러questrip에서 맛집을 추천하는 페이지인 Recommend 페이지를 개발하고 있다.이 페이지에서는 서버로부터 10개 이상의 추천 데이터를 받아오지만 유저에게는 1개씩만 데이터를 보여준다.유저가 이 맛집을 선호하는지, 비선호하는지, 관심 없는지 무조건 1개 이상의 상태를 취해야만 계속 추천 데이터를 볼 수 있다. 즉 선호(Accepted), 비선호(Denied), 관심 없음(Kept) 3가지 중 1개의 상태를 취하면 그 상태를 post 해 서버에 현황을 보내주고, 추천 데이터는 1개가 줄어든 상태로 다시 받아와야 한다.const response = await axiosInstance.post( `/api/v1/recommend`, { placeId: placeId, ..
