👨‍💻 황주찬
GitHub https://github.com/juchanhwang
E-mail juchanhwang@gmail.com
Phone 010-9374-9106

저는 이런 사람입니다

함께 협력하며 성장하기를 꿈꾸는 프론트엔지니어, 황주찬입니다.
제가 협력과 성장의 가치를 알게 된 이야기를 소개해드리려 합니다.

비전공자로 JS언어를 '어떻게' 학습해야 하는지에 대한 어려움이 있었습니다.
여러 탐색 끝에 vanillaJS로 학습하는 '코드스쿼드'에서 배우게 되었습니다.

JS언어의 개념적인 부분은 매주 윤지수 교수님의 강의와 스터디를 통해 극복했습니다.
미니 프로젝트를 수행하면서 부딪치는 실질적인 코드작성에 대한 어려움은
'구현' 이라는 한 가지 목표를 가지고 부족한 기술적인 부분은 공식문서,
기술 블로그, 그리고 영상자료를 통해 학습하며 프로젝트를 마무리할 수 있었습니다.

그 과정에서 교수님의 코드리뷰를 통해 설계하는 방법과 좋은 코드가 무엇인지,
그리고 다른 개발자와 페어 코딩을 통해 '협업'하며 함께 '성장'하는 가치를 배울 수 있었습니다.

이제는 실제 '서비스'와 '유저'를 경험하며 어떻게 하면 좋은 개발자로
성장할 수 있을지를 고민하고 경험하는 개발자로 성장하고 싶습니다.

#Javascript #VanillaJS #React #Front-End


💼 Work Experiences

Code Squad
period 18.03 ~ 19.02
major 웹 프론트엔드
curriculum https://github.com/nigayo/front-end-curriculum/tree/2018_09
description - 윤지수 교수님께 javscript, css, html 등 전반적인 프론트엔드 개발 교육을 받음


- this, prototype, closure, classes, ES2015이상의 문법
- 함수형 메서드(forEach, filter, reduce.. )를 활용한 데이터처리
- DOM, Event,Ajax, Templating에 대한 원리와 특성 학습
- 크롬 브라우저를 이용한 프로그래밍 디버깅
- 클린코딩, 결합도 낮은, 의존성 낮은 프로그래밍 (함수나누기, 객체나누기)

개인 프로젝트
- 다각형의 넓이 구하기(https://github.com/code-squad/javascript-polygon/pull/22),
- 학점 계산기 구현(https://github.com/code-squad/javascript-grade/pull/22),
- to-do list 기능 구현(https://github.com/code-squad/javascript-todo/pull/29),
- Array Parser 만들기 등을 JS로 구현(https://github.com/juchanhwang/javascript-json/tree/step7),
- VanillaJS로 amazon.prime 웹서비스 클론 프로젝트(https://github.com/juchanhwang/javascript-amazon)


📊 Projects


아마존 사이트 클론

amazon.prime 웹서비스를 클론하는 프로젝트입니다

Description

  • 메인페이지 html, css 구조화 설계

  • 상단 plans bar

    • 스크롤을 통해 plans bar가 노출되고, 사라짐 (scroll event)
    • bar가 노출된 상태에서 ‘see more plans’ 영역을 클릭하면 plan card 레이어가 생성됨 (animation 효과)
    • close 버튼 or 하단 화살표를 클릭하면 plan card가 접힘

  • 캐러셀(Carousel) UI

    • 무한으로 동작하는 캐러셀 UI
    • 총 4개의 panel, 3초 간격으로 애니메이션으로 동작함(setInterval, transition 효과)
    • 좌우 버튼을 누르면 즉시 이동되고, 일정 시간 동안 버튼 클릭이 없을 시, 자동이동이 시작됨

    마지막 패널에서 처음 패널로 돌아올 때, 오른쪽으로 애니메이션이 동작하며 첫 패널로 돌아오게하는 기능을 구현하는 것에 있어서 어려움이 있었음. 첫 번째 패널 왼쪽에 4번째 패널을, 4번째 패널 오른쪽에 첫 번째 패널을 숨김으로써, 기능을 구현했음. 숨겨진 5번째 패널로 이동될 때, 애니메이션 동작을 주지 않은 상태로 1번째 패널로 이동하게 구현시켰음.

  • 검색어 자동완성

    • 검색어를 입력하면 실시간으로 검색결과가 노출됨 (fecth API를 이용하여 JSON 데이터를 받아옴, setTimeOut API로 노출 시간(300ms) 지연시킴)
    • 입력창의 내용을 백스페이스로 삭제해도 일치하는 자동완성결과가 노출됨
    • 실제 검색버튼을 눌러도 검색이 이뤄지진 않으며, 자동완성 결과 창은 닫힘

    JSON데이터를 fetch API로 받아, 그 데이터를 다루는 작업에서 실질적으로 보이지 않는 데이터를 다루는 것이 어려웠음. 개발자 도구의 네트워크 탭에서 API를 받아오는 시점과 데이터에 접근하여 데이터를 조작하는 방법에 대해 이해를 할 수 있게 됨.

Array Parser

javscript로 array형태의 데이터를 parsing하는 기능입니다.

Description

  • 중첩 된 배열 형태의 문자열을 토큰 단위로 해석 후, 이를 분석하는 자료구조.

  • testcase 작성

    함수의 동작이 예상에 맞게 동작하는지 테스트하는 것. 함수의 기능이 작든 크든 상관없이 테스트케이스를 작성할 수 있다는 것을 알게 됨. 자료구조를 해석하고 다시 분석하며 발생할 수 있는 오류의 경우의 수들도 테스트함. 개발 당시에 오류가 없을 것이라 확신했던 코드에 오류가 없을 가능성이 적고, 오류가 날 상황을 직접 예측하고 대처할 수 있다는 것을, 작은 규모지만 경험할 수 있었음.

리액트로 만드는 무비 웹

academy nomadcoder 강의를 통해 ReactJS를 학습했고, 결과물로 영화 및 드라마 스트리밍 서비스 홈 페이지를 제작했습니다

Description

  • home, search, detail page UI 디자인
  • themoviedb.com에서 제공하는 movieAPI와 tvAPI 로부터 데이터를 받아옴
  • 받아온 데이터를 search하는 기능, 구체적인 영화나 드라마 정보를 UI로 제공하는 기능 구현.


Study

  • 모든 자바스크립트 개발자가 알아야 하는 33가지 개념

(https://github.com/33-js-concepts-study/JuChan.git)

현재도 계속 진행 중인 스터디

감사합니다.