😁 이유를 고민하는 개발자 홍원배입니다

🙋‍♂️ About me

Intorduction

안녕하세요! 프론트엔드 개발자 홍원배입니다

웹 프론트에 국한 되지않고 다양한 기술을 배우고 싶어합니다

내가 이해하고 설명할 수 있는 기술 노션페이지 를 정리하고 있습니다

Clean Code에 대한 관심이 많고 적용하기 위해 노력합니다

꾸준함을 최우선 가치로 두고 함께 하는 성장에 관심이 많습니다

Contact

Email | shongs27@gmail.com

Github | https://github.com/shongs27

Blog | 홍원배의 기술블로그 (수정중)

👨🏼‍💻 Skills

Fronted

HTML, CSS, Javascript

React

Redux

Jest

Backend

NodeJS

MongoDB

Amazon Clould

현재 저는, 상기의 기술에 대해 프로젝트를 진행해 본 경험이 있고 관련 기술 프로젝트를 진행하고 있습니다

프론트 뿐만 아니라, NodeJS와 AWS를 활용하는 백엔드에도 관심이 많습니다 🤣

어떻게 테스트 코드와 리팩토링을 적용할지에 대해 한참 고민하고 있습니다

리팩토링 2판 학습과 개인 블로그 프로젝트를 함께 진행하며 클린 코드에 대해 고민하고 있습니다

현재 진행중인 프로젝트는, 기술블로그 입니다

기술 블로그

테스트 코드를 적용하는 기술블로그

Notion을 통해 정리된 글을 포스트로 렌더링하는 방식

지속적인 블로그 관리를 위해 부분적으로 TDD를 적용하려 합니다. 컨텐츠 보충과 내용에 따른 지속적인 코드 리팩토링을 통해 학습한 내용을 실습해보며 오픈소스에 기여함을 목적으로 합니다

[블로그v2 참조(수정중)]

시멘틱 태그 를 사용하여 웹 표준을 고려한 HTML과 다양한 CSS를 적용 중

Notion API를 활용하여 블로그의 컨텐츠를 관리하는 방식

[블로그v1 참조]

AWS EC2와 CloudFront등을 활용한 https 등의 기술과, 백엔드를 적용한 프로젝트

Google Analytics API의 신 버전(GAdata)을 통해 실시간 API 받아오는 기술 적용

백엔드와 Restfull 한 설계를 통해 ‘좋아요’, ‘방명록’ 기능을 구현

이슈사항

Notion Page를 export함으로서 만든 markdown 파일은 특정 HTML 태그를 만들었고 해당 태그가 react-markdown으로 리액트로 전환 되지 않는 이슈가 있었습니다
해결을 위해 AST에 대해 알아보고, 특정 태그를 수정하는 플러그인을 직접 만들어서 이슈를 해결 [참조코드]

👨‍🏫 Education

원티드 프리온보딩 4기

2022.05 ~ 2022.06

원티드 와 연계된 기업과제 수행

[개인과제 코드 참조]

외부 API를 통해 영화 데이터를 받아오고 즐겨찾기 메뉴로 관리할 수 있는 무비 앱입니다.

일반적인 단어를 통해 영화를 검색할 경우 페이지네이션이 길어지게 되었고 사용자 경험이 좋지 않은 이슈가 있었습니다

IntersectionObserver API를 통해 지속적인 페이지네이션을 구현함으로서 사용자 경험을 개선했습니다
영화 개수를 확인하는 외부 API는 따로 없었기에 프론트에서 확인할 수 있도록 지원

알람창이 떳을 때는 다른 메뉴의 입력을 받지 않는 block기능을 구현하면서 사용자 경험을 개선하는 방법을 고민했습니다

[팀과제 코드 참조]

redux를 작성하고 thunk 미들웨어를 통해 JSON 타입의 데이터를 프론트에 뿌려주기 위해 데이터를 가공하는 역할을 한 부분입니다.

API를 통해 백엔드에서 데이터를 받아오는 것이 아니었기에 차트를 그려내기 위한 데이터는 원하는 형식으로 프론트에서 따로 가공하는 과정이 필요했습니다.

리액트는 UI를 그려내는 부분에만 집중 하는 것이 좋다고 판단하여 복잡한 비즈니스 로직은 API를 받아와서 필요한 부분만 가공하여 store에 저장하기 위해 thunk함수를 사용했습니다.

시간을 투자해 백엔드 서버에 JSON 데이터를 저장해두고 mongoose를 활용해 원하는 데이터만을 쿼리 형식으로 가져왔다면 오히려 더 빠르고 깔끔한 코드로 완성할 수 있었지 않았나 아쉬움이 있습니다 .

코드숨 리액트 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

매일 학습

"척" 하지말자

메타인지를 통해 명확하게 학습하자