## 플링 앱의 다국어 버전의 웹버전 개발 https://app.plingcast.com [ 사용기술 ] react, Next, GraphQL, restApi, SWR, tailwind, sentry, axiom, Amplitude, i18n - 프론트 개발자와 협업하며 Git Flow 정하여 적용하고 개선한 경험 - Next13버전의 서버컴포넌트와 새로운 SSG,SSR,ISR을 적절히 활용하여 메인서버 리소스를 줄이며 더욱 좋은 UX 위해 노력중입니다. # 출판사와 크리에이터가 사용하는 CMS 프론트 전반적인 개발 및 배포 담당 [ 사용기술 ] react, Next.js, antd, styled-components, SWR, apolloClient, restApi, codegen, sentry [ 주요 업무 ] - 출판사와 크리에이터의 회원 가입, 로그인 페이지 - 작품 업로드 페이지 개발 * 멀티 파일 업로드, Drag & Drop 으로 순서 변경, 추가 수정 삭제기능 개발 - 작품 관리 페이지 개발 * 작품 관련 정보를 보여주고 기존 작품의 수정과 추가 예약업로드 기능 개발 - 매출 관리 페이지 * 전체 매출과 작품별 매출, 상세내역 등을 날짜별로 보여주고 엑셀로 다운로드 받을 수 있는 기능 개발 - 유저인증, 라우팅, 파일 업로드 속도, 상태관리 등의 리팩토링 - 정산 페이지 개발 - 작품 업로드시 금칙어 필터링 기능 추가 - 유저 인증방식을 JWT 토큰 + Iron sessions 방식으로 변경 - 기존 javaScript 코드에서 TypeScript 로 변경 - 번들파일 축소를 위해 moment.js 에서 day.js로 변경 [ 사용기술 ] react, Next.js, antd, styled-components, apolloClient, restApi, busboy, S3, codegen, sentry - 자사 쇼핑몰 주문 배송 관리 페이지 - 푸시 알림 발송 페이지 개발 - 앱 서비스의 탭별 슬라이드 정보 예약 수정 페이지 개발 - 크리에이터와 출판사의 가입관리 페이지 개발 - 이미지 업로드 어려웠던 점 - S3에 이미지 업로드시 CORS 와 내부 사정으로 클라이언트에서 S3로 직접 업로드 할 수 없는 조건에서 nextApi 서버를 경유해서 보내려고 했지만 bodypaser를 통해 받은 파일과 s3에서 업로드 해야하는 파일 형식이 일치하지 않아 정상적인 이미지 업로드가 어려웠습니다. 파일 형식을 맞추기 위해 multipart/form-data 형식으로 받은 이미지 파일을 busboy를 사용해 arraybuffer 형식으로 파싱 후 S3에 전송하여 해결했습니다. ## 주요 경험 - Iron sessions 과 JWT토큰을 동시에 사용해 유저 인증 방식 개선 - SEO와 SSR 관련 경험 - TypeScript 사용 경험 - vercel 을 이용한 배포, 서버리스API 개발과 사용경험 - 서버리스로 회원가입과 로그인, 이미지 업로드, 엑셀파일 생성 경험 - Apollo Client와 SWR를 사용한 상태관리 경험 - GraphQL 기반 서버 Apollo 사용 경험 - Code Generator 를 활용한 타입 생성 및 사용 경험 - ReactNative 를 사용해 자사앱 메인화면 및 일부 화면 개발경험 - Amplitude, Google Analytics, sentry, Axiom 을 사용한 유저 이벤트 트래킹 환경 구축 - i18next, i18next-scanner, google-spreadsheet 사용한 웹사이트 국제화 경험 - 센트리 사용시 소스맵이 노출되는 현상을 발견후 조치

더보기