내일배움캠프 7주차 화요일 TIL

코드카타

---

1. 음양 더하기
각 배열(absolutes, signs)이 매개변수이다. 빈 배열 생성 후, absolutes의 요소들이 음수, 양수인지를 signs 배열의 boolean 타입 값으로 판단하여 새로운 값을 빈 배열에 푸쉬한다.

- 음수일 때
signs 요소가 false > 같은 인덱스 번호의 absolutes 요소에 -1 곱하여 음수로 만든 후 빈배열에 푸쉬
- 양수일 때
signs 요소가 false > 같은 인덱스 번호의 absolutes 요소 그대로 빈배열에 부쉬

이후 반복문을 통해 배열의 합을 구한다

function solution(absolutes, signs) {    
let list = [];
    for (let i=0; i<absolutes.length; i++) {       
        if (signs[i] === false) {
            let calculate = absolutes[i] * (-1);
            list.push(calculate)
        } else {
            list.push(absolutes[i])
        }
    }
    let sum = 0;
    for (let i=0; i<list.length; i++) { 
        sum += list[i];
    }
    return sum;
}

정답이긴 했지만, map(), reduce()를 사용해 스스로 구성한 위 코드를 줄일 수 있었다.

function solution(absolutes, signs) {
    return absolutes.map((value, index) => signs[index] ? value: -value)
        .reduce((sum, current) => sum + current,0)
}

absolutes.map(...)
>> value, index를 매개변수로 하는 콜백함수는 signs[index]가 true인지 false인지에 따라 value, -value를 뱉는 삼항연상자로 구성,  map()을 통해 새로운 배열로 생성

.reduce(...)
>> 그 새로운 배열의 합을 reduce를 통해 구한다. 콜백함수는 초기값 0부터.
현재까지 요소들의 누적 합 + 현재 처리 중인  요소 =  sum을 구하는 과정이 반복

---

map()
map 함수를 사용하여 absolutes 배열의 각 요소를 signs 배열의 값에 따라 변환합니다. 이 과정에서 새로운 배열을 생성합니다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((currentValue) => {
    return currentValue * 2;
});
console.log(doubled); // 출력: [2, 4, 6, 8, 10]

reduce()

reduce 함수를 사용하여 변환된 배열의 합을 계산합니다. 초기값을 0으로 설정하여 합계를 구합니다.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
}, 0); // 초기값은 0
console.log(sum); // 출력: 15

 

---

 

2. 전화번호 가리기
전화번호 뒷 4자리를 제외한 나머지 숫자를 * 변환한 문자열을 리턴하는 함수 생성(매개변수 phone_number는 문자열)

function solution(phone_number) {
   return '*' * (phone_number.length-4)  + phone_number.slice(phone_number.length-4, phone_number.length)
}

위처럼 슬라이스를 통해 뒤 4자리를 문자열로 뽑아내고( 인덱스 번호 phone_number.length-4 부터 phone_number.length  끝자리 까지), 뒷 4자리를 제외한 앞부분 문자 길이만큼 *를 곱해 ex) ******* 같은 문자열을 만든다.
문자열 + 문자열 은 붙어 나오는 형태로 알고 있어 위처럼 앞부분 뒷부분을 더하여 출력하려 시도.
> 별로된 앞부분이 Nan으로 나왔다.
JavaScript에서 문자열과 숫자를 곱할 때, 문자열이 숫자로 변환되지 않으면 NaN으로 나온단다.
때문에 repeat 메서드를 찾아 대신 적용하였고 적절히 출력되었다. 오랜만에  repeat 메서드를 상기했다.

근데 다른 사람의 답을 보니 slice(-4)와 slice(phone_number.length - 4)는 같은 결과를 반환하는 것 같아 웹검색을 통해 찾아보았다.
맨 뒷자리 부분만 구할 때는 단순하게 음수만 붙여 구현할 수 있다는 걸 확인했다. >> slice(-4) 끝에서 네 자리
이에 따라 수정하였다

function solution(phone_number) {
   return '*' * (phone_number.length-4)  + phone_number. slice(-4)
}

베이직반 수업

---

 

1. 베이직 반 과제 피드백
- mvc 패턴 라우트 폴더에서 파라미터로 값을  받을 때

router.delete("/deletePlayer/id", deletePlayer);

이게 아니라

router.delete("/deletePlayer/:id", deletePlayer);

- 변수명 확실히
어떤 과정을 통해 어떤 것을 구하는지 확실히 파악하지 못하고, 결과만 구현해 반영하기 바빴다. 의사코드를 먼저 쓰는 습관이 좋은 듯(금일 코드카타를 진행하며 확실히 느낌)

- 커밋은 저장 후...
급해서 커밋 후 새로 작성한 폴더가 갱신된 것을 확인하여 제출했는데, 저장을 하지 않아 빈내용으로 커밋되었다...
저장해라

강의 내용 정리

---

 

[게임서버개발 심화] 1. 게임 개발의 시작

우리가 지금까지 배운 것
Node.js 환경에서 HTTP 프로토콜을 사용하는 express라는 라이브러리를 사용, 웹서버를 만들어 작업하였다. >. 항상 보던app.js 형태

[게임서버개발 심화] 2. HTTP와 TCP 그리고 웹소켓

HTTP의 특징
- request <-> response 구조
request 가 있어야만 response 가 있다.

- 비연결성
요청 <> 응답의 과정이 한 번만 이루어진다.
연결을 유지하고 있지 않기 때문에 비연결성이 특징이며, 이로 인해 리소스가 적고, 많은 트래픽을 빠르게 처리할 수 있기도 하다

- stateless(무상태)
서버가 이전에 일어났던 일을 저장하지 않는다. > 매번 새로운 요청을 처리한다.
필요하다면 세션, 쿠키 등으로 해당 요청에 대한 정보를 임의로 저장해서 처리할 수 있다. 

- HTTP 프로토콜의 메시지 구조

헤더에 들어있는 내용

 

http는 메시지를 한번 주고받을 때 위처럼 많은 내용을 전달하고 있다

 

철수가 요청 > osi 7계층 거쳐 > 물리계층에서 전기적 신호로 변환된 요청이 전선 타고 > 서버의 물리 계층에 전달 > 서버에서 로직 처리 > 다시 사용자에 반환

애플리케이션의 대표적인 프로토콜이 HTTP ,  SMTP 등 (프로토콜 > 통신방법)

전송계층의 태표적인 프로토콜은 TCP/ UDP

HTTP  프로토콜을 사용해서 통신하기 위해서는 tcp 연결이 필요하다.
> TCP/UDP 프로토콜이 없으면 동작이 불가



TCP 특징

- 연결지향성
TCP는 데이터교환을 할 때 무조건 연결을 가진다
HTTP의 Req ↔ Res 가 발생할 때 밑에서 TCP 연결이 이뤄진다
CP는 3-handshake라고 하는 연결 과정을 가지고 있다

예외사항
>> HTTP/2: 멀티플렉싱 기술의 등장으로 한 번의 연결을 재사용하는 것이 가능하다.
HTTP/3: QUIC(UDP) 위에서 동작한다. (구글)  


TCP 통신 구동
양방향 통신 (Full-Duplex) 순서

1. 서버는 접속 요청을 받기 위한 소켓을 연다. → Listen
2. 클라이언트는 소켓을 만들고, 서버에 접속을 요청한다. → Connect
3. 서버는 접속 요청을 받아서 클라이언트와 통신할 소켓을 따로 만든다. → Accept
4. 소켓을 통해 서로 데이터를 주고받는다. → Send & Receive ⇒ 반복!
5. 통신을 마치면 소켓을 닫는다. → Close ⇒ 상대방은 Receive로 인지할 수 있다.

 

웹소켓
HTTP프로토콜 위에서 동작하는 실시간 양방향 통신 (Full-Duplex)
>> HTTP 프로토콜로도 양방향 통신을 하기 위해 웹소켓 사용

웹소켓의 특징

1. 실시간 통신
웹소켓은 연결이 활성화된 상태에서 빠르고 지속적인 메시지 교환 허용 

2. 양방향 통신 (Full-Duplex)

3. 지속적 연결

4. 낮은 오버헤드
데이터 패킷, 크기가 작기 때문에 효율적으로 데이터 교환이 가능하다 > 오버헤드가 낮다

- HTTP의 헤더
GET /data HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/90.0.4430.212
Accept: application/json
Cookie: sessionToken=abcdef; userID=12345
제너럴 헤더, 리퀘스트헤더(위 이미지)
>> 모든 메시지마다 위 내용이 포함되어야 해서 헤더가 굉장히 많음

- 연결 이후 데이터 교환할 때의의 websocket의 헤더
0x81 0x05
>> 극도로 간소화되어 있음
>> FIN 비트, Opcode, Mask 비트, Payload 길이 정보가 포함되어 있다네요.

TCP의 헤더
  Source Port:       54321
  Destination Port:  80
  Sequence Number:   123456789
  Acknowledgment Number: 987654321
  Data Offset:       5 (Header Length: 20 bytes)
  Reserved:          0
  Flags:             [ACK, PSH]
  Window Size:       65535
  Checksum:          0x1a2b
  Urgent Pointer:    0
  Options:           [No options]
  Payload Data:      "Hello, TCP!"
>> 꽤 많음


HTTP와의 호환성
HTTP를 통해서 작동하기 때문에 기존 웹 인프라에서 웹소켓을 통합 가능
웹소켓 연결은 HTTP 연결을 통해 초기화되며, 이후 전이중 통신 채널로 전환됩니다(?)

웹소켓의 데이터 전송이 빠를 거 같지만 TCP가 더 빠르다
>> osi 7개 층중 너 낮은 전송 계층에서 연결을 하는 TCP가 대부분의 경우 빠르다
>> 놀라운 성능 최적화 덕분에 대부분 빠르게 보이는 것도 이유
 
이후 기획, 기본 세팅을 완료하였다.