https://www.notion.so/Javascript-0179603ab4544e02928877cec21d37c5?pvs=4

괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어

• "()()" 또는 "(())()" 는 올바른 괄호입니다.
• ")()(" 또는 "(()(" 는 올바르지 않은 괄호입니다.

'(' 또는 ')' 로만 이루어진 문자열 s가 주어졌을 때, 문자열 s가 올바른 괄호이면 true를 return 하고, 올바르지 않은 괄호이면 false를 return 하는 solution 함수를 완성해 주세요.

제한사항

• 문자열 s의 길이 : 100,000 이하의 자연수
• 문자열 s는 '(' 또는 ')' 로만 이루어져 있습니다.

입출력

"()()" true "(())()" true ")()(" false "(()(" false

풀이

function solution(s){
    let stack = [];

    for (let i = 0; i < s.length; i++) {
        // 만약 '('가 발견되면 스택에 넣는다
        if (s[i] === '(') stack.push(i);
        // 만약 ')'가 발견되면 스택에서 뺀다
        else if (s[i] === ')') {
            // 만약 스택이 비어 있다면 false를 리턴한다
            if (stack.length === 0) return false;
            // 스택에서 뺀다
            stack.pop();
        }
    }
    return stack.length === 0;
}

10진법으로 표현된 정수 N을 특정한 r진법으로 표현하는 것은 매우 쉽다. 하지만 정수 N 과 N을 어떤 진법으로 변환한 결과 T를 알고 있을 때 변환에 사용된 진법 r을 알아내는 것은 어려울 수 있다. 정수 N과 N을 어떤 진법으로 변환한 결과 T가 주어질 때, r을 구하여 출력하시오

입력

첫째 줄에 정수 V과 을 '진법으로 변환한 결과 T가 공백을 두고 주어진다. • 1 ≤ N ≤ 2 X 10^9 • T는 알파벳 대문자 A ~ F를 포함하고 있을 수 있으며, 각각 10부터 15까지의 정수에 일대일로 대응된다. • 2 ≤ r ≤ 16 • 항상 진법 변환이 가능한 입력만 주어진다.

출력

첫째 줄에 N을 T로 변환하는데 사용된 r을 출력한다

예시 1

입력 123 123 출력 6

예시 2

입력 4576 3490 출력 11

예시 3

입력 1234567890 1001001100101100000001011010010 출력 2

예시 4

입력 7 7 출력 8

풀이

// Run by Node.js
// 10진법으로 표현된 정수 N
// Nr = T
// r은 몇 진법인지 찾으시오
const readline = require('readline');

(async () => {
    let rl = readline.createInterface({ input: process.stdin });

    let input = [];
    for await (const line of rl) {
        input.push(line.trim())
        rl.close();
    }

    // N과 T에 각각 입력으로 들어온 정수와 진법 변환의 결과를 넣어준다
    let [N, T] = input[0].split(' ');

    // 2진법에서 16진법까지 반복
    for (let i = 2; i <= 16; i++) {
        // toString은 숫자에만 쓸 수 있기에 숫자로 바꿔주고, toString으로 
        // 문자열이 된 N을 대문자로 통일해줘서 결과와 비교해준다.
        if (Number(N).toString(i).toUpperCase() === T.toUpperCase()) {
            console.log(i);
            break;
        }

    }
})();

문제

구름이는 소수점 거래 기능을 지원하는 어떤 증권사의 서비스를 이용하여 해외 주식 거래를 시작했다. 소수점 거래 기능은 구매 수량을 소수점 단위로 할 수 있어서 일 만원으로 한 주에 백 만원이 넘는 주식도 구매할 수 있다. 구름이는 1번 회사부터 번 회사까지, 총 1 개의 회사에서 발행한 해외 주식을 구매했다. 구름이가 보유한 해외 주식에 대한 정보는 보유한 주식의 개수 v; 와 주식 1개 기준 가격인 W; 로 나타낸다. 구름이는 다음과 같은 순서로 가지고 있는 모든 주식을 순서대로 판매하려 한다. • 주식의 평가 금액이 높은 회사의 주식부터 판매한다. 이때, 평가 금액이란 보유한 주식의 개수와 해당 주식의 단가를 곱한 값이다. 단, 평가 금액은 소숫점 아래 2번째 자리에서 절사한다. • 만약 평가 금액이 같은 주식이 둘 이상 있다면, 회사의 번호가 작은 회사의 주식부터 먼저 판매한다. 구름이가 보유한 주식의 정보가 주어질 때, 구름이가 주식을 판매할 순서를 출력하시오.

입력

첫 줄에 현재 보유한 해외 주식의 종목 N개가 주어진다. 그 다음 N출에 걸쳐 주식 정보 Vi, Wi가 1번 회사부터 순서대로 공백을 두고 주어진다.

• 1 ≤ N ≤ 1,000,000 • 0 ≤ Vi ≤ 1,000 • Vi는 실수이다. • 0 ≤ Wi ≤ 10,000 • Wi는 정수이다.

출력

구름이가 주식을 판매하는 순서대로, 해당 회사의 번호를 공백을 두고 출력하시오.

예시 1

입력 3 1.81 3 1.36 4 2 4

출력 3 1 2

예시 2

6 2.86 2 3.1 2 1.29 4 0.1 4 4.4 1 4.28 4

출력 6 2 1 3 5 4

풀이

// Run by Node.js
    // 1번 회사부터 N번 회사까지 총 N개의 회사에서 발행한 주식을 구매함
    // vi = 보유한 주식의 개수
    // wi = 주식 1개 기준 가격
    // 평가 금액이 높은 회사의 주식부터 순서대로 판매한다.
        // 평가 금액 = 보유한 주식 개수 * 주식 가격
        // 평가 금액은 소숫점 아래 2번째 자리에서 절사 예: 5.43 -> 5.4
    // 평가 금액이 같은 주식이 둘 이상이면, 회사의 번호가 작은 주식부터 판매
    // 주식을 판매할 순서를 출력
const readline = require('readline');

(async () => {
    let rl = readline.createInterface({ input: process.stdin });

    // 입력을 저장할 배열 선언
    let input = [];
    for await (const line of rl) {
        // 한 줄씩 입력을 넣어준다. 그리고 trim()으로 양 끝에 불필요한 공백을 지워준다.
        input.push(line.trim());
    }
    // 입력 닫기
    rl.close();

    // 주식의 갯수를 변수에 저장한다. 입력은 문자열로 들어오기에, 입력을 정수가 바꾸어 준다.
    let stockAmount = Number(input[0]);
    // 보유 주식의 가격와 수량을 가지는 배열을 선언해준다.
    let stockPriceList = [];

    // input 배열에 저장된 보유 주식의 가격과 수량을 주식의 양 만큼 가져온다.
    for (let i = 1; i <= stockAmount; i++) {
        // input 배열에 저장된 보유 주식의 가격과 수량을 destructuring으로 변수에 저장해준다. 이때 input 배열에 문자열로 저장된 데이터를 배열로 변환 후에
        // map을 돌려서 정수로 변환한 후에 destructuring 한다.
        const [price, quantity] = input[i].split(' ').map(Number);
        // 평가 가격을 계산한다. toFixed는 반올림을 하기에, floor를 사용해서 소숫점 한자리까지만 저장한다.
        const evaluation = Math.floor((price * quantity) * 10) / 10;
        // 인덱스를 효율적으로 사용하기 위해, 인덱스를 키로, 주식의 평가 가격을 값으로 객체의 형태로 stockPriceList 배열에 저장한다.
        stockPriceList.push({ index: i, evaluation });
    }

    // 평가 가격를 기준으로 내림차 순으로 정렬한다. 이때 평가 가격이 같은 주식들은 인덱스가 낮은 순으로 정렬한다.
    stockPriceList.sort((a, b) => {
        // 만약 평가 가격이 같다면
        if (b.evaluation === a.evaluation) {
            // 인덱스가 낮은 순으로 정렬한다.
            return a.index - b.index;
        }
        // 평가 가격 순으로 내림차 순으로 정렬한다.
        return b.evaluation - a.evaluation;
    });

    // stockPriceList에 map을 돌려서 인덱스만 들어있는 배열을 생성한다.
    const ans = stockPriceList.map(x => x.index);

    // 출력 조건에 맞게 배열을 띄어쓰기를 중간에 넣어서 문자열로 변환 후에 출력한다.
    console.log(ans.join(' '));

})();

구름이가 사는 마을에는 1번 집부터 번 집까지 총 V개의 집이 순서대로 세워져 있다. 마을의 땅 높이는 제각각이어서, 번째 집의 땅 높이는 K; 이다. 땅 높이의 기준은 해수면이기 때문에, 해수면보다 낮은 위치에 집이 있다면 높이가 음수일 수도 있다. 장마가 시작되면 MM 일 동안 멈추지 않고 비가 온다. 장마가 시작된 지 i일이 되는 날에는 5; 번 집이 있는 위치부터 ex번 집이 있는 위치까지 비가 내린다. 어떤 집에 비가 내리면 그 집에 쌓인 물의 높이가 1만큼 증가한다. 한 번 쌓인 물은 배수 시스템이 작동하기 전까지는 빠지지 않는다. 배수 시스템은 장마가 시작된 지 3의 배수가 되는 날마다, 비가 내리고 난 뒤 작동한다. 배수 시스템은 작동 날짜를 기준으로 2일 이내에 비가 내린 위치에서만 작동한다. 예를 들어, 장마가 시작되고 9일째에 작동하는 배수 시스템은 7, 8, 9일 째에 비가 내린 위치에서만 작동한다. 배수 시스템이 작동하면 그 집에 쌓인 물의 높이가 1만큼 감소한다. 장마가 지나간 뒤, 마을의 모든 땅 높이는 그 땅에 쌓였던 물의 높이만큼 증가한다. 구름이는 1번 집부터 번 집까지의 땅 높이를 다시 조사하려고 한다. 구름이를 도와 변한 땅 높이를 구해보자.

입력

첫째 줄에 집의 개수 N과 장마 기간 M이 공백을 두고 주어진다. 둘째 줄에 마을의 땅 높이 k1, k2,..., kN이 공백을 두고 주어진다. 다음 M 개의 줄에는 si, ei가 공백을 두고 주어진다. 장마가 시작된 지 i일이 되는 날에는 5; 번 집이 있는 위치부터 번 집이 있는 위치까지 비가 내렸다는 의미이다. • 1 ≤ N ≤ 1,000 • 1 ≤ M ≤ 100,000 • -100,000 ≤ ki ≤ 100,000 • 1 ≤ si ≤ ei ≤ N • 입력에서 주어지는 모든 수는 정수이다.

출력

장마가 끝난 뒤, 1번 집부터 번 집까지의 땅 높이를 한 줄에 하나씩 출력한다.

예시 1

입력

5 5 -1 0 1 0 2 1 1 2 2 3 3 4 5 4 5

출력

-1 0 1 2 4

예시 2

입력

5 7 0 0 0 0 0 1 5 1 5 1 5 1 5 1 5 1 5 1 2

출력

5 5 4 4 4

풀이

const readline = require('readline');

(async () => {
    const rl = readline.createInterface({ input: process.stdin });

    let input = [];
    for await (const line of rl) {
            // 입력의 각 라인을 불러오고, trim()을 통해 시작과 끝에 있을 수 있는 공백을 삭제하고 input 배열에 push 한다
        input.push(line.trim());
    }
    rl.close();

        // input 배열의 0 자리에 있는 두 숫자를 destructuring 해서 지정한다.
    const [houseNum, rainDays] = input[0].split(' ').map(Number); // houseNum = 5, rainDays = 5
    // input 배열의 1 자리에 있는 각 집의 높이가 저장된 요소를 불러와서 숫자로 띄어쓰기를 기준으로 나눠서 배열 요소로 집어 넣는다.
    let houseHeight = input[1].split(' ').map(Number); // [-1, 0, 1, 0, 2] 
    // input 배열의 첫 요소를 없애고, 비가 온 집들의 위치만 넣는다.
    let forecast = input.slice(2); // forecast = ['1 1', '2 2',... '4 5']

    let waterHeight = Array(houseNum).fill(0); // waterHeight = [0, 0, 0, 0, 0]
    // recentRain 안에 set을 사용해서 당일을 포함해서 최근 3일간 비가 온 집의 인덱스를 set에 추가한다. 이 set은 배수 시스템이 작동하면 clear된다.
    let recentRain = new Set();

        // 비가 온 집의 물 높이를 계산
        // 먼저 비가 온 날을 기준
    for (let day = 0; day < rainDays; day++) {
            // forecast 배열에 있는 각 비가 온 날의 비가 온 시작 집과 끝 집을 destructuring으로 가져온다.
        let [startPosition, endPosition] = forecast[day].split(' ').map(Number); // forecast[0] 일때 startPosition = 1, endPostion = 1
        startPosition -= 1; // 배열의 위치는 0 부터 시작하기에 0으로 부터 시작하는 걸로 계산
        endPosition -= 1; // 배열의 위치는 0 부터 시작하기에 0으로 부터 시작하는 걸로 계산

                // 시작 집부터 끝 집까지 물 높이와 비가 온 날을 추가해준다.
        for (let i = startPosition; i <= endPosition; i++) {
                // 물 높이 추가
            waterHeight[i]++;
            // 비가 온 집의 인덱스를 set에 추가한다.
            recentRain.add(i);
        }
                // 3번 째 비오는 날 마다 배수 시스템 작동
        if ((day + 1) % 3 === 0) {
                // set 안에 저장된 집들을 하나씩 불러온다.
            for (let j of recentRain) {
                    // 물 높이를 1씩 줄여주고, 0보다 작지 않게 해준다.
                waterHeight[j] = Math.max(0, waterHeight[j] - 1);
            }
            // set을 clear하여 다음 비오는 사이클을 위해 비워준다.
            recentRain.clear();
        }
    }

        // 각 집마다 물 높으만큼 땅 높이를 높여 준다.
    for (let i = 0; i < houseHeight.length; i++) {
        houseHeight[i] += waterHeight[i];
    }
        // 배열로 저장된 땅 높이를 하나의 String으로 합쳐서 반환한다.
    console.log(houseHeight.join(' '));

    process.exit();
})();

나는 프로그래머스가 좋아요 구름에선 백준과 같이 입출력을 따로 처리해줘야 한다. 백준에선 fs를 사용했는데, 구름에선 readline을 사용한다. 문제마다 베이스 코드가 두가지가 나온다. 아니 네이버 부스트캠프 왜 갑분 구름에서 시험 치는데;

베이스 코드 1

// Run by Node.js
const readline = require('readline');

(async () => {
    let rl = readline.createInterface({ input: process.stdin });

    for await (const line of rl) {
        console.log('Hello Goorm! Your input is', line);
        rl.close();
    }

    process.exit();
})();

베이스 코드 2

// Run by Node.js

const readline = require("readline");
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

rl.on("line", function(line) {
    rl.close();
}).on("close", function() {
    process.exit();
});

프로그래머스만 쓰던 나는 처음 구름에서 입출력을 따로 처리해줘야 하는 것을 보고 현기증이 날뻔 했지만, 전지전능한 chatGPT의 설명을 찬찬히 읽고 나니 그렇게 복잡한게 아니란걸 깨달았다.

입력을 받을 때의 포인트는 입력 정보를 배열에 넣으면 된다는 것이다.

입력: 4 4 5 6 7 1 2 3 4

이러한 입력을 처리해야 한다면,

베이스 코드 1

// Run by Node.js
const readline = require('readline');

(async () => {
    let rl = readline.createInterface({ input: process.stdin });
    let input = [];
    for await (const line of rl) {
        input.push(line.split(' ').map(Number));
        rl.close();
    }
    console.log(input)

    process.exit();
})();

베이스 코드 2

// Run by Node.js

const readline = require("readline");
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let input = [];
rl.on("line", function(line) {
    input.push(line.split(' ').map(Number));
    rl.close();
}).on("close", function() {
    console.log(input)
    process.exit();
});

이렇게 입력을 input 배열에 넣은 후에 필요에 따라 꺼내 쓰면 된다. 출력도 rl.close(), 그러니까 readline이 입력을 받는 것을 끝낸 후에 로직을 짠 후에 정답을 출력해주면 된다.

Sort는 배열을 정렬할 때 쓰인다. 숫자나 문자열을 정렬할 때 쓰이는데, 문제가 하나 있다. 일단 숫자 요소를 정렬할 때 숫자를 문자열로 변환해서 정렬 알고리즘을 돌린다. 근데 각 요소를 비교할 때 숫자를 문자열로 비교하다보니 두 자릿수 이상의 숫자를 비교하면 맨 앞 자릿수만 비교를 한다. 그래서 순서가 꼬여버리는 상황이 생긴다.

const array = [1, 2, 10];
console.log(array.sort());

// 1, 10, 2

문자열은 유니코드로 계산되고, 대문자가 작은 수로 계산이 되기 때문에, 대소문자 구분 없이 정렬할 때 난감한 상황이 생긴다.

const array = ["apple", "Orange", "orange"];
console.log(array.sort());

// "Orange", "apple" , "orange"

해결법: 고차함수 쓰셈

Sort의 문제점을 해결하려면 Sort에 고차함수를 넣어주면 된다. 이 고차함수는 두개의 배열 요소를 비교하여 정렬을 정확하게 해준다. 문자열과 숫자 타입 모두 대응하기 위해 아래와 같은 고차함수를 사용하면 편하다.

let ascending_order = function(x, y) {
    if (typeof x === "string") x = x.toUpperCase();
    if (typeof y === "string") y = y.toUpperCase();

    return x > y ? 1 : -1;
};

let descending_order = function(x, y) {
    if (typeof x === "string") x = x.toUpperCase();
    if (typeof y === "string") y = y.toUpperCase();

    return x < y ? 1 : -1;
};

const array1 = [1, 2, 10];
console.log(array.sort(ascending_order));
// 1, 2, 10

const array2 = [1, 2, 10];
console.log(array.sort(descending_order));
// 10, 2, 1

const array3 = ["apple", "Orange", "orange"];
console.log(array.sort(ascending_order));
// "apple", "Orange", "orange"

const array4 = ["apple", "Orange", "orange"];
console.log(array.sort(descending_order));
// "orange", "Orange", "apple"

정렬을 위해 x와 y를 비교할 때 결과 값이 +면 x가 y 뒤로 가고, -면 앞으로 온다. 순방향 정렬의 상황에서 2와 4를 비교하면, 2 - 4 = -2가 된다. 결과 값이 음수이기에, x인 2가 4 앞으로 온다.

응용 예시

list라는 배열 안엔 객체가 들어 있다. 만약 값이 같은데, 인덱스가 낮은 순으로 정렬하고, 그외엔 값이 높은 순서로 정렬하고 싶다면, sort를 이렇게 쓰면 된다.

list.sort((a, b) => {
            if (b.temp === a.temp) {
                return a.index - b.index;
            }
            return b.temp - a.temp;
        })

문제 접근

1. 약수란 무엇인가? 몸에 좋은 물 약수는 정수 n을 나머지 없이 나눌 수 있는 자연수다. 예를 들어, 8의 약수는 1, 2, 4, 8이다.

   8 / 1 = 8
   8 / 2 = 4
   8 / 4 = 2
   8 / 8 = 1

   해당 문제는 이 수들의 합을 요구한다. 필자는 처음에 문제를 접근할 때, 재귀 함수 또는 For Loop로 1부터 n의 모든 수를 하나 하나 찾는 것으로 접근했다. 코드가 작동은 했으나, 처리 속도 면에선 그닥 효율적이라고 생각되진 않아서, 전지전능한 chatGPT에게 물었더니, 무릎 탁! 치는 답을 알려 주었다.

2. 약수의 특징 약수의 특징은 바로 정수의 제곱근(Sqrt)을 기준으로 대칭적으로 존재한다는 것이다. 위의 8을 예시로 보면, 8의 제곱근은 대략 2.828이다. 우리는 정수를 다루기에, 소수점을 제외시키면 2가 된다. 2를 기준으로 8의 약수를 나타낼 떄 대칭이 생긴다는 것을 알 수 있다.

   8 / 1 = 8
   8 / 2 = 4

8 / 4 = 2 8 / 8 = 1

 따라서, For Loop의 탐색 영역을 n의 제곱근까지만 찾고, n의 약수를 찾게 되면 그 수를 변수에 더하고, 그 약수의 결과값 또한 약수 이기에 더하여 주면 된다. 정말 기똥 찬다.

function solution(n) { let sum = 0; const sqrtN = Math.sqrt(n);

for (let i = 1; i <= sqrtN; i++) {
    if (n % i === 0) {
        sum += i; // i는 n의 약수입니다.
        if (i !== n / i) {
            sum += n / i; // n / i도 n의 약수입니다.
        }
    }
}

return sum;

}

// 예시 사용법 console.log(solution(36)); // 출력: 91 (1 + 2 + 3 + 4 + 6 + 9 + 12 + 18 + 36) console.log(solution(12)); // 출력: 28 (1 + 2 + 3 + 4 + 6 + 12)

```

HTML/CSS 과제를 하면서 맨 처음 느꼈던 점은 다른 사람이 작성한 코드를 읽고 이해하는 과정이 생각보다 어렵게 다가왔다는 것이다. 아직 나의 실력이 많이 쌓이지 않아서 그런 것도 있겠지만, 코드 하나 하나 읽고 그 코드의 기능을 머릿 속으로 그려낸다는 것이 생각 보다 어렵게 느껴졌다. 내가 짠 코드들은 당연히 내 머리에서 나온 것이니 딱 보면 딱 하고 아는데, 다른 사람에 의해 쓰여진 코드는 그렇지 않은 것이다. (나중에 현업에서 가독성 폭망한 타인의 코드를 읽어야 한다면 상당히 끔찍할 것 같다) 다행히 HTML/CSS 과제에선 내가 작성하는 코드가 많다 보니 큰 문제는 되지 않았다.

한가지 불만족스럽던 것은, 교육 과정에선 나온 적이 없는 기능을 구현 하라는 것이 더러 있었다. 이렇게 배운 적이 없는 기능들은 자연스레 구글 검색과 ChatGPT에 물어볼 수 밖에 없었는데, 이걸 과제를 낸 사람들이 일부러 의도한 건가 싶다. (어차피 서치도 개발자의 역량 중에 한 부분이라서 일까...?)

이제 JS 과제가 있다

자바스크립트를 하고 있는 지금, 곧 자바스크립트 과제가 있다는 것을 안다. 확실히 과제를 통해 지금까지 배운 것들을 활용할 수 있다는 것이 좋다. 아 물론 이번에도 구글과 ChatGPT는 나의 영혼의 동반자가 될 것이지만 말이다.

폰트 로딩 잘못하면 사이트 훅 간다

웹사이트 제작할 때 고민하게 만드는 요소 중 하나인 폰트는 마치 결혼 준비 같다. (기자는 결혼을 한 적이 없다.) 선택지는 많고, 알맞는 정답은 없는거 같아서다. 폰트도 정말 많은 디자인이 있고, 심지어 폰트를 정하고 나서도 굵기까지 정해야 한다. (그래서 기자는 개인 프로젝트를 할 땐 맘에 드는 폰트 하나를 정하고 그것만 쓴다.)

폰트를 설정할 때 선택지는 두가지로 나뉜다:

1. 로컬 폰트
2. 웹 폰트

로컬 폰트

로컬 폰트는 사용자의 기기에 이미 설치된 폰트를 의미한다. 이미 기기에 설치되어 있는 폰트는 따로 다운로드를 받을 필요가 없기에, 웹사이트의 빠른 렌더링 속도를 보여준다. 그러나, 사용자의 기기에 폰트가 설치되어 있지 않다면, 당연하게도 웹사이트가 제대로 렌더링 되지 않는다.

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url('my-font.woff2') format('woff2');
}

웹 폰트

웹 폰트는 서버에서 다운로드 받은 후 적용해서 웹사이트에 사용되는 폰트로써, 네트워크 환경에 따라서 렌더링 성능의 편차가 크다. 웹 폰트를 미리 로딩하려면, HTML의 <head> 태그 안에 preload를 사용한다.

<link rel="preload" href="my-font.woff2" as="font" type="font/woff2" crossorigin>

웹 폰트의 성능 편차 때문에 여러 최적화 방법을 함께 적용하는데, 그 방법들은 다음과 같다:

1. 폰트 서브셋팅: 필요한 글자만 포함한 폰트 파일을 생성하여 로딩 시간을 줄인다.
2. 비동기 로딩: JavaScript를 사용하여 폰트를 비동기적으로 로딩한다.
3. 캐싱: 캐시 헤더를 설정하여 재방문 시 빠르게 폰트를 로딩한다.

크로스브...뭐요?

크로스브라우징 이슈란 웹사이트나 웹 애플리케이션이 다양한 웹 브라우저에서 동일하게 동작하도록 만드는 것에 발생하는 문제를 뜻한다. 웹 브라우저마다 내부적으로 사용하는 렌더링 엔진, 자바스크립트 엔진 등이 다르기 때문에 동일한 웹사이트나 애플리케이션도 브라우저에 따라 다르게 표시되거나 동작되는 참사가 일어날 수 있다. 크로스브라우징 이슈가 일어나는 주요한 원인들은 다음과 같다.

1. 브라우저 렌더링 엔진의 차이
2. 자바스크립트 엔진의 차이
3. 브라우저의 HTML & CSS 버전 지원 차이
4. 사용자가 임의로 설치한 플러그인 또는 확장 프로그램으로 인한 차이
5. 디바이스 또는 OS 차이

크로스브라우징 이슈를 해결하려면 다양한 환경에서 테스트 (노가다) 밖에 없다.

사파리에서 크로스브라우징 이슈 해결법

1. 메타태그 설정

• 사파리에서 모바일 웹사이트를 제대로 표시하기 위해서는 태그를 사용해야 한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 터치 이벤트 최적화

• iOS에서는 터치 이벤트에 대한 반응이 다를 수 있기에 touchstart, touchmove, touchend 등의 이벤트를 활용하여 최적화할 필요가 있다.

3. CSS 호환성 확인

• Safari는 웹킷 기반 브라우저이므로 -webkit- 접두사를 사용한 CSS 속성을 확인해야 한다.

4. LocalStorage와 SessionStorage

• 보안(또는 폐쇄)으로 유명한 애플답게, Safari는 사이트 간 추적 방지 기능 때문에 LocalStorage나 SessionStorage의 동작이 제한될 수 있다. 그래서 이를 대체할 다른 저장 방법을 고려하는게 좋다.

한달이 지난 지금 돌아본다면?

한달 동안 제로베이스 부트캠프를 돌아본다면, 결과적으론 수강하길 잘 선택한 것 같다. 지난 한달동안 HTML CSS를 뗐는데, 아직 시간이 걸린다 뿐이지 이제 (동적인거 말고) 웬만한 사이트 클로닝은 할 수 있게 됐다. 물론 내가 짠 마크업 구조가 완벽하다고는 할 수 없겠지만, 그래도 발퀄이라도 할 수 있는게 어디인가? HTML CSS 뿐만 아니라 Git도 뗐고, 이제 Javascript도 시작 했고, CS 공부와 코테 공부도 하고 있다. 혼자서 독학 할땐 하기 쉽지 않던 진도를 나가고 있고, 현업에서 쓰이는 지식들을 배우고 있으니까 그 정보의 질도 좋은거 같다.

그래서 돈값 함?

제로베이스는 국비지원이 되지 않는다. 얼리버드 가격으로 (근데 계속 얼리버드 가격이더라?^^) 360을 결제했는데, 어떻게 보느냐에 따라 합리적인 가격인지 아닌지 갈릴거 같다. 수료 후 취업율을 따졌을땐 이 정도의 투자는 괜찮은거 같으나, 다른 곳은 국비지원으로 심지어 무료로 들을 수 있는 곳도 있는데 굳이 돈을 들여서 수강할 필요가 있냐는 것일 것이다. 필자도 그런 생각을 안한건 아닌데... 교육의 질이 다르다니까 일단 믿고 가는 것이다 ㅎㅎ 그리고 이미 많은 사람들이 굳이 돈을 내면서 제로베이스를 선택한 걸 보고 비싼 이유가 있지 않을까 하는 생각으로 선택한 것도 있다.

자 이제 단점을 얘기해 봐야지?

강의 퀄리티가 들쭉날쭉

제로베이스 교육과정엔 여러 강의들이 있다. 동일한 HTML CSS라도 기초를 알려주는 강의, 기초를 배우고 난 후에 빠르게 처음부터 끝까지 훑어보는 강의, 그리고 배운 것을 실습해 보는 강의가 있다. 똑같은 주제라도 강의가 여러개이고, 강의 마다 교육하는 강사가 다르다. 여기서 단점이 발생 되는데, 강사마다 강의 역량이 다르다는 것이다. 어떤 강사의 강의는 교육 내용의 정리가 부족하고, 초보자인 수강자가 모를만한 것들을 사용하면서 강의를 진행한다. 강의 중간에 필자는 무의식적으로 "지금 뭘 하는 거지?" 라고 내뱉은 순간도 있었다.

아니, 강의 찍으면서 마이크 정도는 준비 하셨어야죠;;

어떤 강의를 듣다보면 그냥 노트북에 달린 마이크로 강의를 찍었나 싶은 강의들이 있다. 아무리 그래도 공짜로 지식나눔 하시는 것도 아닐텐데 강의 찍으면서 마이크에 투자 좀 하시지 라는 생각이 저절로 드는 강의들이 있었다.

만약에 강의 찍다가 마이크가 안 되거나 음성이 날라갔으면 제발 다시 찍어주세요^^ 잘 안들려요^^

이런 문제들은 기본 중에 기본인데, 공짜도 아니고 돈을 300이상 내고 듣는 강의들의 퀄리티가 이렇다는건 사실 이해가 안됩니다^^ 강의 해주신 분들이 바쁘신 분들이라는건 알겠는데, 그렇다고 강사의 말 보다 키보드 소리가 더 큰 강의 영상들 제대로 다시 찍어서 제공해 주셔야 하지 않을까요?^^

학습 계획대로 가고 있나?

매일 투두 리스트대로 가려고는 하지만, 하루 분량을 못 채우는 날도 있다. 분량이 꽤나 많기 때문도 있지만, 부트캠프 외의 삶도 바빠서... 개인적으로 사업을 운영하기에 다른 곳에 시간을 할애해야 해서 할게 많은 편이다.

남은 5개월 동안의 계획

일단 남은 5개월 동안 교육과정을 진행하면서 지속해서 빡공할 예정이다. 개인적으로 공부가 필요한 것들도 준비하고, 코테도 열심히 준비할 예정이다. 확실 부트캠프를 하면서 다른 것을 병행하는건 쉽지 않다...

의미론적 구조

코딩을 처음 시작할 때 배웠던 것들 중에 하나가 바로 가독성이 좋은 코드를 짜야 한다는 것이었다. 코드의 가독성이 떨어지면 나중에 유지보수도 어렵고 협업도 어렵기 때문에 코드는 가독성이 높아야 한다는 것이었다. 시멘틱 태그를 사용하는 여러 이유 중에서도 동일한 이유가 있다. 시멘틱 태그의 이름은 다음과 같이, 이름 만으로 그 쓰임새를 쉽게 알 수가 있다. 모든 컨테이너들을 div로 떡칠해 버리면 내 코드를 읽는 타인도 나를 욕할 것이고, 미래의 나도 현재의 나를 욕하게 될 것이다.

<header>, <footer>, <nav>, <article>...

검색 엔진 최적화

시멘틱 태그를 사용하면 검색 엔진에서 내 사이트의 내용을 더욱 빠르고 정확하게 인식할 수 있다. 이것이 중요한 이유는 SEO 측면에서 내 사이트가 검색 엔진에서 상단 노출이 된다는 것이다. (조회수는 곧 에드센스 정산요금이 된다)

접근성 향상

시멘틱 태그를 사용하는 중요한 이유 중 하는 바로 스크린 리더 같은 접근성 기능을 이용할 때 유용하기 때문이다. 스크린 리더는 시멘틱 태그를 인식해서 사이트의 구조와 내용을 더욱 유용하게 전달할 수 있게 된다.

웹 표준은 또 왜 지키는 거임?

예전엔 웹개발 춘추전국시대가 있었다. 브라우저 마다 표준이 다르니 호환성이란게 존재하지도 않았다. 그 혼돈의 시대를 청산하고 천하통일을 이루어 낸 것이 현재의 웹 표준이다.

호환성

웹 표준을 따르면 다양한 브라우저와 기기에서 사이트와 웹 어플리케이션이 정상 작동한다. 웹 표준을 따르지 않고 본인 멋대로 만들면 본인 기기에서만 돌아가는 유니크템 제작이 가능하다.

검색 엔진 최적화

시멘틱 태그를 사용하는 이유와 동일하다. 상위 노출은 곧 더 많은 에드센스 정산을 의미한다.

포포몬스

웹 표준을 준수하여 사이트나 웹 어플리케이션을 개발하면 구동 성능이 주로 향상 된다. 표준을 준수하면 최적화된 코드를 짤 수가 있는데, 이는 사이트의 속도와 연관성을 띄게 된다.

취업에 대해서 막연하게 생각하고 살았나 보다. 20대를 보내면서, 남들보다 더 특별하게 시간을 낭비한건 아닌데, 주변에 나 보다 뛰어나고 더 많이 성취한 사람들이 많더라. 20대 초반에 2년 동안 학교를 쉬고 다시 복학을 할땐 내가 졸업을 하면 자연스럽게 취업이 될 줄 알았다. 그러나 한 학년씩 마칠때마다 내 실력이 형편없는지만 느낄뿐이었다.

같은 과 선배들은 졸업하고 또는 졸업 전에도 Meta나 Google 등에 취업해서 일하는 선배들이 더러 있었다. (필자의 모교는 New York University이다) 나도 그 발자취를 따라갈 줄 알았으나, 나에게 남겨진 문제가 있었으니 그것은 바로 군.대. 국방의 의무가 아직 남아있었다. 다행히 신검에서 4급을 받아(2년 동안 휴학을 하게 된 원흉...^^) 매일 아침마다 빵빠레 알람을 듣지는 않게 됐지만, 사회복무요원이라는 비교적 가벼운 의무를 먼저 끝내는 것보다 학업을 먼저 끝내는게 여러모로 좋을거 같아, 20대 후반이 되도록 미필로 지냈다. (근데 그냥 빨리 가는데 나았을 수도...ㅎ)

이제 졸업을 앞두고 보니, 다시 군 문제가 내 앞에 찾아왔다. 왜냐면 만 28세가 되면 더이상 연기가 어렵다는 것. 그래서 이왕 4급이 나왔으니, 산업근무요원을 알아보기로 했다. 근데 한국에서 프론트엔드로 취업하려고 하니, 아무런 정보가 없었다. 취업 프로세스가 어떻게 되는지, 어떤 포트폴리오가 먹히는지, 이력서는 어떻게 써야 하는지, 코테는 어떻게 준비해야 할지 등등. 그래서 제로베이스 부트캠프를 선택했다.

안녕하세요, 이 회사는 어떤 회사인가요?

IT 산업기능요원에 대해서 리서치 해보니 정보가 많진 않았다. 많지 않은 정보를 그나마 취합해보니, 내 실력에 따라 산기요 디버브가 있을 수도 있고 없을 수도 있단다. 그 부분은 내가 준비하기 나름이니, 딱히 할 말은 없으나, 내가 취업하는 기업은 이랬으면 좋겠다.

1. 야근과(가아끄음은 오케이) 주말 출근 🙅‍♂️- 이거 있으면 진짜 암울할 듯
2. 기업 문화 터진 회사 🙅‍♂️- 꼰대, 좋소, 똥군기, 산기요라고 부당요구 진짜 극혐
3. 내가 보고 배울 수 있는 선배나 멘토가 있는 곳 🙆‍♂️ - 성장없는 곳은 시러요
4. 연봉 높은 곳 🙆‍♂️ - 가장 중요하나, 필수는 아님

산기요라서 어느 정도 디버프가 있진 않을까 싶은데, 사실 없었으면 좋겠다. 그러려면 내 실력이 좋아야 겠지? 산기요 TO가 있는 업체를 찾아보니, 자체 서비스를 운영중인 곳도 있고, 이름 한번 들어본 적 없는 좋소 느낌 물씬 나는 곳도 있었다. 그래도 첫 직장인데, 자체 서비스가 있는 성장하는 스타트업으로 가면 좋을거 같다.

... 제발

구조 요소는 기본적으로 공간을 만드는 것이라고 생각하면 된다. HTML로 구조 요소를 짠 후에, 그 구조 요소를 CSS를 통해 요리 조리 씹고 뜯고 맛 보면서 즐길 수 있다. 상자를 만드는 행위라고 하면 비슷하겠다. 텍스트나 사진, 링크 등등 어떠한 내용이던지 간에 그 내용을 감싸는 상자가 있어야 꾸밀 수 있다.

대표적으로 쓰이는 구조 요소는 두 부류로 나뉘는데, 다음과 같다.

Block element - div

div는 정말 어디서나 누구든지 항상 쓰는 기본적인 block 구조 요소이다. Block 구조 요소이기 때문에, div가 있는 영역은 수평적으로 모두 div의 영역이다.

<div>
    <h1>여보세요 나야 거기 잘 지내니</h1>
</div>

div와 같이 block 구조를 가지는 대표적인 요소들은 다음과 같은 요소들이 있다.

- <p>
- <form>
- <h1> ~ <h6>
- <ol>, <ul>, <li>
...

Inline element - span

span은 div와 같이 정말 어디서나 누구든지 항상 쓰는 기본적인 구조 요소 이지만, 차이점은 바로 span은 inline 요소이다. 그래서 수평적으로 모든 영역을 차지하지 않고, 오직 요소 내의 내용만큼만의 공간을 차지한다.

<span>
    <a href="https://velog.io">Velog Link</a>
</span>

span과 같이 inline 구조를 가지는 대표적인 요소들은 다음과 같은 요소들이 있다.

- <a>
- <button>
- <img>
- <em>
- <strong>
- <i>
- <b>
...

이외에 Semantic Tag가 더 있지만 Semantic Tag는 그 의미가 중요하므로 다음 포스트로 넘기겠다.

"프론트엔드 그거 그냥 화면에 이거 붙이고 저거 붙이고 하면 되는거 아님? ( ͡° ͜ʖ ͡°)"

프론트엔드에 어떻게 입문하게 되었냐고 나에게 묻는다면 내 답은 간단하다.

"돈 벌려고 시작함."

많은 디테일이 생략된 답변이긴 하지만, 본질은 맞다. 부모님과 함께 사업을 시작하게 되면서, 우리 기업을 알릴 웹사이트가 필요했다. 여러 CMS를 이용해 봤지만, 내 입맛에 맞는 웹사이트를 제작하는 데엔 항상 제약이 있었다. 이런 제약을 느끼기 전엔 난 사실 백엔드를 공부하고 있었는데, 장고로 간단한 웹사이트 하나 만들어 보니, 그 안에 뭘 넣어야 할지를 잘 몰랐다. 결국, "프론트엔드와 백엔드를 둘다 해야 하는구나"를 깨닫고, 풀스택을 목표로 잡게 되었다.

"그래서 프론트엔드가 뭔데 이 Tlq덕아~ ( ͠° ͟ʖ ͠°)"

사람은 외면과 내면이 있다. 외면이 출중한 사람들은, 존재 자체만으로 사람들의 이목을 받지만, 그 사람의 내면이 형편 없다면 결국 모두 떠나간다. 반대로, 내면이 훌륭한 사람은 그 내면의 가치를 아는 사람들이 결국 다가오겠지만, 처음엔 관심을 받는 것이 쉽지 않다. 웹도 그런게 아닐까? 프론트엔드는 외면이고, 백엔드는 내면이다. 아무리 디자인이 훌륭한 웹사이트라도 아무 기능이 없다면 의미가 없고, 아무리 알고리즘이 훌륭한 서비스라도 이용자들이 그 서비스에 접근할 수 없다면 쓸모가 없다. 결국 내가 생각하는 프론트엔드 개발은 서비스라는 하나의 존재의 외면을 만드는 일이다.

텍스트 요소들이란

혹시 인터넷 하다가 키보드를 잘못 눌러서 브라우저 옆면에 이상한 글자들이 나오는 창이 뜨는걸 본 경험이 있는가? (초등학생 시절에 봤던 그 화면이 내 인생의 동반자가 될 줄은 몰랐지...) 거기 보면 여러 글자들이 나올텐데, 그 친구들을 한번 소개해 보겠다. 오늘 소개한 친구들은 주로 글자를 표시해주는 태그들이다.

h1, h2, h3, h4, h5, h6 (하나둘셋넷다여 육학년이냐?)

제목을 나타내주는 태그들이다. h1이 가장 큰 사이즈를 나타내고, 숫자가 커질 수록 제목의 사이즈는 작아진다. (나중에 Semantic을 소개할때 또 나오겠지만, 숫자가 작을 수록 웹에서의 제목 우선 순위도 높다)

<h1>차 빼 이 친구야 바뻐</h1>
<h2>동석이형❤️</h2>

p

Paragraph를 뜻하는 태그이다. 주로 본문 글자를 표시할 때 사용한다.

<p>나랏말싸미 듕귁에 다라...<p>

br

Line Break를 뜻하는 태그이다. 텍스트를 끊고 다음 줄로 보낼때 사용한다. (이걸로 본문을 띄어쓰는 걸로 꾸미는데 쓰지 말자. 그건 CSS로 해야 된다)

<p>나랏말싸미 듕귁에 다라,<br>문자와로 서르 사맛디 아니할쎄</p>

blockquote, q

blockquote이랑 q 둘다 인용문을 표시할 때 쓰는 태그들이다. 둘의 차이점은 blockquote는 블록 요소이고, q는 인라인 요소이다.

<blockquote>나랏말싸미 듕귁에 다라, 문자와로 서르 사맛디 아니할쎄</blockquote>

<q>나랏말싸미 듕귁에 다라, 문자와로 서르 사맛디 아니할쎄</q>

strong, b

strong이랑 bold 둘다 글자를 두껍게 표시한다. 둘의 차이점은 Semantic을 따라 쓸때 달라지는데, strong은 글의 내용이 중요할 때 써야 하며, bold는 그저 글자를 두껍게 하고 싶을 때 사용한다.

<p>나는 <b>괜찮은데</b>, 너가 배고플거 같아서 <strong>야식으로 치킨을 먹자</strong></p>

em, i

em이랑 i 둘다 글자를 기울어서 표시한다. 둘의 차이점은 Semantic을 따라 쓸때 달라지는데, em은 emphasize(강조하다)의 줄임말이므로, 내용을 강조할 때 사용한다. i는 italic의 줄임말로, 단순히 글자를 기울게 해서 표시할 때 사용한다.

<p>나는 <i>괜찮은데</i>, 너가 배고플거 같아서 <em>야식으로 치킨을 먹자</em></p>

a

Anchor의 줄임말로, 다른 웹페이지로 가는 Hyperlink를 표시하는 태그이다. 링크를 표시할 땐 href라는 attribute로 표시해준다. a 태그는 절대경로와 상대경로가 있는데, 절대경로는 내가 어느 페이지에 있든 간에, 고유 URL로 인도해주고, 상대경로는 내가 있는 페이지가 속한 경로의 형제 파일로 인도해준다.

<a href="https://naver.com">Naver</a>
<a href="야식/야식추천리스트.jpg">야식추천리스트</a>

모든 태그들 다 쓰기엔 너무 빡세서 대표적인 태그들을 소개해봤다. (기술블로그를 MDN같이 만들 수는 없잖아...) 다음엔 구조를 나타내는 포스트를 준비해 보겠다.

HTML. HyperText Markup Language의 약자이다. 브라우저에서 표현되는 HyperText를 Markup(손질해주는) 언어라는 건데, 이거 프로그래밍 언어라고 하면 많은 사람들이 득달같이 달려올거다.

HTML은 브라우저에 글자 넣고, 그림 넣고, 표 넣고, 영상 넣는 언어이다. 그게 끝이다.

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        ...
    </body>
</html>

크게 보면 이런 구조로 되어 있고, head 안에는 페이지엔 보이지 않는 메타데이터와 홈페이지의 이름이 들어간다. 우리가 눈으로 보는 정보는 body 안에 들어간다.

다음 포스트에선 HTML의 대표적인 태그들에 대해서 설명해 보겠다.

웹 표준 (Web Standards)

웹 표준은 브라우저 마다 중구난방이던 웹 개발 방식을 하나로 통합한 것이다. 현재 우리가 쓰는 HTML5는 W3C에서 2014년에 공식 표준화 한 것이다. 또한 2019년엔 WHATWG(애플, 모질라, 구글 Microsoft)에 의해 HTML Living Standard가 표준화가 되었다. 웹 표준을 준수하여 웹 개발을 한다면, 운영체제나 브라우저를 타지 않고 동일한 웹 페이지를 보여줄 수 있다.

웹 표준 천하통일 이전엔 브라우저 마다 개발 환경이 달랐다고 한다. 솔직히 브라우저 마다 개발 방식과 언어가 다르다고 생각하니 가뜩이나 초짜 개발자의 옹졸한 마음이 더욱 옹졸해진다. 표준화 이전의 대표적인 구시대의 유물은 Active X가 있다. Active X는 Microsoft의 브라우저 Internet Explorer의 플러그인으로써, 웹 표준화 이전의 대표적인 적폐가 아닐 수 없다. (솔직히 지금 2023년인데, 아직도 Active X 안 버려서 프로그램 설치 하려면 관짝에 들어간 Explorer로 접속해야 프로그램 설치할 수 있는 사회서비스 전자바우처 홈페이지는 반성하자)

웹 접근성 (Web Accessibility)

웹 접근성은 모든 사람들이 어려움 없이 웹사이트를 이용할 수 있게 하는 것이다. 정확히 말하자면, 신체적인 제약이 있든 없든 동일한 경험을 제공한다는 것이다. 사이트가 접근성 기준에 따라서 잘 설계되면, 모든 사람들이 동일하게 웹사이트의 정보와 기능을 이용할 수 있게 된다. 웹 접근성은 장애를 가지지 않은 사람들에게도 도움을 주는데, 간혹 안경이 파손되었을때 긴급하게 정보를 받을 수 있거나, 작은 화면을 가진 기기들에서도 문제 없이 정보를 받을 수 있는 경우이다. 대표적인 웹 접근성 기술들은 스크린리더, 화면 돋보기, 음성 인식, 키보드 오버레이가 있다. (예전에 밤에 불끄고 자기 전에 폰 할때 흰색 바탕화면이 너무 밝아서 아이폰 접근성에 있는 색상반전을 적용하고 폰을 했던 기억이 있다)

웹 호환성 (Cross Browsing)

웹 호환성은 어떠한 웹 브라우저나 버전을 사용하던지 간에, 웹사이트 접근이 가능케 하는 것이다. 이를 위해선 웹 표준을 준수하는 것이 중요하며, HTML과 CSS 문법을 준수하는 것이 중요하다. 또한, 웹사이트의 동작이나 레이아웃, 플러그인의 호환성을 지키는 것도 중요하다. (뭣도 모르고 CSS 사이즈들 내 모니터에만 맞춰서 px로 적용했던 내 흑역사가 떠오른다...)

제로베이스에서의 부트캠프 첫주를 지나며 배운 것들은 정리해본다. 아직 익숙하지 않아서 그런지, 블로그 글을 통해 학습 내용을 정리하는 것을 잊고 있었다. 파인만 학습법이라고, 다른 사람을 가르칠때 내가 더 배우게 된다고 하는데 확실히 효과는 있는거 같다. 물론 난 글재주는 없다. 그래서 내 글을 읽으면서 '이게 무슨 말이지?' 싶으면 그냥 복습노트라고 생각하면 될 것 같다.