문제

https://www.acmicpc.net/problem/2661

 

2661번: 좋은수열

첫 번째 줄에 1, 2, 3으로만 이루어져 있는 길이가 N인 좋은 수열들 중에서 가장 작은 수를 나타내는 수열만 출력한다. 수열을 이루는 1, 2, 3들 사이에는 빈칸을 두지 않는다.

www.acmicpc.net

1,2,3 으로만 이루어진 N자리 숫자를 만든다. 이 중 가장 작은 수를 리턴한다.

단, 같은 순서가 연속해서 반복될 수 없다. ex) 33, 123123321

 

접근

- 12131213 처럼 딱히 규칙이 있지도 않고고, 1 <= N <= 80 으로 범위가 큰 수가 아니므로 완전탐색이 가능하다.

- 우선 수열이 좋은 수열인지(같은 순서가 연속해서 반복되지 않는지) 판단해야 한다. 해당 블로그를 참조하였다.

1211 => 길이 4, 1자리 비교, 나쁜 수열

1212 => 길이 4, 1자리 비교, 좋은 수열
1212 => 길이 4, 2자리 비교, 나쁜 수열

123123 => 길이 6, 1자리 비교, 좋은 수열
123123 => 길이 6, 2자리 비교, 좋은 수열
123123 => 길이 6, 3자리 비교, 나쁜 수열

- 해당 접근 방식을 코드로 짠다. 재귀를 이용해 전체 탐색을 했다.

 

 

 

시도

1차 시도

결과: 틀렸습니다

// 백준 제출시
// const address="/dev/stdin"

// VSC 테스트시
const address = "./input.txt";
const input = require("fs").readFileSync(address).toString().trim().split("\n");

const solution = (input) => {
  const N = +input;
  let stop = false;
  let min = Number.MAX_SAFE_INTEGER;

  const isGoodSequence = (str) => {
    let len = str.length;
    let loop = len / 2;
    let start = len - 1;
    let end = len;

    for (let i = 1; i <= loop; i++) {
      if (str.substring(start - i, end - i) === str.substring(start, end))
        return false;
      start -= 1;
    }

    return true;
  };

  const recursion = (len, str) => {
    if (stop) return;
    if (len === N) {
      stop = true;
      console.log(str);
      min = min > Number(str) ? Number(str) : min;
    }
    // 수열은 1,2,3 중 하나로 이루어져 있다.
    for (let i = 1; i <= 3; i++) {
      if (isGoodSequence(str + i)) recursion(len + 1, str + i);
    }
  };

  // 가장 작은 수를 구하는 것이므로 첫번째 자리는 항상 "1"이 되어야하고, 따라서 따로 탐색할 필요 x
  recursion(1, "1");

  return min;
};

console.log(solution(input));

 

2차 시도

결과: 맞았습니다!!

const address="/dev/stdin"
const input = require("fs").readFileSync(address).toString().trim().split("\n");

const solution = (input) => {
  const N = +input;
  let stop = false;

  const isGoodSequence = (str) => {
    let len = str.length;
    let loop = len / 2;
    let start = len - 1;
    let end = len;

    for (let i = 1; i <= loop; i++) {
      if (str.substring(start - i, end - i) === str.substring(start, end))
        return false;
      start -= 1;
    }

    return true;
  };

  const recursion = (len, str) => {
    if (stop) return;
    if (len === N) {
      stop = true;
      console.log(str);
    }
    // 수열은 1,2,3 중 하나로 이루어져 있다.
    for (let i = 1; i <= 3; i++) {
      if (isGoodSequence(str + i)) recursion(len + 1, str + i);
    }
  };

  // 가장 작은 수를 구하는 것이므로 첫번째 자리는 항상 "1"이 되어야하고, 따라서 따로 탐색할 필요 x
  recursion(1, "1");
};

solution(input);

 

 

분석

왜 min 부분을 삭제하니 통과한 걸까?

 우선 굳이 min 이 필요 없었다. 차례대로 작은수부터 대입하니까 반복문이 끝나기전 제일 먼저이자 마지막으로 찍힌 수가 어차피 가장 작은 수이기 때문이다.

 1차 풀이도 틀리지는 않았는데 틀렸던 이유는 정답(min)의 출력타입이 number 였기 때문이다. 정답으로 제출한 코드 마지막 부분만 console.log(Number(string)) 으로 쳤더니 틀렸다고 나온다. 출력 타입도 str 이어야 하는 구나.

 

나보다 속도가 적게 나온 다른 사람 코드 분석

1. 좋은 수열인지 판별하는 함수에서 substring 메소드가 아닌 slice 메서드를 사용

2. 재귀 함수에서 정답을 도출할 때 string 대신 array 를 사용

3. 재귀 함수에서 백트래킹시 조건문을 좋은 수열일 경우에만 진행이 아닌 나쁜 수열일 경우 반복문을 패스하도록 설정

const fs = require('fs');
// /dev/stdin
const input = fs.readFileSync("/dev/stdin").toString().trim().split("\n").map((v)=> v.split(" ").map((v)=> parseInt(v)))


// 숫자 1, 2, 3으로만 이루어지는 수열이 있다. 
// 임의의 길이의 인접한 두 개의 부분 수열이 동일한 것이 있으면, 
// 그 수열을 나쁜 수열이라고 부른다. 그렇지 않은 수열은 좋은 수열이다.
// 첫 번째 줄에 1, 2, 3으로만 이루어져 있는 길이가 N인 좋은 수열들 중에서 가장 작은 수를 나타내는 수열만 출력한다.

function solution (N){
    const arr = [1,2,3]
    const result = []
    const dfs = (depth, number = '') => {
        if(result.length > 0) return
        if (depth === N) {
            result.push(number)
            return
        }
        for(let i = 0; i < arr.length; i++) {
            const nextArray = number + arr[i].toString()
            if(isBad(nextArray)) continue
            dfs(depth+1, nextArray)
        }
        
    }

    dfs(0)



    return result[0]
}

function isBad (str) {
    for (let i = 1; i <= str.length/2; i++) {
        const last = str.slice(-i)
        const before = str.slice(-i*2, -i)
        if (last === before) return true
    }
    return false
}

console.log(solution(...input[0]))

 

 

 

'Board > 알고리즘' 카테고리의 다른 글

백준 2178 자바스크립트  (0) 2023.01.24
백준 2667 자바스크립트  (0) 2023.01.24
백준 14888 자바스크립트  (0) 2023.01.22
백준 14889 자바스크립트  (0) 2023.01.19
[알고리즘 공부] 20230115 2주차 회고  (0) 2023.01.16

https://www.acmicpc.net/problem/14889

 

14889번: 스타트와 링크

예제 2의 경우에 (1, 3, 6), (2, 4, 5)로 팀을 나누면 되고, 예제 3의 경우에는 (1, 2, 4, 5), (3, 6, 7, 8)로 팀을 나누면 된다.

www.acmicpc.net

 

문제 해석

주어진 n 에서 n/2 만큼 스타트팀의 경우의 수를 구한다. 스타트팀을 구하면 남은 인원을 링크팀에 배치한다.

각 팀의 능력치를 구해 합의 차가 가장 작은 경우의 수를 구한다. 

 

문제 접근

스타트팀 n 에서 n/2 를 순서에 상관없이 뽑는 조합의 문제이다. 

ex) n = 6일 때 [1,2,3] 로 스타트팀을 구성한다면, [1,2,3] 이나 [2,1,3]이나 [3,1,2] 나 순서에 상관 없이 팀의 능력치는 각 팀원들로 만들 수 있는 모든 부분 집합 (x,y) 쌍의 합, 즉, (1,2)+(2,1)+(2,3)+{3,2)+(1,3)+(3,1) 이 될 것이기 때문이다. 

 

문제 풀이 

시도 끝에 아래 두 가지 풀이 참조 및 비교 

풀이1 : 재귀 이용

 

출처 - https://gobae.tistory.com/50

 

 

풀이2 : 구현 이용

 

출처 - https://github.com/jlee0505/algorithm-study/pull/1/commits/df6a36b419ef225e0d9196fc7126a3e762a0d194

 

배운 것 

1. min 값을 각각 0, MIN_SAFE_INTEGER, MAX_SAFE_INTEGER 의 차이:

MIN_SAFE_INTEGER, MAX_SAFE_INTEGER 는 각각 -9007199254740991, +9007199254740991 을 의미한다.

아래 코드의 min 의 초기 할당을 각각 0, MIN_SAFE_INTEGER, MAX_SAFE_INTEGER 으로 했을 때의 차이를 생각해보자.

 
min = Math.min(min, Math.abs(sSum - lSum));

 

2.  재귀로 풀 때와 구현으로 풀 때의 장단점:

첫 번째 제출은 풀이1(재귀)의 결과, 두 번째 제출은 풀이 2(구현)의 결과이다. 구현으로 풀면 가독성이 올라가고 직관적 이해가 쉽다는 장점이 있지만, 재귀로 푸는 것이 시간,공간 복잡도가 압도적으로 높다.


재귀는 여전히 어렵다.

 

'Board > 알고리즘' 카테고리의 다른 글

백준 2178 자바스크립트  (0) 2023.01.24
백준 2667 자바스크립트  (0) 2023.01.24
백준 14888 자바스크립트  (0) 2023.01.22
백준 2661 자바스크립트  (0) 2023.01.21
[알고리즘 공부] 20230115 2주차 회고  (0) 2023.01.16

나의 Notion - 알고리즘

2023년부터는 인턴과 기업 코딩테스트로 공부 방향을 잡았다. 어딜 가도 1차 관문이 되는 코딩테스트가 중요한 기회 때 발목 잡는 걸 원치 않았다. 

 

알고리즘 공부 시작, 지난 2주 돌아보기

1월 알고리즘 학습 계획표

 

 

2023 목표를 인턴과 기업 코딩테스트로 잡고, 어딜 가서든 1차 관문이 되는 코딩테스트의 ‘기본’을 1,2월안에 마무리 하기로 했다. 3,4월에는 본격적으로 기출을 풀며 여름방학/하반기 인턴 코테 지원(4~5월 지원)을 준비하고 싶었기 때문이다. 그리하여 2월까지 세운 러프한 계획은 이러했다:

  • 1월: 강의와 함께 빈출 알고리즘 핵심은 제대로 익혀두기(이코테 2021)
  • 2월: 백준 추천 50제 풀며 1월 배운 내용 복습 + 보강
  • 3월: 우테캠, 카카오, 토스 등 국내 기업 코딩테스트의 흐름을 주도하는 기업의 기출문제 풀어보기
  • 4월: 2차 관문인 과제 코테 준비 시작

 

 

 우선 이코테 2021 강의를 완강 + 80% 이해 및 체화를 목표로 1월 계획을 세웠다. 나는 정말 노베이스 상태에서 시작했기 때문에 전반적으로 어떻게 흘러가고 어떤 것들이 있는지 직접 한 번 훑고 싶었다. 지난 2주는 그런 시간이었다.

 

 그리디, 완전 탐색, 그리고 그래프 탐색(dfs, bfs)였다. dfs,bfs 는 중요하다는 말을 하도 많이 들어 감이 안잡혔지만 최대한 이해하고 넘어가려 했다. (관련 노션 보러가기)

 

 1월은 1회차기 때문에 문제를 많이 풀어보는 것보다 개념을 확실히 이해하는 게 더 중요하다고 생각했다. (이코테 기본 예제(2), 백준(1) - dfs, node 대신 edge 가 주어진 경우, 프로그래머스(5) - 스킵 )

 

 

Keep, Try, Problem

 회고를 쓰며 찾아보니 판교로 가는 길에서는 1주일 한 개념씩, 2~3문제를 풀어볼 것을 권한다. 예정보다 3일을 더 투자하여 (5,6,7일) 예제를 확실히 이해하고 추가로 백준 문제를 풀었다. 더 많은 문제를 풀었으면 좋았겠다는 아쉬움이 어쩔 수 없이 남는다. 하지만 카페 글을 참조해보니 오히려 이정도가 딱 맞았다는 생각이 든다. 외려 1주에 2개념을 잡았던 초기 계획이 불필요하게 빡세다는 느낌도 든다. 이에 따라

 

Keep 

- 무조건 문제 풀이보다 중요한 건 개념 이해

Problem

- 딱히 문제는 아니었지만... 한 개념 한 주씩 파는 것과 어떻게 다를지 다른 사람의 조언도 반영해볼 것.

- 예상했던 것보다 느슨해진다는 것 

Try 

- 한 개념 한 주씩: 두 개념 한 주씩 하던 지난 주와 후에 비교해볼 것

- 한 달 스프린트로 스터디를 개설하여 함께 뛰는 이가 있을 때 어떻게 달라질 수 있는지 비교해볼 것

- 불안요소를 글로써 가시화하고 제거할 수 있는 대책을 세우자.

 

다음 스텝은?

1. 한 개념 한 주씩 양치기 + 체화

다음 주부터는 본격적으로 양치기에 들어가려 한다. 지난 2주가 이코테 강의 위주의 전체 흐름 잡기 + 개념 익히기였다면, 다음 5주는 백준50제 위주의 양치기 체화 과정이 목표이다.

 

5주차 계획

 

다음 스텝: 2. 스터디와 함께 풀기

스터디를 개설했다.

 

이유:

  1. 해당 카페 포함 많은 이들이 같이 가는 스터디원이 있는 것을 강력 추천
  2. 지인과 네트워킹을 통해 혼자서는 몰랐을 시각/정보/인적자원 습득의 가능성
  3. 반복 문제 풀이인만큼 늘어지지 않게 함께 가는 메이트 만들기

걱정되는 부분:

지인과 함께 시작한 스터디라 아래 부분이 걱정되었다.

  1. 너무 루즈해지진 않을까?
  2. 친목 위주로 가서 집중력과 학습 효과가 떨어지면 어떡하지? 

어떻게 해결할 수 있을까?:

  1. 나의 불안요소: 쉽게 distracted 된다.
    1. 목표를 확실히 한다: 이 4주간 나는 무엇을 얻고자 하는가?
      1. 실버1,2 or 골드 4 를 달성 (모든 문제를 이해하고 풀이했다는 전제하)
  2. 상대에 대한 불안요소: 평소 함께 잘 놀던 지인이다.
    1. 주의사항을 상기한다:
      1. ‘성의 없는 공부’에 절대 관대하지 말 것.
    2. 전반적인 주차별 목표&계획과 구체적인 실행 컨텐츠 시간 장소 등을 확실히 하자.

다음 텀도 화이팅

 

'Board > 알고리즘' 카테고리의 다른 글

백준 2178 자바스크립트  (0) 2023.01.24
백준 2667 자바스크립트  (0) 2023.01.24
백준 14888 자바스크립트  (0) 2023.01.22
백준 2661 자바스크립트  (0) 2023.01.21
백준 14889 자바스크립트  (0) 2023.01.19

 

 

FECrash 함수형 프로그래밍 스터디 1부가 끝이 났다


오늘로 <쏙쏙 들어오는 함수형 코딩>책과 함께한 1부가 끝났다. 

카카오 엔터프라이즈의 테오가 강의하고, 넥스트 유니콘 파랑이 주최한 스터디.

강의 2~30분, 팀별활동 1시간 30분, 총 2시간씩

매주 목요일 저녁 진행되었다. -> 깃헙 보러가기

 

모두가 알찬 내용을 기대하고 온 만큼 열정적으로 참여하셨다.

예상 스터디 기간은 8~10주로, 1부와2부로 나뉘어 진행된다고 한다.

1부함수형 프로그래밍의 개념 및 필요성, 기초 활용법에 대해 팀으로 예제를 풀며 익히는 식으로 진행되었다.

2부부터는 쿼리 등 함수형 프로그래밍을 위해 더 함수를 잘 분리하는 심화 방법을 배운다고 한다.

매주 리팩토링 과제가 진행되며, 마지막에는 라이브러리를 만들어 보는 것으로 마무리 된다고 한다.

 

오늘(1/5, 2023)을 기준으로 1부가 끝이 났다.

지난 5주간 무엇을 배웠는지 돌아보고자 중간회고를 남기고자 한다.

 

테오가 강의하고 파랑이 리딩하는 함수형 프로그래밍 스터디

 

 

함수형 프로그래밍은 무엇이고,
우리는 왜 배워야 하는가.


 

자바스크립트는 사실 함수형 프로그래밍 언어이다.

 

"정확히는 우리가 아는대로 멀티 패러다임 언어입니다 ... javascript를 창시한 Brendan Erich는 언어를 개발할 당시 유행하던 객체지향에 한계를 느끼고 LISP, scheme등 함수형 프로그래밍에 관심을 가지고 있었기에 함수형 프로그래밍의 형태로 언어를 만들고 싶어 했습니다. 하지만 Netscape의 그의 상사는 당시 개발자들이 제일 많이 쓰던 Java와 같은 문법으로 만들기 요구했기 때문에 결국 둘의 혼종의 형태로 세상에 나오게 되었습니다. :) 결국 javascript에는 언어의 태생부터 함수형 프로그래밍의 개념들이 녹아있고 동시에 객체지향의 가치는 다소 희석이 되어 있는 형태의 언어였습니다."

출처 - 테오가 쓴 글

 

 

글에는 나오지 않았지만 강의에서 테오는 자바스크립트ES6에 추가된

this가 없는 "화살표 함수" 등은 함수형 프로그래밍에 적합한 문법이라고 할 수 있다고 덧붙이셨다.

 

결국 우리는 javascript를 쓸 수 밖에 없기에 객체지향이냐 함수형이냐 패러다임을 선택해서 깊게 파야 하는 것이 아니라

javascript 그 자체를 잘 하기 위해서 javascript의 함수형과 객체지향을 둘 다 알아야 하는 것이다.

 

 

그래서
함수형 프로그래밍이
뭔데?

함수형 프로그래밍은 결국 "범위(scope)"를 기준으로 한 패러다임 중 하나이다.

 

지역 변수 사용은 나쁘다고 한다.

여러 파일에서 참조 및 변경할 수 있어 에러 발생률이 높이기 때문이다.

그래서 그 범위를 "클래스"로 한정해 사용하자, 는 것이 "객체 지향 프로그래밍",

이 범위를 더 좁혀 "함수"로 한정해 사용하자, 는 것이 "함수형 프로그래밍"이다.

 

함수로 범위를 좁힌 변수(지역 변수)를 사용하며,

이러한 함수들의 집합으로 프로그래밍을 완성하는 것,

그것이 함수형 프로그래밍이라 할 수 있다.

 

함수형 프로그래밍을 할 때 주의해야 할 점은,

이러한 전체 프로그래밍을 이루는 작은 구성원인 함수

가능한 작고, 테스트가 쉬우며, 분리와 재조립이 쉬운 형태로 만드는 것이다.

 

이러한 함수를 만드는 법

바로 함수(범위) 밖의 요소에 영향을 받지도 주지도 않는,

즉, "순수함수"로 만드는 것이다.

 

그리고 책에서는 함수를 "순수함수"로 만드는 방법에 대해 알기 쉽게 소개한다.

 

 

 

순수함수가 핵심이다

 

 

순수하지 않은 함수, 즉 외부에 영향을 받거나 주는 테스트가 어려운 함수를

"순수함수"라고 한다고 했다.

하지만 순수함수를 어떻게 만드는데? 라는 질문에는

선뜻 대답하기 쉽지 않은데 그 방법이 다양할 수 있기 때문이라 생각한다.

 

하지만 이 책에서는 한 가지 방식을 제안하는데,

바로 바뀌는 변수는 오직 인자로만 받고(명시적 입력), 전역 변수나 dom 등 다른 범위의 변수는 일정 변경하지 않는 것이다.

이 과정에서 변경하는 데이터는 복사를 이용한다.

또한 그렇게 함수내에서 변경된 자료는 return 으로 출력한다(명시적 출력).

 

보다 구체적으로 알아보자.

저자는 바꾸는 법을 전보다 구체적으로 전달하기 위해

함수를 역할에 따라 액션, 계산, 데이터로 3가지로 분류한다.

책에서 말하는 액션, 계산, 데이터란 아래와 같다:

 

 액션  - 외부에 영향을 받거나 주는 함수(즉, 비순수 함수
 계산 - 외부에 영향을 받거나 주지 않는 함수(순수 함수) + 명시적인 입출력
 데이터 - 그냥 데이터 

 

결국 좋은 함수형 프로그래밍이란

비순수함수(액션)을 최대한 없애고,

순수함수(계산)을 최대한으로 만들어

테스트와 유지보수가 쉬운 코드를 만드는 것이다.

 

또 저자는 이 과정을 보다 직관적으로 설명하기 위해

명시적 입/출력, 암묵적 입/출력의 개념을 사용한다.

 

 명시적 입력 - 인자(parameter) 

 암묵적 입력 - 인자 외의 모든 입력 (ex. 지역 변수 사용) 

 명시적 출력 - return 

 암묵적 출력 - return 외의 모든 출력 (ex. alert ) 

 

명시적 입출력은 필요하다

1. 테스트를 쉽게 할 뿐 아니라,

2. 테스트가 없는 경우에도 개발자에게 예측가성성이 높은 코드를 주기 때문이다. 

 

구체적인 방법은 간단하다:

1. 계산 코드를 찾아 빼낸다.

2. 새 함수에 암묵적 입력과 출력을 찾는다.

3. 암묵적 입력은 인자로 암묵적 출력은 리턴값으로 바꾼다.

 

예시는 아래와 같다.

 

한 쇼핑몰에서 쇼핑 카트 안의 아이템들에 따라 세금을 추가하는 아래와 같은 코드가 있다.

function update_tax_dom () {
	set_tax_dom(shopping_cart_total * 0.10);
}

이 코드를 테스트 함수를 짠다고 생각해보라. 힘들다.

이 함수는 shopping_cart_total 이라는 외부 변수(지역 변수)를 건드리는 액션(비순수함수)이기 때문이다.

위의 코드에서 테스트 코드를 짤 수 있는 순수함수는 0개다.

 

이 중에서 계산(순수함수)로 나눌 수 있는 방법은 없는지 고민해보면 아래와 같다.

// 액션 - 외부데이터(dom 등)을 변경한다.
function update_tax_dom() {
	set_tax_dom(calc_tax(shopping_cart_total));
}

//계산 - 외부데이터를 일절 건드리지 않는다.(순수함수)
function calc_tax (amount) {
	return amount * 0.10;
}

이렇게 분리하면 calc_tax 는 순수함수이므로 테스트 코드를 짜기 쉽다.

이제 테스트 코드를 짤 수 있는 순수함수가 1개이다.

(순수함수를 포함하고 있지만 dom도 건드리는 비순수함수도 포함하고 있는 update_tax_dom 은 비순수함수이다.

비순수 함수를 하나라도 포함하는 함수는 비순수함수이다.)

 

이처럼 기존 테스트가 어려운(지역변수를 건드리고, dom을 건드리는) 함수를 테스트가 쉬운 함수(인자로 받아온 것만 변경, 명확한 결과값 return) 로 바꾸는 것. 이것이 1부 동안 리팩토링을 하며 배운 함수형 프로그래밍의 기초이다.

 

다시 한 번 말하지만, 액션(비순수함수)의 사용은 불가피하다.

프로그래밍의 목적은 데이터를 가공해 새로운 데이터를 만들어내는 데에 있기 때문이다.

그러나 유지보수가 쉽고 테스트가 쉬운 코드를 위해서는

이렇게 외부 데이터를 건드리는 함수인 액션의 사용을 '최소한'으로 줄이고, 

가능한 순수함수들로 채워넣는 데에 그 목적이 있다. 

 

 

데이터의 불변성

 

카피-온-라이트 - 데이터 변경 시 반드시 복사한다는 원칙

 

데이터를 바꾸지 않고 불러오기만 하는 것을 읽기(read)라고 한다.

데이터를 변경 하는 것을 쓰기(write)이라고 한다. 

카피-온-라이트(copy-on-write)는 이러한 데이터 변경 시 반드시 복사를 하여,

원본은 유지하고 복사본을 변경하라는 원칙이다.

이렇게 함으로써 원본 데이터는 불변성을 잃지 않을 수 있다.

 

데이터의 불변성을 지키는 것은 중요하다고 모두가 말한다.

불변성을 지키지 않는다면 사용할 데이터가 어디서 어떻게 바뀌어가는지 흐름을 쫓아가기 어렵고,

이는 곧 예기치 못한 side effects나 버그로 이어지게 만들기 때문이다.

 

이러한 불변성을 지켜주는 카피-온-라이트 방식을 사용하는 법은 간단하다:

 

1. 복사본 만들기

2. 복사본 변경하기(write)

3. 복사본 리턴하기

 

예시와 함께 보자.

아래는 메일링 리스트에 연락처를 추가하는 코드이며,

이메일 주소를 전역변수인 리스트에 추가한다.

const mailing_list = [];

const add_contact = (email) => {
	mailing_list.push(email);
}

const submit_form_handler = (event) => {
	const form = event.target;
    const email = form.elements["email"].value;
    add_contact(email);
}

전역 변수(외부 데이터)를 변경하는 것은

데이터 불변성에 어긋난다.

카피-온-라이트 방식을 이용해 불변성을 지켜보자.

const mailing_list = [];

const add_contact = (email) => {
	const list_copy = [...mailing_list]; // 1. 복사한다.
	list_copy.push(email); // 2. 복사본을 원하는만큼 변경한다.
    return list_copy;		// 3. 복사본을 리턴한다.
}

const submit_form_handler = (event) => {
	const form = event.target;
    const email = form.elements["email"].value;
    add_contact(email);
}

이제 전역 변수 mailing_list 의 원본은 변경되지 않는다.

 

+

"복사를 하면 비용이 많이 들지 않나요?" 라는 반박에 저자는 이렇게 대처한다. 

카피-온-라이트에서 사용하는 복사는 얕은 복사(shallow copy)이기 때문에 생각보다 비용이 많이 들지 않는다고.

이는 복사를 하지 않아 데이터의 불변성을 지키지 못할 경우 발생가능한 오류를 수정하는 비용보다 적을 것이라고 말이다.

하지만 데이터를 변경할 지도 모르는 믿을 수 없는 외부 함수(ex.남이 짠 레거시 코드)를 사용해야만 한다면

조금 비싸더라도 깊은 복사(deep copy)를 사용할 것을 저자는 권한다.

* 얕은 복사 vs 깊은 복사

 

솔직히 이 부분에 대해서는 잘 이해가 안간다. 

신뢰할 수 없는 코드가 참조를 가지고 있으면 안되기 때문에 참조를 쓰지 않고 전체를 전부 복사하는 깊은 복사를 쓰는 것이라고 한다. 

일단은

1. 자스에서는 lodash 를 이용해 깊은 복사 사용하면 편하며,

2. 신뢰할 수 없는 코드로 들어가는/오는 데이터는 나갈때,들어올 때 모두 깊은 복사로 감싸주어야 한다.

만 그렇구나~ 하고 받아들이기로 했다.

 

 

계층의 분리

 

계층이란 결국 추상화의 정도이다.

목적이나 추상의 정도가 같은 함수들을 같은 계층이라고 본다.

 

즉,

같은 계층 = 

1) 같은 목적

2) 같은 구체화 수준

라고 이해했다.

 

계층을 나누는 데에 정답은 없다.

각자의 기준과 이유가 분명하면 된다.

 

계층을 나누는 감각을 기르다보면

코드를 설계하는 감각을 기를 수 있다고 한다.

 

아래는 우리팀이 진행한 계층의 분리이다.

이를 바탕으로 최종 리팩토링을 진행하였다.

 

 

6팀

 

 

 

 

회고 글을 쓰면서,

1. 헷갈리던 함수형 프로그래밍의 개념에 대해 제대로 이해할 수 있었다.

2. 내가 무엇을 모르는지(깊은 복사가 필요한 이유)를 확실히 할 수 있었다. 

3. 계층형 설계 개념을 대충 읽었는데 다시 한 번 복습할 수 있었다. 

4. 못다한 리팩토링을 회고를 쓰면서 마무리하였다.

5. 중간에 정리하는 시간을 가지며, 복습 및 정비하는 시간을 가질 수 있었다.

 

'Extracurricular > 활동' 카테고리의 다른 글

[Next.js] 번역 컨트리뷰터  (0) 2024.03.25
새싹톤 우수상 회고  (0) 2024.03.25
[글또 8기] 글또를 시작하며  (0) 2023.01.31

https://sites.google.com/site/unclebobconsultingllc/blogs-by-robert-martin/saying-no

 

Saying "NO" - Clean Coder

Uncle Bob Consulting LLC.

sites.google.com

---

Saying "NO"

Saying "NO".

Posted by Uncle Bob on 12/04/2009

I saw this cartoon in a tweet today. It’s the story of how a boss corrupts the work of a professional. It’s a funny cartoon, and a sad story that happens all too often in our profession. But who, exactly, was at fault?...
The difference between a laborer and a professional is that a laborer takes orders from his boss, and a professional provides input to his superiors. Laborers are hired to take direction. Professionals are hired to ensure that the direction chosen makes sense.

Imagine this conversation between a patient and a doctor:

Patient: “My arm hurts.” 
Doctor: “What would you like me to do about it?” 
Patient: “Make my arm stop hurting.” 
Doctor: “Do you want me to cut it off?, I can do that.” 
Patient: “No, I just want it to stop hurting.” 
Doctor: “I could cut all the nerves to your arm. That’ll stop it.” 
Patient: “Isn’t there something less drastic you could do?” 
Doctor: “Ooops, sorry, time for my break.”


Clearly we don’t expect doctors to behave this way. Even though the patient is the boss, the patient expects the doctor to have the answers and help set the direction.
Here’s another version of the conversation:

Patient: “I want you to cut my arm off.” 
Doctor: “What’s wrong with your arm?” 
Patient: “It hurts. I’m tired of it. Just cut it off.” 
Doctor: “Let me see your arm. Hmmm. Looks like you’ve got a sprain or perhaps a hairline fracture. We should take some X-Rays.” 
Patient: “No, just cut it off.” 
Doctor: “Sir, I do not cut off healthy arms.” 
Patient: “But I’m paying you. You have to do what I say!” 
Doctor: “No, sir, I don’t. Cutting off your arm would violate my oath.”


Which of these two doctors would you rather be? Now project these two doctors into your own profession, and which would you rather be?

Programmers are professionals. They know more about designing and implementing software systems than their bosses do. Indeed, they are hired for this knowledge and expertise. And they have a solemn duty to prevent their managers from doing things that would be harmful.

All this boils down to one simple thing. Professionals are willing to say “No”. When their managers come to them with direction that makes no sense, a professional programmer will refuse the direction.

Is this risky? Sure. But part of being a professional is the willingness to stand on principle. There are lines that a professional will not cross. Of course saying “No.” is only one side of the coin. Professionals are also expected to explain their positions, and come up with viable alternatives. Professionals negotiate with their superiors until both parties are satisfied with the chosen direction.

The poor web-designer schmuck in that cartoon was not behaving as a professional. He was behaving as a laborer. The fiasco at the end was his fault. He should have said “No.” and started a negotiation with his customer instead of just doing everything the customer said.

The cartoonist painted the web-designer as a wise but impotent victim, and the boss as the overbearing dufus. The reality is that the web-designer took the role of the victim voluntarily and shirked his responsibility to refuse direction that he considered harmful.

If you are a professional, you never allow yourself to be put in the role of the victim.

브라우저 ≠ 인터넷  웹

1년전 처음 코딩을 접했을 때, 비전공자였던 나는 브라우저라는 개념이 생소했다. '브라우저...들어보긴 했는데 그냥 인터넷 아니야?' 이정도 이해만이 내가 가진 전부였다. 그래서 브라우저가 무엇인지 생소한 분들을 위해 브라우저가 무엇인지에 대해서부터 짚고 넘어가고자 한다.

간단히 추상적으로 보자면 아래와 같다:

인터넷: 컴퓨터들이 정보 공유를 위해 서로 연결된 방식. 예전에는 직접 전선(유선)으로 컴퓨터와 컴퓨터를 연결했다. 하지만 네트워크의 등장으로 무선으로도 컴퓨터와 컴퓨터 연결이 가능해졌다. 즉, 현재 인터넷은 네트워크 방식인 셈이다.
웹(a.k.a World Wide Web): 사람들을 이어주는 정보 공간이다. 웹 서버들(건물)의 정보 공간(도시)
웹 서버: 하나의 빌딩.
웹사이트: 하나의 사무실.
브라우저: 인터넷을 이용하게 해주는 도구. 정확히는 웹 문서 코드를 유저에게 그려주는 역할을 한다.

인터넷은 컴퓨터들이 서로 연결된 방식이다. 눈에 보이는 개념은 아니지만 인터넷은 어디에나 있다. 인터넷을 이용해 이메일을 보낼 수도, 파일을 다운보낼 수도 있지만, 역시 가장 많이 쓰이는 인터넷의 용도는 웹에 접근하는 것이다. 웹(World Wide Web)을 남산타워에서 내려다본 서울의 빽빽한 빌딩들이라고 생각하면 편하다. 하나의 빌딩은 웹을 제공하는 웹 서버(언제나 인터넷에 연결되어 정보를 저장 및 제공하는 컴퓨터)이다. 우리가 프로그램으로 웹사이트를 만드는 것은 이 하나의 빌딩 안에 한 사무실(웹사이트)을 렌트하는 것과 같으며, 그 사무실의 주소가 웹 주소가 된다. 우리는 이 사무실에서 정보들을 엮고 연결해 웹을 이용하는 유저들에게 정보를 제공한다. 웹사이트 속 정보는 컴퓨터 언어(HTML, CSS, JavaScript)로 되어있다. 이 정보들은 당연히 프로그래밍 언어를 모르는 대부분의 사람들에게 친화적이지 않다. 이것들을 우리가 친숙해하는 인간언어(텍스트), 이미지 혹은 비디오로 바꾸어 유저들에게 보여주는 역할을 하는 프로그램을 브라우저라고 한다. 따지고 보면 웹은 빽빽한 빌딩들로 가득찬 아주 거대한 가상의 도시인 것이다. 이 도시에서는 수많은 사무실에서 컴퓨터 언어로 쓰인 문서로 소통한다. 다양한 컴퓨터 언어는 브라우저를 통해 우리가 공통으로 이해할 수 있는 수단(텍스트, 이미지 등)으로 번역된다.

 

결국 브라우저는 결국 인터넷에 떠도는 여러 정보를 이용하는 하나의 방법에 불과하다. 인터넷을 인터넷에 접속하는 방법은 꼭 브라우저일 필요 없다. 다양한 이유로 우리는 CLI, 앱 등의 방법으로 브라우저 대신 인터넷을 이용하고 있다. 그렇다. 우리가 개발시 사용하는 `npm i package`와 같은 CLI나, 모바일 기기라면 '앱'에 접속하는 것 모두 인터넷에 접속해 원하는 데이터를 사용하는 인터넷 이용 방법 중 하나이다.

 

하지만 아다시피 개발자를 제외한 많은 사람들은 CLI를 사용하지 않는다. 사용자로써 대부분은 브라우저 혹은 앱을 통해 인터넷에 접근하게 되는데, 아마도 아래와 같은 장점들 덕이라 생각한다:

1. 브라우저는 웹 페이지의 다양한 미디어 콘텐츠를 재생할 수 있습니다. 오디오나 비디오 파일, 이미지, 플래시 애니메이션 등을 브라우저 내에서 볼 수 있습니다. 또한 JavaScript와 같은 스크립트 언어를 지원하여 웹 페이지에 동적인 기능을 추가할 수 있습니다. 이러한 기능들은 사용자 경험을 향상시키고 다양한 웹 서비스를 즐길 수 있게 해줍니다.

2. 또한, 브라우저는 보안 기능을 제공하여 사용자를 안전하게 보호합니다. 예를 들어, 악성 웹 사이트로부터의 경고, 안전하지 않은 연결에 대한 경고, 팝업 창 차단 등의 기능을 제공합니다. 브라우저 개발사들은 보안 취약점을 해결하고 업데이트를 제공하여 사용자의 개인 정보와 시스템을 보호합니다.

3. 마지막으로, 브라우저는 다양한 플러그인과 확장 기능을 지원합니다. 사용자는 원하는 기능을 추가하고 확장할 수 있으며, 광고 차단, 비밀번호 관리, 웹 개발 도구 등 다양한 분야에서 활용할 수 있는 확장 기능을 설치할 수 있습니다.

 

브라우저의 작동원리

 

The information is transferred using the Hypertext Transfer Protocol, which defines how text, images and video are transmitted on the web. This information needs to be shared and displayed in a consistent format so that people using any browser, anywhere in the world can see the information.

 

Creating consistency between browsers, so that any user can enjoy the internet, regardless of the browser they choose, is called web standards.

 

When the web browser fetches data from an internet connected server, it uses a piece of software called a rendering engine to translate that data into text and images. This data is written in Hypertext Markup Language (HTML) and web browsers read this code to create what we see, hear and experience on the internet.

 

Hyperlinks allow users to follow a path to other pages or sites on the web. Every webpage, image and video has its own unique Uniform Resource Locator (URL), which is also known as a web address. When a browser visits a server for data, the web address tells the browser where to look for each item that is described in the html, which then tells the browser where it goes on the web page.

Cookies (not the yummy kind)

Websites save information about you in files called cookies. 

 

HTML - 용어 사전 | MDN

1990년, 팀 버너스리는 Web의 비전 중 하나로서 하이퍼텍스트 (en-US)라는 개념을 정의하고, 그 이듬해에 SGML (en-US)에 기초한 마크업을 통해 구체화했습니다. IETF (en-US)는 1993년에 HTML을 공식 지정했

developer.mozilla.org

 

참조

https://www.mozilla.org/en-US/firefox/browsers/what-is-a-browser/

 

What is a web browser?

A web browser takes you anywhere on the internet, letting you see text, images and video from anywhere in the world.

www.mozilla.org

 

https://web.dev/howbrowserswork/

 

How browsers work

 

web.dev

https://www.youtube.com/watch?v=fyOSkkQK14w 

https://www.youtube.com/watch?v=J8hzJxb0rpc 

 

+ Recent posts