Jinwook Shin

Ⅱ. JavaScript

① Pokemon API App

펼쳐보기

Keyword: JavaScript, CSS, HTML, API fetching, eventListener, DOM manipulation, Grid, Responsive

• • 외부 API의 가공되지 않은 데이터를 이용하여 완성도 있는 결과물을 보여줄 수 있다는 능력을 보여주고자 하였음.
• • 객체지향 프로그래밍 방식으로 자바스크립트의 api fetching, eventListener, DOM manipulation과 CSS의 viewport, grid system을 이용함.
• • 객체지향 프로그래밍 방식을 준수하여 직관적이고 재사용이 가능하게 프로그램을 작성함.
• • Pokemon 외부 api를 이용하여 데이터를 fetching하고 응답을 필요에 맞게 사용함.
• • 무한 스크롤링 기능을 구현하여 사용자가 효율적으로 필요한 만큼만의 데이터를 받아올 수 있게 함. 구현을 위해 Event 인터페이스, eventListener, 그리고 수학적 계산을 통해 스크롤이 맨 아래에 다다를 때 새로운 아이템을 불러오도록 함.
• • DOM manipulation을 통해 DOM 요소를 필요에 맞게 추가하고 제거하여 컴포넌트가 업데이트될 때 이전 요소를 제거하고 새로운 요소를 추가함.
• • CSS의 viewport 를 이용해 mobile portrait 모드, tablet portrait/landscape 모드, 그리고 desktop 모드를 지원하게 함. 지원하지 않는 mobile landscape 모드는 경고창을 띄워 사용자에게 다른 스크린 모드를 이용하도록 권고함.
• • CSS의 grid 방식을 이용해 효과적인 페이지 레이아웃과 포켓몬 카드 레이아웃을 구현함.
• • 본 프로젝트를 통해 자바스크립트의 api fetching, eventListener, DOM manipulation을 필요에 맞게 이용할 수 있는 능력, CSS의 viewport와 grid 방식으로 다양한 디바이스에 맞는 웹페이지를 보여줄 수 있는 능력을 배양함.

② Doraemon mini-game App

펼쳐보기

Keyword: JavaScript, CSS, HTML, Canvas, eventListener, Responsive

• • 자바스크립트의 canvas를 중점적으로 이용해 도라에몽(캐릭터)을 움직여 목표 점수를 달성해야 하는 미니 게임을 만듦. 주요한 자바스크립트 사용 능력을 보여주고자 하였음.
• • 자바스크립트의 canvas/context, Image, setInterval(), eventListener등을 여러 function에 알맞게 이용함.
• • 백그라운드 이미지, 도라에몽, 그리고 도라야키(점수 획득용 아이템)를 객체화하고 렌더링하여 게임화하기 위한 설정을 마침.
• • 키보드 눌림을 인식하는 eventListener를 부착해 좌/우 키보드 버튼이 눌릴 때마다 도라에몽 캐릭터를 특정 값만큼 이동하게끔 함. 새로운 좌표로 이동할 때마다 canvas에 새로 그림이 그려질 수 있게 redraw() function을 구성하였고 redraw() 작동방식에 대한 이해를 깊이 하게 됨.
• • 도라야키가 하늘에서 떨어지는 모션을 구현하기 위해 100 milliseconds마다 아래로 이동하게끔 setInterval()를 이용함.
• • 객체지향적 방식으로 각 기능을 함수로 나누어 직관적이고 재사용이 가능하도록 제작함.
• • 본 포트폴리오를 완성하며 사용자의 입력을 감지하고, canvas를 사용해 그래픽 요소를 웹에 구현하고, 원하는 이미지를 이용, 객체화하여 수학적 계산을 통해 게임을 만들 수 있게 됨.

③ WebRTC/Canvas App

펼쳐보기

keyword: HTML5, JavaScript, CSS, WebRTC, Canvas, Online and offline events, eventListener, Flexbox, Responsive

• • MDN 웹사이트의 HTML5의 새 기술을 주체적으로 공부하고 조합하여 포트폴리오를 만듦. 프론트엔드에서 HTML 및 HTML5의 기능에 대한 이해를 심화시키고자 하였음.
• • HTML5의 Camera(WebRTC API), Canvas, Online/Offline events, 그리고 local Storage API를 사용함.
• • WebRTC(Web Real-Time Communication)기술을 이용하여 웹캠으로 사용자의 화면을 실시간 스트리밍하고 사진을 찍을 수 있는 컴포넌트를 제작함.
• • Canvas 요소를 이용한 컴포넌트를 만듦. 사용자의 실시간 화면을 캡쳐하고 캡쳐한 사진 위에 그림 그릴 수 있게 하는 시각적이고 인터렉티브한 컴포넌트를 제작함.
• • Local Storage를 통해 효과적인 오프라인 경험을 제공하고자 하였음. 인터넷에 연결되지 않아도 사용자가 캡쳐하고 그림 그린 데이터는 localStorage 객체 안에 담겨 언제든 불러올 수 있음.
• • Online & Offline events를 사용해 상태바를 만들어 사용자의 인터넷 상태를 알려주는 편의성을 제공함.
• • 결론적으로, HTML5에 새로 발표된 기술을 포트폴리오의 필요에 맞게 구현해보며 다양한 HTML5 기술의 작동 방식을 깊이 이해할 수 있게 되었음.

④ Momentum To-Do App

펼쳐보기

Keyword: HTML, JavaScript, CSS, EventListener, Form, WeatherAPI

• • 관심사를 분리하여 clock, login, quotes, todo, 그리고 weather에 대한 JavaScript 파일을 분리
• • 첫 로그인 화면에서 사용자는 본인 이름을 입력하고, 입력된 정보를 localStorage에 저장
• • setInterval 함수를 이용해 매 초마다 현재 시각을 받아오는 로직 작성
• • 사용자가 현재 geolocation 권한을 허가하면 해당 정보를 기반으로 현재 위치와 기온을 불러옴
• • To Do 작성을 매끄럽게 하기 위해 엔터키로 손쉽게 컨텐츠를 제출할 수 있게 함 (form & submit type button)
• • 사용자 편의성을 위해 수정 버튼을 클릭하거나 To Do를 더블 클릭하면 수정 창이 나오도록 함
• • To Do 수정을 매끄럽게 하기 위해 기존의 DOM을 CSS로 숨기고, 가장 가까운 부모 DOM에 새 form (입력창)을 부착하여 수정 기능을 추가했던 부분이 인상 깊게 남음
• • 알파벳 순서와 생성된 날짜로 정렬하는 기능 제작
• • random 함수를 이용해 랜덤하게 quote를 출력하는 기능 추가