안녕하세요.

끝임없이 도전하고 변화를 통해 성장하는 프론트개발자 김진태 입니다.

사용자에게 편리한 인터페이스, 아름다운 UI구현을 위해 노력하며,

나 혼자가 아닌, 동료분들의 성장을 위해 항상 노력하는 개발자 입니다.

사람들과 커뮤니케이션 하는 것을 좋아하며 이를 통해 함께 성장하기를 원합니다.

긍정적인 마인드로 삶을 살아가고 있으며, 공동체 생활을 선호합니다.

WORK EXPERIENCE

  • 2020-06-22 ~ 2020-07-16

    다이브 기업협업

    Intro.

    다이브(주)는 블록체인, 인공지능 원천기술을 연구하여 실생활에 필요한 다양한 서비스를 제공하는 첨단기술 기업입니다.

    Front-end 2명, Back-end 3명 총 5명으로 구성 되었으며

    프로젝트 기간은 4주 (2020-06-22 ~ 2020-07-16) 입니다.

    Explanation.

    [DAuth & DPLE] 관리자 페이지를 구현하였으며, [DAuth] 사용자용 모바일 앱을 구현하였습니다.

    Tech Stack.

    [Front] React, React-native, Redux, Redux-saga, axios, styled-component, Material-ui

    [Back] Node.js, MySQL

  • 2018-12 ~ 2019-09

    펀랩

    Intro.

    펀랩(주)는 개발 전문 연구기업으로 주로 프론트엔드 영역을 작업하고 있는 기업입니다.

    퍼블리셔, 프론트엔드, 백엔드로 구성 되었습니다.

    Project List.
    • - SK 공유오피스
      2019-05 ~ 2019-08

      SK공유오피스 프로젝트를 유지 및 보수하면서 작업하였습니다.

      새로운 추가되는 페이지 작업도 하였으며, 마무리하였습니다.

    • - 광고회사 프로젝트
      2019-03 ~ 2019-04

      광고 회사 홈페이지 제작을 팀원 한 분과 같이 퍼블리싱 작업을 하였습니다.

      프로젝트 기간 내에 무사히 완료하여 서비스 운영에 문제없이 진행하여 신뢰를 쌓았습니다.

    • - 서울대학교 홈페이지 리뉴얼
      2019-01 ~ 2019-02

      서울대학교 자체 프레임워크를 사용하여 홈페이지 리뉴얼 프로젝트를 혼자 진행하였습니다.

      입사하고 첫 프로젝트이며 혼자 진행을 하는 상황이라 책임감을 가지고 프로젝트를 하였습니다.

      프로젝트가 끝난 후, 서울대학교에 방문하여 직접 시범운영도 하였습니다.

    Tech Stack.

    HTML, CSS, JQuery

  • 2015-04 ~ 2017-10

    나폴레옹 과자점

PROJECT

  • 2020-06-08 ~ 2020-06-19

    바이브 프로젝트

    Intro.

    좋아하는 음악은 물론, 좋아할 음악까지 들려주는 취향 저격 뮤직 서비스 '바이브'를 소개 드립니다.

    Front-end 3명, Back-end 2명 총 5명으로 구성된 FeelTheVibe 팀이며,

    프로젝트 기간은 2주(2020-06-08 ~ 2020-06-19)입니다.

    Demo.
    Explanation.
    List (click!)
    • SideNav (맡은 업무 : 100% 구현 완료)

      - 로그인, 비로그인 상태에 따라 UI 동적으로 구현

      - Redux를 사용하여 선택한 목록 active 상태 관리

      - history.push()를 사용하여 해당 페이지 이동 구현

    • Login (맡은 업무 : 100% 구현 완료)

      - naver 소셜로그인 구현

      - JWT Access Token을 활용하여 Back-End와 통신

      - 로그아웃 버튼 클릭 시, access_token 삭제 구현

    • Main

      - Back-End와 API 통신(GET)하여 해당 차트 목록 가져오기

      - slider 기능 구현

    • Chart

      - Back-End와 API 통신(GET) 하여 Top100 차트 목록 가져오기

      - scroll 시, SubHeader 구현

      - 노래 제목 클릭 시, 노래 디테일 페이지로 이동

      - 좋아요 버튼 상태에 따라 보관함 - 노래에 저장 및 삭제

      - 체크박스로 선택한 곡의 개수를 SubHeader에 표현 및 플레이리스트 추가 버튼 클릭 시

      - 가사 보기 클릭 시, 모달 기능 구현 (Back-End와 API 통신(GET) 하여 해당 가사 가져오기)

    • Detail (맡은 업무 : 100% 구현 완료)

      - Query parameters를 이용하여 선택한 노래 정보 가져오기

    • Locker (맡은 업무 : 100% 구현 완료)

      - Back-End와 API 통신(GET) 하여 좋아요 버튼을 클릭한 노래 리스트 가져오기

      - Back-End와 API 통신(GET) 하여 플레이리스트에 추가 한 노래 리스트 가져오기

      - Back-End와 API 통신(POST) 하여 플레이 리스트 추가 버튼 클릭 시, 플레이 리스트 생성

      - 전체 재생 버튼 클릭 시, 플레이어에 해당 목록 전달하기

      - Moca Data 사용하여(GET) 좋아요 버튼을 클릭한 아티스트 목록 가져오기

      - Moca Data를 사용하여(DELETE) 좋아요 버튼 클릭 시, 삭제하기

    • Player

      - Drag And Drop 구현

      - Back-End와 API 통신(GET) 하여 음악파일 재생, 중간 재생, 다음 곡, 반복 재생, 랜덤 재생 구현

      - 볼륨 조절 구현

      - Redux를 사용하여 플레이어 내부 현재 재생 정보(커버 사진, 가수 등) 관리

      - 음악의 재생 시간에 맞춰 플레이바와 재생시간 동기화 구현

    Tech Stack.

    [Front] React, Functional Component, Hooks, Redux, Router, Styled-component, Javascript

    [Back] Django, MySQL

    Github.
    github.com/JinDevT/FeelTheVibe-frontend

  • 2020-05-25 ~ 2020-06-05

    정육각 프로젝트

    Intro.

    세상에서 가장 신선한 정육점! 초신선 식재료는 오직 정육각에서! 신선한 음식을 판매하는 '정육각'을 소개 드립니다.

    Front-end 2명, Back-end 2명 총 4명으로 구성된 FreePorkBelly 팀이며,

    프로젝트 기간은 2주(2020-05-25 ~ 2020-06-05)입니다.

    Demo.
    Explanation.
    List (click!)
    • Login & Register

      - JWT Access Token을 활용하여 Back-End와 통신

      - 로그아웃 버튼 클릭 시, access_token 삭제 구현

    • Main

      - Back-End와 API 통신(GET)하여 소량의 상품 목록 가져오기

      - slick 라이브러리를 사용하여 슬라이더 구현

      - scroll 시 새로운 header 생성 및 fixed 구현

      - Top button 구현하여 클릭 시, 상단으로 이동하게 구현

    • Product List

      - Back-End와 API 통신(GET)하여 상품 목록 가져오기

      - Query parameters를 이용하여 카테고리에 해당하는 상품 목록 가져오기

      - 라우트 경로에 pruduct_id 값을 넣어 해당 상품 디테일 페이지로 이동할 수 있게 동적 라우팅 구현

    • Product Detail (맡은 업무 : 100% 구현 완료)

      - Back-End와 API 통신(GET)하여 해당 상품에 대한 정보 가져오기

      - Back-End와 API 통신(POST)하여 해당 상품 수량 및 옵션 구현

      - Back-End와 API 통신(GET)하여 해당 상품에 대한 리뷰목록 가져오기

      - 해당 리뷰를 클릭 시, 모달 기능 구현

      - Tab Button 기능을 구현하여 컴포넌트를 동적으로 보여주기

    • Cart (맡은 업무 : 100% 구현 완료)

      - Back-End와 API 통신(GET)하여 해당 유저의 장바구니 리스트 가져오기

      - Back-End와 API 통신(DELETE)하여 해당 상품 삭제 기능 구현

      - 수량에 따른 해당 상품의 가격과 전체 상품의 총 가격 변경 기능 구현

    • Order (맡은 업무 : 100% 구현 완료)

      - Back-End와 API 통신(GET)하여 상품 주문 목록 가져오기

      - 결제 방법 중, 무통장 입금 체크할 때, Tooltip 기능 구현

      - 주소 선택 버튼 클릭 시, 모달 기능 구현

      - daum-postcode 라이브러리를 활용하여 주소 검색 기능 구현

    • Mypage (맡은 업무 : 100% 구현 완료)

      - Back-End와 API 통신(GET)하여 주문 내역 가져오기

    Tech Stack.

    [Front] React, Router, Class Component, Javascript, Sass

    [Back] Django, MySQL

    Github.
    github.com/JinDevT/FreePorkBelly-frontend

  • 2019-10-12 ~ 2019-12-10

    Pro-watcha 프로젝트

    Intro.

    모든 영화을 언제 어디서나 최고의 화질로 무제한으로 감상할 수 있는 'Pro-watcha'를 소개드립니다.

    현재 운용중인 '왓챠'를 기반으로 Front-end 1명으로 혼자 100% 구현하였으며, 독학하면서 사이드 프로젝트를 만들었습니다.

    프로젝트 기간은 2019-10-12 ~ 2019-12-10 입니다.

    Demo.
    Explanation.
    List (click!)
    • Main

      - 이미지 슬라이더를 Javascript로 직접 구현.

      - 오픈 MovieDB api를 를 사용하여 매주 업데이트 되는 영화를 장르별로 볼 수 있게 구현.

      - 영화를 클릭하면 모달창이 떠서 영화에 대한 정보 가져오기.

    Tech Stack.

    [Front] React, Functional Component, Hooks, Redux, Router, Styled-component, Javascript

    Github.
    github.com/JinDevT/Pro-watcha

SKILLS

  • HTML5

    • Semantic Tag 사용을 준수합니다.
    • 웹 표준을 준수하여 불필요한 마크업을 최소화하여 로딩 속도를 향상시킬 수 있습니다.
    • 전체적인 레이아웃 구성을 깔끔하게 구현합니다.
    • 웹 접근성에 대해 공부중이며, 제약을 가진 사용자들을 위해 모든 정보에 접근할 수 있도록 노력하고 있습니다.
    • 웹 호환성에 대해 공부중이며, 웹 브라우저 버전, 종류와 관계없이 웹 사이트에 접근할 수 있도록 노력하고 있습니다.

  • CSS3

    • 기본적인 레이아웃 및 애니메이션을 구현할 수 있습니다.
    • 상황에 맞게 적절한 속성과 값을 적용할 수 있습니다.
    • CSS 선택자를 유용하게 사용하여 코드를 작성할 수 있습니다.
    • Sass 등 CSS 전처리기를 사용하여 CSS 구조를 가독성있고 유지보수를 좋게 할 수 있습니다.
    • 반응형에 대해서는 공부중이며, 디바이스 종류에 따라 사용자가 보기 편리하게 접근할 수 있도록 노력하고 있습니다.

  • Javascript

    • 가장 즐겨 하고 좋아하는 언어이며, 아직까지 많이 부족하여 끊임없이 노력하고 있습니다.
    • ES5 이후 버전의 모던 자바스크립트를 공부하며 사용하고 있습니다.
    • JQuery를 사용하지 않고 DOM을 유연하게 다룰 수 있습니다.
    • 동적인 기능이 필요하면 그에 맞는 기능을 구현할 수 있습니다.

  • React

    • 클래스형 컴포넌트 및 함수형 컴포넌트를 유연하게 사용할 수 있습니다.
    • 컴포넌트 LifeCycle을 활용하여 상황에 맞게 코드를 구현할 수 있습니다.
    • Styled-component로 구현하여 CSS를 컴포넌트화 하여 사용합니다.
    • 효율적인 렌더링 및 재사용 가능 컴포넌트에 관심이 많으며 계속 노력하고 있습니다.
    • Redux에 대해 공부중이며, React의 상태 관리의 부족함 면을 채우려고 노력하고 있습니다.

  • React-native

    • React-native를 사용하여 UI를 구현할 수 있습니다.
    • 아직까지 많이 부족하여 앞으로 공부 할 예정입니다.

  • Tools

    • Git을 중심으로 협업이 가능하며 형상관리를 위한 기본적인 Flow을 숙지하고 있습니다.
    • SVN을 이용하여 협업 프로젝트의 경우 버전 관리나 각자 만든 소스의 통합과 같은 문제를 해결할 수 있습니다.
    • Trello를 적극 활용하여, 진행 상황을 팀원들과 공유할 수 있습니다.

EDUCATION

  • 2020-04 ~ 2020-07

    위코드 부트캠프

    프론트 개발자로 성장하기 위하여, 프론트 개발자로써 갖춰야 할 기술을 배웠습니다.

    그 외에 협업할 때 가장 중요한 커뮤니티하는 방법을 깨달았으며

    부트캠프 과정을 성공적으로 마무리하여 8기로 수료하였습니다.

  • 2018-05 ~ 2018-11

    비트캠프 JAVA 국비과정

    웹 개발에 대한 지식을 배웠으며, 주로 백엔드 지식을 중심으로 학습하여

    국비 과정을 수료하였습니다.

  • 2011-03 ~ 2015-02

    혜전대학 제과제빵학과

    제과제빵과 관련된 지식을 배웠습니다.

    군대 전역 후, 복학하여 좋은 성적으로 졸업하였습니다.

CONTACT