본문 바로가기
반응형

분류 전체보기703

[NuxtJS] Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. Nuxt 3 실행 실패 Nuxt를 버전별로 실행을 해보려다가 우선 Nuxt 3를 공식문서를 따라 실행을 시도해 보았다. 프로젝트 생성부터해서 실행까지에 대해서는 따로 정리를 할 것이며, 이번에 작성할 게시글은 공식문서를 따라 프로젝트를 생성하고 실행을 하였는데 에러가 발생한 부분이다. 발생한 에러는 다음과 같다. Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. Nuxt 3는 아무래도 국내에서는 아직 많이 사용하지 않는 프레임워크이기 때문에 한글로된.. 2022. 12. 1.
[NuxtJS] Nuxt.js에 대하여 (ft. Nuxt 3 안정화) Nuxt란? Nuxt는 VueJS로 빠르게 웹을 제작할 수 있게 도와주는 프레임워크이다. 좀 더 들어가 보면 React의 Next.js처럼 VueJS의 SSR(서버사이드 렌더링) 애플리케이션을 위한 프레임워크라고 생각하면 된다. 만약 CSR과 SSR의 차이점에 대해 잘 모르겠다면 숙지하고 있는 것을 추천한다. Nuxt의 장점 Nuxt는 기본적으로 Vue + Library를 포함하고 있으며, VueJS를 사용할 때 하나하나 설치하고 설정해줘야 했던 부분들이 자동화되어 따로 설치하거나 설정을 할 필요가 없어져 초기 프로젝트 설정 비용 감소와 생상성을 향상시켜주는 장점을 가지고 있다. 그리고 당연하게도 SSR만의 장점들을 가지고 있는데, Nuxt는 흔하게 알고 있는 SSR방식이 아니라 유니버설(Universa.. 2022. 11. 30.
[VueJS] 라우터(Vue Router) push/replace/go - 프로그래밍 방식 페이지 전환 사용하기 Programmatic Navigation 프로그래밍 방식 내비게이션은 를 사용하여 선언적 내비게이션을 사용하기보다는 라우터의 인스턴스 메서드를 사용하여 프로그래밍으로 동일한 기능을 수행할 수 있는 방식이다. 개발을 하는 동안에 만 사용하면 좋겠지만 그렇지 않은 경우도 상당히 많기 때문에 아마 Vue Router를 사용하게 된다면 이러한 방식을 사용하게 될 것이다. 만약 VueJS가 Options API를 사용하고 있다면 Vue 인스턴스 내부에서 this.$router를 통해 접근할 수 있겠지만, 요즘은 Composition API를 많이 사용하기 때문에 Composition API의 경우에는 useRouter()를 사용해서 접근한다. (애초에 setup단계에서는 this접근이 불가능하기 때문에 Comp.. 2022. 11. 8.
[VueJS] v-memo : 특정 요소가 변경될 때만 렌더링 하기 (메모이제이션) v-memo VueJS의 전체적인 버전들이 3.x로 변경되어가는 현재 나중을 위해 변화에 적응해보고자 시간이 날 때마다 공식문서를 뒤적거리던 와중에 v-memo라는 게 Deriectives의 하나로 추가되어있는 것을 발견했다. 굉장히 흥미로운 지시어이지만 안타깝게도 현재 사용하는 Vue 버전이 3.2이상이 아니라면 사용할 수 없다. 내가 왜 v-memo라는 지시어를 흥미롭게 보냐면 React에서 React.memo, useMemo, useCallback라는 리렌더링을 방지하기 위해 메모이제이션을 사용하는 훅들이 존재했기 때문이다. 여기서 메모이제이션을 사용하게 되면 동일한 입력이 주어졌을 경우 재평가하지 않고 함수가 동일한 값을 반환하도록 하여 성능을 위해 프로그램을 최적화하는 기술이라고 할 수 있다. .. 2022. 11. 5.
[SCSS] 반복문 (@for / @each / @while) @for @for는 through를 사용하는 방법과 to를 사용하는 방법으로 나뉜다. through 방식은 마지막 종료 숫자를 포함하며, to의 경우에는 마지막 종료 숫자를 포함하지 않는다. $base-color: #036; @for $i from 1 through 3 { ul:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); } } @for $i from 1 to 3 { li:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); } } to css /* use through */ ul:nth-child(3n + 1) { background-colo.. 2022. 11. 3.
[VueJS] 뷰 라우터(Vue Router) 라이프사이클(LifeCycle) (ft. Navigation Guards) Vue Router LifeCycle 뷰 라우터 라이프사이클 이라고는 했지만 결국에는 뷰 라우터의 내비게이션 가드(Navigation Guards)의 흐름이라고 생각하면 된다. 공식문서에서 안내하고 있는 전체적인 흐름은 다음과 같다. Navigation triggered. Call beforeRouteLeave guards in deactivated components. Call global beforeEach guards. Call beforeRouteUpdate guards in reused components. Call beforeEnter in route configs. Resolve async route components. Call beforeRouteEnter in activated comp.. 2022. 11. 3.
[VueJS] 리스트 렌더링(v-for) 에서 key를 사용하는 이유 v-for에서 key를 사용하는 이유는 뭘까? 우선 key의 역할은 반복되는 내용을 하나로 관리하기 위해 사용되는 유니크한 값이다. 그 유니크한 값이 새 노드 목록을 이전 목록과 비교하기 위한 힌트로 제공된다. 좀 더 자세히 알아보기 위해 공식문서에서의 설명을 한번 살펴보자. Vue가 v-for로 렌더링 된 요소 목록을 업데이트할 때 기본적으로 "in-place patch" 전략을 사용합니다. 데이터 항목의 순서가 변경된 경우 항목의 순서와 일치하도록 DOM 요소를 이동하는 대신 Vue는 각 요소를 제자리에 패치하고 특정 인덱스에서 렌더링 되어야 하는 항목을 반영하는지 확인합니다. 이 기본 모드는 효율적이지만 목록 렌더링 출력이 하위 구성 요소 상태 또는 임시 DOM 상태(예: 양식 입력 값)에 의존하지.. 2022. 10. 26.
[CSS] CSS vs CSS-in-CSS vs CSS-in-JS CSS CSS(Cascading Style Sheets)에 대해서는 다들 어느 정도 알거라 생각된다. CSS-in-CSS 와 CSS-in-JS에 알아보기 전에 왜 CSS를 사용하다가 CSS-in-CSS와 CSS-in-JS가 등장했는지에 대해 알아보자. CSS는 지금까지 사용하면서 명확한 단점이 존재했었다. 모듈화가 어렵다. 클래스 이름의 최소화 문제 (방법론을 사용하면 어느 정도 해소는 되겠으나 완전한 해결은 아닌 듯하다.) CSS의 우선순위를 파악하기 어렵다. 뭐 그 외에도 여러 단점들이 존재하겠지만 당장 생각나는 건 이 정도이다. 그래도 요즘 CSS 같은 경우 매우 많은 업데이트를 해왔기 때문에 변수 사용, 중첩(nesting) 사용 등 많이 편리해지거나 편리해질 예정이라는 점에는 부정할 수 없다. .. 2022. 10. 26.
[CSS] CSS 방법론이란? (ft. OOCSS / BEM / SMACSS) CSS 방법론 CSS 방법론이란 CSS를 어떤 방법으로 구성하면 더 효율적으로 구성할 수 있는가에 대한 방법론이다. 즉, 쉽게 말하면 CSS에서 클래스 네임을 쉽게 정의하기 위한 일종의 규칙이라고 생각하면 될 것 같다. CSS방법론을 사용하는 이유는 뭘까? 원활한 유지보수 코드의 재사용성 클래스명으로도 무슨 내요인지 예측 가능 확장 가능 그리고 CSS 방법론에는 크게 OOCSS, BEM, SMACSS로 나뉘어 있다. OOCSS OOCSS(Object Oriented CSS)는 CSS를 모듈 방식으로 작성하여 중복을 줄이는 방식의 방법론이다. 실제로 가장 많이 쓰이는 방법론이라고 볼 수 있는데, 나 역시 현업에서 프로젝트를 진행할 때 OOCSS 방법론을 많이 사용하였다. 주요 원리는 구조와 스타일을 분리해.. 2022. 10. 26.
반응형
TOP

티스토리툴바