SW개발/Javascript

저번 포스팅에 이어서 Javascirpt를 멋지게, 그리고 프로답게 쓰는 법에 대해서 알아보도록 하겠습니다. 이번 포스팅도 대부분 가독성에 중점을 두었습니다. 1. Nullish Coalescing Operator ( ?? ) - Null 병합 연산자 // ❌ bad 💥 function printName(text) { let message = text; if (text === null || text === undefined) { message = "No Message"; } console.log(message); } 전달받은 텍스트가 null 이거나 undefined인 경우에 No Message를, 텍스트가 있는 경우라면 message를 출력하는 함수입니다. 위처럼 작성하게 되면 간단한 역할을 하는 함수..

Javascript를 이용하여 개발을 하다보면 if, else문이 많아짐에 따라 가독성을 상당히 해치는 코드를 종종 볼 수 있습니다. 특히나 프론트 UI에서 조건에 따라 렌더링 및 데이터를 보여주는 로직이 존재하기때문에 이런 경우가 더 많은 것 같습니다. 저는 backends 언어로 Python을 사용하고 있는데 이때도 마찬가지로 if로 인한 indent가 많아지는 코드를 그다지 선호하지 않습니다. 가장 큰 이유는 가독성이 저하되어 정확히 어떤 기능을 하는 코드인지 파악하기가 힘들어지기 때문입니다. 이러던 도중 좋은 자료를 발견하게 되어 번역하면서 공부해보기로 하였습니다. https://betterprogramming.pub/stop-putting-so-many-if-statements-in-your-j..

Vue.js 공식 문서 (Computed vs Watch) computed와 watch — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Computed 속성 Vue.js 의 템플릿 문법에서 Javascript 표현식을 사용하면 원하는 데이터나 연산을 DOM에 쉽게 그릴수 있다. 하지만 복잡한 연산을 템플릿 안에서 하게 될 경우 코드를 이해하고 유지보수하기 어려워진다. {{ message.split('').reverse.join('') }} 위의 예시는 템플릿 문법에서 message 데이터를 역순으로 출력한 예제이다. 지금은 단순해보이지만 연산이 많아진다면 이해하는데 어렵기 때문에 computed 속성을 사용하는 것이 좋다. Computed 사용 방법 원본 메시지..

Vue.js 공식 문서 (v-if , v-show) 조건부 렌더링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org v-if v-if 디렉티브는 조건에 따라 블록을 렌더링 하기 위해 사용된다. v-if 의 경우 디렉티브의 표현식이 true 값을 반환할 때만 렌더링 되어 DOM에 추가되게 된다. // v-if 값이 true일 경우에만 렌더링 됨 블로그 이름은 leffe 입니다 블로그 이름은 leffe가 아닙니다 v-show 반면에 v-show의 경우 엘리먼트는 항상 렌더링되며 DOM에 남아있다. v-show 는 단순히 display의 CSS 속성을 통해 표시를 제어한다. // v-show 엘리먼트는 항상 렌더링 됨 // blog 이름이 leffe가 아닐 경우 dis..

Vue 에서는 인스턴스나 컴포넌트가 생성될 때 라이프사이클(lifecycle) 이라고 정의된 몇 단계의 과정을 거친다. 즉, 인스턴스가 생성되면서 보여지고 사라지는 일련의 과정을 일컫는 말이다. 라이프 사이클은 Vue 공식 문서 에서 확인할 수 있다. Vue 인스턴스는 다음과 같은 4가지의 과정을 거치면서 진행된다. Create(생성) Mount(부착) Update(업데이트) Destroy(제거) 이 각각의 단계에서 Vue는 Hook(훅)을 할 수 있도록 여러 개의 API를 제공한다. 아래와 같은 Hook이 존재한다. beforeCreate, created beforeMount, mounted beforeUpdate, updated beforeDestroy, destroyed beforeCreate va..