함수 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의 한 것 함수또한 값이며 여러개 존재 할 수 있으므로 함수를 구별하기위해 식별자인 함수이름을 사용할 수 있다 식별자 네이밍을 통해 함수 내부의 코드를 이해하지 않고도 함수의 역할을 파악할 수 있다 (코드의 가독성을 높임) 함수는 몇번이든 재 호출 할 수 있기 때문에 코드의 재사용성 측면에서 뛰어나고 그로인해 유지보수와 코드의 신뢰성 향상을 높이는 효과가 있음 함수 리터럴 함수 리터럴에서 함수 이름은 함수 몸체에서만 참조 할 수 있는 식별자임 함수 정의 함수 선언문 함수 선언문은 함수 이름을 생략 할 수 없음 표현식이 아닌 문이기 때문에 콘솔에서 함수 선언문 실행 시 undefined를 출력함 자바스크립트 엔진은 함수 선언문을 해석해 함수를 할당할 함수의 이름과 동일한 식별자를 생성하고 거기에 생성된 함수객체를 할당한다 이로 인해 함수 선언문은 식별자에 할당되지 않았음에도 호출할 수 있다. 함수 표현식 …

객체 자바스크립트를 구성하고있는 거의 모든 것이 객체 변경가능한 값 프로퍼티: 객체의 상태를 나타내는 값 메서드: 프로퍼티를 참조하고 조작할 수 있는 동작 객체 리터럴에 의한 객체 생성 자바스크립트는 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방법을 지원 객체 리터럴 (앞 서 보인 코드가 객체리터럴로 생성한 객체) Object 생성자 함수 생성자 함수 Object.create 메서드 클래스(ES6) 프로퍼티 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성됨 프로퍼티의 나열은 쉼표로 구분함 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값 프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값 문자열 또는 문자열로 평가할 수 있는 표현식을 통해 프로퍼티키를 동적으로 생성할 수도 참조할 수 도 있음 프로퍼티 키에 문자열, 심벌 값 외의 값을 사용하면 암묵적 타입변환으로 인해 문자열이 됨 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 …

타입 변환과 단축 평가 타입 변환이란? 명시적 타입변환(타입 캐스팅): 개발자가 의도적으로 값의 타입을 변경하는 것을 의미 암묵적 타입변환(타입 강제 변환): 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것을 의미 암묵적 타입 변환 자바스크립트 엔진에 의한 암묵적 타입변환이 발생하는 경우 원시 타입중 하나로 타입을 자동 변환함 문자열 타입으로 변환 숫자 타입으로 변환 산술연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야만 숫자 값을 만들 수 있기 때문에 숫자타입이 아닌 피연산자의 경우 암묵적으로 숫자 타입으로 타입변환을 한다. 불리언 타입으로 변환 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy값(참으로 평가되는 값) 또는 Falsy값(거짓으로 평가되는 값) 으로 구분한다. Falsy값 false undefined null 0, -0 NaN ”(빈 문자열) 명시적 타입 변환 표준 빌트인 생성자 함수(String, Number, Bo…

연산자 피연산자를 연산하여 새로운 값을 만들어 줌 산술 연산자 이항 산술 연산자 2개의 피연산자를 연산하여 숫자 값을 만듦 피연산자의 값을 바꾸지 않고 언제나 새로운 값을 만듬 (부수효과 sideEffect가 발생하지 않음) 단항 산술 연산자 1개의 피연산자를 연산하여 숫자 값을 만듦 증가/감소 연산자는 부수효과가 발생함 문자열 연결 연산자 +연산자를 통해 서로 다른 데이터 타입을 연산할 경우 자바스크립트 엔진이 암묵적으로 타입을 자동 변환 시킴 (암묵적 타입변환 또는 타입 강제 변환) 할당 연산자 우항의 값을 좌항의 변수에 할당(부수효과 발생) 비교 연산자 좌항과 우항의 피연산자를 비교한 다음 불리언 값을 반환 동등 비교 연산자 동등 비교 : 값만을 비교하며, == 는 긍정, != 는 부정 동등 비교 연산자는 좌항, 우항의 피연산자를 비교하기 전에 암묵적 타입 변환을 통해 타입을 일치시키고 값을 비교 일치 비교 : 값과 타입을 비교하며 === 는 긍정, !== 는 부정 일치 …

원시타입과 객체 타입 Number, String, Boolean, undefined, null, Symbol은 원시 타입입니다. 그 외는 객체 타입(Object, Array) 원시타입은 변경불가능(immutable)한 값 이며 객체타입은 변경 가능한(mutable) 값이다. 원시 값을 변수에 할당하면 메모리에 실제 값이 저장되며 객체를 변수에 할당하면 참조 값이 저장됨 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시값이 복사되어 전달(값에 의한 전달) 객체 값을 갖는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달(참조에 의한 전달) 원시 값은 변경 불가능하다? 변수의 값을 변경하지 못하는 것이 아니라 원시 값 자체를 변경할 수 없다는 의미 아래 이미지는 원시 값을 가지는 변수에 값을 재할당하는 경우 메모리에서 발생하는 현상을 그림으로 표현한 것이다. 변수의 값을 다른 변수에 할당할 때는 아래와 같이 동작한다 값의 이러한 특성을 불변성이라고 함 문자열의 경…

변수 변수의 정의는 아래와 같다 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별해 붙인 이름 메모리 공간에 저장된 값을 식별할 수 있는 이름을 변수명 이라고 하며 변수에 저장된 값은 변수값이 된다. 식별자 변수, 함수, 클래스 등의 이름으로 지칭한 것 값이 아니라 메모리 주소를 기억하고 있음 변수 이름으로는 메모리상의 변수 값을 식별할 수 있고 함수 명으로는 함수(자바스크립트에서 함수는 값)를 식별할 수 있음 식별자 네이밍 규칙 특수문자를 제외한 문자, 숫자 언더스코어(_), 달러 기호($)를 포함할 수 있음 단, 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작해야함, 숫자로의 시작은 허용되지 않음 예약어는 식별자로 사용할 수 없음 변수 선언 값을 저장하기 위한 메모리 공간을 확보하고 변수명과 확보된 메모리 공간의 주소를 연결해서 값을 저장 할 수 있게 준비하는 것 var, let, const 키워드를 사용하여 선언함 let, const 키워…

자바스크립트의 특징 웹 브라우저에서 동작하는 유일한 프로그래밍 언어 기본 문법은 C, JAVA와 유사하며 Self로 부터 프로토타입 기반 상속을 Scheme으로 부터 일급함수의 개념을 차용 개발자가 별도의 컴파일을 수행하지 않는 인터프리터 언어 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 합쳐 인터프리터의 단점(비교적 처리속도가 느림)을 해결 전통적인 컴파일러와 같은 컴파일 과정을 거치지는 않지만 복잡한 과정을 통해 일부 소스코드를 컴파일하고 실행 자바스크립트는 명령형, 함수형, 프로토 타입 기반 객체 지향을 지원하는 멀티 패러다임 프로그래밍 언어 인터프리터와 컴파일러 컴파일러 인터프리터 컴파일 단계에 소스코드 전체를 한번에 머신코드로 변환한 후 실행 런타임에 문 단위로 한줄 씩 중간코드인 바이트 코드로 변환 한 후 실행 실행파일을 생성함 실행파일을 생성하지 않음 컴파일 단계와 실행단계가 분리되어 있음명시적인 컴파일 단계 이후 명시적으로 실행파일을 실행 인터프리트 단계와…

nvm 이란 Node Version Manager의 약자로 사용자별로 설치되고 셸별로 호출되도록 설계된 node.js용 버전 관리자입니다. nvm은 모든 POSIX 호환 셸(sh, dash, ksh, zsh, bash), 특히 Unix, macOS 및 Windows WSL 플랫폼에서 작동합니다. 설치 방법 설치 링크 사용법 Listing Version To Download, compile, install Long Term Support Use 설치중 겪은 에러 python version 에러 lts/gallium 설치 시 mac에 설치된 python 버전이 3.11 이여서 발생한 오류 해결방법 pyenv 설치 후 호환되는 python 버전을 설치하여 node 설치 재 진행 curl 404 not found 에러 상대적으로 구 버전인 node 의 경우(16 아래버전) Apple Silicon의 아키텍쳐인 arm64를 지원하지 않아 패키지 설치에 오류가 발생하고 node가 정상적으로…

레벨 0 문제 풀이 자연수 n이 주어졌을 떄 n의 순서쌍을 구하는 문제였다 n의 약수의 갯수가 곧 순서쌍의 갯수라고 생각하여 약수를 구하도록 구현하였다 아니나다를까 성공하여도 효율성이 너무떨어진다. 가장 많은 추천을 받은 풀이를 보았더니 제곱근을 활용하였다 반복 수가 반으로 줄어들어 훨씬 효율적인 코드였다. 나중에 유사한 문제에서 활용해 볼 수 있도록 메모!

레벨 0 문제 풀이 주어진 배열의 최빈값을 구하는 문제였다 배열내의 동일한 수를 저장하기위해 객체를 만들어 key에 array의 value를 value에 array value의 동일한 숫자의 갯수를 저장하였다 문제는 어떻게든 해결하였으나 과연 효율적인가 라는 의구심이 계속들었다 다른 사람의 풀이를 보니 Set을 사용한 해결 풀이가 많아 Set을 통해 코드를 개선해보았다 map을 통해 object key value 변환 과정을 최소화 하는 코드이며 sort를 사용하여 가장 첫번째 인덱스에 array 내에 가장 많이 나온 값을 우선적으로 정렬하였다

일반적인 로그인 방법 가장 쉬운 방법으로는 git config 에 계정정보를 저장하는 방법이 있다. 이후 아이디와 패스워드를 입력하면 사용하려는 github 계정이 저장된다. 2개이상의 계정을 사용해야할 경우에는?! 검색을 하였을 때 가장 많이 언급되는 방법은 ssh-key를 이용하는 방법이었다. ssh-key 생성 ssh 디렉토리로 이동 github 이메일로 ssh-key 생성 (명령어 실행 시 암호 입력을 받는데 엔터 2번 쳐서 skip 가능) ls 명령으로 생성된 key 정보를 확인할 수 있음 (idrsatest, idrsatest.pub - 개인키, 공개키) ssh-agent에 ssh-key 추가 (계정 수 만큼 ssh-add 진행) github 계정에 ssh 키 등록 생성된 공개키 파일의 내용을 복사 github에 해당 생성한 사용자 계정으로 로그인 프로필의 settings 메뉴로 이동 좌측의 SSH and GPG keys 진입 new SSH 클릭하여 복사한 공개키 저…

레벨 0 문제 풀이 분모의 최소 공배수를 구한 뒤 덧셈을 한 후 최대공약수를 구해 기약 분수로 변환해주는 문제였다. 최초 구현 시 기약분수처리를 고려하지 않아 테스트가 실패하여 최대공약수를 구하는 함수를 추가하여 수정하였다.

문제 풀이 문제의 numbers 인자의 길이를 확인하지 못하고 현재 index 이후 가장 가까운 큰값을 구하는 로직을 작성하여 테스트를 진행해버렸다. 아니나 다를까 numbers 배열의 길이가 긴 테스트가 진행되자 시간초과… 힌트를 보니 stack을 사용해야 한다고 하여 stack의 형태로 구조를 변경하였더니 테스트 통과에 성공했다!

레벨2 풀이

부분합, 누적합 (레벨2) 배열의 일부 구간에 대한 합을 빠르게 구할 수 있게 해주는 스킬 n개의 원소로 이루어진 배열이 주어졌을 때 반복문을 통해 배열의 합을 구하려면 O(n)이 걸리는데 부분합을 이용하면 모든 부분합을 O(1)에 바로 구하기 가능 1차원 배열 예 2차원 배열 예 풀이

레벨 1 풀이

React Native React Native 란 iOS, Android 에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크 HTML, CSS, JS 기반의 웹뷰(webview) 방식이 아닌 네이티브 엘리먼트를 사용하여 구현 Web, Windows, Mac OS, tvOS 기반 등의 Android, iOS 뿐만 아닌 타 플랫폼도 지원함 장점 러닝커브 : Javascript 기반 개발자의 경우 타 네이티브 앱 개발에 비해 진입장벽이 매우낮음 높은 재사용성 : 작성된 코드 대부분 플랫폼 간의 공유가 가능해서 iOS, Android를 동시에 개발 할 수 있다. Fast Refresh : 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 화면에 적용된다. 이 기능으로  등의 작업을 생략하고 불필요한 작업시간을 줄일 수 있다. 성능 저하 문제점 해결 : 작성된 코드에 따라 각 플랫폼에 알맞은 네이티브 엘리먼트로 전환되기 때문에 큰 성능 저하 없이 개발이 가능하다. 쉬운 접…

React Query 살펴보기 React 앱에서 비동기 로직을 쉽게 다루게 해주는 라이브러리 Server State를 관리 Server State Client에서 제어하거나 소유되지 않은 원격의 공간에서 관리되고 유지됨 Fetching이나 Updating에 비동기 API가 필요함 다른 사람들과 공유되는 것으로 사용자가 모르는 사이에 변경될 수 있음 신경 쓰지 않는다면 잠재적으로 “out of date”가 될 가능성을 지님 라이프사이클 fresh(데이터가 프레시한 상태) : 새롭게 추가된 쿼리 인스턴스 → active 상태의 시작, 기본 staleTime이 0이기 때문에 아무것도 설정을 안해주면 호출이 끝나고 바로 stale 상태로 변한다. staleTime을 늘려줄 경우 fresh한 상태가 유지되는데, 이때는 쿼리가 다시 마운트되도 패칭이 발생하지 않고 기존의 fresh한 값을 반환한다. staleTime: 데이터가 fresh 상태에서 stale로 변경되는데 걸리는 시간 fetch…

Vite 소개 그동안의 프론트엔드 번들링의 문제점 브라우저에서 ES module을 지원하기 전부터 Webpack, Rollup 등 과 같은 도구를 사용하여 번들링 작업을 통해 프론트엔드 개발을 진행 하지만 Webpack과 같은 js 기반의 번들러의 경우 방대한 규모의 프로젝트를 번들링하는 과정에서 병목현상이 발생 이를 해결하기위해 vite는 ES module 및 네이티브 언어로 작성된 번들러를 사용하여 문제를 해결 서버 구동 Cold-Starting(최초로 실행되어 이전에 캐싱한 데이터가 없는 경우)방식으로 개발서버를 구동할 때 번들러 기반의 도구의 경우 모든 소스코드에 대해 빌드작업을 마쳐야만 완전한 페이지를 제공할 수 있었음 vite는 dependencies 와 source code 두가지로 나누어 개발서버를 시작하도록 하여 해결 Dependencies Esbuild를 기반으로한 사전번들링 기능 Esbuild는 자바스크립트 기반이 아닌 Go로 작성되어 기존의 번들러 대비 10~…

rollup.js 개요 Webpack 과 유사한 Javascript 모듈 번들러 ES6 모듈형식으로 빌드 결과물을 출력할 수 있음 loader나 설정파일이 복잡한 Webpack에 비해 설정이 간단한 편 코드 스플리팅에 강점을 가짐(중복 제거에 특화됨) 빠른시작 —format 옵션을 통해 브라우저(iife), node(cjs), 브라우저와 node를 모두(umd) 지원하는 번들링이 가능 설정 input: entry 파일 output dir: build 폴더명 format: build format, cjs로도 설정 가능 exports: Name for UMD export sourcemap: sourcemap generate 여부 preserveModules: 기본값 false, true일 경우 빌드 결과물의 폴더 구조를 유지가능 inlineDynamicImports: 동적 import 해당옵션을 사용하였을때 lazy loading 관련 이슈가 발생할 수 있을 것 으로 보임 https…

Webpack Webpack 옵션 optimization splitChunks chunks initial: 기본 Chunk Spliting async: 비동기로 호출하는 요소 중 중복되는 부분을 Spliting all: 모든 코드의 중복되는 요소들을 확인하여 Spliting minimize Bundle 파일을 압축하는 용도 압축시 TerserPlugin을 사용하여 압축을 진행하여 terser-webpack-plugin 모듈이 필요 Webpack5부터는 TerserPlugin이 내장되어 생략가능 Terser ES6+ 를 위한 자바스크립트 parser 및 mangler/compressor 툴킷 webpack TerserPlugin에서는 자바스크립트를 축소하는데 사용 devtool 빌드된 파일과 원본파일을 연결시켜주는 역할을 수행(배포된 파일을 디버깅 할 때 사용) 옵션 비교 표 Vue Cli 3.x 이상 Vue cli 2 이하에서는 webpack.config.js 파일이 프로젝트 루트…

CASL.js 소개 지정된 클라이언트가 액세스할 수 있는 리소스를 제한하는 JavaScript 동형 인증 라이브러리 User Action 사용자가 APP에서 실제로 수행할 수 있는 작업을 설명, 비즈니스 로직에 따라 단어로 정의(일반적으로는 동사) (ex. prolong, CRUD 형식인 create, read, update, delete) Subject 사용자 작업을 확인하려는 제목 또는 제목의 유형, 일반적으로 비즈니스 또는 도메인 entity Fields 일치하는 Subject’s fields 로만 사용자 작업을 제한하는 데 사용할 수 있습니다. (ex. status field를 업데이트 할 수 있도록 허용하고 description 또는 title의 경우 업데이트를 허용하지 않을 수 있습니다.) Conditions 일치하는 subject에만 사용자 작업을 제한하는 조건 기준입니다. 특정 subject에 대한 권한을 부여해야 할 때 유용하게 사용 규칙 정의 defineAbili…

Lodash.js 소개(문서) 인기있는 JavaScript 라이브러리 중 하나로 주로 Array, Collection, Object등의 데이터 구조를 Native 함수보다 쉽게 사용할 수 있도록 지원해 주는 역할을 합니다. lodash라는 명칭대로 전체 라이브러리를 import 할 경우 위의 방식으로 주로 사용하며 프로젝트 번들 최적화 시 사용할 Method 만 호출하여 사용하는 방식을 이용합니다. tree-shaking 방식을 통해 번들 용량을 좀 더 최적화 시킬 수 있는 lodash-es 라이브러리도 존재합니다.(es모듈형태) Methods Array Methods arguments  (Array)  (Function)  (number) return: index number arguments  (Array)  (Function) return: 제거된 요소가 담긴 배열 arguments  (Array) returns: filtered array 배열내의 false, null…

Functional Programing Js Library 메서드 체이닝 과 메서드 파이프라인 lodash 메서드 체이닝 ramdajs 메서드 파이프라인 메서드 체이닝과 메서드 파이프라인의 차이점 age 필드를 지운다. work 필드 명을 job 으로 바꾼다. 메서드 체이닝 (단단한 결합) 메서드 파이프라인 (느슨한 결합) lodash(lodash/fp) 특징 Promise는 기본적으로 지원되지 않음 오토커링 지원 fp에서 추가된 함수 존재 placeholder eslint-plugin-lodash-fp ramdajs 특징 immutability과 side-effect 발생하지않도록 순수 함수적 스타일을 강조 람다의 모든함수는 오토커링을 지원 재사용 가능한 함수 함수에 대한 매개 변수는 마지막에 제공 주요 기능 Pipe Fx ts(partial.js) 특징 지연평가 동시 요청 처리 타입 추론 iteration protocol 준수 (반복가능, 비동기 가능) 샘플코드 fp-ts 특…

오픈소스 개발(NPM + GitHub) NPM(Node Package Manager) NPM 개념 소프트웨어의 라이브러리 또는 레지스트리의 역할 Node.js의 패키지관리자로 생성되었기 때문에 Node.js 설치 시 함께 설치됨 Package.json npm으로 설치한 패키지가 정의되는 파일 npm init 시 최초 해당파일이 생성되며 npm install 진행 시 해당 파일에 패키지가 명시됨 Package-lock.json Package.json과 달리 npm init 시에 생성되지 않으며 npm 패키지를 설치, 수정, 삭제 등을 진행할때 생성되며 각 패키지의 의존성관리를 목적으로함 각각의 패키지에서 특정 패키지를 여러 패키지에서 사용할 수 도 있고 특정 패키지의 다양한 버전을 다른 패키지에서 사용할 수 있음. 이러한 경우 버전간의 충돌로 인해 빌드가 되지않거나 오류가 발생하는 것을 방지하기위해 존재함 패키지 공유 NPM Registry에 배포하여 공유할 수 있음 가입과 사용은 …

Socket.IO 1. 소개 WebSocket을 기반으로 클라이언트와 서버의 양방향 통신을 가능하게해주는 모듈(라이브러리) WebSocket 기반의 통신을 사용하는 이유 데이터 송/수신이 계속 이루어져야 하는 어플리케이션 개발 시 http 프로토콜만 사용해서는 단방향방식의 특성상 서버에 데이터 업데이트가 존재하지 않았음에도 클라이언트에서 불필요한 요청을 계속 송신해야하기 때문에 굉장히 비효율적으로 동작함 WebSocket 과의 차이점 WebSocket - 양방향 통신을 위한 프로토콜 HTML5 웹 표준 기술 매우 빠르게 작동하며 통신할 때 아주 적은 데이터를 이용함 이벤트를 단순히 듣고, 보내는 것만 가능함 Socket.io WebSocket의 경우 오래된 브라우저의 경우 지원되지 않는문제가 있는데 Socket.io 사용으로써 해결 가능 표준 기술이 아니며, 라이브러리임 소켓 연결 실패 시 fallback을 통해 다른 방식으로 알아서 해당 클라이언트와 연결을 시도함 방 개념을 이용…

Vercel Edge Network Vercel Edge Network는 인터넷과 Vercel 배포 사이에 위치합니다. 이러한 유형의 네트워크 토폴로지는 콘텐츠 전송 네트워크 또는 CDN이라고도 합니다. Regions 가능한 한 빨리 요청을 라우팅하기 위해 Edge Network는 전 세계 수십 곳에서 실행되고 있습니다. 이러한 모든 위치(Regions 라고 함)에서 Serverless Funtion 및/또는 정적 파일을 출력하는 빌드를 생성하는 배포를 생성할 수 있습니다. 그러면 Edge Network는 들어오는 요청을 Serverless Funtion이 실행 중인 가장 가까운 위치로 자동으로 전달합니다(정적 파일은 항상 전체 네트워크에 분산되므로 특정 위치에 국한되지 않음). 배포의 Serverless Funtion이 요청된 지역에 생성되지 않은 경우 요청은 배포된 Serverless Funtion이 포함된 가장 가까운 지역으로 전달됩니다. Caching Vercel Edge …

Vercel Edge middleware Edge middleware란 사이트에서 요청이 처리되기 전에 실행되는 코드입니다. 요청에 따라 응답을 수정할 수 있습니다. 캐시보다 먼저 실행되기 때문에 middleware를 사용하는 것은 정적으로 생성된 콘텐츠에 개인화를 제공하는 효과적인 방법입니다. 들어오는 요청에 따라 응답을 반환하기 전에 사용자 지정 논리를 실행하고 rewrite, redirect, headers 추가 등을 수행할 수 있습니다. Vercel의 Edge Network에 전역적으로 배포되며 서버 측 로직을 방문자의 출처에 가까운 Edge로 이동할 수 있습니다. 미들웨어는 Chrome 브라우저에서 사용 하는 것과 동일한 고성능 V8 JavaScript 및 WebAssembly 엔진 에 구축된 Vercel Edge Runtime 을 사용합니다. Edge Runtime은 Web Standard API(FetchEvent, Response, Request)의 하위 subse…

👋 소개 평소에 개발 관련 이슈나 노트 내용을 정리하고 글로 작성할 블로그형태를 찾다가 뒤늦게 나마 GitHub Pages 기능을 활용하여 블로그를 만들게 되었습니다. 그에 따라 평소에 GitHub Pages에 관심이 있으신 분들을 위해 생성 방법에 대해 공유하려고 합니다. GitHub Pages 란? 웹서버의 경우 직접 웹서버용 PC를 이용하여 운용하는 것은 쉽지 않은 일이며 관리에도 힘이 들기 떄문에 주로 웹호스팅 업체를 사용하여 웹서버에 어플리케이션을 업로드합니다 국내의경우 Cafe24, 가비아, dothome 등의 호스팅 업체들이 있으며 세계적으로는 Amazon Web Services (AWS)를 많이 사용하는 추세입니다. AWS의 경우 세계 각 지역에 데이터센터를 두고 있어 한국에서도 사용하는데 큰 어려움이 있지는 않습니다. 2021년 들어 주목해볼 고객 사례로 AWS측에서 발표한 링크도 추가해 두겠습니다. https://aws.amazon.com/ko/blogs/kore…