분류 전체보기105 nth-child와 nth-of-type의 차이 목차 · nth-child · nth-of-type nth-child nth-child는 모든 자식의 순서에서 지정해준 값을 찾는다. 위의 예시에서 3개의 자식이 있는 상태에서 2번째 b요소를 찾고싶을 때, 3번째 예시에서는 3개의 자식 중에서 2번째의 위치가 a가 되므로, 아무것도 찾지 못하게 된다. nth-of-type nth-of-type은 지정된 자식 태그 요소에서의 순서를 찾는다. 첫번째 예시에서 nth-child 였을 경우 2번째 자식 요소에 a 태그가 없으므로 아무것도 찾지 못한다. 하지만 nth-of-type은 2번째에 있는 a 태그를 찾기 때문에 3번째 자식인 a를 찾을 수 있게 된다. 2024. 3. 25. 2023년, 그리고 지금의 2024년 회고록 목차 · 긴 대학 생활의 끝을 마치며 · 개발자로의 첫 취업 · 다시 우물 밖으로 점프해보기 · 지란지교, 그리고 꿈꿔왔던 직장 중 하나로 · 그리고 2024년 현재의 나 긴 대학 생활의 끝을 마치며 2023년 2월 졸업을 했다. 학교에서의 4년이라는 시간은 오랜 기간이었지만, 뒤돌아보면 그렇게 오래 느껴지지 않았던 소중한 순간 중 하나였다. 학교에서 다양한 사람들을 만나고 이야기하면서 사람 사귀는 법들을 알게 되었고, 정말 내성적이었던 성격은 외향적으로 바뀌었다. 덕분에 `멋쟁이사자처럼`을 시작으로 다양한 대외활동 등에 도전할 수 있었고, 하나하나 이뤄가는 성취해나가는 과정을 대학 공부를 하면서 처음 깨달았던 것 같다. 1학년부터 2학년때는 대외활동에 미쳐 살았던 나머지 학점을 놔주었던 기억이 있고, .. 2024. 3. 22. Vue 공식 문서 훑어보기 - 감시자 · 템플릿 참조 · 조건부 및 목록 렌더링 목차 · 감시자(Watch) · 템플릿 참조 · 목록 렌더링 · 조건부 렌더링 감시자(Watch) 종종 반응형 상태가 변경 되었을 때를 감지하여 다른 작업 (데이터 패칭 등)을 수행해야하는 경우가 있습니다. 예를 들어 어떠한 상태가 변경되었을 때 DOM을 변경하거나, 비동기 작업을 하여 다른 상태를 변경하는 것입니다. Composition API의 watch 함수를 사용하여 반응형 상태가 될 때마다 특정 작업을 수행할 수 있습니다. const message = ref(`Hello World`); /** * 첫 번째 매개변수에는 데이터 변경을 감지하고자 하는 인자가 들어갑니다. * 이때, 첫번째 매개변수는 ref, reactive, computed, getter, array 타입과 같은 다양한 타입이 들어.. 2024. 3. 19. Vue 공식 문서 훑어보기 - 라이프사이클 · 이벤트 핸들링 · 바인딩(폼, 클래스, 스타일) 목차 · 라이프 사이클 · 이벤트 핸들링 · 클래스 바인딩 · 스타일 바인딩 · 폼 바인딩 라이프 사이클 각각의 Vue 컴포넌트 인스턴스는 생성되고, 소멸될 때 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프사이클(liftcycle)이라고 합니다. 라이프사이클 훅(Lifecycle hooks)은 라이프사이클 단계에서 사용자가 자신의 코드를 추가할 수 있는 단계 별 기능(function)입니다. Lifecycle Hooks 등록 컴포넌트가 렌더링을 완료하고 DOM 노드를 만든 후, onMounted hooks를 사용하여 코드를 실행할 수 있습니다. import { onMounted } from 'vue'; export default { setup() { onMounted(() => { conso.. 2024. 3. 19. Vue 공식 문서 훑어보기 - 템플릿 문법 · 반응형 기초 · 계산되어진 속성 목차 · 템플릿 문법 · 반응형 기초 · 계산되어진 속성 템플릿 문법 데이터 바인딩의 가장 기본적인 형태는 `이중 중괄호` 문법을 사용하는 방법입니다. 메시지 : {{ msg }} 이중 중괄호 태그 내 msg 는 해당 컴포넌트 인스턴스의 msg 속성의 값으로 대체된다. 또한 msg 속성이 변경될 때마다 업데이트가 되어집니다. 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석합니다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야합니다. v-html 이라는 새로운 속성은 디렉티브라고 하며, 디렉티브는 Vue에서 제공하는 특수한 속성임을 나타내기 위해 접두사 v-를 사용하며, 렌더링된 DOM에 특별한 반응적 동작을 적용합니다. 텍스트 보간법 사용 : {{ rawHtml }} v-html .. 2024. 3. 19. Vite 환경에서 emotion의 pragma 반복을 줄여보기 목차 · 포스팅 동기 · vite.config.js 설정해주기 · tsconfig.json 설정해주기 · [부록] 타입스크립트를 사용하는데, DetailedHTMLProps 에러가 발생한다면? 포스팅 동기 최근 프로젝트에서는 tailwind를 접했지만, 다시 다양한 프로젝트를 접하면서 emotion을 사용할 일의 빈도가 많아졌다. 요즘에는 Vite 환경에 매료되어, 다양하게 배워보고자 Vite 환경과 pnpm을 접목한 프로젝트를 진행을 하였고, 프로젝트 안에서 각 컴포넌트마다 pragma를 기재해주는 것이 매번 불편한 상황 중 하나였다. /** @jsxImportSource @emotion/react */ import { css } from "@emotion/react"; 더보기 /** @jsxImpor.. 2024. 3. 2. 이전 1 2 3 4 ··· 18 다음
