- 항상 내가 사용자라면 어떨까라는 생각을 하며 개발해요. 그래서
UI/UX에 관심이 많아요. - 코드를 작성하기 전 나의 코드를 볼 다른 개발자들을 생각해요.
좋은 코드를 만들기 위해 고민하고 있습니다. - 배포를 하지 않았다면 개발을 하지 않았다고 생각해요. 시작한 모든 일은 끝을 볼때까지 노력합니다.
- 총 4회의 해커톤 경험으로 다양한 개발자 및 디자이너와 소통한 경험이 많아요.
커뮤니케이션도 개발 능력 중 하나라고 생각합니다. - 개발 실력 뿐 아니라 비지니스적 마인드도 탑재한 개발자가 되고 싶어요.
Work Experience.
팜베이스 플러스
프리랜서2023. 03 - 2023. 06
폐수일지 사이트
- 주유소의 폐수일지를 편리하게 기록할 수 있는 서비스 개발
- Django 템플릿을 사용
- 다양한 종류의 form 요소를 개발
약국 지도
- 자신의 주위에 있는 약국을 지도로 보여주는 서비스
- 편리한 라우팅과 SEO를 위해
Next.js로 개발 Naver map API를 사용해 약국 지도 완성- JWT 토큰을 사용한 로그인 구현, Refresh Token을 추가해 보안 강화
- 편리한 라우팅과 SEO를 위해
Doodlin
프리랜서2022. 12 - 2023. 03
Greeting frontend team
-
국제화 작업
- i18n 라이브러리를 사용해 페이지 번역
-
국제화 작업으로 인한 디자인 수정
- Styled-components를 사용해 번역으로 인한 디자인 오류를 해결
- Figma, Slack을 통한 디자이너와 협업
Team Project.
반려견에 대한 모든 것을 공유하고 소통하는 공간 🐾
React-ViteTypeScriptEmotionReact-queryRecoilvitestStorybookYarn workspaceGithub action
- Planning Page 개발
- 개인 일정을 보여주는 달력 및 일정 컴포넌트 개발, 일정 모달 컴포넌트 개발
recoil을 사용한 modal 관리
Vitest를 사용한 유틸 함수 유닛 테스트- vite 를 사용한 react 프로젝트로
Jest와 연동되고 호환이 잘되어 있는Vitest사용
- vite 를 사용한 react 프로젝트로
- Wagggle-design-system 개발
yarn workspace를 사용한monorepo레포 구현- 패키지 간의 변경 사항이 즉시 반영되어 약 30% 개발 시간 단축
- ec2 + docker + Ngnix를 사용해 배포
교내 학생들을 위한 매팅 매칭 서비스!
Next.jsTypeScriptTailwindStyled-componentsHusky
- OAuth Google 로그인 연동
Axiosinterceptor를 사용한 API 에러처리- 프로필 저장 및 수정
- useReducer를 사용한 효율적인 state 관리
- 로그인 시 사용자 정보를
zustand를 사용해 저장- Persist 미들웨어를 사용해 새로고침을 하더라도 정보 보존 구현
쓱 - 하고 보는 나의 ESG 정보 , 미쓱(Mesg) 미쓱(Mesg)은 지속 가능한 미래를 위해 투자하는 똑똑한 투자자들을 위한 서비스를 제공합니다.
Next.jsTypeScriptTailwindReact-queryFramer-motion
React-query의 캐싱 기능을 사용해 비효율적인 API 호출 방지Framer-motion을 통해 page-transition과 sidebar 구현- 배운 점
Next.js에서 dynamic routes를 사용할 때 params.slug의 type은 string이다. number로 타입을 지정해도 오류가 나지 않으니 주의해야 한다.- 항상 자신의 코드는 의심하고 의심하자
중고나라, 당근마켓, 번개장터를 한눈에 볼 수 있습니다!
Next.jsTypeScriptReact-query
- 3개의 플랫폼에서 물건들을 크롤링하는데 비용과 시간이 많이 들어
React-query의 캐싱 기능 사용 React-query의 select 옵션을 사용하여 물건들을 어떤 플랫폼에서 왔는지 필터링 가능하게 구현- ChatBot API를 배포하고 채팅 UI 구현
Personal Project.
싱어송라이터 한로로 덕질을 위한 팬페이지! 한로로의 사진을 업로드하여 공유할 수 있습니다.
Next.jsTypeScriptTailwindFramer-motionExpressReact-queryMongoDBAWS S3
Interactive Web을 만들고자 Framer-motion을 활용- 게시물 layout animation, sidebar animation 구현
- useInView hook을 사용해 scroll에 반응하는 기능 구현
React-query를 사용한 기능useInfiniteQuery를 사용한 무한 스크롤 구현- 사진 업로드 기능에
Optimistic update구현
- yarn에서 최신 버전인
yarn berry로 마이그레이션 Figma를 통해 직접 디자인 후 개발- 배운 점
- AWS s3, CloudFront로 배포를 하려했으나 정적 배포 특성상 nextjs 일부 기능을 사용하지 못하여 vercel로 배포
- Cookie를 통한 정보 전달 시 사용해야하는 쿠키 파라미터
server side rendering과client side rendering의 차이
AI 타타로가 타로를 봐줍니다. 타타로는 어떠한 고민도 타로점의 주제가 될 수 있습니다!
JavaScriptHTML/CSSWebpackExpressAWS LambdaCloudFlare pagesOpen AI API
Open AI API를 사용해 타로보는 로직 구현- 타로 로직이 복잡한 추론이 필요한 작업이라고 생각하지 않았고 비용 측면에서 ChatGPT 3.5 Turbo 버전의 챗봇 사용
AWS Lambda를 사용해serverless상태로 벡엔드 코드 실행- AWS Lambda는 요청 건수로 요금을 산정하기 때문에 적은 비용으로 운영할 수 있다고 생각하여 채택
- 하나의 HTML로 만들어 SPA로 구현
사용자 1500명 달성- 사용자들을 통해 안드로이드에서 고민을 입력할 때 키보드가 가리는 버그를 화면크기를 키보드의 크기만큼 늘리는 것으로 버그 수정
Webpack및 기능 추가 완료 (2023. 12)