JEEGOO의 개발 노트

리터럴(Literal) 컴퓨터 과학 분야에서 리터럴(literal)이란 소스 코드의 고정된 값을 대표하는 용어다 (위키백과) javascript뿐 아니라 프로그래밍을 공부하다보면 리터럴이란 용어를 자주 접하게 됩니다. 리터럴은 소스 코드의 고정된 값을 대표하는 용어라고 합니다. 이게 무슨 뜻일까요? 사실 위 설명 그대로의 의미지만 다르게 표현해보자면 문자 그대로의 값입니다. 여기서 상수와 헷갈리수도 있습니다만 이해하기 쉽게 javascript 코드를 예로 들어보겠습니다. const num = 1; // num은 상수이고 1은 10진수 정수 리터럴입니다. let str = '이름'; // str은 변수이고 '이름'은 문자열 리터럴입니다. const array = []; // [] = 배열 리터럴. cons..

목차 개요 사전 준비 Github Jenkins Pipeline Configure Project 개요 지난 포스팅에서 Kubernetes에 Jenkins를 세팅했습니다. 이 포스팅에서는 Sample Project가 github의 master branch에 push될 때 Jenkins Pipeline을 통해 빌드 및 배포되도록 합니다. 순서는 다음과 같습니다. 1. github 저장소를 하나 생성한 뒤 webhook을 정의합니다. 2. 샘플 프로젝트에 Dockerfile과 Kubernetes object yaml 파일을 만들고 Kubernetes에 수동으로 파드를 생성합니다. 3. 샘플 프로젝트에 Jenkinsfile을 만들어 pipeline을 정의합니다. 4. jenkins에 pipeline projec..

목차 개요 사전 준비 환경 설정 Jenkins 설치 Kubernetes Cloud 설정 개요 개인 프로젝트용으로 로컬 환경에서 간단한 CI/CD를 구성하다가 글로 남겨놓고자 겸사겸사 포스팅합니다. 과정은 아래와 같습니다. 1. 프로젝트 소스를 Github Master Branch에 Push. 2. Github Webhook을 통해 Jenkins에서 Pipeline 수행. 3. Test를 진행한 뒤 Docker Image로 Build 및 Push. 4. Kubernetes에서 DockerHub에 Push된 이미지를 가져와 배포. ※ Ingress를 통해 SSL/TLS를 적용하는 부분은 생략하고 관련 링크 첨부합니다. ingress-tls nginx-controller 사전 준비 Docker와 Kuberne..

목차 HTTP란? HTTP 메시지 구조 Handshake HTTP 통신 과정 HTTS HTTP(HyperText Transfer Protocol)란? 클라이언트와 서버 간 데이터를 주고받기 위한 규칙이다. 여기서 데이터는 텍스트, 이미지, 동영상 등 모든 종류를 말한다. TCP(Transmission Control Protocol)와 UDP(User Datagram Protocol)방식이 있으며 80포트를 사용한다. TCP는 1:1 연결을 지향하며 신뢰할 수 있는 통신을 제공한다. 양단에 연결을 수립한 뒤 데이터를 전송하고 연결을 종료한다. 반면, UDP는 1:1 혹은 1: 다의 비연결을 지향하며 신뢰할 수 없는 통신을 제공한다. 연결을 수립하는 과정없이 단방향으로 데이터를 전송한다.TCP과 비교했을 때..

목차 CRP 문제를 어떻게 찾지? 최적화 CRP(Critical Rendering Path) CRP은 문서(HTML, CSS 및 JavaScript)를 화면에 표현하기 위해 거치는 일련의 과정을 말한다. 이 과정을 간단하게 설명하면 다음과 같다. HTML문서가 브라우저에 의해 구문 분석될 때 DOM트리와 CSSOM트리를 구성한다. 그 후 DOM, CSSOM 트리를 결합하여 Render 트리를 구성하고 배치(Layout)를 통해 페이지에 그려질 요소들의 크기와 위치를 결정한다. 마지막으로 그리기(Painting)과정을 통해 픽셀이 화면에 그려진다. 자세한 과정이 궁금하다면 [WEB] 웹 브라우저 렌더링과 최적화를 참고. 더 나은 성능과 우수한 사용자 경험을 제공하기 위해서 CRP을 최적화하는 것은 중요하다..

목차 웹 브라우저의 구조 웹 브라우저의 렌더링 과정 재배치(Reflow)와 다시 그리기(Repainting) 최적화 웹 브라우저의 렌더링 과정을 파악하는 것은 웹 개발자로서 꼭 필요하다고 생각한다. Javascript를 통해 요소를 조작하고 스타일을 변경하는 과정에서 재배치(Reflow)와 다시 그리기(Repainting)가 이루어지며 이를 최소화할수록 더 나은 성능과 사용자 경험을 제공하기 때문이다. 웹 브라우저의 구조 사용자 인터페이스 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다. 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. 렌더링 엔진 요청한 콘텐츠를 표시한다. 예를 들어 요청 후 전송받은 문서의 HTML과 ..

목차 이벤트 루프? 호출 스택 이벤트 루프! (feat. 이벤트 큐) JavaScript는 싱글 스레드 언어입니다. 즉, 한번에 하나의 작업만을 처리할 수 있습니다. 하지만 개발하다보면 비동기 코드를 작성하게 되는데 이 코드는 동시적으로 여러 개의 작업이 수행됩니다. 싱글 스레드 언어인 JavaScript에서 이런 동시성을 어떻게 처리하는걸까요. 이벤트 루프 JavaScript 동시성에 대해 검색을 하다보면 이벤트 루프라는 용어가 항상 등장합니다. MDN에서도 이벤트 루프를 JavaScript의 동시성 모델의 기반이라고 설명하고 있습니다. 반면 ECMAScript의 공식 스펙 문서에 이벤트 루프라는 용어는 등장하지 않습니다. 도대체 이벤트 루프가 무엇일까요? 이벤트 루프를 이해하려면 먼저 호출 스택을 알..

# 시작 지난 포스팅에 게시판의 BE 설정을 했습니다. 이번 포스팅에서는 FE 설정을 진행합니다. 개인 공부를 기록하는 게 주목적이다 보니 기본적인 부분들의 설명은 생략했습니다. # 준비 위와 같이 파일들을 생성합니다. 각 파일의 역할은 다음과 같습니다. index: 게시판 목록 최상위 컴포넌트 Board: 게시판 목록의 각 로우를 생성하는 컴포넌트 BoardList: 게시판 목록을 생성하는 컴포넌트 BoardDetail: 게시글 상세보기 컴포넌트 BoardWriter: 게시글을 등록, 수정하는 컴포넌트 Queries: 게시판과 관련된 GraphQL 쿼리를 관리하는 컴포넌트 Type: TypeScript의 interface 및 type을 관리하는 컴포넌트 먼저 Route설정을 진행합니다. RouteCom..