후니후니

* 본 포스팅은 Lerna와 Yarn workspaces를 익히기 위해 기록용(?)으로 작성한 포스팅임을 참고해주세요. 한 저장소 안에 여러 프로젝트를 구성할 경우 모노레포라고 한다. 여러 프로젝트에서 사용하는 코드 및 컴포넌트가 비슷한 경우 서로 공유하며 사용할 수 있고, Eslint, Prettier 등의 설정을 공용으로 사용할 수 있어 꽤 장점이 많다. Lerna Lerna란 여러개의 저장소를 쉽게 관리하고 배포할 수 있게 도와주는 라이브러리다. Lerna에 대한 설명은 아래 링크에 자세하게 기재되어 있다. (공식 문서) https://lerna.js.org/docs/introduction Introduction | Lerna Lerna is the original monorepo tool for ..

Pinia Actions 이번 포스팅에서는 Pinia의 Actions에 대해서 다룰 예정이다. 공식문서에 나와 있는 예제는 아래와 같다. 예제 코드를 먼저 보자. export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { // since we rely on `this`, we cannot use an arrow function increment() { this.count++ }, randomizeCounter() { this.count = Math.round(100 * Math.random()) }, }, }) defineStore 함수 내부에 actions를 통해서 함수를 등록할 수 있다...

Getters 이번 포스팅에서는 Pinia의 Getters에 대해 알아보고자 한다. Pinia 자체가 Vuex & Composition API와 문법이 매우 비슷해서 문법 자체는 크게 어렵지 않은 것 같다. export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, name:'ethan' }), getters: { doubleCount: state => state.count * 2 }, }) export const useCounterStore = defineStore('counter', () => { const count = ref(2); const name = ref('ethan'); const doubleCount..

Cypress 기본적인 사용 방법, 주로 사용하는 함수 등 정리 Cypress 설치 시 기본 폴더 구조 (v10.6.0 기준) downloads 테스트 실행 중에 다운로드되는 파일이 보관됨. e2e e2e 테스트 파일들을 보관. fixtures 테스트에 사용할 정적 데이터 파일들을 보관. support 공용으로 사용할 함수를 정의하거나, 테스트 전 사전에 실행할 코드를 작성한 파일들을 보관하는 폴더 E2E 테스트에서 주로 사용하는 cy 함수들 1. get login cy.get('[data-cy="login-button"]') Cypress에서 data-cy를 통해 요소를 가져오는 것을 권장하고 있음. 2. visit cy.visit('/home') 해당하는 url로 이동 3. intercept cy...

Pinia의 State 사용 방법 Vuex를 사용할 때는 state의 상태 값을 mutation을 통해 변경해줘야 했으며, 직접적으로 state의 값을 변경하는 경우 오류를 발생시킨다. Vuex와 다르게 Pinia는 mutation이 없는데, state를 어떻게 변경하는지 알아보자. export const useCounterStore = defineStore('counter', () => { const count = ref(2); const name = ref('ethan'); const doubleCount = computed(() => count.value * 2); function increment () { // Change state value count.value++ }; return { cou..

Pinia란? Vue 버전 2를 사용할 때는 주로 상태 관리를 Vuex로 처리했는데, Vue3 or Composition API이 출시되면서 Pinia라는 상태 관리 모듈이 추가되었다. Vuex의 단점으로는 TS와 같이 설계하기가 어려움이 있었는데 (문법이나 Type 등에서), 이 점이 많이 개선되었다고 한다. 그 외에도 장점이 꽤 많은 것 같은데, 공식 문서를 기반으로 Pinia의 장점은 무엇이 있는지 알아보자. 공식 문서 소개 페이지에 있는 내용이다. 직관적이고, 안전하고, Devtools 지원에, 확장, 모듈식, 가벼움 등등의 장점이 적혀있다. 이 내용만 보고서는 Vuex와 비교 했을 때 정확히 어떤 차이가 있고 어느 정도 더 좋은지 알기 어려운듯 싶다. 직접 사용해보면서 겪어보자! // npm i..

이전 포스팅에서는 Mesh를 통해 3D를 만들었는데, 3D를 만들었다고 바로 화면에 보여지지 않는다. 화면에 보이게 하려면 무대 (Scene)와 무대를 보여줄 카메라 (Camera)가 필요하다. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); renderer.render(scene, camera); renderer.render 메소드에 scene, camera를 전달해주면 무대가 완성된다. 위 코드 중 camera에 전달된 값들을 조금 더 알아보자면 순서대로 fov, aspect, near, far 값을 전달해주면 되는..

요즘 새로운 관심 분야가 생겼다. Three.js, WebGL을 통해 Canvas에 그래픽을 렌더링을 할 수 있어 인터랙티브한 웹을 만들 수 있도록 도와주는 기술이다. 국내보다는 해외에서 많이 WebGL 사용한 웹 사이트가 많은데 보면 굉장히 화려하다. HTML,CSS로는 구현이 불가능할 것처럼 느껴질 정도로 화려한데, "도대체 어떻게 저런 웹을 만들지? 나도 한번 해보고 싶다. "라는 생각이 들어 여유가 될 때 꼭 학습해봐야지 마음 다짐을 한 분야다. Three.js는 웹 페이지에 3D 객체를 쉽게 표현할 수 있도록 도와주는 자바스크립트 라이브러리다. 만약 Three.js 없이 WebGL로 3D를 개발해야 한다면 엄청나게 고생해야 하지 않나 싶다. 3D 객체는 점,선, 꼭지점 등을 이용하여 만들어지는데..

실무에서 스토리북을 도입하기 전에는 노션 문서에 UI 컴포넌트들의 사용 방법이나 스크린 샷등으로 어떤 컴포넌트인지 알 수 있도록 문서를 작성했다. 글로벌로 재사용하는 UI 컴포넌트의 개수가 엄청나게 많은 건 아니지만, 다른 사람이 만든 UI 컴포넌트를 사용할 때 문서를 보고 한눈에 파악하기가 쉽지 않다. 스토리북을 예전에 사용해보긴 했지만, 워낙 바쁜 상황이어서 도입은 미뤘었는데, 시간될 때마다 스토리북을 설정해서 마침내 스토리북을 도입했다. 다만 스토리북을 도입할 때까지 쉽지는 않았는데, 기존에 사용하고 있던 Composition API, Vuetify, 기타 라이브러리 등에서 충돌이 발생했기 때문이다. 스토리북은 별개의 빌드를 구성하기 때문에 그에 따라 설정을 해줘야 한다. 아래 명령어를 통해 우선 ..

JS에서 꼭 알아야 하는 메서드고, 면접 질문에서도 많이 나올 수 있는 bind, call, apply에 대해서 알아보자. 처음부터 정리를 하고 들어가자면, bind, call, apply 모두 this를 재 지정한다. bind, call, apply 모두 메서드이기 때문에 this가 참고되는데, 이를 변경해서 사용한다면 유용하게 사용할 수 있기 때문에 사용되는 메소드라 생각된다. - bind const arrayLike = { 0:1, 1:2, 2:3, length: 3 }; arrayLike.slice(1); // 에러 발생, 유사 배열이므로 slice를 가지고 있지 않음. // 그렇지만 유사 배열에서 slice 메서드를 사용하고 싶음. const slice = Array.prototype.slice..