전체 글 (372) 썸네일형 리스트형 Vue js 인스턴스 라이프사이클 예제 오늘은 vue 인스턴스의 라이프 사이클에 대해 공부해보도록 하겠습니다. 인스턴스의 라이프 사이클을 알면 app을 보다 디테일하게 다룰 수 있습니다. 때문에 반드시 알아야 합니다. vue 인스턴스의 라이프사이클은 beforecreate() 인스턴스가 생성되기 전이다.-> created() 인스턴스가 생성되어 데이터를 사용할 수 있습니다.-> beforeMount() div태그 #app의 html 코드가 생성되기 전 상태-> mount()html코드가 div태그 #app에 html코드가 찍혀있는 상태-> beforeupdate() 데이터가 업데이트 되기 전-> updated()되고난후-> beforedestroy()해당 페이지를 종료하기 전-> destroy() 해당 페이지가 종료된 상태 this is Ho.. vue js slot 기본 예제 오늘은 vue js slot에 대해 알아보도록 하겠습니다. slot은 언제 쓰는 것인가? slot은 컴포넌트를 보다 디테일하게 활용할 수 있도록 하는 도구입니다. 좀더 구체적으로는 기존에 있던 컴포넌트의 재사용성을 높이는데 아주 중요한 도구입니다. 기본 예제를 통해 한 번 배워보도록 하겠습니다. 우리가 배운 컴포넌트는 부모에서 자식 컴포넌트를 로드할 때 사용됩니다. 자식 컴포넌트의 코드가 부모 컴포넌트 코드에 올라가죠. slot은 부모 컴포넌트에 특정 문법에 따라 쓰인 html 코드를 자식 컴포넌트에 보내는 역할을 합니다. 결국 부모 컴포넌트에 자식 컴포넌트에 html코드를 추가한 코드가 로드되는 것이지요. 다음과 같이 자식 컴포넌트 template태그안에 slot태그를 넣습니다. one two 다음으로.. vue js props 컴포넌트간의 데이터 이동에 대해 다루어 보겠습니다. props와 emit이 있습니다. (1) props props는 자식컴포넌트에서 부모 컴포넌트로 데이터를 보낼 때 사용합니다. 예시를 한 번 살펴보겠습니다. 보시면 title이 공통으로 들어가 있습니다. 이것을 props를 통해 아래와 같이 각 페이지에 맞게 바꿀 수 있습니다. 컴포넌트 폴더에서 vue파일을 열고 다음과같이 코드를 수정하면 바꿀 수 있습니다. props에서 title객체를 생성해주고 type. defalut값, required(필수 혹은 선택) 설정을 해주십시오. 주의사항은 props 내의 객체명을 컴포넌트 내의 다른 데이터 이름과 같게 하면 안됩니다. {{title}} {{name}} clickme 다음은 views디렉터리에 있는 컴포.. vue js 싱글 파일 컴포넌트 예시 오늘은 Vue js 싱글 파일 컴포넌트에 대해 공부해보도록 하겠습니다. (1)싱글 파일 컴포넌트 Vue js에서 컴포넌트를 사용하는 이유는 중복되는 코드를 컴포넌트에 담에 효율적으로 사용하기 위함입니다. 저번 시간에 Vue CLI를 사용하여 프로젝트를 만들었는데요 그 환경을 기반으로 오늘 공부를 시작하겠습니다. SRC 폴더 아래에 있는 COMPONENTS 폴더에서 balmostory.vue 파일을 생성해줍니다. 그런 후 아래와 같은 코드를 입력해주에요. {{name}} clickme 위의 코드를 설명하면 export default안에 컴포넌트 데이터, 함수들이 있습니다. 그리고 template 태그 안에서 컴포넌트가 html에 로드될 때 어떤 코드가 입력될지 설정할 수 있습니다. 이렇게 코드를 입력한 후.. 관계형 데이터 모델링 정규화 No transitive dependencies 전 시간에 Atomic columns와 No partial dependencies를 해결해 보았습니다. 오늘은 No transitive dependencies에 대해 알아보도록 하겠습니다. No transitive dependencies는 이행적 종속적입니다. 예를 들어 아래와 같은 표가 있다고 했을 때, 손흥민은 에이전트에 소속되어 있고 에이전트는 소속사에 종속되어 있다고 가정합시다. 달리기, 이적료는 손흥민에 의존하고 있지만 소속사는 에이전트에 종속되어 있죠. 이러한 것은 이행적 종속성이라고 합니다. 이를 아래와 같이 해결할 수 있습니다. 중복되는 부분도 함께 제거할 수 있습니다. Vue CLI 설치 및 사용방법과 Vue-Router(뷰 라우터) 살펴보기 오늘은 Vue CLI 설치 및 사용방법과 Vue Router에 대해 알아보도록 하겠습니다. 1.Vue CLI 설치 및 사용방법입니다. cli.vuejs.org/guide/installation.html Installation | Vue CLI Installation Warning regarding Previous Versions The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with npm uninstall vue-cli -g or yarn global remove cli.v.. 백트래킹 알고리즘(Backtracking) 개념과 예시 백트래킹은 어떤 문제를 풀 때 사용하는 알고리즘인가? 한정 조건을 가진 문제를 풀 때 사용하는 알고리즘이다. 그런 문제들은 주로 최적화문제이거나 결정 문제이다. 또한 상태공간을 트리로 나타낼 수 있을 때 사용하는 알고리즘이다. 상태공간 트리란 문제 해결 과정의 중간 상태를 각각 한 노드로 나타낸 트리이다. 한정 조건을 가진다는 것은 원소의 순서와 해결 방법이 무관하다는 의미이다. 모든 조합을 시도해 문제의 해를 찾는 것이다. 해를 얻을 때까지 모든 가능성을 시도한다는 말이다. 보통 재귀함수로 구현된다. 우선탐색과 비슷한 면이 있으나 기억 공간을 덜 차지한다는 점에서 다르다. 예를 들어 지금의 경로가 해가 될 것같지 않으면 해당경로를 제외하고 탐색한다. 이를 가지치기라 부른다. 이렇게 함으로써 쓸데없는 과.. 관계형 데이터 모델링 정규화 Atomic columns와 No partial dependencies 오늘은 관계형 데이터 모델링 정규화에 대해 공부해 보려 합니다. Atomic columns와 No partial dependencies(부분 종속성)에 대해 알아보도록 하겠습니다. (1)Atomic columns 예를들어 이런 표가 있다고 합시다. 우리가 데이터 베이스에서 데이터를 가져올 때 특정 열의 값들이 두개 이상이라면 가져와서 제대로 처리할 수 있을까요? 관계형 데이터 베이스에서는 힘듭니다. 때문에 값들이 한가지 여야 합니다.(Atomic해야 합니다.) 그런데 위의 표를 보면 광고 부분의 값들이 두개씩 들어 있습니다. 이를 한가지 값만 갖도록 바꿔줘야 합니다. 이러한 상황은 주로 N:M관계에서 나옵니다. 즉 선수들은 여러개의 광고를 할 수 있고 광고주는 여러 선수를 후원할 수 있죠. 이러한 문제를.. 이전 1 ··· 43 44 45 46 47 다음
