반응형 Front-end23 [Vue3] Vue.js에서 자식 컴포넌트의 렌더링 순서에 대한 오해(v-for) 부모 컴포넌트 //부모 컴포넌트 추가 자식 컴포넌트 //자식 컴포넌트 {{item + '::->' + testData}} 처음 마운트 하는 경우 예상하는 값으로 랜더링이 되고 있다. 이때 test4를 추가해보자 (상황: list 0번째에 새로운 데이터를 추가하기 위해 list.value = [data.value, ...list.value] 로 추가했다) 새로 추가된 값에 경우 testData의 값이 test3으로 들어오는 게 확인 된다. 잘 살펴 보면 마지막 test1만 원하는 값이 나오고 나머지는 그전에 값과 동일한 값이 나온다. 이유 처음 부모가 마운트 될 때 자식 컴포넌트도 마운트를 하게 된다. 이 경우에는 정상적으로 동작. 이후 부모에 list가 변경될 경우 test3, test2, test1을 .. 2023. 10. 19. [vue.js] markdown to text (마크다운 문법에서 텍스트 뽑아내기) 1. markdown-to-text 라이브러리 설치 npm install markdown-to-text 2. removeMarkdown 함수를 이용해 파싱 import removeMarkdown from 'markdown-to-text' const markdown = '##마크다운 문법 파싱해봅시다' removeMarkdown(markdown) console.log(markdown)//마크다운 문법 파싱해봅시다 2023. 10. 12. [Vue3] CompositionAPI vue i18n 다국어 처리 1. i18n 설치 npm install vue-i18n@9 2. Create json file src 밑으로 lang이라는 폴더 만들어서 사용했음 1. ko.json { "mainHeader": { "loginBtn": "로그인", "joinBtn": "무료 회원가입" }, "login" : { "title": "로그인", "loginBtn": "로그인", "joinBtn": "회원가입", "placeholderId": "이메일", "placeholderPwd": "비밀번호", "invalidIdFeedback": "이메일을 정확히 입력해주세요.", "invalidPwdFeedback": "패스워드 8~20자리, 대문자/소문자/특수문자를 포함하여야합니다." } } 2. en.json { "mainHea.. 2023. 8. 8. [vue] Life Cycle(생명주기) Life Cycle(생명주기) 생명주기 훅 공식 문서: https://ko.vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram beforeCreate 라이프 사이클 훅 (Options API) Setup 내부 호출 (Composition API) 역할 beforeCreate setup hook에서 진행 1. Vue 인스턴스가 초기화 된 직후에 발생 created setup hook에서 진행 1. data를 반응형으로 추적할 수 있는 단계 2. computed, methods, watch 등이 활성화 되어 접근 가능 3. DOM에는 추가되지 않은 상태 beforeMount onBeforeMount 1. DOM에 마운트 되기전 호출 되는 단계 2. 이 .. 2023. 7. 28. [Vue3] Composition API를 defineProps 및 toRefs 함수와 함께 사용하여 반응 속성을 정의 구조분해 사용하기 - javascript 구조분해 이해하기 1. props 이해하기 상위 구성 요소(부모 컴포넌트)에서 하위 구성 요소(자식 컴포넌트)로 데이터를 전달하는 방법이다. 부모 구성 요소에서 속성을 정의하고 해당 값을 사용할 자식 구성 요소에 전달할 수 있다. 하위 구성 요소에서 전달 받을 데이터에 속성을 정의하고 예상 유형(type), 기본값(default), 필수 여부(required)를 지정한다. 그러면 부모 구성 요소는 템플릿에서 자식 구성 요소를 사용할 때 이러한 소품에 데이터를 바인딩할 수 있다. 1-1. 자식 컴포넌트(ChidComponent.vue) 이 예제에서는 message와 count라는 두 개의 props를 예상하는 자식 구성요소가 있다. message 소품은 String.. 2023. 7. 11. [Javascript] 구조분해(Destructuring ) 할당 구조분해(Destructuring) 할당이란? Destructuring 할당은 개체 또는 배열에서 값을 추출하여 개별 변수에 할당할 수 있는 JavaScript(및 일부 다른 프로그래밍 언어)의 기능입니다. 복잡한 데이터 구조에서 값을 압축 해제하는 간결하고 편리한 방법을 제공합니다. Destructuring 할당 구문은 객체에 중괄호 {}를 사용하고 배열에 대괄호 []를 사용하여 값을 추출하기 위한 패턴을 지정합니다. 패턴은 개체 또는 배열의 구조와 일치하며 값은 해당 패턴을 기반으로 변수에 할당됩니다. 1. 객체에 대한 구조분해 할당 이 예에서는 person 개체의 name, age 및 city 속성이 추출되어 동일한 이름을 가진 변수에 할당됩니다. // Object const person = { n.. 2023. 7. 11. [CSS] 링크버튼, 박스그림자(box-shadow) box-shadow ★ 요소에 그림자를 설정하는 속성. 주로 블록요소에 설정. ★ box-shadow: 수평수치 수직수치 흐림수치 번짐수치 색상 삽입효과 ★ 흐림(blur) 수치 : 그림자 테두리가 흐려지는 수치 ★ 번짐(spread) 수치 : 그림자 크기 설정 수치 link-button.html 버튼 형태로 작성하는 링크 연결 box-shadow.html 박스 스타일링 1 박스 스타일링 2 박스 스타일링 3 박스 스타일링 4 박스 그림자 특수 효과1 박스 그림자 특수 효과2 2023. 7. 7. [CSS] 글자효과(color, text-align, text-decoration..) 텍스트 관련 속성 콘텐츠에 들어가는 글자(자식요소 포함)에 대한 설정 ★ color : 글자 색상 ★ text-align : 정렬 방식. left(기본값), center, right. ☆ vertical-align : 수직 정렬. 이미지 + 글자일 때 - top : 글자와 이미지를 윗선에 정렬. - middle : 가운데에 정렬. - bottom : 밑선에 정렬. ★ text-decoration : 장식 설정 및 제거. - overline - 윗줄 - underline - 밑줄 - line-through - 취소선(삭제선) ★ text-transform : 글자 변환. - uppercase : 소 -> 대문자로 변환 - lowercase : 대 -> 소문자로 변환 - capitalize : 단어의 첫글자.. 2023. 7. 7. [CSS] 높이, 너비 사이즈 높이(height)/너비(width) 너비부분에 주로 적용하는 속성. ★ max- : 확대될 수 있는 상한 설정 ★ min- : 축소될 수 있는 하한 설정 ※ 예) max-with: 100px; -> 100px까지만 확대됨. max_min_sizing.html 최대 너비 최소 너비 2023. 7. 7. 이전 1 2 3 다음 반응형
