Tech Talk
Docker
- 리눅스 기반의 컨테이너 기반의 오픈소스 가상화 플랫폼
- Virtual, Image, Container
- 배포 때문에 도커 사용
- 장점
- 팀워크
- 언어나프레임 워크 버전 미리 정할 수 있음
- 도커 이용하면 로컬 환경의 간섭없이 독립적 구동이 가능
- 서버
- 서버 컴퓨터를 자신의 개발환경과 동일하게 만들 수 있음
- 서버를 옮기거나 늘리기 쉬움
- 자원 & 성능
- 다른 가상 환경 기술에 비해 가볍고 빠른 실행 속도 가짐
- 유동적으로 자원을 사용함
- Docker - Image
- 특정 프로세스를 실행하기 위한 모든 파일과 설정값을 지닌 것
- 이미지를 만들기 위해서
- Docker hub에 올라온 이미지 다운
- Dockerfile을 이용하여 나만의 이미지 만들기
- Docker - Dockerfile
- DSL(domain-specific-language)를 이용한 이미지 생성 과정 파일
- Docker - Container
- 어플리케이션 자체를 패키징하여 동작시키는 독립적인 공간
- 하나의 서버가 여러 개의 컨테이너 소유 가능
- Docker - Network
- 여러 개의 컨테이너를 연결시켜 서로 통신 시키는 곳
- 컨테이너는 독립적인 공간이기 때문에 서로 연결되어 있지 않아서 네트워크를 이용하여 연결 시킨다.
- Host, Bridge, Overlay
- Docker is dead...
HTTP 상태코드
- 클라이언트가 보낸 HTTP 요청에 대한 서버의 응답 코드
- 상태 코드에 따라 요청의 성공/실패를 진단
- 클라이언트가 보냈던 요청의 수행 결과를 의미하는 일종의 약속이며, API를 구성하는 중요한 요소 중 하나
- 협업할 때 HTTP 상태코드를 백엔드에서 보내주기 때문에 중요함
- 100번 대 (continue)
- 요청을 받았으며 프로세스를 계속한다.
- 100, 102
- 200번 대 (성공)
- 클라이언트 요청이 성공적으로 수행
- GET, HEAD, PUT, POST, DELETE, TRACE
- 200, 201, 202, 203, 204
- 300번 대 (Redirection)
- 클라이언트는 요청을 마치기 위해 추가 동작을 취해야 한다.
- 301, 304
- 400번 대 (클라이언트 오류) - 가장 많이 보게 됨
- 클라이언트 오류 / 나의 실수로 인해 생기는 오류
- 400, 401, 403, 404, 405, 409
- 500번 대 (서버 오류)
- 서버 오류 : 우리의 잘못이 아닌 서버의 잘못(ex. 개발자가 코드를 잘못 작성 - 백엔드)
- 500, 502, 503, 504
nginx
- Web Server - 정적인 데이터
- WAS - 동적인 데이터(정적 데이터를 제공할 수도 있고, 그것을 가공해 동적인 데이터를 제공할 수도 있음)
- CGI(Common Gateway Interface) - 시스템에 부하가 생기면 문제 발생 → 별로 좋지 않음 ⇒ WAS 사용하게 됨
- WAS(Web Application Server)
- 웹서버가 앞에 존재하는 이유 : WAS의 부담을 줄여주기 위해
- nginx는 WAS 중 하나
- 장점
- 가볍고 빠르다.
- 리버스 프록시로 사용 가능(Reverse Proxy)
- SSL 인증서 적용 - HTTPS 보안 설정 가능
- 웹페이지 접근 인증
- 압축 - gZip 이용
- 비동기처리
- 로드 밸런싱
- 리다이렉선
검색창에 URL을 검색하면 일어나는 일
- What happens when type google.com into your browser
- What happens when you type a URL in the browser and press enter?
- [번역] Browser에 www.google.com을 검색하면 어떤 일이 일어날까?
- 왜 알아야 하는가?
- 어떤 것이 일어나는가?
- DNS(Domain Name System)
- 도메인 이름과 IP 주소를 서로 변환하는 시스템
- 인터넷 전화번호부라 생각하면 이해하기 쉬움
- DNS 기록을 찾기 위해 브라우저는 4개의 캐시를 탐색함
- 브라우저 캐시, OS 캐시, 라우터 캐시, ISP 캐시
- 만약 요청한 URL이 캐시에 없다면 ISP의 DNS 서버는 DNS 쿼리를 날림
- DNS 쿼리의 목적은 여러 DNS 서버를 검색해서 해당 사이트의 IP를 찾는 것
- ISP의 DNS 서버를 DNS recursor라 부름
- 도메인의 올바른 IP 주소를 찾는 데 책임이 있음
- DNS name sever
- 인터넷 프로토콜
- HTTP는 TCP 사용
- TCP 연결은 TCP/IP three-way handshake라는 과정을 통해 이뤄짐
- 브라우저는 웹 페이지를 요청하는 GET 또는 POST 요청을 보냄
- 웹서버는 브라우저로부터 요청을 받고 request handler한테 요청을 전달해서 응답을 생성하게 됨
Virtual Dom (가상 돔)
- 브라우저의 렌더링 과정
- DOM tree 생성
- 렌더링 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리 생성
- Render tree 생성
- CSS 파일과 inline 스타일을 파싱 DOM + CssDom 렌더트리를 생성
- Layout
- 각 노드들의 스크린에서의 좌표에 따라 위치 결정
- Repaint
- DOM 조작은 비효율적임
- 변화가 일어나면 처음부터 다시 노드를 구성함
- 계속적인 반복 작업이라 비효율적
- Single Page Applications
- 페이지를 서버가 아닌 브라우저에서 관리
- 페이지를 변경하지 않고동일한 페이지에서 동적으로 다시 작성
- Virtual Dom
- Real Dom을 복사해서 변화된 것들의 노드만 새로 구성
- Real Dom과 같은 속성들을 가지고 있지만 같은 힘을 들이지는 않는다.
- 리액트에서 Virtual Dom 사용
- 전체 Virtual Dom 업데이트
- Virtual Dom 업데이트 이전 시점과 비교
- 실제로 바뀐 부분만 Real Dom에서 바꾼다.
- Real Dom에서 변화를 화면에 그린다.
- Virtual Dom 동작원리
- JS 객체로 표현
- 메모리 상에서 동작
- 실제 렌더링x
- 가상돔이 효율적이긴 하지만 아무런 인터렉션이 발생하지 않는 정적인 페이지는 일반 DOM의 성능이 더 좋을 수 있다.
- 인터렉션이란 웹에서의 변화(ex: 댓글)
프로세스와 스레드
- 프로그램
- 파일이 저장 장치에 저장되어 있지만 메모리에는 올라가 있지 않은 정적인 상태
- 모든 프로그램은 운영체제가 실행되기 위한 메모리 공간을 할당해야 한다.
- 프로세스
- 운영체제로부터 자원을 할당 받은 작업의 단위
- 프로그램은 코드 덩어리 파일, 그 프로그램을 실행한 게 프로세스
- 스레드
- 프로세스와 다르게 스레드 간 메모리를 공유하며 작동
- 프로세스의 코드에 정의된 절차에 따라 실행되는 특수한 절차
- CPU입장에서의 최소 작업 단위
- 프로세스와 스레드의 차이
- 스레드는 프로세스와 다르게 스레드 간 메모리를 공유하며 작동
- 스레드는 프로세스의 코드에 정의된 절차에 따라 실행되는 특정한 수행 방식
- 프로세스는 서로 하는 일을 공유할 수 없다.
- 스레드는 메모리를 서로 공유할 수 있다.
- 스레드는 별도의 스택을 가지고 있지만 힙 메모리는 서로 읽고 쓸 수 있게 된다.
- 멀티 태스킹
- CPU(프로세서)는 한 순간에 하나의 프로세스만 실행할 수 있다.
- Context Switching
- 자원은 프로세스 단위로 받고
- 작업은 스레드 단위로 진행
자바스크립트의 이벤트 루프
- 자바스크립트는 싱글 스레드 기반의 동기적 언어
- 자바스크립트는 싱글 스레드이면서 브라우저에서 제공하는 API 때문에 비동기 처리 가능
- Memory Heap
- Call Stack
- 한 줄 단위의 실행될 코드 할당
- LIFO
- 제일 나중에 들어온 것이 가장 먼저 나가는 자료구조
- Web APIS
- 콜백함수를 대신해서 Promise 사용
promise와 async/await
- 비동기처리
- 특정 로직의 실행이 끝날 때까지 기다리지 않고 나머지 코드를 실행하는 것
- 요청을 보낸 후 응답과 관계없이 다음 동작을 실행
- 동기적 처리는 하나의 실행이 끝나야 다음 동작 실행
- Promise
- 자바스크립트에서 비동기 처리에 사용되는 객체
- 비동기 요청의 미래 결과 값을 나타내는 것
- 다음 중 하나의 상태를 가진다.
- 대기(pending): 이행하거나 거부되지 않은 초기 상태
- 이행(fulfilled): 연산이 성공적으로 완료됨
- 거부(rejected): 연산이 실패함
- async/await
- 가장 최근에 나온 비동기 처리 패턴
- 개발자가 읽기 좋은 코드를 작성할 수 있음
- async가 붙은 함수는 promise 타입을 반환 (then(), catch() 사용 가능)
- await는 async가 붙은 함수에서만 사용 가능
Github Actions
- 소프트웨어 개발 Workflow 자동화 도구
- CI (Continuous Integration)
- CD (Continuous Deployment)
TIL
- 테크톡을 들으면서 모든 것을 새로 알게 되었다. 들어본 용어도 있었지만 제대로 어떤 용어인지 몰랐는데 이번에 테크톡을 들으며 대강은 알게 되었다. 테크톡 주제들에 대해 깊게 공부해봐야겠다는 생각이 들었다. 언제 할지는 모르겠지만..😅
Lesson Learned
잘한 점
- 테크톡 발표를 들으면서 기록을 한 것은 너무 잘한 일인 것 같다. 지금은 개발에 대해 아직 잘 모르기 때문에 처음 듣는 말들이 많았지만 기록을 해두면 기억에도 더 남을 테고 다음에 들었을 때도 아~ 이런 거였지 하고 생각할 것 같다.
아쉬운 점
- 낯선 용어들이 너무 많았다... 계속 열심히 공부하다 보면 나도 다 알게 되겠지?
배운 점
- 2기분들이 발표하셨는데 발표란 이런 거구나... ppt는 이렇게 만들어야 하는구나... 이만큼 준비해야 사람들이 질문할 때도 대답을 잘할 수 있는 거구나... 를 배웠다. 나도 다음주에 발표해야 하는데 잘할 수 있을까😂