영화 검색 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..
VanillaJS_2 고양이 사진첩 강의를 통해 만든 간단한 프로젝트를 보완하는 방식으로 과제가 진행되었고 Vanilla JS 컴포넌트 방식을 사용하여 진행한 프로젝트입니다. 이번 프로젝트에서는 데이터 정합성, setState 최적화를 진행해 보았습니다. 프로젝트의 기능들 breadcrumb 탐색기 기능 imageviewer 모달 ⏱️ 로딩의 지루함을 날려주는 isLoading 프로젝트의 API가 로딩처리를 학습해보기 위해 상당히 긴 쓰로틀링이 랜덤 한 시간으로 걸려있었고 과제를 진행할수록 한국인은 어쩔 수 없구나라고 느끼게 되었다.🙂 로딩처리를 하는 로직은 생각보다 훨씬 간단했다. fetch와 서버와 통신하거나 연산이 필요해 시간이 오래 걸리는 작업이 있다면 해당 부분을 함수로 만들어 시작하는 부분에서..
프로그래머스 데브코스 프론트엔드 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 - CSS (SCSS, autoprefixer) 🗓 CSS 강의를 마치며 생각보다 똑똑한 CSS (:root, @support, @media) 이전 강의에 이어 CSS 변수와 @support, @media 기능 쿼리에 대해 학습하였다. 변수를 선언하는 것은 이전에 사용해본 적이 있다. 변수 선언 :root 선택자 안에 --color-muted와 같은 형태로 변수를 선언하여 사용할 때에는 var(--color-muted)로 사용 가능하다. 문서의 루트 트리에 변수를 지정하는 것으로 html의 루트 요소는 html로 root 선택자와 같지만 명시도가 더 높기에 root를 사용하여 변수를 지정한다. @support 기능 쿼리 사용자의 브라우저가 어떠한 조..
🚀 새로운 블로그로 이전했습니다.
살펴보러 가기
