미리보기

V-flow: 전력 입찰, 관리 전력 중개 통합 서비스

• Github Action CI/CD 를 통한 손쉬운 배포
  s3 배포 -> cloudfront (http -> https) 리다리엑트 연결
• 배포방식 구축: main, develop : (백업), release-prod, release-dev: (배포), feature-**: (작업)
• 기존 redux 를 활용한 외부 데이터 관리를 React-Query 전환하여 상태 관리의 간편성 및 캐싱 및 자동 리프레시 기능 활용 및 불필요한 요청 차단 업데이트가 필요없는 데이터 재호출 방지 => 불필요 호출량 절반 감소, 재사용성 증가로 300줄 이상 코드량 줄이는 효과
• 사용자 권한 레벨에 따른 메뉴 구성도 분리 및 기능 차별화
• axios instance를 통하여 리프레쉬 토큰 재발급 및 토큰 유효기간 초과 시 자동 로그아웃 처리 구축
• Echarts 라이브러리 활용하여 실시간 전력량 노출 및 데이터 시각화
• 공용 레이아웃 컴포넌트 분리 작업, 재사용성 증가 효과로 유지 보수 편리
  모달, 메세지 창, 숫자 카운팅 애니메이션 등 템플릿 제공 외의 공용 컴포넌트 제작
• 반응형 레이아웃 제작
• GA4 연동으로 ux 편리성 증대
  
  
  사용 언어 및 툴 : Typescript , React , Styled-Component , M-UI, Redux, React-Query, Nginx, Aws S3, Cloudfront, Jira, Notion, Github Action CI/CD
  
  
  업무 성과 : 제주에너지공사, LG애너지솔루션 계약 및 민간 발전소 계약, kt, 한화 등 계약 기여, V-flow 서비스 런칭
  
  
  flow : 실시간 전력중개 서비스
  
  
  전력 오차율, 예상 수익 분석, 입찰 서비스
• 기존 프로젝트 레거시 파일 수정 및 차트 추가, 반응형 레이아웃 개선
• Echart 라이브러리를 통하여 차트 및 테이블 데이터 시각화
• Custom Hooks 디자인 패턴 적용
• 전역 데이터 redux, redux toolkit 사용하여 효율적인 데이터 관리
• Github Action CI/CD로 효율적인 배포 및 관리
• 배포방식 구축: main, develop : (백업), release-prod, release-dev: (배포), feature-**: (작업)
  
  
  사용 언어 및 툴 : Typescript , React , Styled-Component , M-UI, Redux, Git, Nginx, Aws S3, Cloudfonrt, Jira, Notion, S3, Axios, Echarts, Github Action CI/CD
  
  
  v2g : 전기차 충전 서비스, 충방전 회원 관리 서비스
  
  
  전기차 충전 서비스, 충방전 회원 관리 서비스
• 기존 fetch 문을 리액트 쿼리로 전환하여 상태 관리의 간편성 및 캐싱 및 자동 리프레시 기능 활용 및 불필요한 요청 차단 업데이트가 필요없는 데이터 재호출 방지
• Web-Socket 도입으로 실시간으로 충전 상태를 체크 및 요청 호출

기존의 유아틱한 홈페이지를 서비스 이용 고객층을 파악하고 분석하여, 이를 기반으로 맞춤형 (30~50대 남성) 홈페이지 레이아웃 재구성
웹 어워드 및 각종 사이트 참고 레이아웃 창작
AOS, Bootstrap을 활용하여 포인트를 살려 회사의 정보 전달 효율 향상
네이버 sens를 사용하여 문자인증을 기능으로 중복 방지 및 도용 방지
사용 언어 및 툴 : Typescript , React , Styled-Component , Bootstrap, AOS

사용자의 고민을 ai인 gpt를 통하여 답장을 받는 서비스

• chat gpt api를 사용하여 인공지능으로 답변
• 스텍 형식 단계별 고민 해결
• 하루 3회 기회 제공
  
  
  기능 및 구현사항
• React-Native, Expo를 통하여 안드로이드, ios 손쉬운 개발 및 빌드 배포
• Firebase를 이용하여 백엔드 리소스 투자 X 및 빠른 개발
• Firebase 로그인, 회원가입 기능 개발
• Firebase Realtime Database 게시물 저장 및 리스트화
• Chat GPT api를 이용하여 ai 서비스 제공하여 기존의 서비스들과 차별화
• Router를 StackNavigator, BottomTabNavigator로 조합하여상황에 맞는 페이지 전환
• 질문 요청 페이지, 로그인 회원가입 페이지(stack), 기타 페이지 (bottomTab)
• Recoil 전역관리 및 로그인 상태 체크
• 원스토어 출시
  
  
  최적화 및 개선사항
• 이미지 파일 교체(png ⇒ svg)로 어플 실행 시 이미지(2s -> 0.5s) 로딩 속도 축소
• atomic 디자인 패턴 적용으로 재사용성 극대화 및 빠른 개발
• Dimensions 기능이용, 모바일 화면에 따른 폰트사이즈 일치화 디자인 깨짐 해결
• AllowFontScaling 활용하여 어플 내 폰트사이즈 고정
  
  
  사용 언어 및 툴 : Typescript, React-Native , Styled-Component, Recoil, Expo, Firebase, Chat-Gpt
  
  
  기술 선택 이유
• Expo를 통하여 React-native 개발하여 안드로이드, ios 손쉬운 개발 및 추후 Expo
  걷어내고 React-native 전환 가능하여 Expo 선택
• Firebase 선택하여 부족한 server 기능 구현 및 보안 증가
• 일관된 디자인 시스템을 구축하고 반응형 디자인을 구현하기 위해 atomic 디자인 채용 및 재사용성 증가로 인하여 구축 시간 단축
• 상태의 종속성을 선언적으로 정의하기 때문에 컴포넌트 간의 의존성이 줄어들어 유지보수가 용이하고 전역 데이터 상태관리 위하여 Recoil 선택
• Gpt api를 통하여 다양한 답변 가능으로 다양한 기존 서비스들과 차별화
  
  
  트러블슈팅
• React-Native와 Expo, Firebase,router 간의 버전 호환성 문제가 발생.
  ⇒ 각 라이브러리의 공식 문서를 확인하여 현재 사용 중인 버전과 호환되는 다른 라이브러리의 버전 체크 후 버전 수정, Expo SDK 업데이트 진행.
• 라우팅 라이브러리 호환성 문제 직면,
  ⇒ 사용 중인 라우팅 라이브러리가 React Native 및 Expo 버전과 호환되는지 비교 후, stack overflow 활용 버전 일치화
• Gpt api의 key가 github에 올라가면 자동으로 key 잠김 현상
  ⇒ env 활용하여 key 관리 및 어플 적용
• styled-components 와 style sheet 가 공존할 때 캐스케이딩 이슈로 UI 깨짐 현상

• 취업 준비를 하면서 필요한 3가지 이력서, 깃허브, 블로그를 모두 담은 리액트 마크다운 블로그 사이트를 만들었습니다. 깃허브과 이력서 페이지도 추가로 제작할 예정입니다.
• 프론트엔드 2명, 백엔드 2명
• 담당 페이지 및 기능: 소셜로그인: github 소셜로그인, nav바, 상세페이지,수정페이지: react markdown, 마이페이지(구현 중), 태그폴더 dnd: (react beautiful dnd), next.js blocker 요소 훅 처리(window, document 접근), recoil 처리(persist 사용), 반응형 레이아웃
  
  
  사용 된 기술 : react, next, tailwind css, typescript, recoil, react-query, axios, react-beautiful-dnd, jira, slack, codefactor, vercel, aws route53, ec2
  
  
• 기술 선택 이유
• 블로그가 검색 엔진에서 잘 노출되고 SSR 환경을 구축하기 위해 Next.js를 선택했습니다.
• 일관된 디자인 시스템을 구축하고 반응형 디자인을 구현하기 위해 Tailwind CSS를 선택했습니다.
• 전역 데이터 상태관리로 recoil은 상태의 종속성을 선언적으로 정의하기 때문에 컴포넌트 간의 의존성이 줄어들어 유지보수가 용이하다고 생각되어 선택했습니다.
• 서버와의 통신에서 캐시 및 데이터 자동 업데이트, 에러 핸들링이 쉽도록 React Query를 사용하였습니다.
• 최초 배포는 EC2로 진행했지만 과금 요소가 있어서 Vercel로 배포하고 있습니다. 사용자가 증가할 경우 트래픽을 감당하기 위해 EC2로 마이그레이션할 계획입니다.