목차 기본 구성 v-접두사 Vue computed 1. 기본 구성 v-접두사가 있는 특수 속성에는 값을 할당 할 수 있음 값에는 JS 표현식을 작성 할 수 있음 directive의 역할은 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 것 ` : ` 을 통해 전달인자를 받을 수 있음 ` . ` 으로 표시되는 특수 접미사 - directive를 특별한 방법으로 바인딩 해야 함 새 Vue instance 생성 각각의 instance들은 연결된 DOM element에만 영향을 미침 연결되지 않은 DOM이 Vue의 영향을 받지 않았던 것과 동일한 상황 2. v-접두사 v-text Template Interpolation과 함께 가장 기본적인 바인딩 방법 {{ }}와 동일한 역할 단 정확히 동일한 역할인 것..

http://www.acmicpc.net/problem/2293 2293번: 동전 1 첫째 줄에 n, k가 주어진다. (1 ≤ n ≤ 100, 1 ≤ k ≤ 10,000) 다음 n개의 줄에는 각각의 동전의 가치가 주어진다. 동전의 가치는 100,000보다 작거나 같은 자연수이다. www.acmicpc.net # 조건 n가지 종류의 동전이 있고 각각의 동전이 나타내는 가치는 다르다. 동전을 적당히 사용해서, 그 가치의 합이 k원이 되도록 하고 싶을 때, 그 경우의 수를 구하시오 각 동전은 몇 개라도 사용 가능하다. 동전의 구성이 같은데, 순서만 다른 것은 같은 경우 # 접근 방법 다이나믹 프로그래밍을 이용해서 풀어주면 될 것 같다. 가치의 합 +1 만큼의 dp테이블을 만들어 주고 각 가치를 만들 수 있는 ..

Template Syntax Vue 2 guide > template syntax 참고 렌더링 된 DOM을 기본 Vue instance의 data에 선언적으로 바인딩할 수 있는 HTML 기반 template syntax를 사용 렌더링 된 DOM - 브라우저에 의해 보기 좋게 그려질 HTML 코드 HTML 기반 template syntax - HTML 코드에 직접 작성할 수 있는 문법 제공 선언적으로 바인딩 - Vue instance와 DOM을 연결 Template Interpolation 가장 기본적인 바인딩(연결) 방법 중괄호 2개로 표기 DTL과 동일한 형태로 작성 Template interpolation 방법은 HTML을 일반 텍스트로 표현 RAW HTML v-html directive을 사용하여 ..

목차 MVVM Pattern Instance el data 1. MVVM Pattern 소프트웨어 아키텍처 패턴의 일종 마크업 언어로 구현하는 그래픽 사용자 인터페이스(view)의 개발을 Back-end(model)로부터 분리시켜 view가 어느 특정한 모델 플랫폼에 종속되지 않도록 함 View = 우리 눈에 보이는 부분 = DOM Model = 실제 데이터 = JSON View Model (Vue) View를 위한 Model View와 연결(binding)되어 Action을 주고 받음 Model이 변경되면 View Modle도 변경되고 바인딩된 View도 변경됨 View에서 사용자가 데이터를 변경하면 View Model의 데이터가 변경되고 바인딩된 다른 View도 변경됨 정리 View는 Model을 몰..

목차 사전 준비 Front-end Development Why Vue Vue 2 vs Vue 3 1. 사전 준비 1. VSCode Vetur extension 설치 문법 하이라이팅, 자동완성, 디버깅 기능 제공 2. Chrome Vue devtools extension 설치 및 설정 크롬 브라우저 개발자 도구에서 vue 디버깅 기능 제공 extension 설치 후 확장 프로그램 관리 - 파일 URL에 대한 액세스 허용 2. Front-end Development Back-end 개발은 Django로 진행, 따라서 앞으로 Javascript를 활용한 Front-end 개발에는 Vue.js로 진행한다. Vue.js === JavaScript Front-end Framework Front-end Framewo..

개요 오픈소스 프로젝트와 같이, 자신의 소유가 아닌 원격 저장소인 경우 원본 원격 저장소를 그대로 내 원격 저장소에 복제 (이러한 행위를 Fork라고 함) 기능 완성 후 복제한 내 원격 저장소에 Push 이후 Pull Request를 통해 원본 원격 저장소에 반영될 수 있도록 요청함 따라하기 소유권이 없는 원격 저장소를 fork를 통해 내 원격 저장소로 복제 fork 이후, 복제된 내 원격 저장소를 로컬 저장소에 clone 이후에 로컬 저장소와 원본 원격 저장소를 동기화 하기 위해 연결 사용자는 자신이 작업할 기능에 대한 브랜치를 생성하고, 그 안에서 기능을 구현 기능 구현이 완료되면, 복제 원격 저장소(origin)에 해당 브랜치를 Push 복제 원격 저장소(origin)에 브랜치가 반영됨 Pull R..

Branch와 원격 저장소를 이용해 협업을 하는 두 가지 방법 원격 저장소 소유권이 있는 경우 => Shared repository model 원격 저장소 소유권이 없는 경우 => Fork & Pull model Shared repository model 원격 저장소가 자신의 소유이거나 Collaborator로 등록되어 있는 경우 master 브랜치에 직접 개발하는 것이 아니라, 기능별로 브랜치를 따로 만들어 개발 Pull Request를 사용하여 팀원 간 변경 내용에 대한 소통 진행 따라해보기 소유권이 있는 원격 저장소를 로컬 저장소로 clone 받기 사용자는 자신이 작업할 기능에 대한 브랜치를 생성하고, 그 안에서 기능을 구현 기능 구현이 완료되면, 원격 저장소에 해당 브랜치를 Push 원격 저장소에..

목차 Git branch Git merge 1. Git branch 개요 브랜치(Branch)는 나뭇가지라는 뜻으로, 여러 갈래로 작업 공간을 나누어 독립적으로 작업할 수 있도록 도와주는 Git의 도구 장점 브랜치는 독립 공간을 형성하기 때문에 원본(master)에 대해 안전함 하나의 작업은 하나의 브랜치로 나누어 진행되므로 체계적인 개발이 가능 Git은 브랜치를 만드는 속도가 굉장히 빠르고, 적은 용량을 소모함 git branch 브랜치의 조회, 생성, 삭제와 관련된 Git 명령어 조회 git branch # 로컬 저장소의 브랜치 목록 확인 git branch -r # 원격 저장소의 브랜치 목록 확인 생성 git branch {브랜치 이름} # 새로운 브랜치 생성 git branch {브랜치 이름} {..

목차 reset revert 1. Git reset 쓰는 상황이 오지 않기를 빌면서.. 개요 시계를 마치 과거로 돌리는 듯한 행위로, 프로젝트를 특정 커밋(버전) 상태로 되돌림 특정 커밋으로 되돌아 갔을 때, 해당 커밋 이후로 쌓았던 커밋들은 전부 사라짐 git reset [옵션] {커밋 ID} 옵션은 soft, mixed, hard 중 하나를 작성 커밋 ID는 되돌아가고 싶은 시점의 커밋 ID를 작성 git reset의 세 가지 옵션 --soft 해당 커밋으로 되돌아가고 되돌아간 커밋 이후의 파일들은 Staging Area로 돌려놓음 --mixed 해당 커밋으로 되돌아가고 되돌아간 커밋 이후의 파일들은 Working Directory로 돌려놓음 git reset 옵션의 기본값 --hard 해당 커밋으로..