ywtechit / book-report Goto Github PK

이 책을 읽게 된 계기는 공부습관을 길러주는 오픈 카톡방에서 여러 책을 추천받았었는데, 이 책이 알라딘 중고서적에서 유일하게 재고가 남은 책이었다. 정가에서 약 50% 할인해서 구매했는데, 전체적인 내용은 협력을 생물학, 심리학 관점에서 다룬 책이다. 함께 일하고 싶은 개발자가 되는 것이 나의 목표인데, 이 책은 팀원들에게 어떤 마음가짐으로 임해야하는지 알려준 책이었다. 약 500페이지정도 되고, 공부를 하기 전, 혹은 시간이 날때마다 읽었다. 읽은 기간은 21. 5. 26. ~ 21. 7. 14.이다.

내용은 죄수의 딜레마를 중심으로 내용을 작성했고, 죄수의 딜레마 중 어떤 방법으로 임하면 효과적인지 나타내고 있다. 처음에 죄수의 딜레마가 어떤 게임인지 정확히 몰랐는데 이 책을 읽으면서 조금이나마 알게되었다. 기억에 남는 문단은 죄수의 딜레마에서 상대방을 배신하거나 처벌하는 사람들은 나중에 항상 좋은 결과를 얻지 못한다는 점이었다. 즉, 처벌은 협력의 진화를 위한 매커니즘이 아니라는 점이다. 괜찮은 성적을 거둔 이들은 보복성 처벌로 사태를 악화시키지 않았고 배신으로 대응했을 뿐이다. 또 보상은 처벌보다 더욱 창조적인 형태의 협력을 낳는데, 함께 효율적으로 일하는 것 이상을 만들어 낼 수 있어서 창조성을 자극하기도 한다. 나머지 내용은 평판(간접 상호성), 공간 선택, 다수준 선택, 혈연 선택으로 구성되어있었는데, 제일 기억에 남는 주제가 죄수의 딜레마였다.

이외에도 책을 읽으면 알 수 있지만 결론적으로 협력은 인류를 낳았을 정도로 우리 주변에서 절대 빠질 수 없는 행위다. 그리고 협력은 아래에서 오는 것이지 위에서부터 나올 수 있는 행위가 아니다. 만약, 다른사람과 협업을 하는경우에 창조의 이득을 누리려면 그에 걸맞은 환경을 조성해야한다는것도 배웠다. 또, 내향적, 편협적, 경쟁적인 사람이 되기보다는 외향적, 열린마음, 이타적인 사람이 되어야겠다고 생각했다.

이전에도 책을 몇번 읽었지만 틈틈이 시간날때마다 독서하며 완독한 적은 처음인것 같다. 앞으로 자주 이런 습관을 가져야겠다.

이 책은 알라딘 중고서점에 들렀을 때 프로그래밍 관련한 책이 어떤것이 있는지 구경하다 HTML5를 다룬 책인데, 가격을 약 50% 정도 할인(22,000 -> 11,800)하길래 얼른 구매한 책이다. 알라딘 온라인에는 절판이 되어 더 이상 팔지 않는 책이다. 전체 페이지는 약 300페이지이고, 읽은 기간은 21. 8. 28. ~ 21. 10. 9.이다.

책은 HTML5 와 CSS3에 대한 내용을 주로 다루는데, 나에게 있어 가장 도움이 됐던 내용은 시멘틱 웹(sementic web)이다. 시멘틱 태그를 어떤 시기에 사용해야하는지 왜 사용해야하는지 등에 관한 내용을 예제를 통해 설명하는 점과 그래픽 내용을 텍스트로 해석해서 읽어주는 스크린 리더를 이용하는 사용자들을 위해서는 어떤 마크를 사용해야하는지를 알려주는 점(잘 몰랐는데 HTML5에 도입한 role 속성을 통해 스크린리더가 아주 쉽게 페이지를 분석하고, 모든 역할을 분류해서 페이지의 색인을 만들 수 있다고 한다.)과 실무적인 요소들을 고려해 기능이 호환되지 않는 브라우저에서의 대처방법도 이 책을 읽는데 도움이 많이 되었다. 그리고 시멘틱 웹에 관한 내용을 기록으로 남기고 싶어 게시물에 포스팅했다. 책은 다음의 주제들을 다루고 있다.

1. 사용자 인터페이스 개선
2. 시맨틱 마크업으로 블로그 리뉴얼하기
3. 사용자 중심의 웹 폼 만들기
4. CSS3로 더 나은 사용자 인터페이스 만들기
5. 접근성 향상시키기
6. 캔버스에 그리기
7. 오디오와 비디오
8. 눈을 즐겁게
9. 클라이언트 측 데이터로 작업하기
10. 다른 API 이용하기
11. 곧 우리 곁으로 올 것
12. 기능 색인

이 책의 단점은 발행이 오래됐다는 점인데, 초판이 2011년이다. 그래서인지 책의 예제 코드는 jQuery를 사용해서 jQuery를 사용하지 않는 개발자에게는 이해하기 조금 어려울 수 있다. 그리고 당시에는 호환되지 않던 브라우저가 지금은 호환되도록 변경된 브라우저가 있기 때문에 이 점을 염두해야 한다.

HTML5의 핵심 개념을 자세하게 알려주는 점은 매우 좋아 개념을 알고 싶은 분들에게는 추천할만한 책이지만, 책의 발행이 오래된 점과 jQuery를 이용한 예제코드를 사용하고 있어 실습할 수 없는 점은 아쉬웠다.

이 책을 읽게 된 계기는 커스텀벅스 프로젝트를 진행하면서 어떻게 하면 이미지를 빠르게 로딩 할 수 있을까?라는 고민에 AWS S3 서비스를 이용하기 위해 마음을 먹었는데, 정작 AWS의 기본적인 내용도 잘 몰라서 AWS의 전체적인 구조를 배우고 싶다는 생각이 들어서 구매했다. 구글링을 해보니까 AWS와 관련된 내용도 잘 없었다. 그래서 서적을 구매하겠다고 마음을 먹었고, 알리딘 중고서적으로 구매하려고 했는데 출판된지 얼마 안 된 서적이어서 매물이 없어 새 책으로 구매했다. 가격은 16,200원, 출판 일자는 2021년 6월 30일, 총 페이지는 280쪽이다. 독서 기간은 21. 10. 14 ~ 21. 10. 18.이다. 내용이 어렵지 않아서 금방 읽을 수 있는 책이었다.

기본적으로 AWS란 클라우드 컴퓨팅 서비스의 하나이다. 국내에서는 사용량이 많진 않지만 지나가다 이름정도는 한번 들어봤을 법한 아마존이 자회사의 노하우를 활용하여 제공하고 있다. 클라우드 컴퓨팅 서비스는 서버 및 네트워크 등을 인터넷으로 빌려주는 서비스로, 언제 어디서든지 이용 할 수 있는 장점이 있다. 이러한 AWS 장점은 몇 가지 있는데 서비스를 조합하기 쉬운 점, 내가 사용한 만큼 비용을 지불하는 종량제라는 점, 해킹으로부터 방어 할 수 있는 보안 능력, 글로벌 확장이 쉽다는 점 등이 있다.

AWS에서 제공하는 서비스는 165개 이상이 있는데, 이 중에서 S3, cloudFront는 다음에 자세하게 살펴보고 나머지 EC2, IAM, AMI, EBS, ELB, 스냅샷, 오토 스케일링, cloudWatch, Elastic IP, 리전(region), VPC, 서브넷, CIDR 등은 용어의 개념만 살짝 알아보자.

1. EC2(Amazon Elastic Compute Cloud: 컴퓨팅 용량을 제공하는 서비스이다. 쉽게 말해 서버에 필요한 세트를 클라우드에서 빌릴 수 있다는 뜻이다. 임대 서버는 이미 만들어진 서버 기계나 서버 기능을 빌리는 것이지만, 클라우드의 경우에는 빌린 도구를 사용하여 자신의 서버를 만든다고 생각하면 된다. 착각하면 안되는 것이 EC2는 매니지드 서비스가 아니다. 따라서 서버 및 네트워크 운영은 AWS가 담당하지만, OS를 포함하여 필요한 소프트웨어는 사용자가 직접 설치하고 운영해야 한다.
2. IAM(Identity and Access Management): AWS의 인증 방식이다. AWS는 서비스 여러 개를 사용하기 때문에 적절한 관리를 위한 인증 방식이 꼭 필요하다. AWS 계정과 비슷할 수 있지만, AWS 계정은 계약을 관리하는 계정인데 반해, IAM은 각 서비스에 대한 접속을 관리하는 기능이다. 사람에 대해 부여하는 IAM을 IAM사용자라고 한다.
3. AMI(Amazon Machine Image): EC2를 지탱하는 중요한 요소 중 하나이다. AMI를 사용하면 동일한 인스턴스를 대량으로 쉽게 생성 할 수 있다. 소프트웨어 구성을 기록한 템플릿이다. 인스턴스(가상 서버)를 생성하기 위한 금형과 같은 것으로, 금형을 한 번 만들어 두면 얼마든지 같은 설정의 서버를 생성하는 것이 가능하다. 동일한 서버가 여러개 필요 할 때 서버마다 OS를 설치하고, 아파치, 소프트웨어를 설치하는 등 같은 작업을 반복해야 할 때 AMI를 사용하면 단 몇 분만에 동일한 서버를 만들 수 있다.
4. EBS(Amazon Elastic Block Store): 영구적인 블록 스트리지 불륨으로 주로 EC2 인스턴스와 조합하여 사용한다. 대표적인 스토리지는 HDD와 SSD이다. 우리가 알고 있는 일반적인 컴퓨터에 장착하는 저장장치인 HDD와 SDD를 떠올리면 편하다.
5. ELB(Elastic Load Balancing): AWS가 제공하는 로드 밸런서이다. 로드 밸런서는 서버에 집중되는 트래픽을 서버 여러 대나 네트워크에 분배하는 방식이다. 서버 한 대에 집중되는 부하를 분산시키기 때문에 부하 분산 장치라고도 한다.
6. 스냅샷(snapshot): 어떤 시점의 서버 디스크 상태를 통째로 보존한 파일이나 폴더 등의 집합이다. 통째로 보존하기 때문에 데이터나 소프트웨어뿐만 아니라 OS와 설정 정보 등도 모두 포함된다. 보통 소프트웨어 혹은 OS 갱신 작업 등을 할 때 무언가 문제가 발생하면 바로 되돌릴 수 있도록 백업하기 위해 스냅샷을 사용하는 경우가 많다. 또한 개인이 AWS에서 AMI를 만들기 위해 스냅샷을 사용하기도 한다.
7. 오토 스케일링(Auto Scaling): 서버의 액세스 상태에 따라 서버 대수를 늘리거나 줄이는 기능이다. AWS는 EC2 Auto Scaling을 단독으로 사용할 뿐만 아니라 CloudWatch에서 서버의 부하 정보(CPU 부하, 네트워크 통신량 등) 데이터를 참조하여 스케일링에 참고 할 수도 있다.
8. CloudWatch: 각 AWS 서비스의 리소스 모니터링과 관리를 담당하는 서비스이다. AWS의 각 서비스에서 지표, 로그 등을 수집, 기록한다. 수집한 로그가 임계 값을 넘으면 특정 동작이 일어나도록 설정할 수 있기 때문에 감시 상황에 대처하는 관리도 가능하다.
9. Elastic IP: AWS가 제공하는 정적인 공인(public) IPv4 주소이다. EC2 인스턴스는 정지 후 다시 시작하면 공인 IP주소가 바뀌게 된다. 이는 서버로서 사용하는데 문제가 된다. 그래서 고정 IP 주소를 인스턴스와 연결해야 하고, 이때 고정 IP로 사용하는 것이 Elastic IP주소이다.
10. 리전(Region): AWS는 전 세계 25지역에 서버와 데이터 센터를 가지고 있다. 이러한 지리적 분류가 리전이다. 사용자가 서비스를 사용할 때 지역을 지정하는데 국내에서는 서울에 위치해있다. 국내의 많은 사람이 서울 리전을 선택하지만, 아직 서울 리전에서 제공하지 않는 서비스도 있기 때문에 제공하지 않는 서비스만 미국 동부 등 다른 리전을 선택하면 된다. 리전을 간단하게 말하면 데이터 센터이다. 각 리전에는 여러 가용 영역(AZ)이 각각 물리적으로 독립된 설비로 설치되어 있다. 즉 세계 각국에 데이터 센터가 있어 전 세계적인 확장성을 가질 수 있다.
11. VPC(Amazon Virtual Private Cloud): 웹 서버나 DB 서버와 같은 서버는 네트워크에 연결되어 있어야 한다. 한 장소에 모아서 네트워크를 연결하는 것도 가능하지만 그렇게 되면 서버로서의 의미가 없다. AWS 서비스인 EC2나 RDS(Relational Database Service) 등도 마찬가지로 네트워크에 연결 되어있어야 한다. 이러한 네트워크를 구축하기 위해 사용되는 것이 Amazon VPC이다. AWS 계정 전용 가상 네트워크 서비스로, AWS에서 제공하는 리소스만 설치할 수 있다. 특히 EC2나 RDS의 경우 VPC를 선택하지 않으면 서버를 생성할 수 없기 땜누에 리소르를 사용하기 위해서는 반드시 필요한 서비스이다.
12. 서브넷(subnet): 커다란 네트워크를 작게 나눈 네트워크를 말한다. 네트워크를 분할해 직접 통신할 수 있는 범위를 좁히고, 방화벽을 설정해 보안을 강화하는 것을 목적으로 한다. VPC는 사용자가 사용할 수 있는 네트워크 범위를 생성하고 그 아래에 용도에 따라서 서브넷(작은 네트워크)을 생성한다. 일반적인 네트워크의 경우 서브넷끼리 통신하려면 라우팅이 필요하지만 VPC의 경우에는 라우팅 없이도 통신할 수 있다.
13. CIDR(Classless Inter-Domain Routing): 네트워크와 서브넷의 범위를 나누는데 사용되는 표기법을 말한다. 프리픽스 표기라고도 하는데 /24, /20처럼 /(슬래시) 뒤에 네트워크 길이를 숫자로 적어서 표기한다. 255.255.255.0 이나 255.255.255.40과 같이 서브넷 마스크로 표기하는 경우도 있지만, AWS는 CIDR을 사용한다. /24는 256개, /20은 4,096개를 의미하는데 (2의 32 - 네트워크의 길이) ** 2를 기억하면 쉽게 계산 할 수 있다.

지금까지 살펴본 개념외에도 DHCP, IP 마스커레이드, NAT, 인바운드 및 아웃바운드, VPC 엔드포인트, 가설 사설망 등이 있으나, AWS 고유 서비스가 아닌 네트워크 개념이므로 생략하겠다.

결론적으로 당장 프로젝트에 도움이 된 개념은 S3, CloudFront 정도가 되겠다. 하지만 서버를 직접 구성하지 않고 클라우드 서비스를 많이 사용하는 요즘에 cloud의 대표적인 기업인 AWS에서 사용하는 개념과 구조 등을 알고 있으면 나머지 cloud 서비스도 비슷할 것이고 나중에 언젠가 한번은 써먹지 않을까 생각하며 이 책을 골랐다. 책을 읽으면서 느낀점은 AWS에 관해 처음 들어보는 개념이 많았고 처음 AWS 홈페이지에 접속했을 때는 외계어처럼 느껴졌던 단어들이 이제는 조금씩 보이는 것에 신기했다. WEB에 관한 전반적인 지식을 알려면 많은 공부를 해야한다는 것도 느꼈다.

항상 웹사이트를 구경하다보면 대부분 반응형 페이지로 된 것을 볼 수 있다.(오늘의 집) 내가 프로젝트를 만들 때도 항상 반응형 페이지로 만들려고 노력한다. 하지만, 반응형 페이지의 용어가 정확히 어떤것이고 언제 반응형 페이지를 만들어야하는가? 어떻게하면 유저가 보기 편한 반응형 페이지를 만들 수 있을까? 하는 찰나에 이 책을 보게 되었다. 책은 알라딘에서 주문했고 약 200페이지로 구성되어있다. 읽은 기간은 21.10.19. ~ 21.11.4.이다.

파라벨의 트렌트 월턴은 반응형 디자인의 세계로 진입하게 된 과정을 설명한다. 포토샵으로 작업하던 방식을 버리고 새로운 방식을 채택했는데, 가변 그리드, 가변 이미지, 미디어 쿼리를 활용한 방식이다. 기존에는 페이지를 만들었다면, 페이지 대신 어떤 화면 크기에서든 메시지를 가장 잘 전달하도록 다시 배치할 수 있는 콘텐츠 네트워크를 구축했다. 즉, 반응형 디자인을 어떤 화면 크기에서든 메시지를 가장 잘 전달하게끔 재배치가 가능한 작은 디자인 봉투라고 했다. 이후에는 반응형페이지를 적용한 3-40개의 외국 사이트를 예시로 들면서 사이트들의 장점과 단점에 대해 설명했다.

반응형페이지를 적용할 때 작업의 범위와 복잡도가 커지면서, 작업을 모듈화해야한다는 필요성이 대두되었는데, 디자인 내에서 컴포넌트에 초점을 맞추게 되었다. 그래서 패턴 라이브러리 혹은 스타일가이드를 만드는것에도 새롭게 관심이 집중되었는데 우리가 흔히 알고있는 스타벅스는 반응형 사이트에 사용한 패턴 라이브러리를 공개한 최초의 기업이라고 설명했다. 커스텀벅스 프로젝트를 만들때 스타벅스 패턴 라이브러리를 적극 사용했는데 패턴 라이브러리를 공개한 최초의 기업이라고 하니 신기했다. 다음으로 반응형 페이지를 구성할 때 브라우저가 최신 브라우저인지 테스트하는 방법도 알려줬다. 다음의 코드를 사용했다. 이 코드를 사용했을때의 장점은 사이트가 로드될 때 자바스크립트 테스트코드를 통해 기능 수행이 어려운 브라우저를 걸러내고, 그런 브라우저에는 JS로 구동되는 UI를 대부분 제외하여 깨끗하고 간결하며 핵심적인 사용자 경험만 남겨두는것에 있다.

// querySelector, addEventListener, getComputedStyle DOM 속성의 지원여부를 확인하는 조건문
if ( !( "querySelector" in document && "addEventListener" in window && "getComputedStyle" in window)){
  return;
}

// DOM 속성을 모두 지원하면 HTML요소에 enhanced 클래스를 적용한다.
window.document.documentElement.className += " enhanced";

반응형 페이지를 구성할 때 가변 이미지와 가변 동영상을 설정하는 방법에 대해서도 설명했다. 먼저, 동영상은 이미지와 달리 고유한 크기를 갖고 있지 않으므로 HTML에서 크기를 반드시 지정해줘야 한다. 이때, 종횡비(aspect radio)를 고려하여 넣어야하는데 4:3 비율은 padding-bottom: 75%를 넣고, 16:9 비율은 padding-bottom: 56.2757202%를 넣어주면 된다. padding-top 혹은 padding-bottom에 퍼센트값을 설정하면 그 값은 그것을 둘러싼 컨테이닝 블록의 높이에 대한 비율이 아니라 너비에 대한 비율이 된다. 그 결과 수직 패딩은 항상 그것을 둘러싸고 있는 박스 너비의 75%, 56.2757202%가 된다.

<!DOCTYPE html>
<head>
  <style>
    .intro{
      position: relative;
      padding-top: 25px;  /* IE5 IE6의 깨진 상자 모델을 피하기 위한 공간 */
			padding-bottom: 75%;  /* 4:3 */
      padding-bottom: 56.2757202%;  /* 16:9 */
      height: 0;
    }

    .intro video {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="intro">
    <video controls>
      <source src="/media/cc0-videos/flower.mp4"
              type="video/mp4">
      Sorry, your browser doesn't support embedded videos.
  </video>
  </div>
</body>
</html>

가변형 이미지를 만드는데 유용한 여러 CSS 속성 중 background-size 속성을 이용했다. 만약, 이미지의 너비 혹은 높이가 이미지를 둘러싼 컨테이닝 블록보다 더 크다면 컨테이닝 블록 바깥의 나머지 픽셀들은 보이지 않을 것이다. 하지만 background-size 속성을 사용하면 이와 같은 현상을 제어할 수 있다. 이때 길이값 중 하나를 auto로 설정하면 특정 너비 또는 높이를 기준으로 가로세로 비율을 유지한 채 이미지 크기가 조정된다. 만약, 가로 세로 비율을 유지하면서 컨테이너를 채우고 싶을 때 background-size: cover를 사용하면 되는데, 컨테이너의 크기가 이미지의 크기보다 작다면 이미지의 일부가 뷰에 보이지 않을 때가 있다. 이럴때는 background-size: contain를 사용하면 컨테이너 안의 배경 이미지 전체가 반드시 보인다. 이외에도 반응형광고, flex, grid 등에 대한 설명이 적혀있다.

이 책을 읽었다고 반응형 페이지를 100% 이해했다고 하기는 힘들다. 반응형을 시도하는 방법은 다양하고 지금도 꾸준히 발전하고 있는 분야기 때문이다. 하지만, 책을 읽으면서 반응형페이지가 왜 생기게 되었고 반응형 페이지를 만드는 기초적인 지식, 응용 예제 등을 배워서 좋았다. 제일 남는 지문은 반응형 페이지는 특정 기기 중심의 분기점을 설정하지 않고 요소들의 경계선 위치에 따라 레이아웃 시스템을 조절한다면, 더욱 견실하고 미래 지향적인 레이아웃을 만들어낼 수 있을 것이다. 이렇게되면 우리가 아직 상상해본 적도 없는 기기와 브라우저도 더 잘 대비할 수 있을 것이다.라는 말인데, 요즘에는 모바일, 태블릿, 데스크톱 사이의 경계가 흐려지고 있기때문에 가까운 미래에는 우리가 만드는 사이트가 스마트폰과 화면 크기가 거의 비슷한 스마트 워치에서도 표시될수도 있기 때문에 기기 종류에 한정짓지 말고 환경적 특성을 고려하는 것이 건설적인 방향이라는 의미인것 같다.

이 책을 보게 된 계기는 엘리스 팀 프로젝트에서 프론트엔드를 준비하고 있던 나에게 무지했던 백엔드 파트를 담당하게 되었고, 맨땅에 헤딩하는격으로 백엔드에 관한 정보를 이리저리 찾아보던 중 비교적 최근(2021.5.21.)에 출판했고 Spring을 다루는 책이 아니라 Express.js를 다루는 서적이어서 구매했다. 책은 알라딘에서 주문했고, 책은 약 450페이지로 구성되어있으며 독서기간은 2022.01.25 ~ 2022.02.19이다.

틈틈이 책을 읽으며 당장에 백엔드를 구현해야하는터라 내가 필요한 주제만 먼저 살펴봤다. 익스프레스 소개, 품질보증, 쿠키와 세션, 미들웨어, 지속성, 라우팅, REST API와 JSON, SPA, 보안 파트였다. 이 중에서 가장 기억에 남는 부분은 바로 미들웨어, 쿠키와 세션인데, 나는 JWT를 이용하여 인증을 구현했지만 서버에서 쿠키를 전혀 인식하지 못하는 문제가 있었는데 결국 cookie-parser 미들웨어를 작성하지 않아서 생기는 문제였다.. (이 문제를 해결하기 위해 약 3시간을 삽질했다.) 덕분에 미들웨어의 중요성을 깨달았다. 그리고 쿠키에 대해 기존에 알고있던 지식과 더불어 몇 가지 새로운 사실을 알게 되었는데, 쿠키의 관해 알아둬야 할 중요한 내용은 다음과 같다.

1. 사용자가 쿠키 내용을 볼 수 있다.
  - 서버에서 클라이언트에 보내는 쿠키는 모두 클라이언트에서 볼 수 있다. 쿠키를 암호화해서 콘텐츠를 보호할 수 있긴 하지만, 떳떳한 목적으로만 사용한다면 굳이 암호화할 이유가 없다. 서명된 (Signed)쿠키는 콘텐츠를 읽기 어렵게 만들긴 하겠지만, 암호화라고 할 수 있는 수준이 아니다.

2. 사용자가 쿠키를 삭제하거나 금지할 수 있다.
  - 사용자는 쿠키 전체에 대한 권한이 있고, 브라우저에는 쿠키를 개별적으로, 또는 한꺼번에 삭제하는 기능이 있다. 또한, 사용자가 쿠키를 금지할 수도 있는데 이럴 땐 쿠키 없이도 제대로 동작할 수 있는 웹 애플리케이션은 정말 단순한 기능 말고는 수행하기 어렵다.

3. 쿠키는 공격에 사용될 수 있다.
  - XSS(cross-site-scripting attack) 공격 중 악의적인 자바스크립트 코드로 쿠키 콘텐츠를 바꾸는 방법도 있다. 서버에 전손되는 쿠키를 맹신해서는 안 되는 이유 중 하나다. `서명된 쿠키(Signed cookie)`를 사용하면 사용자나 자바스크립트 코드로 쿠키를 변조했을 경우 그 흔적이 명백히 드러나므로 공격을 막는데 도움이 된다. (서명된 쿠키는 일반적인 쿠키보다 우선순위가 높다. 서명된 쿠키에서 사용된 이름을 일반 쿠키에서는 사용할 수 없다.) 또는 `httpOnly` 옵션을 사용하여 클라이언트에서 쿠키를 수정하지 못하고 서버에서만 가능하게끔 설정할 수도 있다. 이런 경우 활용도가 조금 떨어지지만 훨씬 안전하다.

4. 쿠키를 남용하면 사용자가 눈치챈다.
  - 사용자의 컴퓨터에 쿠키나 데이터를 너무 많이 저장하면 사용자를 짜증나게 할 수 있으므로 피해야 한다. 쿠키는 최소한으로 유지해라.

5. 쿠키에서 사용 할 수 있는 option
  - domain: 쿠키에 도메인을 연결한다. 하지만 현재 서버가 실행 중인 도메인이 아닌 다른 도메인과 연결할 수는 없다.
  - path: 쿠키가 적용될 경로를 지정한다. 기본값인 `/`를 사용하면 사이트의 모든 페이지에 쿠키가 적용된다. 경로를 `/foo`로 설정하면 `/foo`, `/foo/bar` 등에 적용된다.
  - maxAge: 클라이언트가 쿠키를 얼마나 오래 보관하고 있어야 하는지 밀리초 단위로 지정한다. 이 옵션을 설정하지 않으면 쿠키는 브라우저를 닫을 때 삭제된다. `expired` 옵션에서 만료 날짜를 설정할 수도 있지만 문법이 복잡하기 때문에 `maxAge`를 권한다.
  - secure: `HTTPS` 연결을 통해서만 쿠키를 전송한다.
  - httpOnly: 서버에서만 쿠키를 수정한다. 즉, client에서는 쿠리를 수정할 수 없다. XSS공격을 막는데 도움이 된다.
  - signed: 쿠키에 서명을 해서 `res.cookie`가 아니라 `res.signedCookies`에서 접근할 수 있게 한다. 서명된 쿠키가 변조되면 서버는 그 쿠키를 거부하고 원래 값으로 초기화 한다.

또한, passport를 이용해 인증파트를 구현했는데, GitHub Strategy를 사용해서 다음과 같이 인증을 구현했다. 처음에는 passport 홈페이지의 docs와 비슷하게 작성했지만, 다음 코드는 내가 GitFarm 프로젝트에서 작성한 백엔드 코드이다. 코드는 짧아보이지만 나의 서비스에 필요한 정보에 맞게 수정하는데 그 작업이 생각보다 오래 걸렸다.

// passport/strategy/GitHub.js
import GitHub from "passport-github2";
import keys from "../../config/keys.js";
import { User } from "../../model/index.js";

const GitHubStrategy = GitHub.Strategy;
const { clientID, clientSecret, callbackURL } = keys.GitHub;

const config = {
  clientID,
  clientSecret,
  callbackURL,
};

export default new GitHubStrategy(
  config,
  async (accessToken, refreshToken, profile, done) => {
    const { username } = profile;
    const { id, avatar_url: avatarUrl } = profile._json;

    const findUser = await User.findOne({ id });
    if (!findUser) {
      const newUser = new User({
        id,
        username,
        avatarUrl,
        accessToken,
      });

      newUser.save();
      return done(null, newUser);
    }
    return done(null, findUser);
  },
);

// routes/api/auth.js
router.get(
  "/github",
  passport.authenticate("github", {
    scope: ["repo", "profile", "user"],
    session: false,
  }),
);

router.get(
  "/github/callback",
  passport.authenticate("github", {
     session: false,
    failureRedirect: "/api/auth/login/failed",
  }),
  async (req, res) => {
    const { id, username } = req.user;
    const payload = { id, username };
    const token = await createToken(payload);
    res.cookie("token", token, cookieConfig);
    res.redirect("/loading");
  },
);

이 책을 읽으며 최소한의 백엔드에서 필요한 코드를 작성하는데 도움을 많이 받았다. 아직까지 우리나라에서는 Express.js보다 Spring을 더 많이 사용하지만, 백엔드의 큰 틀은 벗어나지 않을 것이다. JAVA보다 JS를 더 잘 알면서 백엔드를 맛보고 싶은 분들에게 추천해주고 싶은 책이다.

reference

1. 한 권으로 끝내는 Node & Express : 모던 웹을 위한 서버 사이드 자바스크립트의 모든 것
2. Passport-GitHub2

기술면접을 준비하다가 주소표시창에 www.naver.com을 입력하고 Enter를 치고나서 브라우저로 렌더링되는 과정을 설명해달라는 말을 듣고 어떻게 되는지 궁금하여 네트워크 프로토콜쪽을 다룬 서적이 있는지 찾아보다 이 책을 발견하게 되었다. 알라딘에서 구매하였고, 구매자의 평도 나름 괜찮았다. 독서기간은 22.3.31. ~ 4.5.이고, 책은 약 300페이지로 구성되어있지만, 그림으로 설명해주는 페이지가 많아 예상보다 빨리 읽었다. 첫 출판이 2015년이라 현재 트렌드(WEB 3.0 등)를 설명해주지 않는 점이 아쉬웠지만, 대부분의 내용은 아직까지도 사용하고 있기 때문에 네트워크, 프로토콜의 전체적인 흐름을 알고 싶은 분들에게 추천하고 싶은 책이다. 참고사항으로 책 제목에 Basic이 들어가서 그런지 한 개념을 깊숙히 설명해주지는 않는다.

컨텐츠는 총 11장으로 구성되어있고, 웹과 네트워크의 기본부터 HTTP, HTTPS, 웹 공격기술까지 작성되어있다.

HTTP는 등장 당시 주로 텍스트를 전송하기 위한 프로토콜이었지만, 프로토콜 자체가 상당히 심플해서 여러 가지 응용 방법을 고려해 기능이 계속해서 추가되었습니다. 지금은 웹이라는 틀을 넘어 다양하게 사용되는 프로토콜이 되었습니다.

서로 다른 하드웨어와 운영체제 등을 가지고 서로 통신하기 위해서는 모든 요소에 규칙이 필요하게 되는데 이를 프로토콜이라고 부릅니다.

프로토콜에는 여러가지가 있지만, 인터넷과 관련한 프로토콜들을 모은 것을 TCP/IP라고 부릅니다. TCP/IP는 애플리케이션 계층, 트랜스포트 계층, 네트워크 계층, 링크 계층 이렇게 4계층으로 나누는데, 계층화 되어있는 이유는 어디선가 사양이 바뀔 때 전체를 바꾸는 것보다 사양이 변경된 해당 계층만 바꾸면 수정을 편하게 할 수 있기 때문입니다.

각 계층을 거칠 때는 반드시 헤더에 해당 계층에 필요한 정보를 추가하고, 반대로 수신측에서는 해당 계층마다 사용한 헤더를 제거합니다.

IP의 역할은 개개인의 패킷을 상대방에게 전달하는 것입니다. IP 주소는 각 노드에 부여된 주소를 가리키고 MAC은 각 네트워크 카드에 할당된 고유의 주소입니다. IP주소는 변경 가능하지만, 기본적으로 MAC 주소는 변경 할 수 없습니다.

IP통신은 MAC주소에 의존해서 통신을 합니다. 인터넷에서 여러대의 컴퓨터와 네트워크 기기를 중계해서 상대방에게 도착합니다.(같은 랜선 내에 있는 경우 제외) 중계하는 동안, 다음으로 중계할 곳의 MAC 주소를 사용하여 목적지를 찾아가는데, 이때 ARP(Address Resolution Protocol)이라는 프로토콜이 사용됩니다.

TCP(Transfer Control Protocol)은 신뢰성 있는 바이트 스트림 서비스를 제공합니다. 쉽게말해 큰 데이터를 보내기 쉽게 TCP 세그먼트라고 불리는 단위 패킷으로 작게 분해하여 관리하는 것을 말하고 정확하게 도착했는지 확인하는 역할을 담당하고 있습니다. 이때, 상대에게 확실하게 데이터를 보내기 위해 3-way-handshaking방법을 사용합니다. 패킷을 보내는 것에서 끝나는게 아니라, 보냈는지 여부를 상대에게 확인하고 SYN, ACK 이라는 TCP플래그를 사용합니다. 송신측에서는 최초 SYN 플래그를 상대에게 접속함과 동시에 패킷을 보내고, 수신측에서는 SYN/ACK 플래그로 송신측에 접속함과 동시에 패킷을 수신한 사실을 전합니다. 마지막으로 송신측이 ACK 플래그를 보내 패킷 교환이 완료되었음을 전합니다.

1. 크롬 주소표시창에 `www.naver.com`을 입력한다.
2. 브라우저가 `protocol`, `host`, `port를` 파싱한다.
3. `HSTS`를 통해 `HTTPS`로 이전에 접속한 도메인이었는지 확인한다.
4. `DNS`가 `Domain`을 `IP`로 변경한다.
5. `Router`를 통해 요청을 수신 할 서버가 있는 `Gateway`로 이동한다.
6. `ARP`를 이용해 `IP`주소를 바탕으로 `MAC`주소를 조사한다.
7. `TCP`를 이용해 소켓통신을 진행한다. 이때, 상대방에게 확실하게 데이터를 보내기 위해 `3-way-handshaking`방법을 사용한다. (`HTTPS`일 때는 `HTTP`와 `SSL`이 통신하고 `SSL`이 `TCP`와 통신한다.)
8. 정상적으로 `TCP socket`에 연결되면, 서버에 페이지를 달라고 요청한다.
9. 서버에서 클라이언트에게 `HTML, CSS, JS`를 보내준다.

이렇게해서 네트워크 통신의 전체적인 흐름을 살펴봤다. 구글링을 통해 배울수도 있지만, 이런 개념은 서적으로 보는게 더 편하다. (최근 트렌드는 공식문서를 보는게 좋다.) 사실, 학부과정에서도 이와 비슷한 정보통신공학개론과목을 수강한적이 있으나 훑고 지나가듯 배우고 오래되어서 자세히 기억이 나지 않았다. Typescript, React 등의 공식문서를 보는것도 좋지만, 근본적으로 네트워크 통신이 올바르게 통신이 되어야 의미가 있으므로 네트워크와 관련한 서적을 자주 읽어야겠다는 생각을 했다.

Reference

1. 그림으로 배우는 HTTP & Network Basic
2. HSTS - MDN

최근에 읽었던 그림으로 배우는 Http & Network Basic(독후감 보러가기)을 읽고 나서 네트워크에 대한 전체 흐름을 대략 파악했는데, HTTP는 TCP 표준에 의존한다는 MDN글을 보고 우리가 흔히 알고있는 프로토콜의 집합인 TCP/IP를 설명해주는 서적은 없는지 찾아보다가 이 책을 발견했다.

여담으로 TCP/IP는 하나의 프로토콜을 지칭하는 말이 아니라 인터넷에서 사용되는 각종 표준 프로토콜을 한데 모아 일컫는 말이다. TCP/IP라고 부르는 이유는 프로토콜중 가장 대표적인 프로토콜이기 때문이다. 개별 프로토콜을 일컫지 않고, 인터넷 프로토콜의 집합의 의미로 굳이 구분할 때는 TCP/IP 프로토콜 스위트(TCP/IP Protocol Suite) 혹은 인터넷 프로토콜 스위트(Internet Protocol Suite)라고 부르면 된다.

책은 알라딘에서 구매했으며 독서기간은 22.4.18. ~ 22.4.21.이다. 책 페이지는 약 170페이지로 구성되어있으며, 글만 있는게 아니라 그림으로 설명해주는 페이지가 많아 의외로 빨리 읽었다. 1쇄 발행은 2016년이고 3쇄 발행은 2020년이다. 비교적 최신 서적이 아니기 때문에 기술이 바뀌었으면 어쩌지?라는 생각이 들었으나, OSI 7계층은 아직도 널리 쓰이고 있기 때문에 걱정하지 않아도 된다.

책은 TCP/IP만 집요하게 설명하는 것이 아니라 OSI 7계층을 한 챕터씩 소개해주고 있다. 컴퓨터 네트워크, 네트워크 서비스와 애플리케이션 계층, 트랜스포트 계층, 라우팅과 인터넷 계층, 하드웨어와 네트워크 인터페이스 계층, 보안 순으로 챕터가 나뉘어있다. 정보통신공학을 전공한 나로서는 책에서 설명해주는 내용이 학부 전공에서 배운내용과 비슷하지만, 전공서적이 이 정도로 쉽고 친절하게 설명해줬다면 얼마나 좋을까라는 생각이 매번 들었다. 😅 😅 많은 내용 중 이번 독후감은 트랜스포트계층의 TCP와 인터넷계층의 IP에 대해서 배운 내용을 간단하게 작성하려고 한다.

컴퓨터와 컴퓨터 사이에서 데이터가 오고 가는 모습은 비교적 쉽게 상상할 수 있으나, 컴퓨터 안의 프로그램까지 데이터가 전달되는 모습은 쉽게 상상하기 어려운데, 컴퓨터 안까지 들어온 데이터를 각 프로그램까지 전달하는 것이 트랜스포트 계층이다. 트랜스포트계층은 애플리케이션 계층과 인터넷 계층 사이에 위치하는데, 인터넷 계층의 역할이 데이터를 수신지 컴퓨터까지 전달하는 것이라면, 트랜스포트 계층의 역할은 컴퓨터가 받은 데이터를 애플리케이션까지 전달하는 것이다.

트랜스포트계층의 대표적인 프로토콜은 TCP와 UDP 두 가지로, TCP는 웹이나 이메일과 같이 데이터가 정확하게 전달되어야 하는 통신에 사용된다. 즉, 수신지에 데이터가 정확하게 전달되도록 전송 속도를 조절하거나 도달하지 않은 데이터를 재전송한다. UDP는 VoIP나 동영상 스트리밍과 같이 전송 속도가 빨라야 하는 곳에 사용한다. UDP는 별다른 처리르 하지 않는 대신 전송속도가 빠르다.

가끔 배포를 진행하다가 HTTP 서버는 80번 포트로 고정되어있는데, 클라이언트의 포트는 무엇일까?라는 생각이 든적이 있는데, 클라이언트인 웹 브라우저는 다이나믹 포트를 사용하기 때문에 포트 번호가 애당초 정해져있지 않다. 다이나믹 포트는 49152 ~ 65535번으로 서버와 통신을 하다가 통신이 종료되면 포트를 반납한다.

TCP는 데이터 전송에 신뢰성을 더하기위해 데이터를 세그먼트(segment)단위로 분할하고, 전송속도를 조정하며, 데이터가 제대로 전달되지 않았을경우 재전송을 하게 된다. TCP 통신은 커넥션 연결에서부터 시작하는데, 커넥션을 맺는 과정은 3단계로 진행되기 때문에 이것을 3-way-handshake라고 부른다. 커넥션이 맺어지면 데이터를 전송할 수 있는 상태가 되고, 데이터 전송이 끝나면 커넥션을 끊는다. 앞에서 전송속도를 조정한다고 했는데, 네트워크 경로가 혼잡하여 통신 속도를 낮춰야 하면, 인터넷 계층의 헤더 안에 혼잡 플래그가 ON으로 설정되고, 송수신 측 양쪽이 ECE 플래그와 CWR 플래그를 사용해서 통신 속도를 조정한다.

다음으로 인터넷 계층의 IP에 대해서 알아보자. 인터넷 계층은 다른 컴퓨터에게 데이터를 전달하는 역할을 한다. 이때 IP Address라고 하는 식별자 정보를 실마리로 데이터를 전달할 수 있는 체계를 제공하도록 역할이 각각 구분되어 있다. 데이터를 목적지까지 전달하기 위해서는 라우터(router)라고 하는 네트워크 장비가 필요하다. 라우터는 네트워크와 네트워크를 연결하는 역할을 하는데, 하나의 라우터는 데이터를 목적지까지 전달하기 위해 다음 네트워크의 경로를 찾고, 그 경로상에 있는 라우터에게 데이터 전달을 위임하게 된다. 최종 목적지를 찾기까지 연쇄적으로 반복되는데, 이렇게 라우터가 목적지의 경로를 찾아 나가는 과정을 라우팅(routing)이라고 한다. IP Address와 관련된 기술로는 숫자로 된 IP Address를 사람이 알아보기 쉬운 도메인명과 연결해주는 DNS(Domain Name System) 등이 있다.

수신자로 지정된 컴퓨터가 실제로 존재하지 않거나 잘못된 경로로 인해 패킷이 제대로 전달되지 않는 경우 이러한 문제를 방지하기 위해 IPv4 헤더에서는 생존기간(TTL, Time To Live) (티아라 & 초신성의 TTL(TIME TO LOVE) 아님.) 값을 설정하여 생존 기간을 초과한 패킷이 네트워크에서 발견되면 해당 패킷을 소멸시키도록 규정하고 있다.

이렇게해서 TCP/IP에 관한 내용을 간단하게 살펴봤다. FE 기술면접에서 자주 물어보는 질문 중 하나가 주소표시창에 www.google.com을 치고나서 일어나는 일들과 브라우저로 렌더링하는 과정을 구체적으로 알려달라고 하는 질문이 많은데, 이 책을 비롯하여 네트워크 관련 서적을 통해 네트워크 전반적인 흐름을 읽고 이해하며 머리속에 넣고 질문이 들어왔을 때 잘 대답했으면 좋겠다. 실제로 최근에 본 기술면접에도 동일한 질문이 나왔었는데, 네트워크 관련 서적을 2권정도 봐서 그런지 자신있게 대답했고 면접관님께서도 구체적으로 잘 안다고 칭찬해주셨다.

마지막으로 학부시절이나 지금이나 마찬가지로 네트워크를 배우며 드는 생각은 네트워크 망을 구축하기 위해 전 세계 사람들이 머리를 맞대어 체계적인 방법으로 네트워크를 구축해주셔서 감사하고, 그분들 덕분에 집에서 손 쉽게 전 세계의 자료를 볼 수 있다는 점에 감사하다는 생각이 들었다.

Reference

1. https://developer.mozilla.org/ko/docs/Web/HTTP/Overview#http%EC%99%80_%EC%97%B0%EA%B2%B0
2. https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=91820548
3. https://ko.wikipedia.org/wiki/OSI_%EB%AA%A8%ED%98%95
4. https://ko.wikipedia.org/wiki/%EB%8F%84%EB%A9%94%EC%9D%B8_%EB%84%A4%EC%9E%84_%EC%8B%9C%EC%8A%A4%ED%85%9C