황교진

Software Engineer

웹 프론트엔드에 관심이 많은 소프트웨어 엔지니어

서비스에 필요한 기능과 페이지를 구체적으로 생각 하고 구현

디자인을 완벽히 구현할 수 있는 개발자

항상 경우의 수를 고려하는 개발자

경력

인디제이

2022.08 ~ 2024.07Software Engineer개발팀

인디제이는 사용자 맞춤 상황,감정 AI 스트리밍 라디오 서비스입니다.

CES 2023,2024 혁신상을 수상 하였으며, AI 솔루션을 통한 외주도 맡고 있습니다.

플레이어 웹 페이지 개발

2022.08 ~ 2024.07

인디제이 웹 버전 프론트엔드를 개발 및 유지보수 하였습니다.

React.jsTypeScriptRedux
  • Redux를 활용한 사용자 정보 및 음악 관리

  • API 통신을 통해 AI 음악추천 챗봇 UI 및 UX 개발

  • 반응형 웹 개발

  • 프로모션 웹 및 모바일 웹뷰 페이지 개발

어드민 개발

2022.08 ~ 2024.07

인디제이 어드민 페이지를 개발 및 유지보수 하였습니다.

ReactJavaScriptScss
  • 대쉬보드 데이터 시각화(차트) 작업

  • 랜드마크(GPS) CRUD 구현 및 퍼블리싱 작업

  • 음악 CRUD 구현 및 퍼블리싱 작업

  • 푸시알림 전송 및 예약 전송 개발

  • 회사 관련 기사 보도자료 CRUD 구현 및 퍼블리싱 작업

  • 음성광고 CRUD 구현 및 퍼블리싱 작업

  • DAU, MAU 데이터 시각화(차트) 작업

회사소개

2024.05 ~ 2024.06

반응형 웹으로 인디제이 회사소개 페이지 개발

ReactTypeScriptEmotion
  • yarn berry 및 Zero install 세팅

  • Eslint & Prettier 적용

  • 메인페이지 폭죽 애니메이션 css 구현

  • Infinite Carousel 구현

  • 문의뱃지 Animation 및 퍼블리싱, 문의 api 연결

  • 전체 UI & UX 개발

인디제이 외주(CSbye)

2023.02 ~ 2023.10Software Engineer웹 프론트엔드

게임,소프트웨어 등등 CS, QA, 마케팅, 모니터링을 대신 해주는 서비스이다.

내부상담원을 통한 문의 및 환불 처리를 대신 해주는 작업을하고 일일,주간,월간 보고서를 제공해준다.

기업,상담원 관리자페이지 개발

2022.08 ~ 2024.07

기업관리자와 상담원관리자에서 필요한 기능 및 퍼블리싱 작업을 했습니다.

ReactTypeScriptReduxTailwindCss
  • Chart.js 를 활용한 데이터 시각화 작업

  • Atomic 디자인 패턴을 활용한 컴포넌트 분리 및 재사용성 극대화

  • Axios instace를 사용하여 반복되는 코드를 개선 하였습니다.

  • Redux-toolkit 으로 사용자 정보 및 모달 상태를 분리하여 관리

  • TanStack Query(React Query)를 사용하여 캐싱관리 하여 문의(QnA) 데이터 처리 속도 향상

  • 테이블안에 데이터를 react-export-excel로 엑셀파일로 변환하는 기능 구현

  • 다국어 기능 구현

  • 웹 안에서 유저에게 위치를 알려주기 위하여 BreadCrumbs 기능 구현

  • tailwind를 사용하여 퍼블리싱 작업

사이드

이력서 및 블로그 사이트

  • 모노레포 커스터마이징

    core에서의 package.json 수정

    Seo컴포넌트 meta태그 수정

  • GitAction으로 CI/CD 구축

    node js.yml 파일 생성이후 github.io page 레포에 연결

    main Branch Commit시에만 deploy

  • 도메인 생성 및 연결

    도메인 구매 이후 DNS 설정 및 연결

    deploy 할 때 마다 domain 변경방지로 static 파일 CNAME 도메인 추가

오늘의 책님

  • 반응형 웹페이지 제작

    rem, media screen으로 반응형 웹 개발

  • 서브도메인 설정 및 적용

    bobcost.kr 현재 블로그페이지 도메인을 활용한 서브도메인 사용으로 프로젝트 배포

  • Zustand 상태관리

    책의 열림, 카테고리 상태를 관리

    persist를 사용함으로 LocalStorage에도 상태를 저장한다.

  • 카카오톡 API 를 사용하여 공유 기능 구현

  • 다크모드 구현

    NextTheme 및 Global Css 를 통한 다크모드 구현

  • Google Analytics 적용

    DAU,MAU 확인을 위하여 @next/third-parties/google 사용해서 적용

기술

HTML/CSS

  • Semantic Markup을 최대한 활용하여 구현할 수 있습니다.

    HTML이 길어질 경우 Semantic Markup이 더욱 중요해지므로 최대한 활용하려고 노력하고 있습니다.

  • CSS를 통해서 여러 애니메이션을 구현할 수 있습니다.

    Carousel Slide, Hover Animation 등등 필요한 애니메이션이 구현가능합니다.

  • CSS-in-JS 라이브러리를 사용할 수 있습니다.

    Emotion 및 Styled Component를 활용한 프로젝트를 설계 할 수 있고, 구현이 가능합니다.

  • favicon, SEO 등의 적용 경험이 있습니다.

    네이버, 구글등 Robot.txt를 통해 검색되도록 경험이 있습니다.

TypeScript

  • TypeScript를 이용한 개발에 익숙합니다.

    다양한 프로젝트 경험으로 React 코드 리딩 및 작성이 가능합니다.

JavaScript

  • ES2015 이후의 JavaScript 문법에 익숙합니다.

    JavaScript ES2015 이상의 문법을 수월하게 작성하거나 해석 할 수 있습니다.

  • Reduce, Map, Filter와 같은 고차함수를 적극적으로 사용합니다.

  • 비동기 작업을 하는데 익숙합니다. (promise, async await)

SPA,SSR (React18☝️, Next13☝️)

  • 크거나 작은 규모의 웹 페이지를 개발할 수 있습니다.

    모바일 웹앱, PC(반응형 웹), 관리자페이지 등 다양한 프로젝트를 리딩하고 개발한 경험이 있습니다.

  • Redux, Zustand와 같은 상태 관리 라이브러리를 사용할 수 있습니다.

    상태관리는 큰 규모의 프로젝트에 갈 경우 복잡해져 파일 및 폴더를 잘 정리하며 코드를 최적화 합니다.

  • Atomic Design으로 컴포넌트 분할을 하거나 프로젝트에 맞게 구조를 작성한 경험이 있습니다.

  • axios 라이브러리를 활용하여 비동기 작업을 할 수 있습니다.

  • React18,Next13이상을 활용하여 페이지를 개발할 수 있습니다.

DevOps

  • Git Action으로 CI/CD 구축을 경험이 있습니다..

    현재 이력서,블로그는 Git Action으로 CI/CD 구축을 통해 자동화 배포가 적용되어 있습니다.

  • AWS EC2, S3 등의 인프라 요소를 사용해본 경험이 있습니다.

    EC2 인스턴스에 연결되어 있던 Nginx를 활용하여 웹페이지를 배포하며, S3를 통한 이미지, 음악 파일등을 저장하며 불러와서 사용했습니다.

  • Nginx를 통한 웹 서버를 배포한 경험이 있습니다.

  • Telegram bot 등의 경험이 있습니다.

    깃 커밋,푸쉬 등의 메세지 와 Error 메세지를 확인하는 봇을 만들었습니다.

그 외

  • Git을 능숙하게 다룰 수 있습니다.

    git flow, github flow 를 회사에서 적용해본 경험이 있습니다.

취미

개발 블로깅

  • 평소에도 글을 적는 것을 좋아하고 정리하는 것을 좋아해서

  • 회고록, 개발, 트러블슈팅 등등 현재블로그, velog에 같이 정리하려고 합니다.

  • 위의 제목을 누르면 제 블로그로 가실 수 있습니다!

코딩테스트 문제풀이

  • 알고리즘의 약한부분을 채워주는 느낌으로 풀고있다.

  • 모르던 문제를 찾아보고 생각하면서 힘들게 풀면 성취감이 있다.

헬스

  • 헬스로 스트레스를 풀고 있습니다.

  • 유산소 운동으로 좋은 체력을 유지하려고 하고있습니다.

구기종목

  • 축구(풋살)와 농구, 탁구, 배드민턴 등으로 좋아하는 운동을하며 스트레스를 풀고있습니다.

  • 좋아하는 구기종목을 시청함으로써 또한 힐링을 하고있습니다.