소소한 코딩일지

Vue의 computed와 method의 차이를 스스로 명확하게 설명하지 못하고 있다고 생각해서 공식문서와 블로그를 보면서 차이점을 정리해보았다. 가장 큰 차이는 함수 연산 값을 사용하는지(computed) 또는 항상 함수를 실행하는지(method)이다. computed의 경우, 템플릿의 data(종속된 값)에 따라 메서드의 연산 결과 값을 사용한다. 종속된 값의 변경을 확인하고, 변경되지 않았을 경우에는 캐싱되어있는 값을 그대로 사용한다. method의 경우, 화면이 랜더링되어서 메서드를 호출할 때마다 연산을 수행한다. 실제 VS 코드에서 computed옵션을 타고 computedOptions를 보니 cache 여부를 boolean으로 판단하고 있는 것을 확인할 수 있었다. 추가) 전에 공부하면서 co..

Sass를 사용하면 원하는 디자인 값을 변수에 할당하여 사용할 수 있는 장점이 있다. 디자인 변수를 사용하면 나중에 변수의 값만 바꾸어 줌으로써 유지보수 부분에서 엄청난 장점을 가지게 된다. 현재 진행하고 있는 프로젝트의 사이즈가 조금 더 커질 예정이라 Sass 변수를 사용해보려고 한다. 사용할 변수는 가장 많이 사용할 것 같은 프로젝트 메인 컬러와 서브 컬러로 우선 테스트해보았다. Vue 프로젝트에서 변수명을 사용할 경우, 변수 파일을 만들고, 해당 각 파일을 import 해서 사용한다. // Main.vue ... ... 하지만 여러 변수를 사용하다 보면 대부분의 파일에서 변수 파일을 import 할 텐데, 모든 파일에 `@import ~`를 써주는 코드 중복도 해결해 보았다. 기존의 vue.conf..

vue를 통해 여러 컴포넌트를 만들면서 점점 아무 생각 없이 computed와 methods를 남발하고 있었고, 점점 어떤 경우에 사용해야 할 지 모호해지고 있음을 느꼈다. 그래서 두 가지를 간단하게 정리해보려고 한다. 1. computed computed는 DOM 구조가 생성되기 전에 computed 내부에 있는 function들을 계산하여 캐싱(저장)해두고, 계산에 사용되는 내부 값이 변경 되면 다시 계산한다. Computed는 위에서 언급한 것과 같이 미리 계산을 실행하여 값을 캐싱 해두기 때문에 이후 동일한 값에 대해서 연산을 할 때 저장된 값을 가져오기만 하면 되므로 속도와 중복 처리 측면에서 큰 장점을 가진다. 그리고 template에서 호출시 ()를 생략하여 호출하고, ()에 들어가는 인자들..

Vue를 사용하여 개인 프로젝트를 제작하면서 v-for를 사용할 일이 아주 많았다. v-for를 아무 생각 없이 사용했을 때 어떤 일이 일어나는지 공유해두면 좋을 것 같아 작성하게 되었다. 우선 내가 원한 방향은 한 축구 클럽의 최근 10경기의 결과를 v-for로 보여주고 싶었다. 처음 작성한 대로 10경기의 결과가 form 변수에 저장되어 있고, v-for를 통해 하나씩 불러오면서 적절한 디자인을 적용시켜 찍어 주었다. ( 10경기에 대한 데이터가 제대로 저장되는 부분은 확인했습니다. ) 하지만 결과는 페이지 전환시 10경기가 제대로 보이지만 다른 클럽으로 화면을 전환할 경우 기존의 값이 일부 누적되는 이슈가 발생했다. 그래서 코드를 인덱스와 함께 처리하며 key를 index로 선언하는 방법으로 v-f..

개인 프로젝트 도중 v-for로 반복하는 요소에 대해서 v-if문을 사용하려 했지만 오류 발생으로 다른 방법을 사용해야 했다. 오류 해결 중에 v-if와 v-for에 우선순위가 존재한다는 것을 알게 되었고, 정리해두려고 한다. 우선 공식 문서에 따른 두 구문의 우선순위는 다음과 같다. 2.x 버전 2.x 버전에서는 동일한 요소에 관해 v-if 와 v-for를 동시에 사용할 경우 v-for가 더 높은 우선순위를 갖는다. 3.x 버전 3.x 버전의 경우 v-if가 항상 더 높은 우선순위를 갖는다. 하지만 v-if와 v-for를 동시에 사용하는 것은 구문이 모호해지기 때문에 권장하는 방식은 아니라고 한다. 두가지를 동시에 사용하기보다 엘리먼트 목록을 computed 속성을 사용하여 사전에 필터링하는 것을 추천..

SPA(Single Page Application) SPA는 단일 페이지 애플리케이션으로, 기본적으로 하나의 페이지로 구성되어있다. 기존의 웹 페이지는 서버로부터 요청을 할 때마다 새로고침이 발생하여 웹 페이지 구성에 필요한 리소스를 받는다. 이렇게 기존의 서버로부터 리소스를 받는 형식을 서버 사이드 렌더링(Server-side rendering)이라고 한다. 서버 사이드 렌더링(Server-side rendering) 방식은 보통 header, footer 부분을 제외하고 contents 부분을 렌더링 받는데 이때 변하지 않는 부분도 새롭게 랜더링하기 때문에 비효율적인 부분이 있다. 반면, SPA의 경우 모든 정적 리소스를 한 번에 전달받아 사용한다. SPA로 설계된 웹페이지를 보면 화면을 랜더링할때 ..