본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Sectio11] 142. v-model 및 입력 아주 기본적인 양식이다. 텍스트를 입력하는 필드, 숫자입력 필드, drop down, checkbox, radio 버튼도 있고, 양식을 제출하는 버튼도 있다. 이런 입력란을 어떻게 Vue와 연결할지 살펴보자. 그리고 해당 입력란들로부터 정보를 가져오는 방법도 알아보자. TheForm.vue 마크업이 모두 화면상에 양식을 이룬다. input들로부터 데이터를 추출하는 작업부터 하자. 우선 데이터를 콘솔에 출력해서 정상적으로 추출되는지 확인해보자. 이 작업을 위해서는 양식을 제출했을 때 트리거되는 메서드가 필요하다. → submitForm 메서드를 추가해보자. Save Data ## form태그 내부의 button 요소 'Save Data' 버튼태그에 click 리스너로 submitForm 메서드를 추가할 수..
동적 배열(Dynamic Array) 선언 이후에 size를 변경할 수 없는 정적배열(static array)과 다르게 동적 배열(dynmic array)은 size를 늘릴 수 있다. # Static Array vs Dynamic Array - static array 한계점 : 고정된 저장공간. array는 선언 시 크기를 지정해야하고 딱 그만큼만 메모리를 할당받기 때문에, 프로그램이 실행되는 중간에 추가적으로 더 데이터가 들어온다면 저장을 할 수 없다. - dynamic array : 그런 상황이 왔을 때, 배열의 크기를 늘림으로써, 엄밀히 말하면 더 큰 배열을 새로 다시 할당함으로써 데이터를 더 추가할 수 있다. 더보기 (static) array에 대해서 ↓ 2023.09.06 - [자료구조알고리즘] - 배열(Array) # Dynami..
배열(Array) (static) Array 아래의 배열의 특성 두 가지만 이해하면 배열에 대해 다 이해한 것. # 배열의 특성 1. 고정된 저장 공간(fixed-size) 2. 순차적인 데이터 저장(order) 배열은 선언 시에 size를 정하여, 해당 size만큼의 연속된 메모리를 할당받아 data를 연속적/순차적으로 저장하는 자료구조. - 배열은 선언시부터 size가 정해져있고, 그 size만큼 연속된 메모리를 할당받아놓은 상태. - 그리고 연속된 메모리에 data를 연속적/순차적으로 저장하는 자료구조. 실제 C언어에서 Array를 어떻게 선언하는지 보자. int arr[5] = {3, 7, 4, 2, 6} int형 데이터를 5개까지 저장하는 배열을 선언했다. → int arr[5] 선언과 동시에 초기화도 해줬다. ..
리스트(List) ** 자료구조 : 데이터를 저장하고 관리하는 방식 List 자료구조는 SET 자료구조와 비교가 많이 된다. 예를 들어, 1,2,3을 저장하려고 한다. # SET 자료구조 set에 저장할 때는 (1,2,3)으로 저장을 하든, (3,2,1)로 저장하든, (2,3,1)로 저장하든 다 똑같다. 원소가 무엇이 저장이 되어있느냐가 중요하다. 순서는 중요하지 않다. # List 자료구조 하지만, List는 순서가 중요한 자료구조. [1,2,3], [3,1,2]는 전혀 다른 리스트가 된다. 순서가 중요하기 때문에 순서가 바뀌면 전혀 다른 list가 된다. ## List 자료구조 구현방법 List 자료구조는 어떻게 구현이 될까? 크게 두 가지 방법이 있다. 1/ Array List - Array로 만들어진 list. 배..
[심화] 시간복잡도 Time Complexity 시간복잡도 활용법 in 코딩테스트 1. 시간복잡도 이해하고 외우기 2. 제한 조건 보는 법 3. 다양한 접근 Step 1 : 문제 이해하기 → '접근 방법'을 생각해내기위해서는 문제를 제대로 이해해야한다. Step 2 : 접근 방법 → 제일 중요. 문제를 어떻게 풀지 '접근 방법'을 생각해내야만 코드를 구현할 수 있다. 접근방법을 생각해내기 위해서 '자료구조'와 '알고리즘'을 수박겉핥기 식으로 배우는게 아니라, 밑바닥부터 공부를 한다. Step 3 : 코드 설계 Step 4 : 코드 구현 그냥 시간 복잡도는 이거다, 이렇게 하고 지나가는게 아니라, 왜 Big-O(n)인지, 왜 Big-O(1)인지 등을 하나하나 이해를 해야 나중에 접근 방법을 생각해낼때 자료구조 특성, 알고리즘 특성을 활용할 수 있다. 다..
[Udemy Vue 완벽가이드 Section9] 124. 다른 폴더 구조로 이동하기 파일 이름을 짓는것 외에도 큰 프로젝트에서 작업할 때 기억해야할 점이 하나 있다. → 바로, 파일을 정리하는 방법 # components 폴더에 컴포넌트를 전부 두면? 지금까지는 src폴더에 components 폴더를 만들어 Vue 컴포넌트 파일을 전부 그 폴더에 저장했다. 이는 일반적인 구조로, 아무런 문제가 없지만 큰 프로젝트에서 이런 구조는 한계가 있다. 수백 개의 컴포넌트가 있는 프로젝트에서 모든 파일을 한 폴더에 넣는다면 관리하기 어렵다. 찾고자 하는 컴포넌트를 찾기 어려울 수 있다. 따라서 하위 폴더를 만드는 것이 더 좋을 수 있다. 예를 들어, base 또는 UI라는 이름의 하위 폴더를 만들어 BaseCard.vue, BaseBadge.vue와 같은 기본 컴포넌트를 이 폴더에 옮길 수 있다...
[Udemy Vue 완벽가이드 Section9] 123. Vue 스타일 가이드 폴더구조와 파일 이름에 대해 알아보자. 지금까지는 강사를 따라 파일이름을 지었다. 하지만 이름을 이렇게 지은 이유는 무엇이고, 과연 이것이 가장 적합한 폴더구조인지에 관해 이야기해보자. 공식 Vue 스타일 가이드가 있다. https://ko.vuejs.org/style-guide/ 스타일 가이드 | Vue.js ko.vuejs.org Vue 웹사이트에서 Docs의 Style Guide에서 볼 수 있다. 여기서 우리의 코드가 어떤 모습을 해야할지, 이름을 어떻게 정하는게 좋은지에 대한 내용을 볼 수 있다. 기본적으로 따라야하는 필수 규칙이 있고, 강력하게 권장되는 규칙 등과 같이 다양한 수준의 권장 사항이 있다. 예를 들어, 컴포넌트는 파일에 저장되어야 한다는것을 알 수 있다. Whenever a buil..
[Udemy Vue 완벽가이드 Section9] 122. 프레그먼트(Fragment) 활용하기 컴포넌트의 또 다른 기능이 있다. TheHeader.vue 컴포넌트에서는 header요소의 하나의 루트 HTML 요소만을 가진다. 다른 요소인 h1은 header의 자식요소이다. More on Vue Components 한편 ManageGoals.vue와 같은 컴포넌트에서는 div태그를 제거하면 여러 개의 상위레벨의 HTML 요소를 가진다. Manage Goals Set Goal Input is invalid! Please enter at least a few characters.. Okay 물론 이런 방식도 괜찮다. # Vue 2 Vue2에서는 위 방식에서 div가 없으면 지원하지 않는다. template 하나에 root 레벨 요소는 오직 하나만을 가져야한다. 그리고 그 안에 원하는만큼 많은 형제요소를..

티스토리툴바