😁 이유를 고민하는 개발자 홍원배입니다
🙋♂️ About me
👨🏼💻 Skills
- SCSS, Emtion, Typescript, Webpack 등 을 제외한 주요 기술스택만 서술했습니다
- 프론트 뿐만 아니라, NodeJS와 AWS를 활용하는 백엔드에도 관심이 많습니다 🤣
📝Projects
개인프로젝트
기술 블로그 (v2)
- Notion을 CMS(컨텐츠 관리 시스템)로 활용하여 정리된 글을 포스트 합니다.
- 학습한 내용을 컨텐츠로 하여 오픈소스에 기여하고, 지속적인 코드 리팩토링을 통한 실습을 목적으로 합니다.
- [블로그v2 저장소]
- NextJS를 이용한 pre-rendering 방식과 react, redux를 사용한 CSR 렌더링하는 복합적인 렌더링 방법 이용하여 SEO 달성
- 반응형 웹 디자인 적용 (태블릿, 모바일 지원)
- 웹 표준을 고려한 HTML과 다양한 CSS를 적용
- AWS EC2의 클라우드 비용을 고려해야 하는 점을 Notion을 CMS로 설계하여 해결
- 순수 리액트만을 활용한 SPA의 비효율적인 렌더링 방식을 개선하여 SSG, SSR로 최적화된 렌더링 방식을 고려하여 적용 (블로그 글: SSG, 검색 기능: SSR)
- 블로그 UX에서 중요한 것은 관심사별로 포스트를 확인할 수 있는 경험이라고 판단, 관련 포스트를 태그로 유동적으로 묶고 검색 기능을 지원함으로서 UX를 고민했습니다
- [이슈1]
- [이슈2]
블로그 v2에서 개선 된 점
저는 이렇게 고민하고 해결합니다!
[블로그v1 저장소]
- 로그인 하여 markdown을 직접 등록하여 포스트하는 방식
- AWS EC2와 CloudFront등을 활용해 https 프로토콜 적용
- express와 mongoose ODM을 활용, Restfull 한 설계를 통한 ‘좋아요’, ‘방명록’, ‘검색’ 기능 [백엔드 참조코드]
- 최신 Google Analytics API(Data v1) 등을 활용한 실시간 방문자 집계 지원
저는 이렇게 고민하고 해결합니다!
이슈1
- Notion으로 작성되어서 export되어진 markdown파일은 <aside />라는 특정한 요소가 남아 있고, 해당 요소는 react-markdown으로 렌더링이 되지 않는 이슈 발생
- markdown 파일의 특정 형식 (<aside />)만을 제거하기 위해 AST를 학습하고 특정 태그만을 수정하는 플러그인을 다른 플러그인들과 비교하며 직접 만들어서 이슈를 해결 [참조코드]
이슈2
- 블로그 포스트에 이미지를 저장하기 위해서는 AWS S3를 사용해야 했고 고정 비용이 지출되어야 하는 이슈
- express server(ec2)에서 buffer형태의 이미지로 MongoDB에 바로 저장하여 관리하는 방법을 고민하여 구현했고 비용지출을 0으로 줄일 수 있었습니다.
- 클라이언트는 response의 파일 버퍼를 base64 인코딩을 통해 이미지를 출력합니다
무비 앱
- 외부 API를 통해 영화 데이터를 받아오고 즐겨찾기 메뉴로 관리하는 무비 앱 입니다.
- 즐겨 찾기 추가된 항목은 localStorage를 통해 관리되어 다음 검색시에도 필터링 되어집니다
- 무비 앱에 최적화된 UX 개선
- 검색시 페이지네이션이 길어지는 UX 개선을 위해 intersectionObserveAPI를 활용하여 무한로딩을 구현
- 알람창이 떠 있을 때는 다른 메뉴의 입력을 받지 않는 block기능을 구현
- React DnD와 같은 외부 라이브러리 사용보다 직접 커스텀 훅으로 드래그앤드랍 기능을 구현해보며 공부하는 것을 좋아합니다. [참조코드]
팀프로젝트
매드업
- 매드업 광고 현황 서비스
- Victory.js의 그래프를 이용한 데이터 변화 확인
전체적인 리딩과 매체현황, 데이터 API를 활용하는 redux 설계 담당
- 프론트에서 Victory.js에 적용되는 data API로 가공하기 위해 데이터를 fetch해와서 redux의 thunk 미들웨어를 통해 JSON 타입의 데이터를 가공
- API를 통해 백엔드에서 데이터를 받아오는 것이 아니었기에 차트를 그려내기 위한 데이터는 원하는 형식으로 프론트에서 따로 가공하는 과정이 필요했습니다.
질환 검색 서비스
- 휴먼스케이프 질환 추천 검색 서비스
- react-query와 디바운싱을 활용하여 API 호출을 최소화 하는 것이 목적
헬스케어 관리 서비스
- 모아데이터 헬스케어 서비스
- 회원들의 심박 / 걸음 수 관리
스케줄 관리
- 할 일 추가 / 삭제 기능의 투두리스트
👨🏫 Education
원티드 프리온보딩 4기
2022.05 ~ 2022.06
- 협업을 통한 코드리뷰와 개선 경험
코드숨 리액트 6기
2021.12 ~ 2022.02
- 코드숨 교육 리액트 TDD 개발방법론
- 리팩토링을 통한 리액트 실습
- 테스트 개발방법론 학습
[과제 참조]
- 기본적인 Jest 테스트 코드를 작성할 수 있습니다.
- 리팩토링을 통한 코드 개선과 가독성 있는 코드의 중요성을 배운 경험이었습니다. 리액트의 기본적인 원리를 바탕으로 작은 프로젝트들을 거듭하면서 TDD 개발 방법을 익혔습니다.
- 무엇보다 나만이 이해하는 코드가 아닌 쉽고, 편하고, 명확하게 이해할 수 있는 코드에 대해서 고민하는 습관을 가지게 되었습니다.
인텔과 함께하는 AI
2020.01 ~ 2020.02
- 인텔에서 주관하는 인공지능 관련 교육과 드론을 이용한 자동주행 실습
빅데이터 청년인재
2019.06 ~ 2019.09
과학통신부 주관 빅데이터 청년인재
- 1개월 집체교육 + 2개월 프로젝트
- 미세먼지 농도에 따른 기상 예측 프로젝트 2등
- 협업과 도메인 지식의 중요성에 대해 깨닫고 프로그래밍을 배우기 시작한 계기
📌 자격증
- DSAC 3등급
데이터사이언티스트 능력검정
주관: 한국생산성본부
취득일 : 2019.05
- 정보처리기능사 주관: 한국산업인력공단
- 토익스피킹 LV6 주관: ETS 취득일 : 2020.09
- 한국사 1급 주관: 국사편찬위원회 취득일 : 2019.06
💬 Mottos
- 매일 학습
- "척" 하지말자
- 메타인지를 통해 명확하게 학습하자