[문제 자세히 보기] (https://programmers.co.kr/learn/courses/30/lessons/12916)

[나의 풀이]

function solution(s){
    let upperCase = s.toUpperCase()
    let p = []
    let y = []

    for (let i=0; i < upperCase.length; i++) {
      if ( upperCase[i] === "P") p.push(s[i])
      else if ( upperCase[i] === "Y") y.push(s[i])
    }

      if (p.length === y.length) return true
    else return false
}

변수 upperCase에 주어진 s를 모두 대문자로 변경하여 저장하였다. 그후 for문을 돌면서 대문자 "P"와 "Y"랑 일치하는 문자를 변수p 와 y에 저장하고 두 변수의 크기를 비교하여 참, 거짓을 구분하였다.

생각하기 작성한 코드를 보면 p와 y 변수를 배열로 활용하였는데 내가 알고 있는 것이 맞다면 배열이나 객체의 경우 number나 string 등에 비해 메모리를 더 많이 사용하는 것으로 알고 있다.

그렇기 때문에 메모리를 적게 사용하는 방법을 생각해 봤는데 아래처럼 number를 사용하면 조금은 더 좋은 코드가 될 것 같다.

let p = 0
let y = 0

for (let i=0; i < upperCase.length; i++) {
  if ( upperCase[i] === "P") p++
  else if ( upperCase[i] === "Y") y++
}

if (p === y) return true
else return false

다른 사람들의 풀이

생각하기에서 카운트를 사용하여 코드를 작성하였는데 다른 사람들의 풀이를 찾아보면서 이 코드도 더 간단하게 작성할 수 있는 방법이 있었다.

function solution(s){
    let str= s.toLowerCase();
    let count = 0
    for(let i = 0; i <s.length; i++){
        if(str[i]==="p") count++;
        else if(str[i]=== "y") count--
    }
    return count === 0 ? true : false
}

내가 작성했던 코드는 p와 y의 카운트를 따로 변수에 저장하여 비교하는 코드였는데 위의 코드는 p와 동일한 개수만큼 카운트를 올리고 y와 동일한 개수만큼 카운트를 줄여서 결과값이 0이라면 true를 아니라면 false를 반환하도록 하는 코드였다.

변수를 하나 줄이기 때문에 당연히 메모리는 더 효율적으로 관리 될 것이고 마지막의 참 거짓을 판한하는 코드도 삼항연사자를 사용하여 보기 좋게 작성하였다.

위의 것은 그래도 내가 작성했던 코드와 비슷한 방식의 풀이인데 다른 메소드를 사용하여 매우 짧게 코드를 작성하는 방법도 있었다.

function numPY(s){
    return s.toUpperCase().split("P").length === s.toUpperCase().split("Y").length;
}

function numPY(s) {
  return s.match(/p/ig).length == s.match(/y/ig).length;
}

두 코드를 보고 정말 많이 공부하고 생각을 조금 더 해봐야겠다는 생각이 든다.

[문제 자세히 보기] (https://programmers.co.kr/learn/courses/30/lessons/12915)

[나의 풀이]

function solution(strings, n) {
    let arr = strings.sort((a, b) => {
        if (a[n] > b[n]) return 1
        else if (a[n] < b[n]) return -1
        else {
            if (a > b) return 1
            else return -1
        }
    })

  return arr
}

이번 문제도 결국 정렬문제이기에 sort() 메소드가 가장 먼저 생각나서 해당 메소드를 사용했다 다만 여러가지 조건이 있다보니 if, else if를 사용하여 조건에 맞게 정렬할 수 있도록 하였다.

        if (a[n] > b[n]) return 1
        else if (a[n] < b[n]) return -1
}

위의 두 조건에서는 a와 b로 주어지는 요소의 n번째 index를 비교하여 a의 n번째가 크다면 1을 리턴 반대로 작다면 -1을 리턴

        else {
            if (a > b) return 1
            else return -1
        }

마지막으로 n번째의 요소가 동일하다면 해당 요소의 앞 요소를 비교하여 정렬하도록 하였다.

이렇게 작성하고 보니 뭔가 코드가 보기 애매한 느낌이라 if를 여러개 사용하였는데 코드를 보기에는 아래의 코드가 더 읽기 쉬운거 같다.

function solution(strings, n) {
  let arr = strings.sort((a, b) => {
    if (a[n] > b[n]) return 1;
    if (a[n] < b[n]) return -1;
    if (a[n] === b[n]) {
      if (a > b) {
        return 1
      } else return -1
    }
  })

  return arr
}

[문제 자세히 보기] (https://programmers.co.kr/learn/courses/30/lessons/12948)

[나의 풀이]

function solution(n) {
  let a = 0
  for (let i=0; i**2 <= n; i++) {
    if (i**2 === n) {
      a = (i+1)**2
    } else {
      a = -1
    }
  }

  return a
}

제곱이란 것이 주어진 숫자와 동일한 값으로 곱해진 것이기에 for문을 사용하여 반복하도록 하였다. 다만 for문의 반복 조건을 i**2 <= n으로 주어 i가 제곱되었을 때 n과 같다면 반복을 멈추도록 하였다.

그 후는 if의 조건에 i**2 === n i의 제곱이 n과 같다면 i+1의 제곱을 하도록 작성하였다.

마지막으로 예외처리 되는 조건 n이 양의 정수 x의 제곱이 아니라면 -1을 리턴의 경우 처음 if에서 만약 n이 3으로 주어졌을 때

1*1 === n    // false
2*2 === n    // false
3*3 === n    // false

위와 같이 조건에 해당하지 않아 두번째 else의 a = -1로 결과가 나오게 된다.

이렇게 풀고 제출해보니 아래 이미지처럼 코드의 속도가 오래걸리는 부분들이 있었다. 테스트2, 테스트4, 테스트9 등이 그렇고 반대로 0.08ms, 0.05ms 등의 비교적 빠른 속도의 테스트도 있었는데 n으로 주어지는 숫자가 커질수록 for문이 오랫동안 돌기 때문에 그런거 같다.

이렇게 주어지는 n의 수가 커졌을 때도 코드가 빠르게 동작하도록 더 효율적인 코드를 고민 하도록 하자.

[문제 자세히 보기] (https://programmers.co.kr/learn/courses/30/lessons/12933)

[나의 풀이]

function solution(n) {
    let answer = String(n).split("").sort((a, b) => b - a).join("");

    return Number(answer)
}

문제처럼 내림차순, 오름차순 등의 정렬이 필요할 때 sort()를 사용할 수 있다. sort() 메소드는 유니코드 포인트를 따르는데 아래의 표와 같다. 표를 보면 대문자 A => U+0051 이런식으로 각 문자에 해당하는 포인트가 정해져 있고 이것을 기준으로 정렬해준다.

그렇기에 인수로 전해지는 n은 숫자와 문자 어떤것이 되더라도 정렬이 가능해진다.

n으로 전달받은 number를 문자로 변경하고 split으로 각 문자를 분리해주었다. 즉, 분리된 문자는 n=118372라는 숫자이기에 n="118372"문자가 된 후 ["1", "1", "8", "3", "7", "2"]가 된다.

이것을 sort()로 정렬하고 join()으로 다시 합하여 return 할 때 숫자로 변경하여 리턴하였다.

[문제 자세히 보기] (https://programmers.co.kr/learn/courses/30/lessons/86491)

문제를 보면 명함을 돌려서 수납할 수 있다는 말이 있고 모든 명함을 수납할 수 있는 가장 작은 사이즈의 지갑을 만드려고 한다.

가로의 최대 길이와 세로의 최대 길이를 구해야하는데 최대 길이를 구할 때 회전했을 경우 즉 [a, b] 명함의 가로세로 길이, a와 b의 순서가 바뀌어도 된다는 것으로 이해했다.

sort()를 사용하여 각각의 배열 안의 숫자를 오름차순으로 변경하고 for문을 통해 돌고있는 i로 각각의 명함 크기가 bestSize의 [0]과 [1]보다 크면 bestSize에 저장하여 각각의 최대 사이즈를 구하고 곱하는 방식으로 해결하였다.

[나의 풀이]

function solution(sizes) {
  let bestSize = [0,0]

  for (let i =0; sizes.length > i; i++) {
    let [a,b] = sizes[i].sort((a,b) => a-b)
    if (a > bestSize[0]) {
      bestSize[0] = a
    }
    if (b > bestSize[1]) {
      bestSize[1] = b
    }
  }

  return bestSize[0]*bestSize[1]
}

• 배열 안의 원소를 정렬하는 함수이다.
• 인수를 지정하지 않으면 유니코드 포인트를 따라 정렬된다.
• 인수를 지정하여 정렬방법을 변경할 수 있다.
  
  

let numbers = [4, 16, 3, 53, 1, 0];

오름차순 정렬
numbers.sort((a, b) => a-b) // [0, 1, 3, 4, 16, 53]

내림차순 정렬
numbers.sort((a, b) => b-a) // [53, 16, 4, 3, 1, 0]

위의 코드에서는 화살표 함수를 사용하였는데 아래와 같이 사용할 수도 있다.

let numbers = [4, 16, 3, 53, 1, 0];

오름차순 정렬
numbers.sort(function(a, b) {
    return a-b
}) 
// [0, 1, 3, 4, 16, 53]

[문제 자세히 보기] (https://programmers.co.kr/learn/courses/30/lessons/12948)

[나의 풀이]

function solution(phone_number) {
  let answer = '';
  const count = phone_number.length

  for (let i=0; count > i; i++) {
    if (i <= count -5) {
      answer += "*"
    }
    if (i > count -5) {
      answer += phone_number[i]
    }
  }
  return answer;
}

문제를 읽고 쉽게 생각해보면 결국 맨 뒤의 4개의 숫자만 남기고 앞의 모든 숫자를 *로 변경하면 된다고 생각했다.

phone_number를 받았을 때 for문을 사용하여 순회하고 if를 사용하여 index가 -5보다 작거나 같으면 *을 더하여 answer에 저장, -5보다 크면 해당 index의 값을 그대로 더하였다.

jQuery?

몇 년 전까지는 jQuery에 대한 의존도가 다소 높았기에 jQuery가 많이 사용되었지만 2015년을 기점으로 그 의존도가 점점 내려가면서 현재는 거이 사용하지 않는 기술이 되었다.

그전에 jQuery를 사용했던 이유는 아래와 같은 이유가 있다고 한다.

• 웹페이지 상에서 엘리먼트(Element)를 쉽게 찾고 조작할 수 있다.
• 대부분의 웹브라우저에 대응되는 호환성
• 네트워크, 애니메이션 등 다양한 기능을 제공한다.
• 짧고 유지관리가 용이한 코드 작성을 지원한다.
  
  

jQuery를 점점 사용하지 않는 이유

웹 브라우저 환경의 변화

jQuery를 사용했던 이유는 여러가지가 있겠지만 당연하게도 편리하고 다양한 기능을 제공하기 때문이다. 그런데 예전에는 internet explorer 브라우저의 점유율이 너무나 높았던 시기가 있고 해당 브라우저에서 생산성과 가독성을 높인 코드를 작성하기 위해서 jQuery가 필요했다. 그러나 크롬 브라우저의 등장과 함께 모바일 브라우저 등 다양한 브러우저가 등장하면서 우수한 렌더링 엔진과 빠른 업데이트 등으로 브라우저 점유율에 변동이 생겼고 더 이상 jQuery를 사용하지 않더라도 브라우저 자체에서 편리한 기능을 제공하게 되면서 필요성이 감소하였다.

그래서 jQuery를 배워야 할까?

솔직히 말해서 jQuery를 점점 사용하지 않는다고 하더라도 아직까지 종종 모습을 보이는 것을 보면 한번 쯤은 관련 문서를 읽어봐도 괜찮지 않을까 싶다. 그렇다고 jQuery에 대해서 깊게 공부한다기 보다는 jQuery관련 내용이 나왔을 때 해당 코드가 무엇을 의미하는지 정도는 알고 있다면 도움이 될 것이라고 생각한다. 즉 중요도는 떨어지더라도 여유가 된다면 공부해보자? 정도로 볼 수 있을거 같다.

[이미지 출처] (https://www.youtube.com/watch?v=LwvXVEHS638)

위의 이미지는 우리가 리액트로 웹을 만들 때 컴포넌트들의 트리구조를 나타내고 있는 이미지다. 이러한 트리구조를 가진 리액트에서 전역(지역) 데이터를 상위 컴포넌트에서 하위 컴포넌트로 전달해 주려면 prop를 통해서 위에서 아래로 계속해서 내려줘야 하는데 컴포넌트의 구조가 단순하고 적다면 크게 문제가 되지 않지만 이 구조가 복잡해지고 많아진다면 문제가 발생한다.

1. prop이 여러 컴포넌트에서 사용되면서 의도치 않은 값이 될 수 있다.
2. 컴포넌트의 뎁스가 깊어질수록 prop를 계속해서 사용해야 하기에 개발자는 에러가 생겼을 때 위치를 특정하기가 힘들어진다.
3. prop이 변경될 경우 페이지는 리렌더링이 이루어지는데 아래의 컴포넌트에서 변화가 생기면 상위 컴포넌트도 불필요한 리렌더링이 이루어진다.

그렇기 때문에 이를 해결하기 위한것이 context로 app 컴포넌트에서 데이터를 가지고 있다면 필요한 곳에서만 해당 데이터를 가져다 사용할 수 있게 해주어서 위의 문제점들을 해결한다.

context와 redux

두 가지의 도구는 얼뜻 보면 동일한 기능을 하는 것 같지만 사용의 목적이 다르다.

context 특징

• 다양한 컴포넌트에 전역적인 데이터를 전달하기 위해 사용하는 도구이며 "상태관리를 위한 도구는 아니다." 상태관리란 시간이 지남에 따라 상태가 변경되는 방식을 말하며 리액트에서 상태를 관리하는 도구는 useState와 useReducer를 통해서 이루어진다.

• 리액트의 내장 기능이다.

그렇다면 언제 사용하는가?

props drilling을 피할 때 즉 context.provider 내부에서 상태 변경이 거이 없을 때 하위 컴포넌트에 전달하는 용도로 쓰는데 사용하기 좋다. props drilling은 props를 하위 컴포넌트로 전달하는 용도로"만" 쓰이는 컴포넌트들을 거치면서 react component트리의 한 컴포넌트에서 다른 곳으로 데이터를 전달하는 과정을 말한다.

장점

• prop을 사용하여 데이터를 전달하지 않아도 되기에 코드가 짧아진다.

단점

• context를 사용하려면 Provider를 사용해야 하는데 이를 분리할 수 없기에 재사용성이 떨어진다.
  
  
  

redux 특징

애플리케이션 전체의 상태 중앙 저장소 역할을 하며 애플리케이션의 상태를 예측 가능한 방식으로 업데이트 하기 위해서 사용하는 라이브러리다.

여러 위치에 많은 양의 상태 값이 존재 할 때

• 업데이트 로직이 복잡 할 때
• 거대한 코드 베이스를 여러 사람이 작업 할 때
• 상태 변경 시각화가 필요 할 때
• 사이드이펙트, 메모이제이션, 데이터 직렬화등 관리를 위해 더 강력한 기능이 필요 할 때

장점

• 상태의 중앙화 웹사이트의 상태를 한 곳에서 관리할 수 있기 때문에 store prop을 사용하지 않고 에러를 찾아내기 쉽다.
• 단방향 모델링 리덕스는 action은 dispatch를 거쳐서 데이터가 변경되고 store를 통해 전달받아 웹에 보여준다. 이 단방향 모델링으로 디버깅이 쉽다.
• 읽기전용 취급 리덕스의 상태는 읽기 전용으로 취급한다. 실제로 읽기 전용으로 만드는 것은 아니기에 주의할 필요가 있으나 이로인해 이전 상태로 돌아가기 위해서 이전 상태를 현재 상태에 덮어쓰기만 하면 된다.

단점

• 익숙해 지기전에는 리덕스를 쓰기 위해서 reducer, store, dispatch, action 등 작성해야 하는 코드가 많고 복잡하기도 하다.

다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다.

1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요.

참고로 각 숫자에 대응되는 영단어는 다음 표와 같습니다.

문제 자세히 보기 : https://programmers.co.kr/learn/courses/30/lessons/81301

[나의 풀이]

function solution(s) {
    const answer = Number(s.replace(/zero/g, 0)
    .replace(/one/g, 1)
    .replace(/two/g, 2)
    .replace(/three/g, 3)
      .replace(/four/g, 4)
      .replace(/five/g, 5)
      .replace(/six/g, 6)
      .replace(/seven/g, 7)
      .replace(/eight/g, 8)
      .replace(/nine/g, 9))

    return answer;
}

정규식을 사용하여 문제를 풀었는데... 일단 결과는 성공적으로 작동 잘 되었다. 다만 지금 풀이가 문제라고 생각되는게 replace를 여러번 반복했는데 이게 지금은 09까지만 고려하면 되기에 반복이 다소 적지만 저런 조건이 추가 될 때마다 replace를 반복해야하니 더 좋은 방법을 찾아보자

문제 설명

카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다.

아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다. "네오"는 다음과 같이 7단계의 순차적인 처리 과정을 통해 신규 유저가 입력한 아이디가 카카오 아이디 규칙에 맞는 지 검사하고 규칙에 맞지 않은 경우 규칙에 맞는 새로운 아이디를 추천해 주려고 합니다. 신규 유저가 입력한 아이디가 new_id 라고 한다면,

1단계 new_id의 모든 대문자를 대응되는 소문자로 치환합니다. 2단계 new_id에서 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.)를 제외한 모든 문자를 제거합니다. 3단계 new_id에서 마침표(.)가 2번 이상 연속된 부분을 하나의 마침표(.)로 치환합니다. 4단계 new_id에서 마침표(.)가 처음이나 끝에 위치한다면 제거합니다. 5단계 new_id가 빈 문자열이라면, new_id에 "a"를 대입합니다. 6단계 new_id의 길이가 16자 이상이면, new_id의 첫 15개의 문자를 제외한 나머지 문자들을 모두 제거합니다. 만약 제거 후 마침표(.)가 new_id의 끝에 위치한다면 끝에 위치한 마침표(.) 문자를 제거합니다. 7단계 new_id의 길이가 2자 이하라면, new_id의 마지막 문자를 new_id의 길이가 3이 될 때까지 반복해서 끝에 붙입니다.

자세한 문제는 https://programmers.co.kr/learn/courses/30/lessons/72410 참고

[문제] 신규 유저가 입력한 아이디를 나타내는 new_id가 매개변수로 주어질 때, "네오"가 설계한 7단계의 처리 과정을 거친 후의 추천 아이디를 return 하도록 solution 함수를 완성해 주세요.

[제한사항] new_id는 길이 1 이상 1,000 이하인 문자열입니다. new_id는 알파벳 대문자, 알파벳 소문자, 숫자, 특수문자로 구성되어 있습니다. new_id에 나타날 수 있는 특수문자는 -_.~!@#$%^&*()=+[{]}:?,<>/ 로 한정됩니다.

[나의 풀이]

function solution(new_id) {
    var answer = new_id.toLowerCase()
    .replace(/[^a-z0-9-_., '']/g,'')
    .replace(/[.]{2,}/g,".")
    .replace(/^[.]|[.]$/g,"")

    if (answer==='') {
      answer = 'a'
    } else if (answer.length >= 16) {
      answer = answer.slice(0, 15).replace(/[.]$/g,"")
    } 

    while(answer.length < 3) {
      answer += answer[answer.length - 1]
    }

    return answer;
}

실행 결과는 아래와 같이 정확성 80% 성공으로 처참하게 실패...

[다시 생각해보기]

무엇이 문제인지 생각해보면서 이거저거 건들여봤는데 두번째 조건이 틀렸었다.

.replace(/[^a-z0-9-_., '']/g,'')

잘 보면 9-_. 다음에 ,부터 ''까지 작성된 것이 있는데 이건 의도하고 작성한게 아니고 정규식을 작성하면서 딴짓을 한 것인지 잘못 작성되어 있었다 ;;

.replace(/[^a-z0-9-_.]/g,'')

아래와 같이 고치니 문제없이 통과!

[최종답 & 문제풀이]

function solution(new_id) {
    var answer = new_id.toLowerCase()
    .replace(/[^a-z0-9-_.]/g,'')
    .replace(/[.]{2,}/g,".")
    .replace(/^[.]|[.]$/g,"")

    if (answer==='') {
      answer = 'a'
    } else if (answer.length >= 16) {
      answer = answer.slice(0, 15).replace(/[.]$/g,"")
    } 

    while(answer.length < 3) {
      answer += answer[answer.length - 1]
    }

    return answer;
}

1단계 toLowerCase()을 사용하여 모든 문자를 소문자로 치환

2단계 .replace(/[^a-z0-9-_.]/g,'') .replace메서드와 정규식을 사용하여 a부터 z까지, 0부터 9까지, -, _, . 를 제외한 문자열을 제거

3단계 .replace(/[.]{2,}/g,".") 2단계를 거친 문자열에서 .이 2번 이상 반복되면 .한개로 치환

4단계 .replace(/^[.]|[.]$/g,"") 3단계 이후 문자열에서 처음과 끝이 .이면 빈 문자열(삭제)로 치환

5~6단계 if문을 사용하여 answer가 ''이면 'a'로 치환 이후 else ifd에서 answer의 길이가 16이상이면 slice를 사용하여 15번째 이후 문자를 제거하고 .replace(/[.]$/g,"")로 마지막이 .이면 제거

7단계

while(answer.length < 3) {
      answer += answer[answer.length - 1]
    }

while문을 사용하여 조건이 3 이하일 경우 answer의 마지막 단어를 계속 추가하도록 작성

7단계에서 while문은 거이 사용하지 않다보니 if문을 사용하여 작성하려 했는데 작성하는 과정에서 굳이? 더 쉽게 작성하는 방법이 없을까 생각하게 되어서 while문으로 변경하게 되었다.

TCP 헤더 TCP통신으로 데이터를 보낼 때 헤더를 붙여서 보내는 것을 TCP 헤더라고 하며, TCP 헤더가 붙은 데이터를 세그먼트라고 한다. 이 헤더에는 출발지 포트번호(16비트)부터 목적지 포트번호(16비트)... 옵션까지 11가지의 데이터가 포함되어 있다.

1. 코드비트

코드비트에는 정보의 연결 제어 정보가 기록되고 이 기록을 토대로 가상의 독점 통신로를 확보한다. 가상의 독점 통신로 : TCP통신에서 정보를 전달하기 위해 사용되는 가상의 통신로. 연결의 확립 및 데이터 전송

3-way 핸드셰이크 데이터를 보내기 전 연결 확립을 위해 패킷 요청을 세번 교환하는 과정. 코드비트 중 ACK=확인 응답, SYN=연결요청을 사용하여 패킷을 교환하는 과정을 거친다.

1. A 컴퓨터가 B컴퓨터에 통신하기 위해서 연결 확립 요청(SYN) 전달
2. B 컴퓨터는 허가 응답을 위해 연결확립 응답(ACK) 전달, 동시에 B 컴퓨터도 데이터 전송 허가를 받기위해 A 컴퓨터에 연결 확립 요청(SYN)
3. A 컴퓨터가 받은 B 컴퓨터의 응답에 대한 응답으로 연결확립 응답(ACK) 전달

위의 경우는 연결을 하기위한 과정이고 반대로 연결을 해제하기 위한 과정도 있다. 코드비트 중 ACK=확인 응답, FIN=연결 종료를 사용하고 과정은 위의 1~3과 동일하지만 SYN이 FIN으로 대체되어 있다고 생각하면 편하다.

2. 일련번호, 확인 응답 번호

일련번호는 송식 측에서 수신측에 해당 데이터가 몇 번째 데이터인지를 알려주며 몇 번째 데이터를 받았는지 확인하여 수신측에 알려거나 다음 데이터를 요청하는데 사용된다.

재전송 제어 데이터가 손상 및 유실 되었을 경우 데이터를 재전송 시켜달라고 하는데 이것을 재전송 제어라고 한다.

3. 윈도우 크기

세그먼트를 하나 보낼 때 마다 응답을 기다리는 방식이 3-way 핸드셰이크 방식인데 이 방식의 경우 매번 응답을 기다려야해서 효율이 좋지 않다. 그렇기에 세그먼트를 연속해서 보내고 응답을 한번에 받게 되면 효율이 높아지는데 많은 양의 세그먼트를 보낼 경우 그것을 보관하는 장소를 버퍼라고 하며 버퍼보다 양이 많아 넘칠경우 이것을 오버플로라고 한다.

오버플로가 발생하지 않도록 버퍼의 한계 크기를 정해두는데 윈도우 크기값에 그 크기를 저장해둔다.

• 오류를 점검하는 기능 네트워크가 데이터를 전송할 때 물리계층, 데이터 링크 계층, 네트워크 계층 3개만 있으면 데이터를 보내는 것은 가능하다. 그러나 데이터가 손상되거나 유실되었을 때 문제점을 해결해주지는 못 한다. 이러한 문제를 해결해주는 계층이 전송계층으로 목적지에 신뢰할 수 있는 데이터를 전달하는 역할을 해준다.

  • 이 단계에서 데이터에 오류가 생기면 데이터를 재전송하도록 요청한다.
    

• 전송된 데이터의 목적지가 어떤 애플리케이션인지 구분하는 기능 데이터를 전송받은 후 해당 데이터가 어떤 애플리케이션에서 사용되는 데이터인지 확인한다. ex) A데이터가 메일 앱에서 사용되는 것인지 브라우저 앱에서 사용되는지 확인 후 알맞은 곳으로 데이터를 전송하게 해준다.

통신 유형

데이터를 전달하는 통신 유형은 두 가지가 있다.

• TCP(연결형 통신) 신뢰성과 정확성을 목적으로 통신. 데이터가 목적지까지 문제없이 전달되는지 확인하는데 이 방식은 데이터 송수신 간에 확인을 하면서 보내게 된다.

  
  

• UDP(비연결 통신) 효율성(속도)를 목적으로 통신. TCP와 다른 점은 데이터를 송신할 때 수신측에 확인을 받지 않고 일방적으로 데이터를 전달한다.

  
  

이미지 출처 : 모두의 네트워크_도서

TCP/IP모델을 설명할 때 OSI모델과의 차이점에 계층의 갯수가 있었다. OSI모델의 물리 계층과 데이터 링크 계층이 TCP/IP모델에서는 네트워크 접속 계층에서 해당 역할을 대신하고 있다. 즉 네트워크 접속 계층은 두 계층을 가지고 있는 것이니 두 가지에 대해서 조금 더 자세히 알아보자.

물리 계층

데이터를 송수신 할 때 0과 1로 이루어진 비트열의 데이터를 전기 신호로 변환해야 한다. 전기 신호의 종류에는 아날로그 신호와 디지털 신호 두가지가 있다.

두 신호에 대한 자세한 설명은 내용이 깊어지기에 잠시 미루고 우리가 데이터를 전송할 때는 디지털 신호를 사용한다.

그렇다면 어떻게 비트열 데이터를 디지털 신호로 변경할까? 컴퓨터를 조금 알고 있다면 들어보았을 랜 카드라는 것이 그 역할을 한다.

데이터 링크 계층

데이터 링크 계층은 물리 계층에서 변환한 데이터를 송수신하는 계층이다. 조금 더 설명하면 네트워크 장비 간의 신호를 주고받는 규칙을 정하는 계층이며, 여러가지 규칙이 있지만 이더넷을 많이 사용한다.

여러개의 네트워크 장비를 랜에 연결하기 위해서 사용하는 허브(또는 스위치)가 있다. 위의 이미지가 허브인데 pc1부터 pc4까지를 랜에 연결하여 서로 데이터를 주고 받을 때 pc1에서 pc3으로 데이터를 주려고 해도 실제로 데이터는 pc2~pc4까지 모두 전달하게 된다. 즉 우리가 원치 않는 장비로 데이터를 전달해주게 된다.

이때 데이터 링크 계층에서 규칙을 정해 데이터를 전달하더라도 목적지의 pc가 아니라면 무시하도록 해준다.

이더넷은 무엇일까?

허브를 사용해서 데이터를 주고 받을 때 만약 pc1과 pc3이 동시에 다른 pc로 데이터를 전달하게 되면 두 데이터가 서로 충돌하게 된다. 이때 이러한 충돌이 일어나지 않도록 규칙을 정한 구조를 이더넷이라고 하고 이 방법을 CSMA/CD라고 한다.

CSMA/CD

• CS는 데이터를 보내려하는 장비가 케이블에 신호가 잘 연결되어 있는지 확인하는 규칙이다.
• MA는 케이블에 데이터가 흐르고 있지 않다면 데이터를 보내도록 하는 규칙이다.
• CD는 충돌이 발생하고 있는지 확인하는 규칙이다.

이 세가지 규칙을 통해서 pc1과 3이 동시에 데이터를 보낼 때 pc1의 데이터를 먼저 보내고 pc3은 그동안 대기하다가 pc1이 데이터를 다 보내면 pc3이 데이터를 보내도록 해서 충돌을 막아준다.

스위치

CSMA/CD는 효율이 별로?

CSMA/CD 방식의 경우 양방향 1차선 도로를 생각해보면 이해가 잘 될거 같다. 시골길에서 차량이 지나가는데 길은 좁은 통로 하나고 서로 차량이 마주한다면 1대의 차량이 비켜주고 다른 차량이 먼저 지나간 후 남은 차량이 지나가는데 그러면 시간이 오래 걸린다.

즉 효율이 매우 떨어진다.

그래서 지금은 CSMA/CD방식을 사용하지 않고 스위치라는 장비를 사용한다.

MAC주소

스위치에 대해서 알기전에 MAC주소를 알아야하는데 비트열 데이터를 전기신호로 변경해주는 랜카드에는 제조할 때 정해진 주소를 할당하고 그 주소가 MAC주소이다. 이는 허브와 스위치 모두에서 사용된다

참고 : MAC주소는 물리주소라고도 불리며 세계에서 유일한 번호로 1개만 존재하는 번호인데 00-00-00-00-00-00 영어와 숫자로 구성되어 있다. 앞의 6자리는 제조사 번호, 뒤 6자리는 일련번호를 의미한다.

이러한 MAC주소는 데이터를 송수신 할때 목적지와 출발지의 주소 역할을 하고 헤더에 이 주소들이 들어간다. 예를들어 pc1의 MAC주소가 11-11-11-11-11-11이고 pc2의 MAC주소가 22-22-22-22-22-22이라면 pc1에서 2로 데이터를 전달할 때 헤더에는 목적지 22-22-22-22-22-22 출발지 11-11-11-11-11-11의 정보가 포함되어 데이터가 어디서 어디로 보내야하는지를 알고 해당 주소에만 데이터를 보내게 해준다.

이는 아래의 이미와 같다. 이미지 출처 : 모두의 네트워크 _ 도서

그런데 이걸 공부하면서 생각이 들었던 궁금증이 있다. 만약 pc1에서 2와 3에 동시에 데이터를 전달할 경우 이미지의 목적지 MAC주소가 두개 붙어서 전달되는 걸까?

정답은 X

내가 이해한 것이 맞다면 그저 목적지 MAC 주소가 다른 데이터를 두번 보내게 된다.

스위치

스위치 또는 스위칭 허브라고 불리는 이 장비는 허브와 겉모습은 동일하게 생긴 장비다. 다만 스위치의 내부에는 MAC주소 테이블이 존재하는데 이는 스위치의 포트 번호와 해당 포트와 연결된 장비의 MAC주소를 등록시킨 데이터 베이스라고 한다. 이미지 출처 : 모두의 네트워크 _ 도서

이미지처럼 MAC주소가 스위치에 저장되고 목적지에 맞게 MAC주소를 가진 포트에만 데이터를 전달해준다.

MAC주소 테이블에 주소가 없다면?

이 경우에는 목적지의 주소를 모르기 때문에 모든 pc에 데이터를 전달해버리는데 이 것을 플러딩이라고 한다. 다만 이러한 문제는 ARP프로토콜에 의해서 해결이 가능하다.

목적지 컴퓨터의 IP주소를 이요하여 MAC주소를 찾기 위한 프로토콜로 목적지 주소를 모를 경우 이 주소를 알아내기 위해서 ARP요청을 하여 목적지의 주소를 알아내어 출발지 컴퓨터에서 해당 IP와 MAC주소의 매핑 정보를 메모리에 보관(ARP 테이블)한다. 그리고 이후 데이터 통신은 이 보관된 정보를 참고하여 전송한다.

네트워크에서 데이터를 주고 받기 위한 통신 규격이 있다. OSI 표준 모델과 TCP/IP 모델이 있다.

OSI 표준 모델

국제 표준화기구(ISO)에서 만든 통신 규격으로 위의 이미지와 같이 7계층으로 이루어져 있다. 위에서 부터 순서대로

7계층 응용 계층

• 이메일, 파일전송, 웹사이트 조회 등 애플리케이션에 대한 서비스를 제공한다.

6계층 표현 계층

• 문자 코드, 압축, 암호화 등 데이터를 변환한다.

5계층 세션 계층

• 세션 체결, 통신 방식을 결정한다.

4계층 전송 계층

• 신뢰할 수 있는 통신을 구현한다.

3계층 네트워크 계층

• 다른 네트워크와 통신하기 위해 경로설정 및 논리 주소를 결정하는 역할을 한다.

2계층 데이터 링크 계층

• 네트워크 기기간의 데이터 전송 및 물리조소를 결정한다.

1계층 물리 계층

• 물리적인 견결과 전기 신호를 변환 및 제어한다.
  
  
  
  

TCP/IP 모델

OSI 모델은 현대에서 잘 사용하지 않고 TCP/IP 모델을 사용하는데 OSI 모델의 7계층을 4계층으로 압축한 형태를 지닌다

4계층 응용 계층

• OSI의 7계층부터 5계층의 역할을 한다.

3계층 전송 계층

• OSI의 4계층과 동일한 신뢰할 수 있는 통신을 구현한다.

2계층 인터넷 계층

• OSI의 4계층과 동일한 다른 네트워크와 통신하기 위해 경로설정 및 논리 주소를 결정하는 역할을 한다.

1계층 네트워크 접속 계층

• OSI의 2계층부터 1계층의 역할을 한다.
  
  
  
  

데이터 송수신 과정

데이터 송신 측

두 모델에서 데이터를 전송하는 송신 측에서는 4계층(7계층)부터 1계층까지 순차적으로 거치게 되는데 응용 단계에서 데이터를 만들고 각 계층을 지날 때마다 헤더를 붙여서 전송한다. *1계층의 경우는 헤더와 함께 트레일러를 함께 전달한다.

데이터 수신 측

송신과는 역순으로 1계층부터 4계층(7계층)으로 전달되며, 헤더를 하나씩 제거하면서 진행된다.

이미지 출처

Traditional Web

전통적인 웹의 동작 방식은 페이지에서 인터렉션이 일어날 때마다 html페이지를 서버에 새롭게 요청하는 방식이다.

• 인터렉션이 있을 때마다 서버에 지속적으로 요청을 하기 때문에 서버에 부하를 준다.
  
  
  

SPA Web

1개의 페이지로 이루어져 동적으로 데이터를 불러오는 애플리케이션을 의미한다.

장점

• 서버에 요청이 적어 부하를 적게 준다.
• 필요한 부분만 동적으로 데이터를 요청하기 때문에 반응이 빠르다.

단점

• 초기 렌더링 속도 SPA는 서버에서 모든 것을 요청 후 사용자에게 보여주기 때문에 앱의 규모가 커지면 자바스크립트 파일 등의 규모가 커지게 되어 첫 렌더링 과정에서 속도가 느려질 수 있다.

• SEO의 문제 전통적인 웹의 경우 검색엔진에서 모든 페이지를 읽어내어 웹에 노출시켜준다. 그러나 SPA는 1개의 페이지에서 동적으로 내용이 바뀌어 정보를 읽어오기 힘들고 검색엔진에 노출되지 않는 문제가 생긴다.

남의집 프로젝트

취향 공유 커뮤니티 서비스 남의집을 모티브로 제작하게 된 남의집(GUYSHOUSE) 팀 프로젝트입니다. 짧은 프로젝트 기간동안 새로운 기술을 사용하여 만들어야 했기에 몇몇 기능들을 제외 및 변경하였습니다.

개발 인원 및 기간

개발기간 : 2021/12/13 ~ 2021/12/24 개발 인원 Front-End 3명 : 김태영, 김상훈, 황성재 Front-end github 링크

Back-End 3명 : 고민혁, 박세용, 유민혁

적용 기술 및 구현 기능 적용 기술 Front-End : JavaScript, React.js, SASS, React-router-dom Back-End : Django, Python, MySQL Common : Git, Github, Slack, Trello, Notion

[프로젝트 영상] https://www.youtube.com/watch?v=F6Sg-UZp1NY&feature=youtu.be

내가 구현한 기능

Kakao social Login

• kakao developers 문서 참고
• Kakao SDK for JavaScript를 이용한 로그인,로그아웃, 연결 끊기 기능
• 카카오 access_token을 fetch로 전달 및 로그인 토큰 localStorage에 저장
• .env에 환경변수 저장 및 사용
  
  

예약 페이지

• textarea를 map()으로 반복 및 textarea Auto Height 적용
• textarea 내부 텍스트 Count
• state의 값에 따라 조건부 버튼 활성화
• 동적 라우팅, useParams 사용하여 데이터 가져오기
  
  

Mypage

• state 값을 변경하여 3가지 요소 중 한 가지만 active되도록 onClick 이벤트 작성
  
  

아쉽지만 끝까지 해낼 수 있었다

각자 잘 하더라도 소통은 중요하다

이번 프로젝트는 1차 프로젝트를 경험하였기 때문에 전체적인 기획과 초기세팅은 어렵지 않게 진행하였다. 그러나 새로운 기술을 사용하게 되었고 팀의 성격이 다르다보니 정리나 프로젝트 진행에 있어서는 다소 차이가 있었다. 게다가 각자 한번씩 경험했던 것을 하다보니 1차에 비해 소통이 조금 뜸해졌는데 그럼에도 각자 맡은 일은 잘 해나갔다. 문제는 그 이후 서로 만든 것들을 merge/ 백엔드와 연결하면서 중간중간 소통하지 않았던 부분들이 문제가 되어 돌아왔다. 다행이도 문제를 찾은 후에 빠르게 문제를 고치고 다시 소통하여 프로젝트를 끝까지 해냈지만 1차 프로젝트에서 소통을 강조하였는데도 2차에서 이렇게 행동한 것에 대한 아쉬움을 느꼈다.

이번 프로젝트에서 좋았던 점은

1. 소통이 부족했지만 이를 인식한 후 빠르게 개선하여 프로젝트를 끝낼 수 있었다는 것
2. 외부 API를 사용하여 로그인 기능을 만들어 본 것
3. 기획 부분에서 1차와 다르게 전체적인 팀 스케줄과 시간을 확인하고 필수와 추가 기능을 나누어 일정을 관리한 것

아쉬운 점

1. 추후 빠르게 개선하였지만 소통이 부족하여 일정이 얼마남지 않은 상황에서 문제들이 생긴 것
2. 여러 기능을 만들다보니 한 기능을 더 깊게 알아보지 못한 것

기록으로 남겨야 나의 것이 된다.

외부에서 API를 받아와 사용하기...

웹사이트를 제작할 때 모든것을 직접 만들지는 않는다고 한다. 대부분은 라이브러리와 같은 이미 만들어진 것을 가져와서 사이트에 맞게 변경하여 사용하는데 그런 종류 중 하나로 이번에 제작한 카카오 소셜 로그인이 있다. 기능부터 레이아웃까지 모든 것이 만들어져있고 그것을 가져다 쓰기만 하면 되는데 이게 그냥 control c/v로 되는 것은 아니다보니 여러가지 시행착오가 있었다.

게다가 같은 로그인 기능이지만 REST API, Javascript 등 만드는 방법 또한 여러가지라서 어떤 것이 나의 상황과 맞는 것인지도 확인하고 사용해야 했다.

이번에는 Javascript 키를 사용했는데 사용한 이유는 팝업으로 사용하기 위해서였다. 내가 공식문서를 재대로 이해한 것이 맞다면 REST API와 Javascript를 사용할 수 있는데 이 중에서 팝업으로 만들 수 있는 것은 후자에 속했다.

선택한 요소 강조

Textarea의 높이를 변경하기 위해서는 css가 아닌 js를 사용해야 한다고 합니다. 게다가 크롬에서 Textarea tag를 사용하면 내용에 따라 높이가 늘어나는게 아닌 스크롤이 생긴다.

  const [textColor, setTextColor] = useState([true, false, false]);

  const changeColor = index => {
    const defaultState = Array(3).fill(false);
    // 함수가 실행될 때 Array(3)은 [undefined, undefined, undefined]을 만들고 .fill(false)은 3개의 값을 false로 채운다
    defaultState[index] = true;
    // 인자로 받은 index의 값을 true로 바꾸어 준다
    setTextColor(defaultState);
  };

--------------------------------------------------------------------------

  return (
        <ReservationListContainer>
          {DEFALUT_DATA.map((list, index) => {
            return (
              <ReservationButton
                onClick={() => changeColor(index)}
                textColor={textColor[index]}
                key={index}
              >
                <Count textColor={textColor[index]}>{list.numbers}</Count>
                {list.title}
              </ReservationButton>
            );
          })}
        </ReservationListContainer>

--------------------------------------------------------------------------

const Count = styled.span`
  margin-bottom: 8px;
  color: ${props => (props.textColor ? 'orange' : 'gray')};
`;

Textarea Auto Height

Textarea의 높이를 변경하기 위해서는 css가 아닌 js를 사용해야 한다고 합니다. 크롬에서 Textarea tag를 사용하면 내용에 따라 높이가 늘어나는게 아닌 스크롤이 생기게 되어있다

const MAX_ROW = 20;
const TEXTAREA_LINEHEIGHT = 16;

export default function TextArea({
  id,
  context,
  checkbox,
  answers,
  setAnswers,
}) {
  const [textHeight, setTextHeight] = useState(5);

  const changeInput = event => {
    const { name, value } = event.target;
    const currentRows = ~~(event.target.scrollHeight / TEXTAREA_LINEHEIGHT);
    const previousRows = event.target.rows;

    if (currentRows === previousRows) {
      event.target.rows = currentRows;
    }
    if (currentRows >= MAX_ROW) {
      event.target.rows = MAX_ROW;
    }

    setTextHeight(currentRows < MAX_ROW ? currentRows : MAX_ROW);

    setAnswers({
      ...answers,
      [name]: value,
    });
  };

**뒤늦게 알게 된 사실**
  위와 같이 작성하게 되면 자동으로 높이가 늘어나지만 텍스트를 지웠을 경우 높이가 줄어들지 않았다;;
  이 부분은 추후 수정해야겠다.

~~ 연산자

Math.floor()와 동등하게 쓰이는 연산자 자세한 내용은 다른 글에 작성하여 링크로 남기겠습니다.

팀 프로젝트를 진행하면서 알게된 함수로 문서의 현재 스크롤 높이를 px로 반환한다.

window.scrollY //보고 있는 웹의 세로(높이 값)을 보여준다
window.scrollX //보고 있는 웹의 가로(너비 값)을 보여준다

Window.pageXOffset //보고 있는 웹의 세로(높이 값)을 보여준다
Window.pageXOffset //보고 있는 웹의 가로(너비 값)을 보여준다

주의! Window.scrollX의 경우 오래된 브라우저와 일부 모바일 환경에서 지원하지 않을 수 있기 때문에 Window.pageXOffset을 사용하는 것이 더 좋은 선택일 수 있다.

window.scrollTo()

함수의 이름으로 어느정도 유추할 수 있는 정말 정직한 이름을 가진 함수로 원하는 위치로 스크롤을 이동시켜 주는 기능을 한다. 우리가 웹 사이트에서 TOP 또는 맨 위로 와 같은 버튼을 눌렀을 때 특정 위치로 이동시켜주는 이벤트를 만들 경우 자주 사용하게 된다.

window.scrollTo({top:0, left:0, behavior:'auto'});

위와 같이 CSS속성을 사용하여 작성하면 top, left에 맞는 위치로 이동한다. behavior는 애니메이션 효과를 지정하는 속성으로 auto가 기본값으로 클리하면 순간이동 하듯이 바로 이동되고 smooth를 사용하면 부드럽게 이동한다.

다른 사용법으로 파라미터로 변수를 받아 사용할 수 있다.

window.scrollTo(x, y)

예시는 React에서 사용했던 것으로 className가 topButton인 span에 onClick이벤트를 주어 handleTop 함수 실행하면 최상단으로 부드럽게 이동해주는 기능을 만들었다. 추가로 span에 인라인 스타일로 스크롤 높이가 260px이하일 경우 렌더를 하지 않도록 하여 최상단에서는 버튼이 보이지도 눌리지도 않게 하였다.

*틀린 내용이나 더 좋은 방법을 알려주신다면 더 공부해서 수정하도록 하겠습니다 ^^

Branch 프로젝트

개인이 호스트가 되어 취향이 담긴 개인 공간에 모여 대화를 나누는 커뮤니티입니다. 1차 프로젝트와는 다르게 기존 사이트의 컨셉과 기능을 그대로 사용하여 클론하였습니다. 다만 메인페이지와 둘러보기 페이지의 기능을 나눌 필요가 없다고 생각되어 메인에서 둘러보기 기능을 사용하도록 하였습니다.

개발 인원 및 기간

개발기간 : 2021/12/13~2021/12/24(종료 예정) 프론트엔드 개발자 3명 백엔드 개발자 3명

적용 기술 및 구현 기능 적용 기술 Front-End : JavaScript, React.js, Styled-Components, React-router-dom

내가 구현한 기능

Kakao social Login

• 카카오 소셜 로그인 javascript 키를 활용하여 로그인,로그아웃,회원탈퇴 기능 구현
• 카카오 서버로부터 전달받은 access_token을 fetch로 백엔드에 전달하여 로그인 토큰을 받은 후 localStorage에 저장
• 카카오 키와 같은 예민한 데이터를 .env에 변수로 저장

Mypage

• state 값을 변경하여 3가지 요소 중 한 가지만 active되도록 onClick 이벤트 작성

예약 페이지

• 여러개의 textarea 데이터를 state에 저장
• styled-components 조건부 렌더링
  
  

처음은 언제나 어렵다

새로운 기술 styled-component

1차 프로젝트에서 사용했던 sass는 css와 작성법에서 크게 차이가 있지는 않았다. 그러나 2차 프로젝트에서 사용중인 styled-component는 기존의 기술들과 상당부분에서 차이가 있었고 이를 익히는데 오랜 시간이 걸리고 있다. 사용한지 1주일이 지난 지금은 어느정도 익숙해 졌지만 아직도 모르는 작성법이 있을 것이다. 부족한 부분은 찾아서 해결하는 것이 개발자의 기본 소양이기에 지금은 프로젝트를 진행하는 것을 위주로 하지만 그때 그때 필요한 것이 있다면 찾아서 해결해야겠다.

기록으로 남겨야 나의 것이 된다.

외부에서 API를 받아와 사용하기...

웹사이트를 제작할 때 모든것을 직접 만들지는 않는다고 한다. 대부분은 라이브러리와 같은 이미 만들어진 것을 가져와서 사이트에 맞게 변경하여 사용하는데 그런 종류 중 하나로 이번에 제작한 카카오 소셜 로그인이 있다. 기능부터 레이아웃까지 모든 것이 만들어져있고 그것을 가져다 쓰기만 하면 되는데 이게 그냥 control c/v로 되는 것은 아니다보니 여러가지 시행착오가 있었다.

게다가 같은 로그인 기능이지만 REST API, Javascript 등 만드는 방법 또한 여러가지라서 어떤 것이 나의 상황과 맞는 것인지도 확인하고 사용해야 했다.

이번에는 Javascript 키를 사용했는데 사용한 이유는 팝업으로 사용하기 위해서였다. 내가 공식문서를 재대로 이해한 것이 맞다면 REST API와 Javascript를 사용할 수 있는데 이 중에서 팝업으로 만들 수 있는 것은 후자에 속했다.

한개를 해결하면 꼭 다른 문제가 생긴다!

개발이 참 재밌는게 문제가 생겼을 때 열심히 고민하고 검색하여 해결하면 다른 문제가 생긴다는 것이다. 이게 스트레스이기도 한데 이걸 또 해결하는 재미가 쏠쏠해서 계속 하게 되는데 Javascript 키를 사용하여 작업하니 생기는 문제가 있었다.

로그인과 로그아웃은 잘 되는데 다시 로그인 하려하니 아이디 입력창이 안뜨고 바로 로그인이 되었다. 이유를 찾아보니 카카오와 연결해제를 안해서 그렇다는데 이거 때문에 많이 고생했다. 일단 REST API는 이 기능이 기본적으로 제공하고 있다. 그러나 Javascript 키에서는 제공하지 않고 직접 만들어야하는데 아무리 찾아봐도 알 수가 없었는데 한 사이트에서 Kakao.Auth.loginForm를 사용하라는 글을 보고 아래와 같이 적용해보니 잘 되었다. 이렇게 문제를 해결하는 짜릿함이 코딩의 맛인거 같다. 그런데 어떻게 공식문서에도 없는 것을 글을 작성하신 분은 알고 계신 것일까?...

위코드 팀 프로젝트(brunch 클론코딩) 2주차를 마치고...

12월 10일. 11월 29일부터 시작한 팀 프로젝트가 끝났다.
6명의 팀원이 모여서 함께 하던 첫 프로젝트였던 만큼 부족한 점도 많았고 그랬기에 아쉽지만 더 기억에 남는 시간이었다.
2주간의 내가 해온 것들을 돌아보면서 정리하는 시간을 가지도록 하자.

"모두가 함께해서 1을 만드는 것!"

프로젝트 시작하기 전에 이런 질문을 들었다. "프로젝트에서 가장 중요한 것이 무엇일까요?" 각자 경험과 생각이 다르기 때문에 아직도 정답이 있다고는 생각하지 않는다. 그러나 정답에 더 가까운 것은 있을 것이다. 내가 생각했던 가장 중요한 것은 프로젝트의 완성이었다. 너무나 당연하게 생각할 수도 있지만 위코드를 오기전에 디자이너로 일하면서 가장 중요한 것은 시간내에 "클라이언트가 원하는 결과물을 제공하는 것"이었다. 여기서 중요한 것은 "내가 완성이라고 생각하는 것"이 아닌 "클라이언트가 원하는 것"이었다.

나는 예술가가 아니라 원하는 것을 대신 제공해 주는 사람이다. 내가 옳다고 생각하더라도 타인이 아니라고하면 최종적으론 아닌 것이다. 그렇기에 나의 생각과 경험을 그대로 풀어내는 것이 아닌 클라이언트와 조율하는 과정이 필요하다. 결국 나 혼자서는 결과물을 만들어 낼 수 없다. (클라이언트가 전적으로 모든 것을 맡기지 않는 이상은 그렇다)

다시 질문으로 돌아가서 "프로젝트에서 가장 중요한 것이 무엇일까요?" 의 질문에 답으로 말씀해주신 것이 "모두가 함께해서 1을 만든는 것"이라고 한다. 처음 들었을 때와 지금의 생각이 조금 달라졌다. 당시에는 너무 당연하다는 것이었지만 프로젝트가 끝난 지금 저 짧은 말에 정말 여러가지의 의미가 담겨있었다고 생각한다.

내가 느낀 말의 의미는 마지막에 작성해 두었다. 글을 읽고 계신 분들도 한번 생각해보는 시간을 가지는 것도 좋을거 같다.

시작? 사람을 알아가는 것

프로젝트의 시작은 약간의 차이는 있겠지만 Planning Meeting부터 시작해서 개발 환경 세팅 등 다양한 것이 있다. 물리적인 시작은 이러한 것들이 맞을 테지만 내가 생각한 프로젝트의 시작은 프로젝트를 함께하는 사람을 알아가는 것이라고 생각한다. 전 직장에서도 그랬고 지금도 그렇지만 다양한 사람들과 함께하고 있다. 그렇다고 내가 만난 모든 사람을 다 기억하는가하면 그건 또 아니다. 그나마 아는 사람들도 그 사람들에 대해서 정말 잘 알고 있다고 자신할 수 있나?라고 생각해보면 절대 아니다.

사람은 성격, 기술, 숙련도, 환경, 취미, 신체적 특성 등 많은 것이 모두 다른데 그런 사람들이 모여서 팀 프로젝트를 하려면 작은 것부터 큰 이슈까지 다양한 일이 생기는데 이번 프로젝트 기간도 오랫동안 함께하기에 다양한 이슈가 있었다. 사는 곳도, 체력, 생활 스케줄도 달라서 이슈가 생긴다. 때로는 피곤해서, 교통에 문제가 생겨서, 의도치 않은 트러블에 말려들어서 프로젝트 일정에 문제가 생기는데 단순히 늦었다고 화를 낼 수 있을까? 실력이 부족하다고 몰아세우면서 일을 시킬 것인가? 그렇다면 이렇게 한다고 프로젝트가 성공적으로 끝날 것인가? 나는 아니라고 생각한다. 설령 프로젝트가 끝났다고 해도 다음에 또 같이 프로젝트를 함께 할 때는 어떨까? 그런 사람과 함께 프로젝트를 하고 싶을까? 절대 NO! 라고 외칠 수 있다.

위에서 프로젝트에서 가장 중요한 것은 "모두가 함께해서 1을 만든는 것" 이라고 했는데 이 말의 시작이 "사람을 알아가는 것"이다.

이야기가 필요한 시간

프로젝트를 한다는 것은 정말 많은 이야기를 하는 시간을 가진다라는 것이다. 대화나 소통이 아닌 "이야기"라고 한 이유는 무엇일까? 효율을 생각한다면 쓸데 없는 말은 줄이는 것이 좋을수도 있다. 하지만 내가 생각하기에 정말 좋은 프로젝트는 쓸데 없는 시간을 보내는 것으로 만들어 진다. 다만 쓸데 없는 시간이라고 해서 누구를 욕하거나 안좋은 얘기를 하라는 것이 아니라 함께 하기 위해서 필요한 쉬는 시간의 대화, 타인을 알아가는 이야기를 말하는 것이다.

타인을 알아가는 대화. 정말 다양한 이야기가 있다. 먹을 것, 취미, 어제 무엇을 했는지, 오늘, 내일 무엇을 할 예정인지... 그냥 우리가 흔히 사람을 만나서 하는 대화를 말하는 것이기에 특별한 것이 아니다. 그러나 이러한 시간을 갖는다는 것의 의미는 정말 중요하다고 느꼈다. 아무래도 오랫동안 일을하면 지칠 수밖에 없다. 더군다다 전혀 다른 분야를 공부하려하는 지금 체력적으로도 정신적으로도 힘든 시기라고 생각하는데 어떻게 사람이 하루종일 딱딱하게 코드만 보고 일에 관련된 대화만 할 것인가... 너무 끔찍한 환경이라고 생각한다. 우리에게는 재충전할 시간이 필요하다.

실패한다는 것

걱정

프로젝트를 시작하기 전. 여러가지를 배우고 내 것으로 소화하기 위해서 노력하고 있지만 짧은 시간에 많은 정보를 소화하는 것이 쉽지 않다. 지금까지 살면서 알던 것과 전혀 다른 지식이라 더욱 힘든데 단기간에 집어 넣으려니 이해가 안되는 것 투성이다. 그와중에 팀으로 프로젝트를 하라는 말은 기대보다는 걱정부터 들었는데 "내가 잘 할수 있을까? 팀한테 폐만 안끼쳐도 정말 다행일텐데..."라는 생각은 누구나 할테니 그저 할 수 있는 최선의 선택으로 최대의 효율을 내기 위해서 노력하고자 했다. 자는 시간을 줄이고, 팀원과 많이 이야기 해보고, 조율하면서 내 역량으로 어느 정도의 일을 소화할 수 있을지 생각하고 시간은 한정적이니 어느 기능을 중점으로 구현하고, 기능을 제외하거나 변형시킬지 정하는 등. 걱정하는 것을 나쁘다고 하지는 않아도 될거 같은게 걱정을 하기 때문에 이렇게 준비를 하는 것일테니 이제야 스타트라인에 올라선 지금 적절한 걱정과 그에 맞는 준비를 하는 것이 좋은거 같다.

내가 더 잘 했다면...

그러나 세상일이 생각한데로 척척 돌아가주던가... 막상 프로젝트를 시작하고 JavaScript, React, 데이터 연결 등 많은 곳에서 삐그덕 거리더니 오류와 어떻게해야 만들수 있는지 알 수 없는 로직까지 참 다양한 문제가 많이 발생했다. 시간도 내가 생각했던 기간을 훌쩍 넘기고 프로젝트가 끝난 지금도 몇몇 기능은 처음 생각한 것과는 다소 다른 기능이 되어있다.

이렇게 문제가 하나 생길 때마다 조급해지는 것은 어쩔 수 없던거 같다. 거기에 다른 팀원들은 모르는 것도 찾아서 척척 만드는 것을 보면서 더욱 그랬다. 팀원 중 한 분은 나에게 도와달라는 말을 많이 하시고 매번 고맙다는 말과 잘한다는 말을 해주시는데 내가 보기에는 그분이 더 대단하다고 생각한다. 괜히 도와드린다고 가서 시간만 뺏는게 아닌가 생각이 들정도로 검색으로 필요한 것을 잘 찾아 적용하시는데 보면서 그렇게 부러울 수가 없었다.

프로젝트가 끝난 지금 결과물을 보면 여전히 버그가 많고 많은 기능이 삭제되어서 아쉽다. 잠을 조금 더 줄이면 됬을까? 더 많이 더 오랫동안 코드를 봤어야 했나. 어떻게 하면 더 좋은 결과물을 냈을지는 아직도 잘 모르겠지만 "내가 더 잘 했다면..."이라는 생각은 떨칠 수가 없다.

완벽하지 않아도 괜찮아

그렇지만 완벽할 필요는 없다고 생각한다. 난 이제 시작하는 것이고, 그렇기에 부족할 수밖에 없다. 그리고 그 부족한 부분은 보완해가면 된다. 이건 시간이 좀 걸릴테지만 지금 당장은 팀원이 있으니 든든하다고 느껴지는 것이 프로젝트의 매력인거 같다.

다시 "모두가 함께해서 1을 만드는 것!"

길게 작성했지만 결국 중요한 것은 "모두가 함께해서 1을 만드는 것!" 이다. 프로젝트는 나 혼자 하는 것이 아니라 함께 하는 사람들이 있고 이들의 장점부터 단점까지 모두 가지고서 1을 만들어야한다. 누군가는 검색을 잘해서 정보를 잘 모으고, 누군가는 정리를 잘 하고, 누군가는 코드를 잘 작성한다. 내가 부족하더라도 누군가는 잘 할수 있고 혼자 생각하는 것보다 둘, 셋이 생각하니 타협 할지언정 완성되는 것을 볼수 있었다. 아직은 완벽할 필요는 없다. 부족하기에 더 배우려고 하는 것이니 이 시간을 소중히 사용하도록 하자~

2주라는 짧은 시간동안 함께한 6명의 팀원과 멘토님들께 감사합니다.
어디 모난 곳 없기 즐겁게 함께 했기에 더욱 좋은 시간이었고 완벽한 팀은 아니지만 그렇기에 더 많은 것을 배울 수 있었습니다. 2차 프로젝트도 화이팅 넘치게! 더욱 성숙한 개발자가 되어서 만나요~