Frontend

private 키워드는 오직 typescript에서 보호해주기 위해서 사용한다. / 따로 설정이 안해주면 기본적으로는 모두 public이다. abstract : 추상클래스는 다른 클래스가 상속 받을 수 있는 클래스이다. 하지만 직접 새로운 인스턴스를 만들 수는 없다 타입스크립트는 추상클래스의 인스턴스를 만들 수 없다고 경고한다. 상속 받은 자식클래스에서는 부모 메소드를 사용할 수 있다. 자바스크립트에서는 abstract이 전혀 언급되지 않는다. 추상 메소드를 만들려면 메소드를 클래스 안에서 구현하면 안다. 추상클래스 안에서는 추상 메소드를 만들 수 있는데 추상 메소드 안에는 메소드를 구현하면 안되고 call signature만 적어둬야 한다. 추상메소드(코드가 없는 메소드)는 추상 클래스를 상속 받는 모..

다형성은 무엇인가? 다형성(polymorphism)이라는 단어는 원래 '여러 개의 형태를 갖는다'라는 의미이다. poly(하나 이상), morph(형태)가 합성된 단어로 '하나 이상의 형태'를 뜻한다 concrete type number , boolean, string,void형 같은 타입 type SuperPrint = { (arr:number[]):void (arr:string[]):void (arr:boolean[]):void (arr: (number | boolean)[]):void } const superprint:SuperPrint = (arr) =>{ arr.forEach(i => console.log(i) ) } superprint([1,2,3,4]) superprint([true, fal..

Call Signatures type Add = (a:number, b:number) => number //함수의 리턴값의 type이 number이다! function의 type을 정해두는 것! type Add = { (a:number, b:number) : number } 위의 코드와 같은 유형 오버로딩은 함수가 여러개의 call signatures를 가지고 있을 때 발생시킨다. Overloading 한 클래스에 이름이 동일한 메서드가 중복 정의되어 있는 경우를 메서드 오버로딩(overloading)이라 한다. 또 다른 예 // call signatures 파라미터의 타입 다른 예 type Add = { (a:number, b:number) : number (a:number, b:string) : nu..

age? const player : { name:string, age? :number } = { name:"doyi" } typescript는 선택적 변수(optional parameter)를 지정할 수 있게 한다. type type Player = { name:Name, age?:number } typescript 는 객체의 타입을 따로 지정할 수 있다. const doyi : Player = { name:"doyi", age:23 } 이런식으로 응용이 가능하다! readonly type people = { readonly name:Name, age?:number } const peoplean = (name:string) : people => ({name}) const c = peoplean("sss"..

타입스크립트(TypeScript)란? 타입 스크립트는 자바스크립의 단점을 보완하기 위해 만든 언어이다. 뛰어난 타입 안정성 때문에 런타입에러도 줄게되고 생산성도 늘어나 전반적으로 자바스크립트보다 코드에 버그가 엄청 줄게 된다!! 자바스크립트에서는 이런식으로 타입이 같지 않음에도 에러가 나는게 아니라 이상한 코드를 출력한다. 마찬가지로 a,b 라는 숫자 2개를 보내지 않았음에도 코드는 실행되고 있다. 이것또한 에러가 나긴했지만 코드가 실행되고 나서 발생하는 에러이다. 제일 좋은 방식은 코드가 실행되기 전에 hello() 라는 메소드를 doyi라는 객체가 가지고 있지 않다는 것을 알려주는 것이다. 타입스크립트(TypeScript) 시작하기 일반 HTML CSS JS 개발 1. node 설치하기 https:/..

Routing 이란?? 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 리액트는 SPA (Single Page Application) 방식 - 기존 웹 페이지 처럼(MPA 방식) 여러개의 페이지를 사용, 새로운 페이지를 로드하는 방식이 아니다. - 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다. React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다. ※ 그렇다면 a태그가 있는데 왜 굳이 라우터를 따로 정의하고 사용할까? -> SPA 사용자 경험 향상의 목적이다. 그냥 a 태그를 사용하면 페이지 전체가 새로 로딩된다. 흔히 말하는 화..

📌Axios란? HTTP Client(HTTP 상에서 커뮤니케이션 하는 자바기반 컴포넌트) 를 내장하고 있는 Angular와 다르게, 리액트에는 따로 내장하는 내장클래스가 존재하지 않는다. 따라서 리액트에서 AJAX(비동기 웹 애플리케이션) 를 구현하기 위해서 Javascript 내장 객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야 합니다. 그렇다면 어떤 HTTP Client 라이브러리를 사용하는게 좋을까요? 현재 리액트에서 가장 많이 사용하고 있는 HTTP Client라이브러리는 Fetch API와 Axios가 있다 📌React에서 Axios 구현하기 1. Axios 설치 npm install axios yarn add axios // 생성한 프로젝트 상단에 import로..

javascript를 사용하다보면 너무나 자주 마주하는 함수들!! 한번은 정리할 필요가 있다고 생각했다. 📌for()for (int i = 0; i let arr = [];for (let i = 0; i  가장 빠르고 단순하다. 그래서 효율적이다.모든 자료형에 대해 사용이 가능하다.중간에 loop 건너뛰기나 종료가 가능하다. (continue or break)반복범위 컨트롤이 가능하다. (i++, i–, i+=2*i 등)변수를 활용할 수 있다. (var i 값을 사용할 수 있다) 📌foreach()arr.forEach(function(v, i, arr) { console.log(v);});let numbers = [1,2,3,4,5,6];// flag가 forEach함수문에 이름이라고 생각하면 됨 ..