본문 바로가기

사이드프로젝트5

Vue3 - 영화 검색 사이트 코드분석 - 본 포스팅은 아래의 프로젝트를 기반으로 다뤄진 내용입니다. https://devraphy.tistory.com/235 Vue3 - 영화 검색 사이트 1. 개요 - Vue 공부를 위한 클론 코딩 - 본 프로젝트는 패스트캠퍼스의 프론트엔드 초격차 패키지의 Vue 파트 강의 내용을 따라 만든 것입니다. 2. 사이트 소개 https://silly-banach-bd5250.netlify.app/#/ Hell.. devraphy.tistory.com 1. 개요 - 본 프로젝트는 Vue3 강의에서 진행한 내용을 그대로 클론코딩한 프로젝트이다. - 강의내용을 따라서 프로젝트를 만들다 보니, 코드와 데이터 흐름에 대한 이해가 부족함을 느꼈다. - 이와 같은 이유로 해당 프로젝트의 핵심 기능을 분석해보려고 한다. 2... 2021. 6. 30.
Vue3 - 영화 검색 사이트 1. 개요 - Vue 공부를 위한 클론 코딩 - 본 프로젝트는 패스트캠퍼스의 프론트엔드 초격차 패키지의 Vue 파트 강의 내용을 따라 만든 것입니다. 2. 사이트 소개 https://silly-banach-bd5250.netlify.app/#/ Hello Vue Project! silly-banach-bd5250.netlify.app - OMDbAPI를 사용하여 영화 검색 사이트 기능 구현 - Vue3를 사용하여 프론트 작업 진행 3. 사용기술 Vue3 BootStrap Webpack ESLint 4. Github https://github.com/devraphy/vue3-movie-app GitHub - devraphy/vue3-movie-app: movie app made of Vue 3 movie .. 2021. 6. 22.
Vanilla JS - Pastel Browser 1. 개요(Introduction) Vanilla JS를 이용하여 Momentum이라는 크롬 extension의 기능을 재구현했습니다. A clone of the chrome app Momentum's features using Vanilla JS. 2. 기능(Features) ClockTo-Do List (local-storage) Username (local-storage) Weather and location (openWeather API) Random Background (refresh and change) 3. GitHub 링크 https://github.com/devraphy/pastelBrowser GitHub - devraphy/pastelBrowser: A repository for th.. 2020. 10. 17.
Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(2) - 이전 포스팅에서 지역저장소에 데이터를 저장하여 toDoList를 생성하는 방법까지 알아보았다. - 오늘은 삭제하는 기능을 구현해보자. 1. 삭제기능 - 아래의 사진처럼, 할일을 작성하면 li태그에 입력값이 하나씩 저장되고 x버튼을 눌러 삭제하는 방식이다. - 삭제를 위해 x버튼을 눌렀을 때, HTML상에서 어떤 x버튼이 어떤 li태그에 존재하는지 구분할 수 있어야 한다. 어떻게 할 수 있을까? a) event.target - event.target은 해당 event가 발생한 엘리먼트를 가리키는 기능이다. - eventHandler 함수를 작성할 때, 매개변수로 선언되어야지 사용할 수 있다. [구현내용] 1) x버튼이 눌렸을 때, event.target을 이용하여 어떤 엘리먼트에서 이벤트가 발생했는지 .. 2020. 10. 16.
HTML/CSS - 음악 플레이어(Music Player) 1. 개요(introduction) HTML/CSS 실력향상을 위해 음악 플레이어의 디자인을 만들었습니다. To have a better understanding of the usage of HTML and CSS, I copied a music player FE. 2. 화면구성(UI) 재생 목록과 재생화면을 구현했습니다. I made two screens, playList and playing screen. 3. 프로젝트 링크(Project Link) gitHub: https://github.com/devraphy/musicPlayer GitHub - devraphy/musicPlayer: A repository for musicPlayer portfolio A repository for musicPl.. 2020. 10. 13.