즐거운인생

프로그래머스의 코딩테스트 연습 > 연습문제 > 카드뭉치 문제에 대한 문제 풀이입니다.

https://school.programmers.co.kr/learn/courses/30/lessons/159994

먼저 문제는 아래와 같습니다. (문제의 전체 내용은 위 링크를 확인하시면 됩니다.)

문제설명

코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다.

• 원하는 카드 뭉치에서 카드를 순서대로 한 장씩 사용합니다.
• 한 번 사용한 카드는 다시 사용할 수 없습니다.
• 카드를 사용하지 않고 다음 카드로 넘어갈 수 없습니다.
• 기존에 주어진 카드 뭉치의 단어 순서는 바꿀 수 없습니다.

예를 들어 첫 번째 카드 뭉치에 순서대로 ["i", "drink", "water"], 두 번째 카드 뭉치에 순서대로 ["want", "to"]가 적혀있을 때 ["i", "want", "to", "drink", "water"] 순서의 단어 배열을 만들려고 한다면 첫 번째 카드 뭉치에서 "i"를 사용한 후 두 번째 카드 뭉치에서 "want"와 "to"를 사용하고 첫 번째 카드뭉치에 "drink"와 "water"를 차례대로 사용하면 원하는 순서의 단어 배열을 만들 수 있습니다.

문자열로 이루어진 배열 cards1, cards2와 원하는 단어 배열 goal이 매개변수로 주어질 때, cards1과 cards2에 적힌 단어들로 goal를 만들 있다면 "Yes"를, 만들 수 없다면 "No"를 return하는 solution 함수를 완성해주세요.

입출력 예

풀이

만들고자 하는 카드의 배열은 goal 입니다. goal 을 만들기 위해 cards1 과 cards2 배열 중 가장 첫 번째 요소를 꺼내어 goal 을 만들 수 있으면 "Yes", 만들 수 없다면 "No" 를 응답하면 됩니다.

만들고자하는 결과인 goal 요소를 순회하면서 cards1 과 cards2 중 첫 번째 요소에 해당 단어가 있는지 살펴보고, 해당 단어가 있을 경우에 사용한 카드(요소)는 버리도록 shift() 메소드를 사용해서 배열의 첫 번째 요소를 삭제하겠습니다.

function solution(cards1, cards2, goal) {
    
    for (let ele of goal) {
        if (ele === cards1[0]) {
            cards1.shift();
        } else if (ele === cards2[0]) {
            cards2.shift();
        } else {
            return 'No';
        }
    }
    return 'Yes';
}

for ~ of 구문으로 배열을 순회하면서 해당 카드(요소)가 cards1 과 cards2 중 하나라도 첫 번째 요소에 있는지 확인하고 있을 경우에는 확인한 카드(요소)를 shift() 메소드로 뽑아서 버리고 다음 카드(요소)를 순회합니다. 그리고 없을 경우에는 해당 단어를 만들 수 없으므로 바로 "No"를 응답합니다.

프로그래머스의 코딩테스트 연습 > 코딩 기초 트레이닝 > 수 조작하기1 문제에 대한 문제 풀이입니다.

https://school.programmers.co.kr/learn/courses/30/lessons/181926

먼저 문제는 아래와 같습니다. (문제의 전체 내용은 위 링크를 확인하시면 됩니다.)

문제설명

정수 n과 문자열 control이 주어집니다. control은 "w", "a", "s", "d"의 4개의 문자로 이루어져 있으며, control의 앞에서부터 순서대로 문자에 따라 n의 값을 바꿉니다.

• "w": n이 1 커집니다.
• "s": n이 1 작아집니다.
• "d": n이 10 커집니다.
• "a": n이 10 작아집니다.

위 규칙에 따라 n을 바꿨을 때 가장 마지막에 나오는 n의 값을 return 하는 solution 함수를 완성해 주세요.

입출력 예

풀이

수가 n부터 시작하므로 모든 control 요소의 값을 더한 후 n에 더해주면 되는 문제입니다. for 문과 if 문을 사용해서 작성해보면 아래처럼 작성할 수 있습니다.

function solution(n, control) {

    for (let inx=0; inx<control.length; inx++) {
        if (control[inx] === 'w') {
            n = n + 1;
        } else if (control[inx] === 's') {
            n = n - 1;
        } else if (control[inx] === 'd') {
            n = n + 10;
        } else {
            n = n - 10;
        }
    }
    return n;
}

위 내용은 누적값을 구하는 내용이므로 reduce 함수를 사용해서 아래와 같이 작성해 볼 수도 있습니다.  

function solution(n, control) {
    const point = {'w': 1, 's': -1, 'd': 10, 'a': -10}
    return [...control].reduce((a, v) => a + point[v], n);
}

먼저 각 문자 당 수에 쉽게 접근하기 위해 문자와 수를 연결한 오브젝트를 하나 생성합니다.

전개 구문

아래와 같이 문자열에 전개 구문을 사용하면 해당 문자열을 배열로 변경할 수 있습니다.

const control = 'wsdawsdassw';
console.log([...control]);
//['w', 's', 'd', 'a', 'w', 's', 'd', 'a', 's', 's', 'w']

reduce 함수

reduce 함수는 배열을 순회하며 해당 배열 요소의 누적값을 구할 수 있습니다. 위와 같이 사용하면 초기값을 n으로 하여 point[v]의 값을 a에 누적한 후 return 하라는 의미입니다.

프로그래머스의 코딩테스트 연습 > 코딩 기초 트레이닝 > 이어 붙인 수 문제에 대한 문제 풀이입니다.

https://school.programmers.co.kr/learn/courses/30/lessons/181928

먼저 문제는 아래와 같습니다. (문제의 전체 내용은 위 링크를 확인하시면 됩니다.)

문제설명

정수가 담긴 리스트 num_list가 주어집니다. num_list의 홀수만 순서대로 이어 붙인 수와 짝수만 순서대로 이어 붙인 수의 합을 return하도록 solution 함수를 완성해주세요.

입출력 예

풀이

간단하게 주어진 배열을 반복하면서 홀수와 짝수를 구한 후 이어 붙여서 두 수의 합을 구하면 됩니다. 가장 간단하게 for 문을 사용해서 아래와 같이 풀어볼 수 있습니다.

function solution(num_list) {
    let odd = '';
    let even = '';
    
    for (let inx=0; inx<num_list.length; inx++) {
        if (num_list[inx] % 2 === 0) {
            even += num_list[inx];
        } else {
            odd += num_list[inx];
        }
    }
    return Number(odd) + Number(even);
}

홀수와 짝수는 값을 2로 나눈 나머지가 0이면 짝수, 아니면 홀수로 판단하면 됩니다. 해당 조건으로 판단하여 홀수와 짝수의 문자열을 만들고 그 합을 구해 return 하는 문제입니다.

위 문제를 filter 메소드를 사용해서 풀어보면 아래와 같습니다.

function solution(num_list) {
    const odd = num_list.filter(v => v % 2).join('');
    const even = num_list.filter(v => !(v % 2)).join('');
    return Number(odd) + Number(even);
}

개념은 같습니다. filter 메소드는 파라미터로 전달하는 콜백 함수의 결과가 참인 경우로 새 배열을 만들어서 return 해줍니다. 하여 홀수는 v로 나눈 나머지가 1(true)인 수들을 모아서 새 배열을 생성한 후 join으로 하나의 문자열로 변환합니다. 짝수도 마찬가지 방법으로 구할 수 있습니다.

본 포스트는 HTTP Response Header 의 값 중 서버 시간을 구해서 사용하는 방법에 대한 설명입니다.

클라이언트에서 서버의 시간을 참조할 일이 있을 경우, 서버 API에서 응답값에 현재 시간을 보통 포함시켜서 전달합니다. 하지만 정말로 딱! 시간만 필요한 경우는 아래와 같이 빈 페이지나 빈 API의 Response Header의 Date를 참조하면 손쉽게 서버 시간을 구할 수 있습니다.

인터페이스를 하면 아래와 같이 Response Header가 응답에 포함되어 있습니다.

아래와 같은 식으로 간단하게 Response Header에 있는 Date 값을 구할 수 있습니다.

fetch(url, {
	method: 'GET'
}).then((resp) => {
	console.log(resp.headers.get('Date'));
});

프로젝트에서 jQuery를 사용한다면 아래 코드를 참고하시면 됩니다.

var options = {};
options.url = window.location.href.toString();
options.method = 'HEAD';
var xhr = $.ajax(options);
xhr.always(function() {
	console.log(xhr.getResponseHeader('date'));
});

본 포스트는 JavaScript의 getTimeZoneOffset() 메소드를 사용하여 UTC 시간을 구한 뒤 서버와 클라이언트의 시간을 동일하게 계산할 수 있는 방법에 대한 설명입니다.

요즘 개발하는 서비스들은 대부분 국내에서 뿐만 아니라 해외에서도 사용 가능한 형태로 개발합니다. 해외에서 서비스를 사용하는 경우 뿐 아니라 사용자가 각자 사용하는 Device의 국가, 시간 설정을 대한민국이 아닌 다른 곳으로 해두었을 경우 JavaScript의 new Date() 는 해당 국가 설정을 참조하여 시간을 return 합니다.

현재 제가 사용하는 Device는 대한민국 표준시를 사용하도록 설정되어 있습니다.

 이 상태에서 아래 코드의 결과는 다음과 같습니다.

new Date();
//Thu Jun 23 2022 07:36:14 GMT+0900 (한국 표준시)

이번에는 Device의 시간을 미국으로 변경해 보겠습니다.

그러면 동일한 코드는 아래와 같은 결과를 보여줍니다.

new Date();
//Wed Jun 22 2022 17:35:43 GMT-0500 (북미 중부 하계 표준시)

서비스의 성격에 따라 판단할 문제이지만 만약 서버에서 시간을 체크해야 하는데 화면의 Request에서 시간을 받아서 검증이나 사용을 하게될 경우 서버는 대한민국 표준시를 사용하지만, 화면은 북미 중부 표준시를 사용하게 되므로 대한민국 표준시를 사용하지 않는 사용자는 적절하지 않은 오류를 만나게 될 수도 있습니다.

경우에 따라 다르지만 클라이언트 JavaScript 코드에서도 대한민국 표준시로 통일하는 방법이 있습니다.

const now = new Date();
const utcDate = now.getTime() + (now.getTimezoneOffset() * 60 * 1000);
const korDate = new Date(utcDate + 9 * 60 * 60 * 1000);

우리나라는 그리니치 표준시 + 9H를 사용하므로, UTC 기준시각에 9시간을 더해주는 로직입니다.

위와 같이 코드를 작성하면 클라이언트에서 북미 중부 표준시를 사용하더라도 대한민국 표준시를 화면에서 사용할 수 있습니다. 물론 위와 같은 코드보다는 서버의 시간을 Response Header에서 참조하여 변환하는게 좀 더 일반적인 사용 방법입니다. 

몇 년 전에도 모 프로젝트에서 지원 요청이 와서 한 번 Code Review 하여 해결을 했었고, 얼마 전에도 운영 중인 시스템에서도 동일한 Case가 있었던 것을 보면 아주 기초적인 사항임에도 생각보다 잘 지켜지지 않는 부분일 수 있겠다는 생각이 듭니다.

jQuery 사용

대기업에서 SI 프로젝트에 몸 담고 있다보면, 혹은 대기업 SI 프로젝트에서 개발한 시스템을 인수하는 운영 담당자의 역할로 있다보면 서비스 기업들에서 많이들 사용하는 Vue, React 등의 Framework, Library는 구경하기 힘들고 2022년인 현재도 많은 프로젝트들이 jQuery 기반으로 진행되는 것을 알 수 있습니다.

대규모 SI 프로젝트의 경우 개발자가 수십~수백 명에 이르는데 Vue나 React를 사용하는 개발자들을 충분히 소싱하기 힘들고, 상용 UI 솔루션들과 연계해야 하는 상황에서 아직 jQuery 기반으로 제공되는 솔루션들이 많아 어쩔 수 없는 선택이 되곤 합니다.

(사실 Zepto 등의 경량 Library도 고려 대상일 수 있겠으나, 이미 검증된 수많은 Plug-in이 있다는 점은 SI 프로젝트에 너무 매력적인 요소로 작용하는 듯 합니다.)

jQuery 기반의 프로젝트에서 업무 화면이 복잡해져서 하나의 프로그램에서 수행하는 XHR과 calback이 많아지면 아래와 같은 문제들이 종종 발생하게 됩니다.

화면 특정 영역에 데이터가 나오다 말다 해요

A와 B 두 개의 function이 있습니다. A function은 DOM을 초기화하는 function이고, B function은 서버에서 데이터를 받아와 A function이 구성한 DOM에 Data를 Bind하는 역할을 하는 function 입니다.

function A() {
	// 특정 조건에 따라 UI에 특정 영역을 표시하거나 제거합니다.
}

function B() {
	// $.ajax 등의 함수로 서버와 통신하여 A 영역에서 생성한 DOM에 Data를 Bind 합니다.
}

생각보다 많은 개발자들이 아래와 같이 작성하고 (물론 위와 같이 너무 단순한 구조는 아닙니다만), 사실 또 대부분의 경우에 연산은 또 순식간에 일어나므로 올바르게 동작합니다.

A();
B();

하지만 복잡한 Front-end 프로그램을 개발하다 보면 아주 많은 경우의 수가 발생합니다. 사용자의 휴대폰이 구형이라 브라우저의 동작 자체가 느린 환경도 있고, 데이터 음영 구간도 있고, 접속 상태가 좋지 못한 Wi-Fi를 사용하여 Network가 느린 경우도 있어 반드시 작성한 순서대로 실행을 보장하지는 않습니다.

Callback function 사용

순서가 반드시 보장되어야 하는 코드들은 정확히 실행해야 하는 타이밍을 callback function을 사용하여 구현합니다. 

위와 같은 경우에도 A function에서 생성해야 할 DOM이 생성되지 않은 상태에서 B function의 Data bind가 수행이 되는 경우가 발생하면 해당 영역에는 올바르게 Data를 표시하지 못하는 경우가 발생합니다.

순서를 보장하기 위해서는 아래와 같이 작성합니다.

function A(callback) {
	//특정 조건에 따라 UI에 특정 영역을 표시하거나 제거합니다.
    if (callback && typeof callback === 'function') callback();
}

function B() {
	//$.ajax 등의 함수로 서버와 통신하여 A 영역에서 생성한 DOM에 Binding 합니다.
}

A(B);

위와 같은 형태로 작성하면 DOM을 구성하는 작업이 완료된 후 B function을 실행하므로 화면을 올바르게 표시할 수 있습니다. 

사실 수백~수천 라인에 달하는 프로그램에서 모든 순서가 정확하게 보장되기가 쉽지가 않습니다. 이 과정에서 callback 지옥 역시 발생합니다. ES6+에서는 async/await, Promise를 사용하여 이런 callback 지옥 구조를 많이 개선했지만 아직 많은 대고객 서비스에서는 I.E를 지원해야 하기 때문에 여전히 callback 지옥을 헤어 나오기는 힘듭니다.

백오피스나 내부 사용자를 위한 시스템은 Edge로 전환 후 I.E에 대한 고려를 이제 걷어내어도 되겠지만, 대고객 서비스를 하는 시스템들은 계속 I.E에 대해 고려할 필요가 있습니다.

JavaScript에서 일자 formatting이나 연산에 많이 사용하는 momentJs 사용 시 약간의 주의사항이 있습니다.

서버 API에서 일자 정보가 아래와 같이 내려온 경우 I.E에서는 정상적으로 처리가 되지 않습니다.

const curDate = '2022.06.22';
moment(curDate).format('YYYYMMDD');

위와 같은 코드를 실행할 경우 I.E에서는 "Invalid date"를 return 합니다.

I.E를 제외한 Chrome 등의 브라우저에서는 정상적으로 "20220622"를 return 합니다.

하여 서버 API에서 전달 받는 일자 데이터에 dot(.)이 포함되어 있을 경우 안전하게 데이터를 가공한 후 formatting 하면 됩니다.

const curDate = '2022.06.22';
moment(curDate.replace(/[.]/g, '')).format('YYYYMMDD');