Works

Javascript ES6 기반의 문법과 메서드를 사용하여 게시물 신규 작성, 기존 게시물 로드, 랜덤한 내용의 게시물 생성, 특정 유저의 게시물 필터링 기능을 구현했습니다. Local Storage를 통해 JSON 형식으로 데이터를 저장하고 로드하여 렌더링하는 절차에 신경썼습니다.

PC/Tablet/Mobile 세 가지 분기로 미디어 쿼리를 이용해 적응형으로 디자인 했으며, Tablet과 Mobile의 경우 해당 환경에 알맞는 사용성을 제공할 수 있도록 화면 요소와 레이아웃에 차이를 두었습니다.

• Demo 보기

사용자 근처의 정류장 별로 검색한 노선의 도착 정보를 보여줍니다. HTML5 geolocation API를 사용하여 사용자의 위치 좌표를 조회했고, Kakao 지도 API로 도로명 주소로 변환하여 출력해 주었습니다. 노선 검색창에 번호 입력 시, 노선 목록이 출력됩니다. 노선 목록과 주변 정류소, 버스 도착 정보 조회를 위해 공공 API를 이용했습니다. 현재까지 개발된 사항은 여기에서 더 자세히 보실 수 있습니다.

• Github Repository 보기

정적 페이지 생성 프레임워크 GatsbyJs로 사이트를 제작했습니다. 튜토리얼과 공유되어 있는 테마들을 참고하며 빈 페이지에서부터 차근차근 개발해나갔습니다. 포트폴리오 용 Works 페이지는 블로그 메뉴인 Articles 페이지를 응용하고 마크다운 파일을 커스터마이징하여 생성했습니다. 개발 이전에는 Adobe XD를 이용해 PC/Mobile 두 가지 분기로 디자인했으며, Tablets 구간은 퍼블리싱을 통해 디자인했습니다.

• Github Repository 보기

도서를 통해 공부하며 제작한 To-do list 입니다. 단순히 책에 있는 코드를 따라 치는 것이 아니라 작동 원리에 대해 이해하려 했으며, 이해한 내용을 응용하여 완료 체크박스 추가 및 완료 항목은 구분하여 출력할 수 있도록 기능을 추가했습니다. Local Storage를 이용하여 새로 고침 후에도 내용이 유지될 수 있게 구현했습니다.

• Demo 보기