계발하는 개발자

뷰로 컴포넌트를 만들다보면 시간이 지날수록 관리해야 하는 컴포넌트 수가 많아지게 되는데 그러다보면 기능적으로 겹치게 되는 메서드도 생기게 마련이다. 이러한 문제를 해결해주기 위해 존재하는 게 바로 믹스인 되시겠다. 믹스인 옵션을 사용하면 컴포넌트간 중첩되는 공통 기능들을 말그대로 하나로 믹스시켜 해당 기능을 한 번만 정의하고도 컴포넌트 단에서 재사용해서 쓸 수가 있다. 이렇게 말만 하면 입 아프니까 코드를 비교해서 보자. 1. 믹스인 사용 전 문제 상황 : 컴포넌트간 메서드 기능이 중첩되는 상황 // 뷰 인스턴스 new Vue({ el: "#cont", store, methods: { // 하위 컴포넌트에서 접근하기 위해 인스턴스에 등록 !! // 세자리 콤마 함수 numberWithCommas(x) {..

대분류 지역명 클릭했을 때 중분류 지역명이 나오고, 출력된 중분류 데이터에서 '뒤로가기' 클릭시 다시 대분류 지역 데이터가 출력되도록 해야 했다. 그래서 관련 기능을 하는 코드를 짜는 중에, 처음엔 별 고려 없이 함수 하나에 또 다른 함수1, 2 .. 이런 식으로 코드를 줄줄이 짜니까 코드가 길어질수록 보기 불편하고, 뭐가 어떤 기능을 하는지 한 눈에 보기 어려웠다. 당연하게도 기능 구현도 잘 안되었다. 그래서 내가 짠 코드를 다시 살펴보고, 공통 기능을 하는 코드를 하나의 함수로 묶었더니 일단 깔끔하고, 잘 작동했다! 아직 구체적인 기능은 여기서 더 살을 붙여 넣어야겠지만 이번에 코드를 다시 리팩토링하는 과정에서 깨달은 바가 있어 까먹기 전에 얼른 정리하려고 남기는 후기다. 먼저 내가 처음에 짠 망작 ..

sort() 메서드란? sort 메서드는 자바스크립트 배열 요소를 정렬하는 데 사용되는 내장 메서드입니다. 배열을 정렬하여 요소들을 원하는 순서로 재배치할 수 있습니다. 특징 - 배열의 요소를 문자열로 캐스팅(형변환)한 후 변환된 문자열을 비교하여 순서를 결정합니다. 이는 문자열로 변환된 각 요소를 비교하여 정렬하는 것을 의미합니다. - sort 메서드는 비교 함수를 선택적으로 인수로 받을 수 있습니다. 비교 함수는 두 개의 요소를 인수로 받고 비교 결과에 따라 순서를 결정하는 값을 반환해야 합니다. (아래의 예시 참고!) 활용 (1) 비교 정렬 비교대상이 숫자인 경우 : 오름차순 작은 숫자부터 큰 숫자로의 정렬 Ex) 1 > 2 > 3 > 4 (작은 수가 맨앞에 위치!) // 숫자값 배열 const n..

자바스크립트에서 undefined와 null은 둘 다 값이 없음을 나타내는 특별한 값입니다. 그러나 이 두 값은 약간의 차이가 있습니다. 1. undefined undefined는 변수가 선언되었지만 값이 할당되지 않은 경우에 자동으로 할당되는 원시값입니다. 예를 들어, 변수를 선언하고 초기화하지 않으면 해당 변수의 값은 undefined가 됩니다. 또는 함수에서 명시적으로 값을 반환하지 않으면 함수의 반환 값은 undefined가 됩니다. Ex1 - 변수선언되었으나, 값이 할당되지 않은 경우) let x; console.log(x); // 출력: undefined Ex2 - 함수에서 명시적으로 값을 반환하지 않은 경우) function foo() { // 값이 반환되지 않음 } console.log(f..