그루트의 개발 일지

데이터 바인딩? 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 함 단방향 바인딩? 컴포넌트 내에서 '단방향 데이터 바인딩'은 Javascript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 것을 의미 단방향 데이터 바인딩이기에 역으로 HTML(View)에서 JS(Model)로의 직접적인 데이터 갱신은 불가능 컴포넌트 간에서 단방향 데이터 바인딩은 부모 컴포넌트에서..

Electron? Electron이란 웹 기술 스택(HTML, CSS, Javascript)을 사용해 데스크톱 어플리케이션 구축을 가능하게 해주는 도구라고 생각하면 된다. 오픈소스 프로젝트이며 맥, 윈도우, 리눅 세 개의 플랫폼에서 빌드되고 동작이 가능하다. 요즘 웹 개발자들이 사용하는 React, Vue 등을 Electron과 같이 사용해 데스크톱앱을 만들 수 있어서 러닝 커브도 낮은 편이다. Electron + Vue 시작 일단 Vue project 위에 Electron을 얹어서 사용할 것이기 때문에 Vue project를 먼저 생성할 것이다. Vue project 시작 법은 https://groot-dev.tistory.com/4 여기에 정리되어 있다. "vue create 프로젝트 이름" 명령어로..

MPA (Multi Page Application) vs SPA (Single Page Application) MPA : 여러 개의 페이지(.html)로 이루어진 application이다. 새로운 페이지를 요청할 때마다 정적 리소스(HTML, CSS, JavaScript)가 다운로드된다. 페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다. 이 때문에 blinking issue가 있어 UX가 좋지 않다. 페이지 별로 meta를 적용할 수 있어 SEO (Search Engine Optimization)에 좋다. SPA : 한 개의 페이지(.html)로 이루어진 application이다. 처음 페이지 요청 시, 모든 리소스(HTML, CSS, JavaScript)가 다운로드된다. 필요한 부분만 갱..

End to End Test로 사용자의 입장에서 사용자가 사용하는 상황을 가정하고 테스트하는 것이다. Unit Test로 모듈들이 하는 일들을 테스트해 정상적으로 작동하는 것이 확인이 되었다면, 사용자가 사용하기에 문제만 없으면 모든 것이 완벽하다. 물론 Unit Test가 모두 정상적으로 마쳐지고 E2E Test를 하는 것이 절차상 맞지만, E2E Test가 정상적으로 통과된다면 Unit Test 또한 통과되었다는 것이나 마찬가지라 시간과 비용을 고려해봤을 때, 모든 Test를 수행하기 어려운 상황리아면 E2E Test만 수행해도 좋다. 프론트엔드의 대표적인 E2E Test Tool로는 Cypress가 있다. 테스트하고 싶은 UI를 테스트 코드로 작성하고 실행하면 내가 직접 마우스를 클릭하거나 키보드를..

Unit Test란? TDD(Test Driven Development)를 들어본 적 있을 것이다. TDD에는 Unit Test와 Integration Test가 있다. Unit Test는 하나의 모듈을 기준으로 독립적으로 진행되는 가장 작은 단위의 테스트이다. 어떤 함수를 실행하면 어떤 결과가 나오는지 테스트를 한다고 생각하면 된다. Integration Test는 각 모듈을 통합하는 과정에서 모듈 간의 호환성을 확인하는 테스트이다. 함수가 잘 작동이 되는 걸 Unit test에서 확인했으면 함수끼리 잘 호환이 되는지 확인한다고 생각하면 된다. Unit Test는 왜? 현업에서 TDD를 한다라고 하면 대부분 Unit Test를 말한다. Integration Test는 여러 컴포넌트들 간의 상호작용을 테..

개발을 하면서 느낀 2.x버전과 3.x버전의 가장 큰 차이점은 다음과 같다. (당연히 3.x버전이 최신이기 때문에, '프론트엔드는 최신 기술이 무조건 좋으니까 Vue3 버전을 사용해야지'하고 생각했다가 낭패를 볼 수 있다.) Composition API 성능 개선 Multiple Root 엄격한 UI 컴포넌트 컨트롤 라이브러리, 모듈 적용 1. Composition API Vue2에서는 Options API를 사용한다. Options API는 개발자로 하여금 코드의 직관성, 가독성을 높이지만 프로젝트의 규모가 커지게 되면 유지보수가 어려워진다는 단점이 있다. 이를 보완하기 위해 Vue3에서는 Composition API를 사용한다. Composition API를 사용하게 되면 코드 복잡성 완화 모든 코드..