전체 글
-
[Vue2] vue2.0 인스턴스 라이프 사이클(생명주기)Vue 2023. 5. 15. 15:48
라이프 사이클 Vue.js에서 라이프 사이클이란 하나의 인스턴스가 생성되고, 마운트 및 업데이트 되고, 사라지는 일련의 과정을 말한다. 그리고 Vue.js에서는 이러한 과정을 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed로 나누어 구분한다. 각 과정에 대해서 상세히 알아야겠지만, 기초 단계라 정확히 파악하기 보다는 전체적인 흐름만 파악하고 실제 프로젝트에서 이러한 과정들을 활용하면서 익숙해지고자 한다. 라이프 사이클 흐름은 다음과 같습니다. 각 과정의 의미 1. creation(beforeCreate, created) 이 단계는 가장 처음 실행되는 단계로, 컴포넌트들이 DOM에 추가되기..
-
[Vue2] Vue Slot(슬롯)의 필요성과 사용 방법Vue 2023. 5. 12. 23:55
Slot(슬롯)의 필요성? 자식(하위) 컴포넌트를 그대로 유지하면서 다른 부모(상위) 컴포넌트들마다 다른 내용을 적용하고 싶을 때, 사용한다. 기본적으로는 부모 컴포넌트의 요소를 자식 컴포넌트에 내려받는 방식으로 사용한다. 아래와 같은 About.vue 라는 상위 요소 컴포넌트에 하위 요소로 Channy.vue 컴포넌트가 있으면 이렇게 나온다. 이 상황에서 header,body,footer의 다른 부분에 요소를 추가하고 싶다면, 하위 컴포넌트 Channy.vue에 요소를 직접 추가하는 방법도 있다. 하지만 Channy.vue 컴포넌트는 컴포넌트에서도 그대로 사용하고 싶은 상황이라면 slot을 사용하는 것이 유리하다. 아래와 같이 Slot을 이용하여 각 영역에 Here is... 구문을 추가하는 방법을 배..
-
[Vue2] vue Emit 부모 컴포넌트로 데이터 보내기Vue 2023. 5. 11. 16:17
부모 컴포넌트로 변경값 보내기(Emit)란? 이벤트 emit은 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달하기 위한 방식입니다. 이벤트를 전달함으로써 상위 컴포넌트는 하위 컴포넌트에서 전달하는 값을 전달 받을 수 있습니다. 예제 일단 부모로부터 props를 받는 자식 컴포넌트를 작성한다. 자식 컴포넌트로 InputField.vue를 만들고 이것을 부모 컴포넌트 Home.vue에서 불러오는 방식이다. Home.vue This is Home page Sumbit {{ name }} InputField.vue Name 2-1. 메서드 활용하기 input 박스에 입력한 값을 페이지에 그대로 표시해주기 위해서, 이제 해야할 것은 input으로 입력 받은 값을 title 값에 넣어주는 것이다. 그러나 앞서 이야..
-
[JavaScript] 자바스크립트 응용 연달아 계산하기Javascript 2023. 5. 10. 21:08
연달아 계산하기 문제 요구 사항 앞에서 만든 계산기는 계산을 단 한 번만 할 수 있다. 1 + 2 + 4 처럼 연달아 계산하기 위해 수정하는 것이 목표 실제로 계산기에 입력하면 버튼을 1, + , 2, = , + , 4, = 순으로 눌러야 합니다. 두 번째 +를 눌렀을 때, numOne, operator, numTwo 변수가 어떤 값을 갖고 있어야 할지 생각해보세요. 순서도 = 버튼을 클릭할 때, 계산 걸과를 numOne 변수에 저장하고 numTwo 변수를 비워 놓으면 연달아 계산할 수 있지 않을까? 예를 들어 1 + 2 + 4를 계산한다면 먼저 1 + 2 를 계산해 3이 되고, 그 다음에 3 + 4 를 계산하게 됩니다. 1 + 2를 계산 할 때 결과인 3을 numOne에 저장하고 numTwo는 비워두는..
-
[Vue2] vue 자식 컴포넌트에 데이터 보내기 (Props)Vue 2023. 5. 10. 20:46
props란? 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할때 사용되어지는 단방향 데이터 전달 방식이다 예시 각 페이지 별로 title 및 내용을 다르게 해보고 싶다. ChannyBlog.vue {{ title }} {{ name }} Change Name Home.vue This is Home page About.vue This is an about page 실행 화면 title 데이터를 숫자로 넣고 싶으면 script 안에다 title 함수를 넣으면 된다. About.vue This is an about page 실행 화면 값을 보내지 않을 경우, props 옵션 중에서 default를 이용을 하면 된다. 실행 화면 props는 한 개만 전달이 아니고 여러 개를 전달을 할 수가 있다. 참고 자료 ..
-
[Vue2] Vue 싱글 파일 컴포넌트 (Single File Component)Vue 2023. 5. 9. 23:27
싱글 파일 컴포넌트(Single File Component)란? 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법입니다. 뷰 CLI로 프로젝트를 생성하고 나면 App.vue라는 파일을 확인할 수 있습니다. 이처럼 vue 확장자를 가진 파일을 모두 싱글 파일 컴포넌트라고 합니다. 사용 방법(코드) 컴포넌트가 렌더링될 때 화면에 보여줄 HTML 태그 부분 데이터 바인딩을 위한 표현식으로 {{...}} 사용 디렉티브(v-*)를 이용해서 데이터 바인딩, 이벤트 처리 및 동적 화면 제어 AboutView.vue This is an about page 실행 화면 Home 영역 about 영역 참고 자료 https://youtu.be/t0z0kSQIr38?list=PLB7CpjPWq..
-
[JavaScript] 자바스크립트 응용 계산기 만들기4Javascript 2023. 5. 9. 14:05
결과 계산하기 순서도 로직 : numTwo 변수가 비어있다면 경고창을 띄우고, numTwo 변수가 비어있지 않다면 num1과 num2에 연산자를 적용해 계산을 하고 그 결과를 화면에 출력한다. document.querySelector("#calculate").addEventListener("click", () => { if (numTwo) { switch (operator) { case "+": $result.value = parseInt(numOne) + parseInt(numTwo); break; case "-": $result.value = numOne - numTwo; break; case "*": $result.value = numOne * numTwo; break; case "/": $resu..
-
[JavaScript] 자바스크립트 응용 계산기 만들기3Javascript 2023. 5. 8. 23:53
if문 중첩 줄이기 // 숫자 버튼 부르면 그 값이 화면에 노출이 된다. const onClickNumber = (event) => { if (operator) { // 비어있지 않다 // 연산 버튼틀 누룬 뒤 numTwo 입력갑싱 들어오지 않는 경우 창 비우기 if(!numTwo) { $result.value = ''; } numTwo += event.target.textContent; } else { // 비어 있다 numOne += event.target.textContent; } $result.value += event.target.textContent; }; if 문이 중첩된 경우 뜻을 명시적으로 알아보기 힘들기 때문에 최대한 줄이는 것이 좋다. 중첩된 if문 처리하는 절차 공통된 절차를 각 분..