영화 검색 SPA with Vue Vue와 영화 검색이 가능한 API를 활용하여 간단한 영화 검색 웹페이지를 구현하는 과제로 실제 배포까지 진행되어야 했기에 serverless function에 이해도를 가져야 했던 과제였습니다. 프리뷰 https://movie-finder-pi-ten.vercel.app/ 구현 방법 router를 활용하여 페이지를 분리하는 방법도 있었지만 규모가 크지 않았던 만큼 정말 SPA로 구현하고자 하였고 검색된 영화를 클릭하면 모달로 상세페이지를 표시하는 방식을 사용하였습니다. 스타일링을 위해서 부트스트랩과 약간의 Sass를 이용하였습니다. 상태 관리를 위해 props 넘겨주는 방식으로도 어렵지 않게 구현이 가능했지만 Vuex를 활용해보고 싶었기에 이를 적용하였습니다. Vuex..
CSS GitHub My Profile 클론 강의를 진행해 주신 강사님의 세션에서 저는 어떤 UI가 가장 클론 연습에 좋을까에 대한 질문을 했고 이에 대한 답변으로 깃헙 마이 페이지가 좋을 것 같다는 의견을 듣고 SASS로 SCSS 문법을 활용하여 진행하였습니다. 프리뷰 클론한 페이지 https://radiant-griffin-5973eb.netlify.app/ 원본 페이지 https://github.com/mxx-kor 시멘틱 태그를 활용하여 HTML 작성 CSS 강의와 그동안의 경험으로 이제는 어떤 구조로 HTML을 작성해야 하는지 이해도가 있었지만 시멘틱 태그에 대해 생각하고 구조를 작성하느라 시간을 조금 더 투자하였다. header, main, nav, section, address, articl..
프로그래머스 데브코스 프론트엔드 3기 ✓ TIL DAY - Vue(Feat. webpack, serverless function) 🗓 Vue CSS 과제를 진행하고 바로 Vue 학습을 진행하였다. 시간이 정말 순식간에 흘러간 것 같다. 8일간의 강의를 통해 Vue를 사용한 프로젝트도 하나 진행하였고 이를 통해 배운 점에 대해 간단하게 정리해보려고 한다. Vue 드디어 써봅니다. 이전에 간단하게 찍먹한 정도에서 직접 사용해보며 본인이 느낀 Vue의 장점은 아래와 같다. 사용 방법이 아주 복잡하지 않다. 사용하는 방법이 어느 정도 정해져 있다. 공식 문서 정리가 잘되어있다. 짧은 기간 동안 학습해보며 리액트보다 빠르다는 점은 사실 느끼기 힘들었지만 2번과 3번 장점이 공존하기 때문에 다른 페이지를 찾아볼 필..
Notion_VanillaJS 데브코스 4번째 과제로 노션 클론 코딩을 진행하였습니다. 코드 리뷰 반영을 진행한 후 작성하는 회고 글입니다. 리팩토링을 진행하였지만 아직 부족한 점이 많아서 시간이 생길 때마다 조금씩 개선할 계획입니다. 바닐라 JS만을 이용해 노션 클로닝을 진행하였습니다. 컴포넌트 방식, history API를 활용해 SPA로 구현하였습니다. 기본 요구사항은 모두 구현하였고 보너스는 한 가지 구현하였습니다. 초기 목표는 최소한으로 데이터를 fetch 하는 것을 목표로 하였습니다. 스타일을 줄 때에는 CSS와 자바스크립트 inline 모두 활용하여 주었습니다. 🤔구현 기능 🎄트리 구조 구현 이제는 (구)를 앞에 붙여야 하지만 오프라인 학습이 진행되어 팀원들과 만나서 과제를 진행하였고 첫날 ..
프로그래머스 데브코스 프론트엔드 3기 ✓ TIL DAY - 29~30 🗓 6주차 마무리.. vanilla JS 강의는 끝이 났고 4일간의 CSS학습의 중간(2일 차 수강 완료)에 왔다. 팀원들과 나름 친해지기도 하고 과제를 마무리하여 월드컵 첫 경기를 관람하는 여유(?)를 누렸다. 경기가 끝나고 깃허브를 확인하니 멘토님께서 코드 리뷰를 남겨주셨고 주말을 활용해서 노션 클로닝 프로젝트 리팩토링과 팀원들의 6주 차 과제 코드 리뷰를 진행할 예정이다. 늘 새로운 CSS CSS 강의를 시작하며 로토님과는 다른 스타일의 강의에 적응하고 있다. 영웅님의 강의 스타일은 정반대의 느낌이다.😅 강의 속도가 빨라 짧은 시간 안에 많은 내용들을 배우게 되는 것 같다. 그동안 CSS를 등한시한 경향이 있었는데 우선순위라던지 ..
프로그래머스 데브코스 프론트엔드 3기 ✓ TIL DAY - 28 🗓 오늘은... Drag Event 간단한 drag & drop 기능을 활용한 프로젝트를 진행했고 다양한 이벤트들이 있다는 것은 알고 있었지만 사용해본 적 없는 drag 이벤트를 활용법을 배우게 되어 간략하게 정리하려고 한다. 이번 강의에서 학습한 내용은 어떠한 요소를 drag & drop하여 해당 객체로 이동하는 간단한 프로젝트로 3가지 단계를 거쳤다. dragstart 목표로하는 요소를 드래그를 시작하면 실행되는 이벤트 해당 부분에서 e.datatransfer.setData를 이용하여 값을 저장한다. dragover 드롭이 가능한 부분에 올라갔을 때 실행 e.preventDefault()를 통해 drag를 허용해야 한다. e.datatr..
🚀 새로운 블로그로 이전했습니다.
살펴보러 가기
