FE BE 개발 메모장
함수
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)이라고한다. // 기명 함수 functi..
기본 데이터 타입
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) JavaScr..
JavaScript를 보완한 언어 TypeScript
TypeScript? TypeScript는 JavaScript의 MS에서 만든 상위언어이며, 구문(Syntax)과 런타임 특성(Runtime Behavior)을 공유하고, 타입(Type)을 부여하여 기존 JavaScript 에서 느슨하게 짜여진 코드로 발생하기 쉬운 오류를 사전에 예방이 가능하다. TypeScript를 브라우저에서 실행하기 위해서는 파일을 변환(Compile)해줘야한다. 구문(Syntax) : 구문은 프로그램을 만들기 위해 코드를 작성하는 방법을 의미한다. TypeScript 는 JavaScript의 구문을 허용하는 상위 언어이다. 그렇기 때문에 JavaScript 코드를 TypeScript 파일에 넣어도 잘 작동한다. 런타임 특성(Runtime Behavior) :TypeScript는 ..
NPM과 NVM 그리고 NPX
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: s..
아! 보기 좋은 코드다! Prettier 알아보기
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 파일로 만들어서 사용한다. 기본적인 옵션들을 ..
EsLint 코드 포맷 통일 및 가독성 높히기
ESLint ESLint는 JavaScript, JSX의 정적 분석 도구로 오픈소스 프로젝트이다. 코드를 분석해 문법 오류나 안티 패턴을 찾아 일관된 코드 스타일로 작성하도록 도와준다. EsLint 설치 npm install eslint --save-dev yarn add eslint --dev ESlint 설정 npx eslint --init 다양한 질문의 세례가쏟아짐 이렇게 설정이 끝나면 .eslintrc.json 혹은 .eslintrc.js파일이 생성됨 { "env": { 프로젝트의 사용 환경을 넣어줍니다. "browser": true, "es2021": true }, "extends": "plugin:react/recommended", "parserOptions": { 자바스크립트 버전, 모듈 사..
CORS (Cross Origin Resource Sharing) 적용 방법
CORS란? Cross Origin Resource Sharing의 약자로 A도메인에서 B 도메인으로 리소스가 요청되는 경우를 말하는데, http 프로토콜로 요청이 될 경우 브라우저 자체에서 보안 상 CORS를 제한하게 되는 현상을 말한다. AWS s3같은 경우는 권한 부분에 CORS 설정 하는 부분이 존재한다. http://www.example1.com GET PUT POST DELETE * Node.js Express를 사용한다면 npm에서 cors를 찾아 설치한 후 미들웨어로 사용하면된다. npm install cors 1. 전체 적용 광범위하게 적용하여 모든 요청시 CORS를 적용한다. let express = require('express') let cors = require('cors') le..
크로스 브라우징(Cross Browsing) 알아보기
크로스 브라우징(Cross Browsing)이란? 현재 다양한 브라우저(크롬, 파이어폭스, 사파리, 오페라 등..)들이 존재하며, 어떤 브라우저에서든지 호환성을 높혀 화면이 깨지지않고 동등한 서비스를 사용가능할 수 있게 작업하여 다양한 웹의 접근성일 높히는 작업이다. 이러한 작업이 필요한 이유는 각 브라우저마다 렌더링 엔진이 다르기 때문이다. 1.Can I Use 사용하기 Can I Use에서 HTML 요소 및 속성이나, CSS 기능들, JavaScript 기능들의 브라우져에서 지원 여부를 버전 별로 보여주어 사전에 호환성문제를 예방할 수 있다. 스크롤을 내리면 상세정보도 나와 웹페이지 작업 시 매우 유용한 사이트이다. 2. 브라우저 트랜드 파악 및 대응순서 가장 점유율이 높은 브라우저를 최우선순위로 두..