미리보기
- 직업
- 프론트엔드 개발자
- 이름
- 황동준
- 간단소개
- 세상에 도움이 되는 가치를 창출하는 프론트엔드 개발자 황동준입니다. - 가치관을 이루기 위한 역량을 주어진 상황에서 가치를 실현할 수 있는 개발 및 기획 프로젝트를 진행하며 꾸준히 성장해 왔습니다. - 함께 성장하는 것을 추구하며, 기록과 공유를 통해 실현하고자 합니다. 이를 위해 기술 블로그를 운영하고 있으며, 프로젝트를 진행할 때마다 적절한 기술을 제안하고, 팀에게 도움이 될 만한 학습 자료를 정리 후 공유합니다. - 유저의 편의를 최우선으로 생각합니다. 프로젝트를 완성했더라도 주기적으로 테스트하며, 사용자 경험을 해치는 요소를 제거하고 개선하는 습관이 있습니다. 대표적으로 서비스 워커를 적용하여 fetch에 대한 리소스 로딩 시간을 97% 줄였으며, 이미지 최적화를 통해 LCP를 53% 단축한 경험이 있습니다. - 누구나 사용하기 편한 서비스를 만들기 위해 노력합니다. 스크린 리더를 사용하여 누락되는 요소를 찾고 논리에 맞게 tabIndex와 ARIA 속성을 적용한 경험이 있습니다.
기술 스택
- 기술 스택
- React
- Next.js
- JavaScript
- TypeScript
- tailwind-css
- zustand
- Node.js
- Sequelize
- aws-ec2
- nginx
프로젝트
- 프로젝트명
- 옷늘날씨 리팩토링
- 소속/기관명
- 팀 프로젝트
- 프로젝트 기간
- 2024.02. - 2024.04.
- (3개월)
- 프로젝트 설명
‘왜’에 초점을 맞춰 적절한 기술을 선정하기 위해 노력
Clean Code 규칙 설정, 소통하기 쉬운 코드 구현을 위해 노력
웹 표준과 웹 접근성을 고려해 개발
이미지 Lazy Loading을 통해 LCP 53% 단축(6.2s → 2.9s)
로딩되는 이미지 포맷을 변경하여 이미지 용량 20% 단축
날씨 데이터 공유 로직을 개선하여 날씨 관련 코드의 가독성과 재사용성 증가에 기여
tabIndex와 ARIA 속성을 사용해 키보드 접근성 개선 (테스트 영상)
컴포넌트의 재사용성을 높이는 아토믹 디자인 패턴을 적용
enum을 이용해 공용 아톰 설계 및 개발 환경 셋팅
Next의 Fetch로 리소스를 캐싱하여 데이터 호출 시간 약 70% 감소
서비스 워커를 적용해 Fetch에 대한 리소스를 캐싱하여 데이터 호출 시간 97% 단축
(254ms -> 6.5ms)
Zustand를 통해 로그인 정보를 전역적으로 관리
Recoil과 비교해보며 각 상태관리 라이브러리 사용의 적절한 상황을 이해
웹 표준을 준수하기 위해 프로젝트 전체에 시맨틱 태그 적용
Jest와 RTL을 이용해 단위 테스트 및 통합 테스트 구현
MSW로 외부 API를 모킹하여 API 테스트 구현
프로젝트 리더로서 칸반 형식으로 이슈를 관리할 수 있는 GitHub의 project 기능을 도입해
효율적으로 PR 관리프론트엔드 성능 최적화 메뉴얼 및 적용 과정을 정리한 자료 공유
Clean Code 규칙, 웹 표준과 접근성을 학습하며 정리한 자료 공유
Description
기능 구현에 초점이 맞춰 제작한 기존 프로젝트의 사용자 경험과 성능을 높이기
위해 리팩토링을 진행했습니다. (사이트 주소)
Experience
[프로젝트를 위한 노력과 성과]
[팀원을 위한 노력과 성과]
- 프로젝트명
- 옷늘날씨
- 소속/기관명
- 포스코x코딩온 웹 풀스택 과정 8기
- 프로젝트 기간
- 2023.11. - 2023.12.
- (2개월)
- 프로젝트 설명
날씨와 기온 정보가 함께 올라가는 코디 업로드 기능
현재 최고/최저 기온 범위 내 카테고리 및 코디 추천 기능
첫 페이지에 날씨와 적합한 코디를 빠르게 보여주고
싶었고, 이를 가능케 하는 Next.js 도입CSR, SSR 방식의 차이점을 이해하고 상황에 맞게 적용
피드 페이지, 메인 페이지, 구글 로그인 페이지 구현
OpenWeatherMap API와 Kakao 지도 API를 이용해 현재 위치 기반
날씨와 기온을 사용자에게 보여주는 코드 구현Recoil을 이용해 각종 상태 관리
날씨 정보와 로그인 정보를 전역적으로 관리
해시태그와 카테고리 데이터를 전역적으로 관리하여 검색 기능 구현
빠른 기능 테스트와 피드백을 위해 React + Docker + Nginx + GitHub action + AWS EC2
이용하여 CI/CD 구축올바른 TypeScript 사용을 위한 메뉴얼 작성 및 공유
Description
역할 : 프론트엔드 리더
날씨와 기온별 코디를 공유하고 소통할 수 있는 SNS입니다. (사이트 주소)
Experience
[프로젝트를 위한 노력과 성과]
[팀원을 위한 노력과 성과]
- 프로젝트명
- Coplearn
- 소속/기관명
- 포스코x코딩온 웹 풀스택 과정 8기
- 프로젝트 기간
- 2023.08. - 2023.09.
- (2개월)
- 프로젝트 설명
프로젝트 업로드 및 공유 기능
업로드된 프로젝트를 클론코딩하고 싶은 사람들을 모아 함께하는
리코프런 기능이미지 업로드시 addImageBlobHook을 이용해 AWS S3로 올리고,
S3에서 이미지 url을 가져와 100줄 이상이었던 이미지 주소를 2줄 내외로 줄여
사용자 경험을 개선AWS EC2와 Nginx를 이용해 서버 배포
메인페이지와 마이페이지 RESTful API 구현
JWT를 이용해 로그인 인증 토큰을 암호화 및 복호화하는 코드를 구현하며
서비스 보안 증가에 기여SQL문이 서툰 팀원들의 빠른 이해를 위해 익숙한 JavaScript로 SQL문을 작성하는
Sequelize 도입을 제안했고, 함께 학습하며 ERD 설계 및 DB 구축
Description
역할 : 프로젝트 리더 (풀스택 개발)
포스코x코딩온 웹 풀스택 과정 내에서 만들어진 프로젝트들을 서로 공유하고,
팀으로 클론코딩을 함께 할 수 있는 플랫폼 서비스입니다. (소개 자료)
Experience
[프로젝트를 위한 노력과 성과]
[팀원을 위한 노력과 성과]
대외활동
- 활동명
- 포스코x코딩온 웹 풀스택 과정 8기
- 소속/기관
- 코딩온
- 활동 연도
- 2023
- 활동 상세 설명
- 6개월동안 교육을 진행하며 4개의 프로젝트를 진행
- GitHub와 slack 등을 이용한 팀 프로젝트를 하며 협업 경험
- 기획부터 시작해 서버 배포까지 풀스택 개발
- ERD 및 API 설계부터 프로젝트 설계를 할 수 있게 되었고, 백엔드와의 커뮤니케이션 능력 습득
- 활동명
- 숭실대학교 IT대학 학생회 사무국원
- 소속/기관
- 숭실대학교 IT대학 학생회
- 활동 연도
- 2023
- 활동 상세 설명
감사자료 제작 및 검토 과정을 사무국장과 함께 주도하며 '문제 없음'으로 마무리하는 과정에 기여
- 활동명
- 숭실대학교 전자정보공학부 학생회 총무
- 소속/기관
- 숭실대학교 전자정보공학부 학생회
- 활동 연도
- 2022
- 활동 상세 설명
학생회 행사 예산 산정 및 협의체 선정 과정에 참여
학생회비 사용 내역 기록 및 감사자료 제작
- 활동명
- 시너지
- 소속/기관
- 숭실대학교 창업동아리
- 활동 연도
- 2022
- 활동 상세 설명
- 왈과왈부 미용실습견을 위한 기부형 크라우드 펀딩
- 목표 펀딩 금액의 120% 달성
- 공생멍냥 학대당한 동물들을 위한 기부형 크라우드 펀딩
- 목표 펀딩 금액의 176% 달성
- 2022학년도 SSU Startup Challenge: Demo Day
- 의류폐기물 문제 해결과 오프라인 리폼시장의 쇠퇴를 막는
리폼중개플랫폼 ‘소잉박스’ 기획 - 저렴하게 구입한 의류 폐기물을 이용해 큰 수익을 얻을 수 있는 비즈니스 모델 구축
- 선순환을 통해 쇠퇴하는 시장을 살릴 수 있는 사업이라는 호평을
받으며 대상 수상
- 의류폐기물 문제 해결과 오프라인 리폼시장의 쇠퇴를 막는
동아리 운영진으로써 조의 멘토가 되어 프로젝트 및 창업 서비스를 기획하고 진행했습니다.
- 활동명
- NEBULA
- 소속/기관
- 청주신흥고등학교 코딩 동아리
- 활동 연도
- 2019
- 활동 상세 설명
교육의 기회가 적은 지역아동센터의 아이들을 위해 스크래치와 아두이노 교육 봉사 진행
효과적인 스크래치 교육을 위해 3D 프린터로 코드 블록을 만들고,
손으로 조립해 보는 체험형 교육 기획 및 도입함께 만든 RC카로 레이싱을 개최하며 참여율을 높임
학업에 지친 학생들을 위해 게임 및 작품을 전시하는 '스크래치 게임 전시회' 및 '아두이노 체험전' 진행
지역아동센터 아이들과 동아리원들이 만든 스크래치 게임을 점심시간마다 전시
체험전 개최 당시 상황에 맞는 테마(더운 여름 오락으로 시원하게 보내자, 아두이노로 코로나 현명하게 보내기 등)를 설정하여 성공적으로 완수
두 가지 주축이 되는 활동을 기반으로 2년 연속 최우수 동아리 선정
포트폴리오
교육
- 소속/기관
- 숭실대학교
- 종류 | 전공명/전공계열
- 대학교(학사) | 소프트웨어학부
- 재학 기간 (재학 상태)
- 2021.03. - 재학 중