본문 바로가기

전체 글338

[Nuxt.js] Cannot use <template> as component root element because it may contain multiple nodes. 문제상황 Nuxt에서 아래와 같은 구문을 사용하면, Show Not Show 다음과 같은 에러가 발생한다. Cannot use as component root element because it may contain multiple nodes. 원인 파악 에러구문 그대로 template 태그는 component의 루트 엘리먼트로 사용하지 못하기 때문인데, template 태그는 여러 개의 노드를 가지기 때문이다. 맨 처음 에러가 발생했을 때, 에러메세지를 정확하게 읽어보지 않고 html 자체를 렌더링하는 최상위 컨테이너 template 하위에서 다중 노드를 반환하지 않는 에러인 줄 알았으나, template 하위에도 template을 사용하지 못한다는 에러였다.. + ) 착각했던 에러는 이것이었다. Com.. 2023. 11. 19.
[Git] Git 브랜치 전략 (git flow, github flow, gitlab flow) Git 브랜치 전략 종류 git flow 전략 전통적으로 많이 사용되는 방식으로, 이 방법을 사용하면 master 브랜치는 항상 PROD와 동일한 상태를 바라볼 수 있다. 브랜치 종류 master PROD 배포 버전을 관리하는 메인 브랜치 hotfix PROD에서 발생하는 버그를 수정하기 위한 보조 브랜치 release 다음 버전 배포를 준비하는 보조 브랜치 develop 다음 버전 배포를 개발하는 메인 브랜치 feature 새로운 기능을 개발하는 보조 브랜치 문제점 git flow 전략에서 release는 하나만 존재한다. develop에 완료된 기능을 release에 태우고, release에서 테스트를 진행한다. 따라서, 배포가 빈번하다면 배포 예정 작업(ex. v1.0.0)을 테스트할 수 없는 병목.. 2023. 8. 25.
[JavaScript] Axio GET에서 파라미터로 배열을 전송하는 방법 문제상황 Axios에서 GET 메소드로 아래와 같은 배열을 전달하면, request URL은 어떻게 될까? import axios from 'axios'; const arrayToSend = [1, 2, 3, 4, 5]; axios .get("https://example.com/api/data", { params: { test: arrayToSend } }) .then((response) => { console.log(response.data); }) .catch((error) => { console.error(error); }); https://example.com/api/data?test=[1,2,3,4,5]? HTML 삽입 미리보기할 수 없는 소스 위 CodeSandbox로 앱을 열어보면, 네트워크.. 2023. 7. 24.
[HTML/CSS] 쉐도우 돔(Shadow DOM) 내부에서 @font-face가 동작하지 않는 이슈 Shadow DOM이란? 이전 글 참고 [HTML/CSS] 쉐도우 돔(Shadow DOM)으로 스타일 충돌 해결하기 코드로 알아보는 CSS 충돌 다음과 같이 header 컴포넌트(header.vue)와 header 컴포넌트를 사용하는 content(index.vue)영역이 있다. index.vue content의 tittle ... index.css body { width: 100%; height: 100%; } header.vue header ti doqtqu.tistory.com @font-face란? 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있는 CSS at role이다. 간단하게 아래와 같이 사용이 가능하다. @font-face { font-family: ; src: [.. 2023. 6. 30.
[HTML/CSS] 쉐도우 돔(Shadow DOM)으로 스타일 충돌 해결하기 코드로 알아보는 CSS 충돌 다음과 같이 header 컴포넌트(header.vue)와 header 컴포넌트를 사용하는 content(index.vue)영역이 있다. index.vue content의 tittle ... index.css body { width: 100%; height: 100%; } header.vue header tittle header에 글자 색상을 회색으로 바꾸고 싶어서 아래와 같이 header.css를 코드를 수정하면 어떻게 될까? header.css h3 { margin: 0 10px; color: gray; } #header { margin: 0; width: 1000px; height: 50px; background-color: black; display: flex; flex.. 2023. 5. 6.
[CI/CD] github actions를 사용해서 npm 배포 자동화하기 git petch ... npm install npm build npm login ... npm publish 번거로운 npm 배포 작업을 자동화하는 방법은 없을까? github actions을 사용해서 npm publish 과정을 자동화해보자 npm package 정보 등록 package.json 정보(v9.6.5 기준) npm 배포를 위해서는 패키지에 대한 기본 정보를 제공하는 package.json가 존재해야 한다. 그 중에서도 패키지명(name)과 버전(version)은 배포를 위한 필수 정보이다. 패키지명(name) 패키지 배포를 위해서는 필수적으로 입력해야하는 정보로 아래와 같은 몇 가지 규칙이 존재한다. 214자 이하여야 한다. (scoped package의 경우 scope 포함) scope.. 2023. 5. 2.
반응형

티스토리툴바