개발적인61 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. Vue 공식 문서 훑어보기 - 템플릿 문법 · 반응형 기초 · 계산되어진 속성 목차 · 템플릿 문법 · 반응형 기초 · 계산되어진 속성 템플릿 문법 데이터 바인딩의 가장 기본적인 형태는 `이중 중괄호` 문법을 사용하는 방법입니다. 메시지 : {{ msg }} 이중 중괄호 태그 내 msg 는 해당 컴포넌트 인스턴스의 msg 속성의 값으로 대체된다. 또한 msg 속성이 변경될 때마다 업데이트가 되어집니다. 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석합니다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야합니다. v-html 이라는 새로운 속성은 디렉티브라고 하며, 디렉티브는 Vue에서 제공하는 특수한 속성임을 나타내기 위해 접두사 v-를 사용하며, 렌더링된 DOM에 특별한 반응적 동작을 적용합니다. 텍스트 보간법 사용 : {{ rawHtml }} v-html .. 2024. 3. 19. Vue3로 업데이트 되면서 어떤 부분이 변화했을까? 목차 · 성능 개선 · Composition API · Fragments · Global API · 라이프 사이클의 변화 · 익스플로러 미지원 성능 개선 Vue3는 V-DOM과 렌더링 성능을 개선하였으며 스캐폴딩을 통해 어플리케이션을 생성 시에 기본적으로 Vite를 사용하여 빠른 렌더링 속도를 제공한다. Composition API Vue2와 Vue3의 가장 큰 변경점이라고 한다면, 바로 Composition API가 도입된 것이다. 이로 인해 스크립트 영역의 소스 코드 영역이 크게 변하게 되었다. Composition API는 Vue2에서도 플러그인과 같은 확장 기능으로 도입하는 것이 가능하기는하지만, Vue2에서 기본적으로 Options API를 이용하는 경우가 많다. Options API에서는 Co.. 2024. 2. 29. [rollup.js] rollup -c 실행 시, Cannot use import statement outside a module 목차 · rollup -c 실행 시, 오류가 발생하다. · 해결 방법 · 왜, 이 오류가 발생했을까? rollup -c 실행 시, 오류가 발생하다. rollup -c 실행 시에 Cannot use import statement outside a module 오류가 발생했다. 그 이유는 rollup.config.js에 import 방식을 사용하면서 발생을 했는데, package.json에 type을 module로 지정을 해주지 않으면 commonJS로 인식이 되어진다. 이때, rollup.config.js에서 ESM 방식의 import 방식을 사용해서 발생을 하고 있었다. 해결 방법으로는 간단하게 type을 module로 명시를 해줘 ESM 방식으로 호환이 되게 하는 것인데, 이렇게 해결을 하게 되면 라이.. 2023. 11. 30. PWA랑 Git Action을 첨가한 멋쟁이사자처럼 피드 개발기 목차 · 홈페이지에 피드를 넣어보면 어떨까? · 그렇다면 주기적으로 데이터를 가져와야하는데, 어떻게 가져올 수 있을까? · 멋쟁이사자처럼 대학 공식 홈페이지가 되다 · 앞으로는 어떻게 할까? 홈페이지에 피드를 넣어보면 어떨까? 우리 학교의 멋쟁이사자처럼 대학 페이지를 만들고, 계속해서 신규기능과 리팩토링을 진행하고 있다. 점차 멋쟁이사자처럼 출신의 팀원들이 많아지면서, 개발자라면 한번씩 만들어본다는 기술 블로그를 모아보면 좋은 그림이 되지 않을까 싶었다. 그래서 기술 블로그를 원활하게 작성을 하는 친구들의 블로그 주소를 받아, RSS를 통해 블로그 포스팅 내용을 멋쟁이사자처럼 홈페이지에서 보여주고자 하였다. RSS란? RSS(Rich Site Summary)는 뉴스나 블로그 사이트에서 주로 사용하는 콘텐.. 2023. 11. 27. 자바스크립트 패키지 매니저, PNPM 란? 목차 · PNPM이란? · PNPM을 사용하는 이유, 그리고 특징 · 중첩된 패키지는 단 한번만 설치한다, 저장 공간의 효율성을 제공해준다. · 타 패키지 매니저에 비해 좋은 성능(속도)를 가지고 있다. · PNPM 설치 방법 · PNPM 사용기 PNPM이란? PNPM이란 2017년에 npm과 yarn의 비효율을 개선한 빠르고 효율적인 자바스크립트 패키징 매니저이다. 여기서 비효율이란, npm으로 여러 프로젝트를 관리하다보면 각 프로젝트마다 모두 같은 의존성을 사용하는 경우가 있다. 이때, 모두 같은 의존성을 사용하기 때문에 이는 중복을 의미한다. 이를 테면 react 프로젝트 100개가 로컬에 있을 수 있다. 이때, npm이나 yarn으로는 100개의 프로젝트 모두 node_modules 디렉토리에 각.. 2023. 11. 21. 이전 1 2 3 4 ··· 11 다음
