SW개발/Javascript
[Javascript]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 문 최소화하기
Javascript를 이용하여 개발을 하다보면 if, else문이 많아짐에 따라 가독성을 상당히 해치는 코드를 종종 볼 수 있습니다. 특히나 프론트 UI에서 조건에 따라 렌더링 및 데이터를 보여주는 로직이 존재하기때문에 이런 경우가 더 많은 것 같습니다. 저는 backends 언어로 Python을 사용하고 있는데 이때도 마찬가지로 if로 인한 indent가 많아지는 코드를 그다지 선호하지 않습니다. 가장 큰 이유는 가독성이 저하되어 정확히 어떤 기능을 하는 코드인지 파악하기가 힘들어지기 때문입니다. 이러던 도중 좋은 자료를 발견하게 되어 번역하면서 공부해보기로 하였습니다. https://betterprogramming.pub/stop-putting-so-many-if-statements-in-your-j..
[Vue]Computed 와 Watch 언제 사용할까? (feat. computed vs methods)
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]v-if vs v-show
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]라이프 사이클 알아보기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FINjOU%2Fbtq1KceyBUw%2FNiXPDZJd3A9SUYCOKfNdM1%2Fimg.png)
[Vue]라이프 사이클 알아보기
Vue 에서는 인스턴스나 컴포넌트가 생성될 때 라이프사이클(lifecycle) 이라고 정의된 몇 단계의 과정을 거친다. 즉, 인스턴스가 생성되면서 보여지고 사라지는 일련의 과정을 일컫는 말이다. 라이프 사이클은 Vue 공식 문서 에서 확인할 수 있다. Vue 인스턴스는 다음과 같은 4가지의 과정을 거치면서 진행된다. Create(생성) Mount(부착) Update(업데이트) Destroy(제거) 이 각각의 단계에서 Vue는 Hook(훅)을 할 수 있도록 여러 개의 API를 제공한다. 아래와 같은 Hook이 존재한다. beforeCreate, created beforeMount, mounted beforeUpdate, updated beforeDestroy, destroyed beforeCreate va..