로컬에서 변경사항 확인

bundle exec jekyll serve 명령어를 실행하면 로컬에서 Jekyll을 사용하여 정적 웹사이트를 생성하고, 내장된 개발 서버를 통해 웹사이트를 호스팅합니다. 이렇게 실행하면 실시간 변경을 확인할 수 있는 이유는 다음과 같습니다:

1. 자동 재생성 (Auto-regeneration): Jekyll은 파일이 변경될 때마다 자동으로 사이트를 다시 생성하도록 설정할 수 있습니다. bundle exec jekyll serve 명령을 실행하면 Jekyll은 소스 디렉토리의 내용을 모니터링하고, 파일이 변경될 때마다 사이트를 다시 빌드하여 새로운 변경 사항을 반영합니다. 이로써 실시간으로 변경된 내용을 확인할 수 있습니다.

2. 개발 서버 (Development Server): bundle exec jekyll serve 명령을 실행하면 내장된 개발 서버가 시작됩니다. 이 서버는 로컬에서 웹사이트를 호스팅하며, 변경 사항이 발생할 때마다 자동으로 사이트를 다시 빌드하여 브라우저에서 변경 내용을 확인할 수 있도록 합니다.

3. 브라우저 자동 새로고침: 개발 서버가 시작되면 브라우저에 자동으로 실시간 새로고침 기능이 적용됩니다. 파일이 변경되고 사이트가 다시 빌드될 때마다 브라우저는 자동으로 페이지를 새로 고침하여 변경 내용을 보여줍니다.

위의 요소들이 함께 작동하여, bundle exec jekyll serve 명령을 실행한 상태에서 소스 코드를 수정하면 Jekyll이 자동으로 사이트를 다시 생성하고, 개발 서버가 변경 사항을 브라우저로 전달하여 실시간으로 변경 내용을 확인할 수 있도록 만들어줍니다.

Jekyll과 Liquid

먼저 Jekyll과 Liquid은 웹 개발 분야에서 사용되는 두 가지 도구입니다. 각각은 정적 사이트 생성기와 템플릿 언어로 사용되며, 웹사이트의 구축 및 관리를 용이하게 해줍니다.

1. Jekyll:
   Jekyll은 정적 사이트 생성기로, 웹사이트를 만들고 관리하기 위한 도구입니다. Jekyll은 Markdown, HTML, CSS 등의 웹 기술을 사용하여 컨텐츠를 작성하고, 이를 바탕으로 정적인 HTML 페이지를 생성합니다. 이렇게 생성된 정적 사이트는 웹 서버에 배포하여 호스팅하거나, GitHub Pages와 같은 플랫폼에 배포할 수 있습니다.

   주요 기능:

   • 마크다운과 HTML로 작성된 컨텐츠를 변환하여 정적 웹페이지를 생성합니다.
   • 레이아웃, 템플릿, 포스트 등의 개념을 지원하여 웹사이트의 일관성을 유지하고 구성할 수 있습니다.
   • 내장된 개발 서버를 통해 로컬에서 사이트를 빠르게 확인할 수 있습니다.
   • 다양한 플러그인과 테마를 활용하여 웹사이트를 확장하고 개선할 수 있습니다.

2. Liquid:
   Liquid는 템플릿 언어로, 주로 Jekyll과 같은 정적 사이트 생성기에서 사용되며, 동적인 컨텐츠를 효율적으로 처리하고 템플릿을 관리하는 데 사용됩니다. Liquid는 주로 HTML과 함께 사용되며, 루비와 비슷한 문법을 가지고 있습니다.

   주요 기능:

   • 변수, 조건문, 반복문 등의 기능을 포함하여 템플릿 안에서 동적인 내용을 처리할 수 있습니다.
   • 웹사이트의 일관성을 유지하고 코드를 재사용하기 위해 템플릿 기능을 지원합니다.
   • Jekyll과 같은 정적 사이트 생성기에서는 Liquid 템플릿을 사용하여 사이트의 레이아웃, 포스트, 페이지 등을 구성합니다.
   • 웹 개발에서도 Liquid를 통해 동적인 데이터를 효과적으로 처리하고 템플릿화된 컨텐츠를 생성할 수 있습니다.

요약하면, Jekyll은 정적 사이트 생성기로 마크다운과 HTML 컨텐츠를 기반으로 정적 웹사이트를 생성하고 관리하는 도구입니다. Liquid는 Jekyll과 같은 도구에서 사용되는 템플릿 언어로, 템플릿화된 컨텐츠를 생성하고 동적인 데이터를 처리하는 역할을 합니다.

CS 지식

컴파일러와 인터프리터의 차이

컴파일러와 인터프리터는 사람이 이해할 수 있는 언어인 프로그래밍 언어를 사용된 코드를 컴퓨터가 이해할 수 있는 기계어로 변환해주는 번역기 역할을 합니다. 두 도구의 차이는 다음과 같습니다.

1. 실행 방식:

   • 컴파일러: 소스 코드를 한 번에 모두 읽고 분석한 뒤, 중간 코드 또는 기계 코드로 변환합니다. 이 변환된 코드는 컴파일 과정 중에 생성되며, 실행 시에는 이 코드를 직접 실행합니다. 이것은 프로그램 실행 속도를 향상시킬 수 있습니다.
   • 인터프리터: 소스 코드를 한 줄씩 읽고 해석하여 실행합니다. 따라서 소스 코드가 실행되기 전에 중간 코드 또는 기계 코드로 변환되지 않으며, 코드를 직접 실행하는 동안 소스 코드를 해석합니다.

2. 속도와 성능:

   • 컴파일러: 컴파일된 코드는 실행 시간에 더 빠르게 실행될 수 있으므로 실행 속도가 빠를 수 있습니다. 그러나 컴파일 시간이 필요하며, 변경된 소스 코드를 적용하려면 다시 컴파일해야 합니다.
   • 인터프리터: 실행 시간에 소스 코드를 해석하므로 컴파일러에 비해 실행 속도가 느릴 수 있습니다. 그러나 코드 수정 및 디버깅이 더 편리하며, 소스 코드 변경 후 바로 실행할 수 있습니다.

3. 디버깅:

   • 컴파일러: 컴파일된 코드를 디버그하기 어려울 수 있으며, 디버그 정보가 소스 코드와 일치하지 않을 수 있습니다.
   • 인터프리터: 소스 코드를 직접 해석하므로 디버깅이 더 쉽고 직관적입니다. 디버그 정보가 소스 코드와 일치합니다.

4. 예시 언어:

   • 컴파일러: C, C++, Java, Rust 등
   • 인터프리터: Python, JavaScript, Ruby, PHP 등

문법, syntax
의미, semantics
자바스크립트에서는 문법적으로는 맞으나, 의미가 옳지 않은 경우가 있다.

/** number라는 변수에서 문자열이 할당되어서, 의미가 이상해짐 */
const number = 'string';

Ajax의 등장

1999년 자바스크립트를 이용해 서버와 브라우저 사이의 데이터를 비동기적으로 전달할 수 있는 기능인 Ajax가 XMLHttpRequest라는 이름의 객체를 사용하여 가능해졌습니다. 그 전에는 웹 사이트가 전체 웹 페이지를 렌더링하는 방식이었기 때문에, 불필요한 데이터 사용과 새로기침이 화면이 깜빡이는 현상이 있었죠.

Ajax가 등장한 후에는 변경이 필요한 부분에 대한 데이터만 전송받아 한정적으로 렌더링하게 되어, 효율적인 데이터 사용과 부드러운 화면 전환이 가능해졌습니다.

XMLHttpRequest

XMLHttpRequest는 JavaScript에서 사용되는 객체입니다. 이 객체를 사용하여 웹 페이지에서 비동기적으로 서버와 통신할 수 있습니다. XMLHttpRequest 객체를 사용하면 웹 페이지가 다시 로드되지 않고도 서버로 데이터를 보낼 수 있으며, 서버로부터 데이터를 받아와 웹 페이지를 업데이트할 수 있습니다. XMLHttpRequest는 클라이언트 측 웹 개발에서 서버와의 통신을 처리하는 핵심 도구 중 하나입니다.

Ajax (Asynchronous JavaScript and XML)

Ajax는 "Asynchronous JavaScript and XML"의 약자로, 클라이언트 측 웹 애플리케이션을 개발하는 데 사용되는 개념 및 기술 모음입니다. Ajax는 XMLHttpRequest 객체를 주로 사용하여 웹 페이지와 서버 간 비동기 통신을 구현하는 기술 중 하나입니다. 그러나 Ajax는 이것뿐만 아니라 JavaScript, HTML, CSS 등 다양한 기술과 함께 사용되어 웹 애플리케이션의 사용자 경험을 향상시키는 데 기여합니다. Ajax는 사용자의 입력에 반응하면서 서버로 데이터를 보내고 받아와 동적으로 웹 페이지를 업데이트하는 데 사용됩니다.

XMLHttpRequest 통신 과정

1. XMLHttpRequest 객체 생성:
   먼저 XMLHttpRequest 객체를 생성합니다. 이것은 웹 브라우저 환경에서 제공하는 내장 객체입니다. 다음과 같이 생성할 수 있습니다.

   var xhr = new XMLHttpRequest();

2. 콜백 함수 설정:
   XMLHttpRequest 객체의 onreadystatechange 속성을 설정하여 서버 응답을 처리할 콜백 함수를 지정합니다. 이 콜백 함수는 서버 응답의 상태에 따라 호출됩니다.

   xhr.onreadystatechange = function () {
       if (xhr.readyState === 4 && xhr.status === 200) {
           // 서버 응답을 성공적으로 처리하는 코드
       }
   };

   여기서 readyState는 XMLHttpRequest의 상태를 나타내며, status는 서버 응답의 HTTP 상태 코드를 나타냅니다.

3. 요청 설정:
   XMLHttpRequest 객체의 open() 메서드를 사용하여 요청을 설정합니다. 이 메서드는 요청 메서드(GET, POST 등)와 요청할 URL을 지정합니다.

   xhr.open("GET", "https://api.example.com/data", true);

   세 번째 인자 true는 비동기 요청을 나타냅니다. true로 설정하면 요청이 비동기적으로 수행되며, 페이지의 다른 작업을 차단하지 않습니다.

4. 요청 전송:
   요청을 서버로 보내려면 send() 메서드를 호출합니다.

   xhr.send();

   이로써 서버로 비동기 요청이 보내집니다.

5. 콜백 함수에서 응답 처리:
   onreadystatechange 콜백 함수 내부에서 서버 응답을 처리합니다. 이 함수는 readyState가 4(완료)이고 status가 200(성공)일 때 응답을 처리합니다. 예를 들어 xhr 객체의 responseText 속성을 이용해서 받아온 데이터를 활용할 수 있습니다.

   document.getElementById("text").innerHTML = xhr.responseText;

참조

모던 자바스크립트 Deep Dive