실습
-
Vue 데이터 바인딩 실습 - TODO 앱 구현하기개발/Front-end 2021. 9. 15. 22:28
이번 시간에는 이를 이용할 TODO 앱을 만들어보겠습니다. 0. 프로젝트 소개 및 컴포넌트 설계 0-1. 프로젝트 소개 이번에 실습할 프로젝트는 아래와 같습니다. (gif라서 약간 이미지가 깨집니다...) 0-2. 컴포넌트 구성 컴포넌트를 작게하는 경우 재사용성이 높아집니다. 따라서 아래와 같은 컴포넌트로 구성하겠습니다. TodoHeader: 제목 TodoInput: 할일 목록 추가 할일 목록 타이핑하여 + 버튼 클릭 시, localStorage에 추가(할 일 목록에 추가) 할 일 목록 입력 후 엔터 클릭 시 할 일 목록에 추가 TodoList: 할일 리스트 localStorage에서 할 일 목록 데이터를 가져와서 보여주기 완료 유무 체크, 리스트 삭제 TodoFooter: 모든 리스트를 없애는 버튼 0..
-
Vue Lazy load 적용하기개발/Front-end 2021. 8. 24. 20:45
이번 시간에는 Vue Router 설정 중 Lazy Loading Routes를 사용하는 실습을 진행하겠습니다. 해당 실습은 vuejs 가이드 문서를 참고해서 만들었습니다. 만약 Lazy Load에 대한 개념이 어렵다면 이전 게시물인 Vue Lazy Load(비동기 컴포넌트)란? 에 대한 포스팅을 읽고 오시는 것을 추천합니다. 1. Vue 기본 CLI 세팅 1-1. Vue CLI 설치 아래는 vue cli를 설치하는 명령어입니다. $ npm install -g @vue/cli 1-2. Default 옵션으로 프로젝트 설치하기 해당 옵션으로 프로젝트를 생성하는 경우 기본적으로 설정된 값으로 설치가 됩니다. 1-2-1. vue 프로젝트 생성 vue create [프로젝트 명] 명령어를 실행합니다. 여기서 프..
-
도커 컴포즈 사용하기개발/docker 2020. 8. 7. 14:48
💡 목차 이번 시간에 학습할 부분은 아래와 같다. 전체적으로 무엇을 배울지 미리 확인하고 가자. 도커 컴포즈 사용하는 이유 도커 컴프즈를 사용하는 이유를 알고 가자 도커 컴포즈 설치하기 도커 컴포즈를 사용하기 위해 설치를 먼저 해보자. 도커 컴포즈 사용하기 도커 컴프즈를 사용하고 파일 작성 방법에 대해 알아보자. 1. 도커 컴포즈 사용하는 이유 여러 개의 컨테이너를 실행해야 할 때나 도커 실행 시 설정이 많아지면 사용할 때 복잡해집니다. 예를 들어 한 워드프레스 애플리케이션을 구축하기 위해 mysql + wordpress를 생성해야 한다면, 아래와 같이 하나씩 컨테이너를 생성해야 합니다. 해당 예제는 docker를 사용해보자 (docker 기본 명령어 사용해보기) 실습에서 다룬 부분입니다. # 1. my..