평범한 이야기

티스토리 조만간 폐쇄할 예정입니다.

PixelStudio — Mon, 27 Jun 2022 14:47:17 +0900

결론부터 말하겠습니다. 티스토리 블로그 곧 폐쇄할 겁니다.

왜냐하면, NextJS 프레임워크에 TypeScript를 활용해서 새로운 블로그를 만들고있습니다. 솔직히 글쓰기도 편하고, 스킨도 다양하고 구성도 깔끔하게 구성할 수 있엇는데, 뭔가 계속 티스토리쪽에 글만 올리다보니 허전한 느낌이 왔습니다. 나도 이런 블로그 하나정돈 만들어보고 싶다는 생각에 아예 티스토리 접고 마크다운 문서를 기반으로한 개인 블로그 하나 만들생각입니다. 배포는 Github Pages 아니면 Vercel에 할것같네요

[Ubuntu 20.04 LTS]apt와 apt-get의 차이점

PixelStudio — Sat, 19 Jun 2021 14:49:29 +0900

보통 여러 블로그나 커뮤니티에서 apt와 apt-get으로 패키지 설치 및 업데이트를 하는 글들을 많이 볼 수 있는데, 도대체 무슨 차이가 있으며, 어떤걸 사용해야할까 라는 궁금증으로 직접 알아보기로 했다.

APT(Advanced Packaging Tool)는 데비안(Debian) GNU/리눅스 계열의 패키지 관리 명령도구로 우분투(Ubuntu)에서도 지원한다.

apt는 데비안과 그 파생물을위한 주요 명령 줄 패키지 관리자입니다. 상위 패키지 관리자가 의존 할 수있는 libapt-pkg 및 libapt-inst 라이브러리에서 제공하는 모든 기능에 대한 하위 수준 액세스는 물론 패키지에 대한 정보를 쿼리 할뿐만 아니라 검색 및 관리를위한 명령 줄 도구를 제공합니다.

apt-get: 인증 된 소스에서 패키지 및 패키지에 대한 정보를 검색하고 종속성과 함께 패키지를 설치, 업그레이드 및 제거한다.
apt: 더 나은 대화식 사용을위한 고급 명령 줄 인터페이스이다.

우선 결론부터 말하자면 차이는 별로 없다.

우분투(Ubuntu) 최종사용자를 위한 명령어가 apt일뿐이다.

다만 apt-get 명령어가 오래되다보니 보다 많은 옵션을 제공한다. 터미널을 열어 apt --help와 apt-get --help를 입력해보자

왼쪽이 apt, 오른쪽이 apt-get

보는 바와 같이 apt-get 명령어는 사용 가능한 커맨드가 많지만, apt만으로도 충분하기 때문에 굳이 apt-get을 써야할 이유를 잘 모르겠다.

왼쪽이 apt, 오른쪽이 apt-get

또 apt로 설치할 경우 하단에 상태바를 보여주는데.. 신경이 쓰인다면 다음과 같은 명령어로 활성/비활성이 가능하다.

echo 'Dpkg::Progress-Fancy "1";' > /etc/apt/apt.conf.d/99progressbar

ref: "스택오버플로우apt","apt매뉴얼","데비안Wiki","MVOGT블로그"

함수

PixelStudio — Thu, 17 Jun 2021 21:27:03 +0900

TypeScript의 함수는 JavaScript와 마찬가지로 기명 함수(named funcion)과 익명 함수(anonymous function)로 만들 수 있다.

또한 함수는 외부의 변수를 참조할 수 있다.

기존 자바스크립트의 함수

// 기명 함수
function add(x, y) {
  return x + y;
}

//익명 함수
let z = 10;
let addF = (x,y) => x + y + z;

위 에제에서 addF라는 익명 함수는 외부의 변수를 참조 하는데, 이를 보고 변수를 캡쳐(capture)한다 라고 한다. 그리고 JavaScript의 함수에 타입을 추가하여 TypeScript에서의 함수로 사용할수 있다. 이것을 함수 타입(Function Type)이라고한다.

// 기명 함수
function add(x:number, y:number):number {
  return x:number + y:number;
}

//익명 함수
let z:number = 10;
let addF = (x:number, y:number):number => x + y + z;

함수의 전체 타입 작성

함수의 타입은 매개변수(parameter)의 타입과 반환 타입이 있으며, 전체 함수 타입을 작성하기 위해선 두가지 모두 타입이 필요하다.

let addF: (baseValue: number, increment: number) => number = function (
  x: number,
  y: number
): number {
  return x + y;
};

매개변수의 타입들이 올바르게 나열이 되있으면, 함수 타입에 이름을 붙여도 유효한 타입으로 간주한다.

반환 타입은 위의 예시처럼 화살표 (' => ') 표기를 써서 반환 타입을 명확히 보여줄 수 있다. 함수 표기에 필요한 부분으로 반환 값이 없다면 void를 써서 표시한다.

let addF: (baseValue: number, increment: number) => number = function (
  x: number,
  y: number
): number {
  return x + y;
};

REST 문법이 적용된 매개변수

function sum(a: number, ...nums: number[]): number {
  const totalOfNums = 0;
  for (let key in nums) {
    totalOfNums += nums[key]
  }
  return a + totalOfNums;
}

THIS

TypeScript에서도 사용이 가능하며, JavaScript의 this가 잘못 사용되었을 때 감지할 수 있다. this가 가리키는 것을 명시하려면 아래 예제와 같은 문법을 사용한다.

function funcName(this: type) {
 ....
}

기본 데이터 타입

PixelStudio — Thu, 17 Jun 2021 20:41:18 +0900

TypeScript는 JavaScript와 거의 동일한 데이터타입을 지원하고, 열거 타입을 사용하여 더 편리하게 사용할 수 있다.

불리언 (Boolean)

let isDone: boolean = false;
const isTrue: boolean = true;

숫자 (Number)

TypeScript의 모든 숫자는 JavaScript처럼 부동 소수 값이다.

부동 소수에는 Number 라는 타입이 붙으며, 16진수, 10진수 ES2015에 소개된 2진수, 8진수 리터럴을 지원한다.

let decimal: number = 0;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: numberr = 0o744

문자열 (String)

JavaScript에서 문자열을 변수에 담아줄때 " 혹은 ' 를 사용하여 문자열 데이터를 감싸는데 사용했다면 TypeScript에는 string가 붙게된다.

let laptop: string = "elitebook";

laptop = "OMEN"

여러줄 걸쳐 문자열을 작성하게 될때는 JavaScript에선 백틱 ` 을 사용했었다. TypeScript도 마찬가지이다. 표현식을 넣어줄 때도 마찬가지로 ${ } 으로 데이터를 감싼다.

let btrLife: number = `12시간`
let quantity: number = 2;

let result: string = `제가 사용하는 노트북의 개수는 총 ${quantity}개이며, 두 노트북의 공통점은 
                      최대 유지시간이 ${btrLife} 시간입니다.`

배열 (Array)

TypeScript의 배열 선언은 JavaScript와 동일하지만, 요소의 타입에 따라 구분지어 줘야한다.

첫번째 방법, 배열의 요소들을 나타내는 타입뒤에 [ ] 을 쓴다.

let list: number[] = [1, 2, 3];
let list2: string[] = ['가','나'];

두번 째 방법, 제너릭 배열 타입을 쓴다.

let list: Array<number> = [1, 2, 3];
let list2: Array<string> = ['가','나'];

타입이 정해졌기 때문에 타입과 맞지 않는 요소를 담았을 경우 다음과 같은 에러를 보여준다.

선언과 할당을 분리!

let list: string[] = [];
list.push("가");
list.push("나");

Generic 방법 사용

let list: Array<string> = new Array<number>();
list.push("가");
list.push("나");

튜플 (Tuple)

튜플 타입을 사용하면, 요소의 타입과 개수가 고정된 배열을 표현할 수 있다.

let tuple: [string, number]

tuple = ["ha", 2] O

tuple = [4, "gwa"] X

정해진 인덱스 외에 다른 인덱스에 있는 요소에 접근하면 오류가 발생한다.

tuple[3] = "나는 존재할까?" // Error, Property "나는 존재할까?" does not exist on type '[string, number]'.

tuple[1].concat('a')  // Error, 'number' does not have 'concat'

열거 (Enum)

C, Java 같은 다른 언어에서 흔히 쓰이는 타입으로 특정 값(상수)들의 집합을 의미한다.

enum Item {a, b, c}

let spec: Item = Item.a

Enum은 인덱스 번호로 접근이 가능하다.

enum Item {a, b, c}

let spec: Item = Item[0]

Enum의 인덱스를 사용자 편의로 변경하여 사용이 가능하다.

enum Item {a = 3, b, c}

let spec: Item = Item[3]; // a
let spec: Item = Item[4]; // b

Any

애플리케이션을 만들 때, 알지 못하는 타입을 표현해야할 때가 있다. 사용자로 부터 받은 데이터나 서드 파티 라이브러리같은 동적인 컨텐츠에서 올 수 있다. 이 경우 타입 검사를 하지 않고, 컴파일 시간에 검사를 통과하길 원할때 any 타입을 사용한다.

let type: any = 4;

type = "나는 number일까? string 일까?"
type = false;

any 타입은 다른 타입이 여러개로 섞인 배열을 다룰 수 있다. 즉 어떤 타입의 일부만 알고 전체를 알지 못할때 유용하다.

let type: any[] = [1, true, "Array"]

type[1] = 100

Void

void는 어떤 타입도 존재할 수 없음을 나타내기 위해 사용하며, any의 반대 타입 같다. void는 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰이는 것을 볼 수 있다.

funtion nothing(): void {
  console.log("대략 아무것도 없다는 메세지");
}

void 타입을 변수 선언에 사용하는 방법은 좋은 방법이 아닌데, 그 변수에는 null 또는 undefined만 할당할 수 있기 때문이다.

let variable: void = undefined;

variable = null // succes --strictNullChecks을 사용하지 않을때만 해당

null과 undefined

TypeScript는 undefined 과 null 둘 다 각각 자신의 타입 이름으로 사용한다. void와 같이 자체로 유용한 경우는 없다.

let u: undefined = undefined;

let n: null = null;

null과 undefined는 다른 모든 타입의 하위 타입으로 number 같은 타입에 할당할 수 있다.

하지만 --strictNullChecks를 사용하면 null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능하다.

Never

never 타입은 함수 표현식이나 화살표 함수 표현식에서 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로 쓰인다.

객체 (Object)

object는 원시 타입이 아닌 타입을 나타낸다. JavaScript에서 원시타입으론 number, string, boolean, symbol, null, undefined, bigint 등 있는데 TypeScript에서도 마찬가지로 원시타입을 제외한 나머지를 의미한다.

declare function create(o: object | null): void;

create({prop: 0}); //success
create(null);      //success

create(42); // error
create("string") // error
create(false)   // error
create(undefined) //error

JavaScript를 보완한 언어 TypeScript

PixelStudio — Thu, 17 Jun 2021 16:40:50 +0900

TypeScript?

TypeScript는 JavaScript의 MS에서 만든 상위언어이며, 구문(Syntax)과 런타임 특성(Runtime Behavior)을 공유하고, 타입(Type)을 부여하여 기존 JavaScript 에서 느슨하게 짜여진 코드로 발생하기 쉬운 오류를 사전에 예방이 가능하다. TypeScript를 브라우저에서 실행하기 위해서는 파일을 변환(Compile)해줘야한다.

구문(Syntax) : 구문은 프로그램을 만들기 위해 코드를 작성하는 방법을 의미한다. TypeScript 는 JavaScript의 구문을 허용하는 상위 언어이다. 그렇기 때문에 JavaScript 코드를 TypeScript 파일에 넣어도 잘 작동한다.

런타임 특성(Runtime Behavior) :TypeScript는 JavaScript의 런타임 특성을 가진 언어이며, JavaScript 코드의 런타임 특성을 변화시키지 않는다. TypeScript 기존 코드에 타입 오류가 있음을 알아도 JavaScript 코드를 TypeScript로 이동시키는 것 같은 방식으로 실행시킬 것을 보장한다.

TypeScript를 왜 써야하는지?

에러의 사전 방지

//JavaScript
function sum(a,b) {
  return a + b;
}

//TypeScript
function sum(a: number, b: number) {
  return a + b;
}

두 코드는 숫자의 합을 구하는 함수코드이다. JavaScript에서는 타입에 관대하여 인자 a와 b가 Number타입이던 String타입이던 계산된 결과 값을 보여주게된다.

반면 TypeScript에서는 아래 이미지와 같이 사전에 에러 발생 위험을 예방해준다.

코드 자동 완성과 가이드를 통한 생산성 향상

TypeScript는 MS에서 제작되어 Visual Studio Code 같은 개발 툴의 기능을 최대한 활용할 수 있다. VSC내부가 TypeScript로 작성되어있어 TypeScript 개발에 유리하다.

TypeScript 시작하기

전역(Global) 설치

npm i -g typescript 

yarn global add typescript

로컬(Local) 설치

npm i typescript --save-dev

yarn add typescript --dev

ref : "TypeScript 번역본", "핸드북"

NPM과 NVM 그리고 NPX

PixelStudio — Thu, 17 Jun 2021 11:07:13 +0900

NVM: Node Version Manager

말 그대로 Node의 버전을 관리하는데, 여러 버전의 Node.js를 설치하고 사용할 버전을 쉽게 전환할 수 있다. NVM을 통해서도 Node.js 설치가 가능하다.

리눅스를 사용한다면 다음과 같은 명령어를 입력한다.

curl

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

wget

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

nvm을 바로 사용하기 위해서는 재부팅을 해줘야 하는데 source 명령어를 입력해 .bashrc 파일을 바로 적용되도록 한다.

bash: source ~/.bashrc

zsh: source ~/.zshrc

ksh: . ~/.profile

source 명령어는 스크립트 파일을 수정한 후 수정된 값을 바로 적용하기 위해 사용하는 명령어다.

노드 버전 확인

설치할 노드버전을 확인하기 위해 다음과 같은 명령어를 입력한다.

nvm list-remote  //전체 버전을 보여줌

nvm list         //설치되어있는 버전만 보여줌

원하는 버전을 설치

전체 버전을 조회한다음 원하는 버전을 다음과 같은 명령으로 설치한다.

nvm install v14.17.1

설치가 완료되고, 버전 확인을 해보자

node -v

npm -v

NPM : Node Packaged Manager

NPM은 Node.js로 만들어진 패키지(모듈)들을 관리해준다. 따로 설치할 필요없이 Node.js를 설치하면 동시에 설치된다. npm을 통해 자바스크립트로 만들어진 다양한 라이브러리를 설치하여 프로젝트를 효율적으로 작업할 수 있게 도와준다.

NPM 명령어

npm init : package.json을 생성한다
npm install (Pacakge name) : 어느 모듈을 설치한다.
npm update (Package name) : 패키지 업데이트를 실행
npm remove (Package name) : 패키지를 제거
npm info (package name) : 패키지 정보 확인
npm version (version) : 패키지의 버전 전체 변경
npm version patch : 패키지의 버전을 한단계 올림
npm version minor : 패키지의 마이너 버전을 한단계 올림(패치 초기화)
npm version major : 패키지의 메이저 버전을 한단계 올림(마이너, 패치 초기화)

NPM 패키지 생성

특정 폴더 내에서 터미널을 열거나 VSCode내에서 터미널을 열어 다음 명령어로 Package.json을 생성한다.

npm init

패키지의 정보를 입력하는 내용이 나옴

"name": "test",
  "version": "1.0.0",
  "description": "test"
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "npm",
  "license": "MIT"

해당 폴더 내의 pacakge.json이 생성됨.

NPM 패키지 설치

npm install nodemon

npm 설치 시 추가 명령어

설치할 프로젝트 폴더 내에서 진행한다.

-D, --save-dev

--save              
-D, --save-dev 


npm install --save-dev 를 이렇게 줄일수가 있다.
npm i -D

--save : 패지키를 ./node_module 디렉토리에 설치하고 .package.json 파일의 dependencies 항목에 플러그인 정보를 저장한다.

--save-dev : 패지키를 ./node_module 디렉토리에 설치하고 .package.json 파일의 devDependencies 항목에 플러그인 정보를 저장한다.

-E, --save-exact

-E, --save-exact

npm 모듈 버전 중 연산자(^, ~)를 사용하는 대신 정확한 버전으로 설치한다.

--save-exact

NPM에서 유의적 버전(Semver)에 대해 알아보자

의존성 모듈의 버전을 엄격하거나 느슨하지 않게 관리하기 위해 npm에서는 Semver(Semantic Versioning)를 지원한다.

API에 호환되지 않는 변경이면 Major 버전을 올린다.

API가 호환되면서 바꾸거나 추가하는 경우 Minor 버전을 올린다.

API가 영향이 없는 버그 수정은 Patch 버전을 올린다.

이러한 시스템을 유의적 버전이라고한다.

모듈의 범위(Range)

연산자	설명
<	버전보다 작은 범위
<=	버전보다 작거나 같은 범위
>	버전보다 큰 범위
>=	버전보다 크거나 같은 범위
=	같은 범위
^	Minor Level 범위
~	Patch Level 범위

ref: "nvm, npm","npm공홈","npm-install","HEROPY Blog"

아! 보기 좋은 코드다! Prettier 알아보기

PixelStudio — Wed, 16 Jun 2021 20:23:26 +0900

Prettier

코드 품질을 위해 사용하는 ESLint와는 다르게 사용자의 옵션에 다라 코드 스타일을 이쁘게 맞춰준다.

Prettier 적용하기

prettier은 VSCode 확장기능을 이용하여 설치해 줄 수있고 Node의 npm 기능을 통해 설치가 가능하다.

곧바로 톱니바퀴 버튼을 눌러 Extension setting으로 들어간다.

여기서 직접 설치해 줄 수 있고 .prettierrc.json 파일을 생성할 수있다.

NPM으로 설치

$ npm install --save-dev -g --save-exact prettier

해당 프로젝트에서만 사용할 경우 -g는 생략가능

.prettierrc 파일 만들기

ESLint처럼 Prettier도 .json 혹은 .js 파일로 만들어서 사용한다. 기본적인 옵션들을 넣어주면된다

{    
    "singleQuote": "true",

    "semi": "true",

    "useTabs": "false",

    "tabWidth": 2,

    "trailingComma": 'all',

    "printWidth": 80,

    "arrowParens": 'avoid',

    "endOfLine": "auto",
}

prettier에서 설정 가능한 전체 옵션들

{
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비 
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
  "parser": '', // 사용할 parser를 지정, 자동으로 지정됨
  "filepath": '', // parser를 유추할 수 있는 파일을 지정
  "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
  "rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

VSCode 전역 설정 사용하기

VSCode의 Setting.json으로 들어가 다음과 같은 항목이 있는지 확인( 없으면 추가)

{
.
.
.
.
.
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
.
.
.
.
.
}

ESLint와 통합하기

아래의 플러그인을 설치해야 ESLint와 통합이 가능하다.

$ npm install eslint-plugin-prettier@latest --save-dev -g 
$ npm install --save-dev eslint-config-prettier # prettier와 겹치는 eslint 룰 삭제
$ npm install --save-dev eslint-plugin-prettier # eslint 기본 포맷 대신 프리티어 룰과 동일한 포매팅을 이용함

설치가 완료되면 .eslintrc.json 혹은 .js에 들어가서 다음과 같이 설정해주면된다.

  "extends": ["plugin:react/recommended", "plugin:prettier/recommended"],

ESLint Prettier 적용 확인하기

eslint lintTest.js --fix # 린트에 프리티어 확장을 설치한 경우
prettier --check . # 프리티어로 체크했을때 문제가 있는 파일 목록 출력
prettier --write  test.js # test.js파일을 포맷팅해서 덮어쓴다

충돌 해결

ESLint와 Prettier은 코드포매팅기능이 존재해 충돌하지 않게 겹치는 기능을 꺼준다.

기본 포맷을 Prettier로 설정

ctrl + shift + p 로 팔레트를 연다.
format document width ....
config default formatter
prettier 선택

ref: "프리티어" ,"프리티어 사용하기", "프리티어 적용"

EsLint 코드 포맷 통일 및 가독성 높히기

PixelStudio — Wed, 16 Jun 2021 20:00:42 +0900

ESLint

ESLint는 JavaScript, JSX의 정적 분석 도구로 오픈소스 프로젝트이다. 코드를 분석해 문법 오류나 안티 패턴을 찾아 일관된 코드 스타일로 작성하도록 도와준다.

EsLint 설치

npm install eslint --save-dev

yarn add eslint --dev

ESlint 설정

npx eslint --init

다양한 질문의 세례가쏟아짐

취향에 맞게 선택 문법, 문제점 코드스타일등 을 적용할거면 3번

프레임워크 본인은 React

import, export를 많이 쓰므로 JS Modules

TypeScript 사용유무

코드가 실행되는 환경

프로젝트 스타일 정의(보토은 대중적으로)

파일 포맷 (Json이 국룰)

이렇게 설정이 끝나면 .eslintrc.json 혹은 .eslintrc.js파일이 생성됨

{
    "env": {                        프로젝트의 사용 환경을 넣어줍니다.
        "browser": true,
        "es2021": true
    },
    "extends": "plugin:react/recommended",
    "parserOptions": {              자바스크립트 버전, 모듈 사용 여부 설정
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [                    플러그인을 넣어주면된다.
        "react"
    ],
    "rules": {                     extends와 plugins에 대한 세부 설정을 변경하는 코드를 넣을 수 있습니다.
       "max-length": 0             0으로 설정하면 에러 검출 X
    } 
    
    "globals": {                    전역 변수를 넣어준다.외부 라이브러리 사용시 에러 표지 방지
    "jQuery": true,
    "$": true
  }
}

CORS (Cross Origin Resource Sharing) 적용 방법

PixelStudio — Wed, 16 Jun 2021 19:39:34 +0900

CORS란? Cross Origin Resource Sharing의 약자로 A도메인에서 B 도메인으로 리소스가 요청되는 경우를 말하는데, http 프로토콜로 요청이 될 경우 브라우저 자체에서 보안 상 CORS를 제한하게 되는 현상을 말한다.

AWS

s3같은 경우는 권한 부분에 CORS 설정 하는 부분이 존재한다.

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

  <AllowedMethod>GET</AllowedMethod>
   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

Node.js

Express를 사용한다면 npm에서 cors를 찾아 설치한 후 미들웨어로 사용하면된다.

npm install cors

1. 전체 적용

광범위하게 적용하여 모든 요청시 CORS를 적용한다.

let express = require('express')
let cors = require('cors')
let app = express()

app.use(cors())

2. 부분 적용

해당 요청만 CORS를 적용한다.

let express = require('express')
let cors = require('cors')
let app = express()

app.get('/user/:id', cors(), function(req, res, next) {
  res.json({content})
})

3. cors 옵션 설정

let express = require('express')
let cors = require('cors')
let app = express()

let corsOption = {
  origin: 'http://a.com'
}

app.get('/user/:id', cors(), function(req, res, next) {
  res.json({content})
})

크로스 브라우징(Cross Browsing) 알아보기

PixelStudio — Tue, 15 Jun 2021 20:32:37 +0900

크로스 브라우징(Cross Browsing)이란?

현재 다양한 브라우저(크롬, 파이어폭스, 사파리, 오페라 등..)들이 존재하며, 어떤 브라우저에서든지 호환성을 높혀 화면이 깨지지않고 동등한 서비스를 사용가능할 수 있게 작업하여 다양한 웹의 접근성일 높히는 작업이다. 이러한 작업이 필요한 이유는 각 브라우저마다 렌더링 엔진이 다르기 때문이다.

1.Can I Use 사용하기

Can I Use에서 HTML 요소 및 속성이나, CSS 기능들, JavaScript 기능들의 브라우져에서 지원 여부를 버전 별로 보여주어 사전에 호환성문제를 예방할 수 있다. 스크롤을 내리면 상세정보도 나와 웹페이지 작업 시 매우 유용한 사이트이다.

2. 브라우저 트랜드 파악 및 대응순서

가장 점유율이 높은 브라우저를 최우선순위로 두고 작업을 한다.

전세계

국내

위 차트를 보면 국내나 해외나 압도적으로 구글의 Chrome가 높은것을 볼 수 있다. 모바일, 데스크탑, 테블릿 모두 포함한 수치이다. IE 같은 경우는 마이크로스프트에서 지원을 종료 하기 때문에 굳이 지원을 할 필요가 없다는 내 개인적인 생각이다.

3. 라이브러리 사용하기

jQuery

Polyfill (MDN에서는 추천하지 않은 방법)

ref: "크로스 브라우징 총정리"