logo

집앞에 자주 가던 투썸카페의 키오스크를 보고 직접 UI와 기능들을 직접 구현을 해보고싶어서 제작하게된 프로젝트입니다. 결제기능은 되지않지만 상품 클릭시 상품을 담고, 추가하고, 삭제하고, 금액의 총합 표시등의 기능은 구현하였습니다.

키오스크 형식을 머릿속으로 생각하고 직접 순수 JavaScript로 하나하나 작업을 해보았고 내부 Json 파일을 만들어 데이터를 입력하고 fetch로 데이터를 불러오는 걸 연습해 보았고 불러온 데이터로 마크업 생성을 연습했습니다. 상품 클릭 시 불러온 데이터를 활용해 금액 계산하는 로직의 코드를 직접 짜보고 JavaScript를 더욱 익혀보는 경험이었습니다.

HTML SCSS JavaScript

Responsive : O

Work : 개인 100% PageMove

React 와 Typescript를 활용하여 만든 퀴즈 작업물입니다. style-components도 활용하였으며 따로 만든 json파일을 fetch로 연동하여 이용하였으며 미숙하지만 배우는 느낌으로 하나하나 적용해보며 만든 프로젝트입니다.

처음으로 Json 데이터를 불러오는 걸 익혀보았던 작업물로 유튜브 퀴즈 만들는 걸 보고 학습 후 외부 API를 활용 말고 저만의 퀴즈를 만들기 위해 내부에 데이터를 입력하였고 오류 방지를 위해 async await를 활용해 데이터를 불러오는 걸 활용하였습니다. 학습 과정에서 React 컴포넌트 활용, style-components, 약간의 Typescript를 익힐 수 있는 경험이었습니다.

React Typescript style-components

Responsive : O

Work : 개인 100% PageMove

CRUD 의 기본인 투두리스트를 제작한 작업물입니다. React를 사용하여 리스트 생성, 수정, 삭제 기능을 다 구현하였고 사이드에는 요일,날짜,시간을 추가하였으며 날씨 API 를 가져와 사용하여 날씨,온도 정보를 사용하였습니다.

CRUD를 React로 익히기 위해 제작해 본 작업물로 메모의 생성, 수정, 삭제 기능의 코드를 짜보았고 UI가 심심하여 사이드에 요일, 날짜, 시간의 JavaScript 코드를 작성하고 날씨 API를 활용하여 작업하였습니다.

React JavaScript CSS

Responsive : O

Work : 개인 100% PageMove

자주 사용해 보던 날씨 API를 사용하는 걸 단독으로 사용한 작업물과 아이폰 계산기 UI를 활용해 만든 계산기 작업물입니다.

많이 사용해서 익숙한 fetch로 날씨 API 가져오는 걸 이용해 단독으로 날씨를 확인할 수 있는 작업물과 아이폰 계산기 UI를 보고 만든 계산기입니다. 계산기는 switch로도 만들어보고 연산버튼을 value값을 활용해서도 만들어 보았습니다.

HTML CSS JavaScript

Work : 개인 100% PageMove

성인들이 주변에서 쉽게 접하는 소주와 맥주에 대한 정보들을 알아볼 수 있는 사이트를 만들었습니다. 스크롤위치 조작, 업버튼사용 기능을 넣었고 반응형으로 제작하였습니다.

Jquery를 연습하기 위해 만든 작업물로 스크롤 위치를 활용해 위치 이동, 업 버튼 기능을 구현하였습니다.

HTML CSS Jquery

Responsive : O

Work : 개인 100% PageMove

기존 러쉬 페이지를 클론 코딩 형식으로 눈으로 화면을 보고 직접 코딩을 해보았습니다. Swiper, Bxslider 플러그인을 사용하였고 가로 스크롤링 연습을 적용해 보았고 반응형으로 제작하였습니다.

홈페이지의 UI만 보고 작업물을 만드는 걸 연습하기 위해 만든 작업물로 Swiper, Bxslider 플러그인을 활용하여 만들었고 horizontal 형식인 가로 스크롤링을 연습해 보는 경험이었습니다.

HTML CSS JavaScript Jquery

Responsive : O

Work : 개인 100% PageMove