Developer Minbro's Blog

Javascript에서 '==' 와 '===' 연산자의 차이를 알아보려고 합니다. 우선 각각의 기능을 정리하자면 아래와 같습니다. == 는 서로 다른 변수의 값을 비교하는 연산자이고, === 는 서로 다른 변수의 값과 자료형을 비교하는 연산자이다. 예를 들어보겠습니다. let param = 1; if (param == "1") { console.log("참입니다."); // 도출 } else { console.log("거짓입니다."); } 위 Javascript 코드에서 결괏값은 어떻게 도출될까요? "참입니다." 가 도출되겠지요. 각각의 자료형이 숫자(Number)와 문자열로 다를 지라도 오로지 값 자체만 비교하기 때문에 같다고 보는 겁니다. 그렇다면 이번엔 === 연산자를 사용해보겠습니다. let pa..

오늘은 Javascript에서 사용되는 map 함수를 알아보려고 합니다. 이 map 함수는 주로 언제 사용될까요? 배열의 각 요소들을 변경하여 새로운 배열을 만들 때 많이 사용됩니다 예를 들어, arr1 = [1,2,3,4] 라는 배열이 있습니다. 나는 이 배열의 각 요소들에 2를 곱해주어 새로운 배열을 생성하려고 합니다. 이 map 함수를 알기 전까지, 저는 새로운 변수를 선언한 후 for 문을 돌리면서 arr1의 각 요소에 2를 곱하여 arr2 배열에 추가해주는 방식으로 개발했습니다. 아래와 같이 말이죠. * map 함수를 사용하기 이전 arr1 = [1,2,3,4] arr2 = [] for (let idx in arr1) { arr2.push(arr1[idx]*2) } 하지만, map 함수를 사용한..

오늘은 웹팩(Webpack)이 무엇인지에 대해 블로그에 끄적이며 정리해보고자 합니다. 프론트엔드 개발자라면 웹팩이라는 단어를 많이 들어봤을 것입니다. 웹팩은 'Javascript 모듈 번들러'라고 하는데, 기본적으로 이 '모듈 번들러'가 무엇일까요? 모듈 번들러(Module Bundler)는 말 그대로 해석해보면 '모듈을 묶는다' 클라이언트 단 개발을 진행하다보면, 웹 애플리케이션의 여러 구성 요소들을 확인할 수 있습니다. 예를 들어, 기존에는 클라이언트단을 개발하기 위해서는 HTML, CSS, JS, 이미지 파일 등의 파일만이 존재했습니다. 하지만 다양한 프레임워크가 생겨나면서, 여러가지 파일들이 생겨나기 시작했습니다. 예를 들어, 제가 회사에서 사용 중인 Vue.js 프레임워크를 기반으로 node_m..

오늘은 TypeScript 웹 프론트엔드 언어에 대해서 알아보고자 합니다. 저는 현재까지 웹 프로그래밍을 할 때, 프론트엔드 단에서는 Javascript 언어를 사용 했습니다. 하지만 최근 동향을 살펴봤을 때, TypeScript(타입스크립트) 언어를 선호하는 프론트엔드 개발자가 증가하고 있고, 실제 채 용시장에서 TypeScript를 사용하는 프론트엔드 개발자를 우대하는 기업들도 늘어나기 시작했습니다. 도대체 이 TypeScript가 어떤 프로그래밍 언어이길래 이토록 인기를 끌고 있을까요? 한번 알아보도록 하겠습니다. TypeScript(타입스크립트) 언어는 Microsoft(마이크로소프트)에 의해 만들어진 Javascript(자바스크립트) 언어 기반의 오픈소스 프로그래밍 언어. 위 설명대로, Type..

오늘은 $nextTick에 대해서 정리해보고자 합니다. 우선 nextTick 함수가 어떤 함수인지 부터 정리해보겠습니다. $nextTick()은, 소스 코드 수정 후 DOM에 완전하게 반영된 후 마지막으로 로직을 수행할 수 있도록 하는 콜백 함수 저는 현재 회사에서 Vue.js 프레임워크를 기반으로 Javascript를 사용한 프론토엔드 개발을 진행하고 있습니다. 그런데, 간혹 작성한 코드가 생각했던 순서대로 동작하지 않아 어려움을 겪었던 적이 많습니다. 그 이유를 보아하니, Javascript 언어를 사용하면 데이터가 비동기 처리되어 UI가 최신화되지 않았음에도 불구하고 DOM에 접근하려고 하여 발생하는 오류였습니다. 이럴 때 Vue.js에서 사용하는 함수가 $nextTick() 이었습니다. 아래 예시..