본문 바로가기
반응형

분류 전체보기252

JS ES5 핵심 개념(JS ES5 Core Concept) JS ES5 핵심 개념(JS ES5 Core Concept) 1. 데이터 타입(Data Type) 데이터 타입(Data Type)은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등)의 종류를 말합니다. - 기본형(Primitive Type): 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 합니다. 즉 모두 “하나”의 정보, 즉, 데이터를 담고 있습니다. 객체가 아니면서 method를 가지지 않는 6가지의 타입이 있습니다. 원시 자료형은 모두 “하나”의 정보, 즉, 데이터를 담고 있습니다. string, number, bigint, boolean, undefined, symbol, (null은 원시 타입과 거의 같게 사용되지만 엄밀히 .. 2022. 5. 5.
함수형 프로그래밍과 객체지향 프로그래밍 객체지향 프로그래밍 객체 지향 프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법입니다. 객체 지향 프로그래밍은 컴퓨터 프로그램을 “객체(Object)"들의 모임으로 파악하고자 하는 프로그래밍의 패러다임 중에 하나입니다. 각 “객체(Object)" 들은 서로 메시지를 주고 받을 수 있으며 데이터를 처리할 수 있습니다. 객체지향 프로그래밍의 장단점 - 장점 1. 코드 재사용이 용이 남이 만든 클래스를 가져와서 이용할 수 있고 상속을 통해 확장해서 사용할 수 있습니다. 2. 유지보수가 쉬움 절차 지향 프로그래밍에서는 코드를 수정해야할 때 일일이 찾아 수정해야하는.. 2022. 4. 28.
서버 사이드 랜더링(SSR)과 클라이언트 사이드 랜더링(SPA) 클라이언트 사이드 랜더링(CSR) 클라이언트 사이드 랜더링(CSR)는 최초 한 번 페이지 전체를 로딩한 후 데이터만 변경하여 사용할 수 있는 애플리케이션을 의미합니다. 클라이언트 사이드 랜더링(CSR)은 사용자의 행동에 따라 필요한 부분만 다시 읽어들이기 때문에 서버 측에서 렌더링하여 전체 페이지를 다시 읽어들이는 것보다 빠른 인터렉션을 기대할 수 있습니다. 서버는 단지 JSON파일만 보내주고, html을 그리는 역할은 자바스크립트를 통해 클라이언트 측에서 수행할 수 있습니다. 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 먼저 웹앱을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여주는 클라이언트사이드렌더링은 트래픽을 감소시키고, 사용자에게 더 나은 경험을 제공합니다. - 장점 트래픽감소.. 2022. 4. 23.
CSS 방법론 CSS 방법론 대표적인 CSS 방법론은 OOCSS, BEM, SMACSS로 정의할 수 있습니다. CSS 설계의 중요성 - CSS 개발의 문제점 CSS를 작성하는 것이 쉽지만 한 번 확장하고 관리하기는 어렵습니다. CSS의 전역환경 일관적이지 않은 코드 구조, 각자 다른 사고 방식 스타일 정의 지나치게 복잡한 선택자 동일 요소에 대한 중복 설정, 불필요한 CSS의 증가 CSS 셀렉터 우선순위 or !important 사용 CSS (표현), JS (동작), HTML (내용) 간 명확한 분리가 안됨 (높은 결합도) - 사이트 규모가 커질수록 문제가 발생합니다. 유지 보수가 불가능한 코드 -> 중복, 코드분석 시간 -> 새로운 기능의 개발 속도 저하 - CSS 작성 방법 적절한 의미 사용 (시맨틱) 중첩 선택자.. 2022. 4. 23.
브라우저 작동 원리 브라우저의 작동 원리 Browser 브라우저의 주요 기능은 사용자가 참조하고 싶은 웹페이지를 서버에 요청하고, 서버의 응답을 받아 브라우저에 보여주는 것이며. 흔히 사용하는 크롬, 인터넷 익스플로러 등 인터넷 프로그램입니다. 서버의 응답은 주소를 통해 요청하는데, 이 주소를 URI(Uniform Resource Identifier)라고 합니다. 웹 브라우저와 웹 서버 url을 주소창에 치고 나면 페이지가 이동하고 웹브라우저가 이동한 웹서버에 웹페이지 요청을 하면 웹서버는 웹페이지 응답을 합니다. 그리고 서버가 브라우저에게 전달한 응답인 HTML문서를 브라우저는 읽어들이고 해석한 후 사용자(Client) 에게 보여주고 HTML 및 CSS를 해석하는 구체적인 내용들은 모두 W3C, World Side Web.. 2022. 4. 21.
웹접근성(Web Accessibility) 웹접근성(Web Accessibility) 웹사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것이라고 말할 수 있습니다. 법적 관점에서의 웹 접근성은 모든 사용자가 신체적·환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것입니다. 여기서 신체적 조건이란, 일반 사용자는 물론, 장애를 가진 사람, 고령자 등을 의미하며, 환경적 조건이란 다양한 기기(PC, Mobile, PDA 등), OS(운영체제), 웹 브라우저(Internet Explorer, FireFox, Safari,Chrome, Opera 등) 또는 저사양 및 저속회선 사용자나 이미지, 동영상 등을 볼 수 없는 환경 등을 의미합니다. 예를 들어 일반인들에게 기본적으로 제공해야하는 정보들을 읽을 수.. 2022. 4. 17.
CORS(크로스 도메인) CORS(크로스 도메인) CORS는 Cross Origin Resource Sharing의 약자로 도메인 또는 포트가 다른 서버의 자원을 요청하는 매커니즘을 말합니다. 이때 요청을 할때는 cross-origin HTTP 에 의해 요청됩니다. 하지만 동일 출처 정책(same-origin policy) 때문에 CORS 같은 상황이 발생 하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단합니다. 그로 인해 정상적으로 데이터를 받을 수 없습니다. 동일 출처 정책(same-origin policy)는 불러온문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. 이것은 잠재적 악성 문서를 격리하여, 공격 경로를 줄이는데 도움이 됩니다. 예를 들자면 로컬에서 개.. 2022. 4. 17.
AJAX (Asynchronous Javascript And XML) AJAX (Asynchronous Javascript And XML) Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자입니다. 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법입니다. 즉, 자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것입니다. 비동기 방식의 장점 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 됩니다. 하지만 비동기식 방식을 이용할 경우 필.. 2022. 4. 17.
HTML/CSS HTML HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다. 만약 어떠한 문장을 그냥 그 자체로 표시하고 싶다면, 태그 중 ()로 감싸 엘리먼트를 문단으로 명시할 수 있습니다. My Code is Good 특징 .. 2022. 4. 12.
Babel 바벨 Babel 바벨 공식문서에서는 바벨을 자바스크립트 컴파일러라고 소개하며 최신 자바스크립트 문법을 사용할 수 있다고 나와있으며 더 정확하게 말하면 트랜스파일러라고 말할 수 있습니다. 왜 바벨이 필요하고 바벨이 있어야만 자바스크립트의 최신 문법을 사용할 수 있는 이유는 자바스크립트가 실행되는 환경때문입니다. 다른 언어와 달리 자바스크립트는 정말 많은 환경에서 실행되는데 웹 브라우저, NodeJS, Deno 등에서 실행되는데 웹 브라우저 또한 각자 다른 자바스크립트 엔진을 통해 자바스크립트 코드를 읽게 됩니다. 게다가 이렇게 실행되는 환경의 버전에도 자바스크립트는 영향을 받으며 특정 버전 이상에서만 실행되는 코드가 있고 특정 브라우저에서는 실행되지 않는 코드도 있습니다. 그렇기 때문에 모든 자바스크립트 실행 .. 2022. 4. 12.
Webpack 웹팩 Webpack 웹팩 공식문서에서는 웹팩을 자바스크립트 애플리케이션을 위한 정적 모듈 번들러라고 소개하고 있습니다. 여기서 번들러란 의존성이 있는 모듈들을 하나의 파일로 통합시켜주는 도구라고 말할 수 있습니다. 특징 한번에 많은 요청을 하지 않아도 됩니다. 예를 들어 한 웹페이지에서 사용하는 자바스크립트 파일이 10개정도 된다고 가정해본다면 웹 페이지가 로드될 때 자바스크립트 파일 10개롤 모두 네트워크를 통해 요청해서 받아와야 해서 네트워크 병목현상이 발생할 수 있습니다. (물론 10개의 파일 정도로 병목현상이 발생하지는 않고 단순한 예시이다.) 모듈 단위로 개발하여 유지보수성을 높일 수 있습니다. 하나의 파일에 모든 자바스크립트 코드가 있다고 할때 그 코드가 몇 천 라인, 몇 만 라인인지는 모르지만 우.. 2022. 4. 12.
Npm Npm N은 Node는 Node.js를 의미하며 P는 package로 만들어진 것들을 의미합니다. package는 모듈이라고도 불리는데 패키지나 모듈은 프로그램보다는 조금 작은 단위의 기능들을 의미합니다. 그리고M의 Manager는 관리자를 의미합니다. 즉 npm이라는 것은 Node.js로 만들어진 pakage(module)을 관리해주는 툴이라는 의미를 가지고 있다는 것을 알 수 있습니다. 이름처럼 npm은 Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램입니다. 개발자는 단 몇 줄의 명령어로 기존에 공개된 모듈들을 설치하고 활용할 수 있고 프로그램보다 조금 작은 단위인 이 모듈들을 필요에 따라서 이런 저런 모양으로 쌓아서 활용을 할 수 있다고 하는데 필요한 기능을 적절하게 활용.. 2022. 4. 12.
ECMAScript2015(ES6) ECMAScript2015(ES6) ECMAScript 넷스케이프(NE)는 javascript를 지원했고 인터넷익스플로러(IE)는 Jscript를 지원 했었습니다. 윈도우즈에 끼워팔기 신공으로 점차 득세를 하기 시작한 인터넷익스플로러는 그만 자만심에 빠져 Jscript를 표준이 아닌 적당히 자기만의 기능을 추가하기 시작했습니다. 점유율이 높으니 모든 브라우저들이 내가 만든 기준을 따라 올 거라 생각을 했던 것입니다. 하지만 넷스케이프는 자신이 밀고 있던 javascript의 핵심 개발 언어를 ECMA 인터내셔널에 제출하고 표준화를 시도 하였고 1996년에 ECMA-262(ES1)으로 명명된 표준 스크립트 기술 규격이 발표되었습니다. 이때부터 ES3 -> ES5 -> ES6(ES2015) -> ES7(ES.. 2022. 4. 10.
DOM API (Web API) and Concept DOM API (Web API) and Concept DOM API DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다. nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당합니다. 웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성되며, 예를 들어 document object 는 document 자체를 의미하며, table object 는 HTML table 에 접근하기 위한 HTML.. 2022. 4. 10.
JavaScript의 동작 원리 JavaScript의 동작 원리 자바스크립트의 동작 원리를 보기 전에 먼저 전체적인 동작 구조를 살펴봐야 하는데 자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요합니다. 자바스크립트는 엔진은 V8, Rhino, SpiderMonkey 등 다양하게 있지만 이 중에서도 가장 대표적인 예는 Google에서 만든 V8 엔진입니다. JavaScript 엔진 자바스크립트 엔진은 두 가지 구성요소로 구성됩니다. 하나는 Memory Heap(메모리 힙)이고, 다른 하나는 Call Stack(호출 스택)입니다. Memory Heap(메모리 힙)은 메모리 할당이 발생하고, Call Stack(호출 스택)은 코드 실행에 따라 스택이 하나씩 쌓이는 곳입니다. 자바스크립트를 사용하다 보면 setTimeOut() 같은 수.. 2022. 4. 10.
Git과 GitHub Git 형상 관리 도구(Configuration Management Tool) 중 하나이며 형상 관리 도구는 버전 관리 시스템이라고도 한다. 소프트웨어를 개발하는 기업의 핵심 자산인 소스코드를 효과적으로 관리할 수 있게 해주는 무료, 공개소프트웨어라고 불린다. 소스코드를 주고 받을 필요 없이, 같은 파일을 여러 명이 동시에 작업하는 병렬 개발이 가능하며, 즉 브랜치를 통해 개발한 뒤, 본 프로그램에 합치는 방식(Merge)으로 개발을 진행할 수 있습니다. 분산 버전관리이기 때문에 인터넷이 연결되지 않은 곳에서도 개발을 진행할 수 있으며, 중앙 저장소가 날라가버려도 다시 원상복구할 수 있고 팀 프로젝트가 아닌, 개인 프로젝트일지라도 GIT을 통해 버전 관리를 하면 체계적인 개발이 가능해지고, 프로그램이나 .. 2022. 4. 10.
TIL 22.03.01 1. 독서하기 2. 휴식하기 3. 자기개발 시간표 09:00~12:00 휴식하기 12:00~13:30 점심식사 13:30~18:30 휴식하기 19:30~20:00 저녁식사 20:00~23:59 자기개발 및 독사하기 오늘 하루를 끝마치며 오늘은 삼일절이어서 집에서 휴식을 취했다. 역시 중간에 껴있는 휴일은 정말 좋은 날인 것 같다. 충분히 놀고 휴식을 취하며 하루를 보낸 것 같다. 이번주는 그래도 평일이 빨리 지나가지 않을 듯 싶다. 집에서는 휴식을 취하거나 그동안 못했던 취미 생활이나 정리할 것들을 처리 했던 것 같다. 내일 출근하면 좋은 컨디션으로 업무에 임할 수 있을 듯 싶다. 2022. 3. 1.
React native - 파이어베이스(FireBase) Ios, Android 세팅하기 파이어베이스 환경 세팅하기 파이어베이스를 react native 프로젝트에서 세팅하기 위해서는 ios 별 android별 환경 세팅을 각각 해줘야합니다. 일단 파이어베이스 홈페이지에 들어가서 공통적으로 프로젝트 생성을 해야합니다. Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 구글 로그인 후 프로젝트 생성을 클릭하여 시작을 한다. 프로젝트 이름, 요금 등등을 선택하며 생성할 수 있습니다. { "react-native": { "messaging_android_notification_channel_id": "high-priority" } } 위의 코드를 react native 루트 프.. 2021. 10. 6.
React Native - 딥링크(Deep Link) Ios, Android 구현하기 딥링크란 딥링크는 특정 페이지에 도달 할 수 있는 링크를 말합니다. 그렇다면 모바일 딥링크란 모바일 어플리케이션의 특정 페이지에 도달 할 수 있는 링크를 말하는 것입니다. 가끔씩 모바일로 웹 서핑을 하다가, 어떤 버튼을 눌렀는데 네이티브 앱으로 바로 이동하는 기능을 해본적이 있을 것인데 그것이 바로 '모바일 딥링크'를 이용하여, 특정 앱 페이지로 들어가는 것입니다. 딥링크의 종류 친구들과 특정 웹 페이지를 공유할 때 자주 사용하는 웹 URL(예를 들어, https://k0502s.tistory.com/category/React%20Native) 처럼, 모바일에 어플리케이션에도 특정 페이지에 들어갈 수 있는 링크가 있는 것이라고 말할 수 있습니다. 딥링크의 형태는 앱 스킴(URL 스킴) 혹은 일반적인 ht.. 2021. 10. 6.
Typescript 타입 가드 타입 가드 타입가드는 자동으로 타입 범위를 좁혀주는 타입스크립트의 기능이다. 생산성과 가독성이 높아지는 효과를 볼 수 있고 as와 같은 극단적인 기능을 쓰지 않아도 된다. 기본 코드 function print(value: number | string){ if(typeof value === 'number') { console.log((value as number).toFixed(2)); } else { console.log((value as string).trim(2)); } } 위의 코드에서 as는 타입을 강제로 주입하는 기능으로 어쩔 수 없을때만 사용해야한다. 만약 if 조건문에 number 말고도 string 또한 허용된다면 버그가 생길 위험이 있기 때문이다. 원래 if문을 통해 value의 타입을 .. 2021. 5. 11.
Typescript 타입 추론 타입 추론 타입을 일일이 정하면서 하면 생산성이 떨어질 수 있다. 그래서 자바스크립트처럼 평범하게 코드를 작성해도 타입이 자동으로 추론하여 정해지는 기능이 있다. let v1 = 123; let v2 = 'abc'; v1 = 'a'; //오류. 숫자 타입이 들어와야함 v2 = 456; // 오류. 문자열 타입이 들어와야함 위의 코드처럼 자바스크립트처럼 평범하게 작성하여도 타입스크립트에서는 v1과 v2에 들어간 값에 대해 타입을 자동으로 추론하여 타입을 지정할 수 있다. const v1 = 123; const v2 = 'abc' let v3: typeof v1 = 234; //v3 타입 오류. 대신 let과 달리 값의 변화에 엄격한 const는 타입이 123 및 'abc' 그 자체가 되며 typeof로 v.. 2021. 5. 11.
Typescript 조건부 타입 조건부 타입 기본 문법 type IsStringType = T extends string ? 'yes' : 'no'; type T1 = IsStringType type T2 = IsStringType T에들어온 타입이 string이면 yes, number 이면 no가 되는 조건부 문법을 사용하는 기능이다. 자바스크립트의 삼항 연산자 문법을 사용하여 값을 다루는 것처럼 보이지만 타입스크립트에서의 위의 코드는 값이 아닌 타입에 대한 것이라고 봐야한다. union과 조건부 타입 type IsStringType = T extends string ? 'yes' : 'no'; type T1 = IsStringType type T2 = IsStringType | IsStringType ; type Array2 = A.. 2021. 5. 10.
Typescript 맵드 타입(mapped type) 맵드 타입(mapped type) 기본문법 type T1 = { [K in 'prop1' | 'prop2']: boolean }; 맵드 타입으로 만들어지는 것은 객체이기 때문에 중괄호로 감싸있다. 그리고 중괄호 안에 대괄호가 있는데 대괄호안에는 key 부분을 나타내는 것이며 in라는 키워드가 맵드 타입을 정의해준다. 즉 위의 코드르 보면 in 뒤에 붙어있는 union 문자열이 타입의 key로서 속성으로 boolean이라는 타입을 각각 정의받게 된다. 마치 함수를 사용하는 것처럼 이용 가능하다. 입력된 인터페이스의 모든 속성 바꾸기 interface Person { name: string; age: number; } type MakeBoolean = { [P in keyof T]?: boolean}; co.. 2021. 5. 10.
Typescript 재네릭 재네릭 재네릭은 함수 이름 오른쪽에 을 이용해서 작성할 수 있으며 안에 이름은 원하는 이름을 정하면 된다. 안의 이름은 동적으로 타입이 정해질 것이며 매개변수 쪽 및 함수 안의 구현하는 쪽에서 사용할 수 있다. 함수를 호출할때 을 이용하여 안에 타입 정보를 입력해주면 동적으로 타입이 이때 정해지는 것이다. 타입스크립트는 더 편리성을 위하여 함수 호출시 을 입력하지 않아도 매개변수로 넣어준 값의 타입을 분석 후 재네릭 타입 설정이 자동으로 되는 이점도 있다. function makeArray(defaultValue: T, size: number): T[]{ //T로 함수 호출시 정해준 타입이 들어온다. const arr: T[] = []; for( let i = 0; i < size; i++){ arr.p.. 2021. 5. 7.
Typescript 타입 호환성 타입 호환성 타입 호환성은 어떤 타입을 다른 타입으로 취급해도 되는지 판단하는 것이다. 타입 호환성을 위해서는 컴파일 타입에 호환되지 않는 타입을 찾아내어야 한다. 예를 들어 어떤 변수가 다른 변수에 할당 가능하기 위해서는 해당 변수의 타입이 다른쪽 변수의 타입에 할당 가능해야하는데 할당 가능의 판단 조건은 값의 집합을 생각하면 쉽다. 즉 어느 변수 타입이 들어갈 수 있는 값이 작으면 들어갈 수 있는 값이 자신보다 많은 변수 타입에 할당될 수 있다. function func1(a: number, b: number | string){ const v1: number | string = a; const v2: number = b; // 오류 할당 x } function func2(a: 1 | 2){ const.. 2021. 5. 7.
Typescript 클래스(Class) 클래스(Class) 기본 class을 이용한 타입 정의 class Person { name: string; age: number = 0; constructor(name: string, age: number) { this.name = name; this.age = age; } sayHello() { console.log('안녕'); } } 맴버 변수에서 name과 age을 타입정의하고 있으며 age는 초기값으로 0을 할당하고 있다. constructor에서는 맴버 변수를 초기화하고 있다. class 상속 개념 class Person { sayHello() { console.log('안녕'); } } class Programmer extends Person { fixBug() { console.log('버그.. 2021. 5. 6.
Typescript 인터페이스(Interface) 인터페이스(Interface) 기본 interface interface Person { name: string; age: number; } const p1: Person = { name: 'jin', age: 23}; const p2: Person = { name: 'seok', age: 'ten'} //age 오류 interface라는 기능을 이용하면 따로 타입 지정하는 코드를 분리할 수 있게 된다. interface Person { name: string; age?: number; } const p1: Person = { name: 'jin'}; interface 안에서도 선택 속성을 사용할 수 있다. age에 선택 속성을 적용시켰기 때문에 Person interface을 지정한 p1의 객체에 age.. 2021. 5. 6.
Typescript 함수 타입 함수 타입 function getText(name: string, age: number): string { const nameText = name.substr(0, 10); const ageText = age >= 35 ? 'senior' : 'junior'; return `name:${nameText}, age: ${ageText}`; const v1: string = getText('mike', 23) // 통과 const v2: string = getText('mike', '23') //'23' age 타입 오류 const v3: number = getText('mike', 23) //v3 함수 반환 타입 오류 타입스크립트의 함수 타입은 위와 같은 코드가 기본이다. 매개변수에 타입을 각각 정할 수 .. 2021. 5. 5.
Typescript enum 타입 enum 타입 enum 타입이란 자바스크립트에는 없고 타입스크립트에만 있는 것인데 각각 enum 타입으로 열거형을 사용하여 이름이 있는 상수들을 정의할 수 있게된다. enum Fruit { Apple, Banana = 5, Orange, } console.log(Fruit.Apple, Fruit.Banana, Fruit.Orange) // 0 5 6 위의 코드를 보면 enum 타입을 이용하여 객체 형식의 열거형으로 타입들의 상수들을 정의할 수 있게되었다. 이때 초기화 되지 않은 열거형의 첫번째 값은 '0'으로 시작하며 만약 Apple = 1 이라고, 값을 지정해 주면, 다음부터는 자동증가하여 Fruit.Apple 은 1, Banana 은 2, Orange 는 3가 된다. "use strict"; Obje.. 2021. 5. 5.
Typescript 기본 타입 정의하기 타입 정의하기 타입스크립트는 타입을 원하는대로 정의할 수 있다. const size: number = 123; const isBig: boolean = size >= 100; const msg: string = isBig ? '크다' : '작다'; const values: number[] = [1, 2, 3]; const values2: Array = [1, 2, 3]; const data: [string, number] = [msg, size]; 위와 같이 변수 옆에 ': 타입'을 해주면 타입스크립트에서는 타입을 인식하여 변수에 정해진 타입과 다른 것이 들어오면 곧바로 오류가 발생했다는 것을 알려준다. console.log('typeof 123 =>', typeof 123) console.log('ty.. 2021. 5. 5.
반응형

티스토리툴바