본문 바로가기
320x100

front-end53

[TS]08 제네릭+다형성+클래스+인터페이스 다형성: 다른모양의 코드를 가질수 있게 해준다. 다형성을 이루 수 있는 방법은 제네릭을 사용하는 것이다. 제네릭은 placehoder타입을 쓸 수 있도록 해준다. 예시-모든타입에 쓸 수 있는 로컬스토리지 API 시뮬레이션 interface SStorage { // Storage는 이미 내장되어 있는것이기 때문에 사용하게 되면 override가된다 그렇기 때문에 SStorage라고 할것임. [key: string]: T } class LocalStorage { private storage: SStorage = {} set(key:string, value:T){ this.storage[key] = value; } remove(key:string){ delete this.storage[key] } get(ke.. 2022. 5. 17.
[TS]07 type과 interface type - 타입스크립트에게 오브젝트의 모양을 설명해 줄 수 있다. - 여러방면으로 쓰일 수 있다. (오브젝트의 모양을 알려주는데 쓸 수도 있고 타입이 string이라고 알려줄 수도 있다. 또 타입 alias(대체명)를 쓸 수 있다. 등등 여러종류의 타입을 설명할 수 있다.) // 예시1: Alias를 알려줌 type Nickname = string type Health = number // 예시2: 오브젝트의 모양을 알려줌 type Player = { nickname:Nickname, helthBar:Health } const tom:Player = { nickname:'tom', helthBar:10 } // 예시3: 타입이 string이라는것을 알려줌 type Food = string; const .. 2022. 5. 16.
[TS]06 클래스 / 추상클래스 클래스 Classes 타입스크립트에서는 파라미터들을 써주기만 하면 알아서 constructor함수를 만들어준다. class Player { constructor( private firstName: string, //JS에서는 private 부분이 보이지 않는다. private lastName: string, public nickName: string, ){} } const player = new Player('firstName', 'last' , 'Tom'); player.firstName // -> class에서 private로 해주었기 때문에 오류가 나며 컴파일이 되지 않는다. 추상클래스, 추상메소드, private, protected, public 타입스크립드에서 제공하는 기능 추상클래스: 다른 클.. 2022. 5. 12.
[TS]05 다형성 / 제네릭 다형성 Polymorphism 이란? '여러 모양'을 의미하는 그리스 단어이고 다형성에서 형은 타입(type)을 의미한다. 프로그래밍 언어에서 다형성이란, 여러 타입을 받아들임으로써 여러 형태를 가지는 것을 의미한다. generic이란? - 타입의 placeholder같은것이다. *concrete type대신 쓸 수 있다. (*concrete type이란? : number, boolean, string, unknown, void 등 을 일컬음) - 타입스크립트로 placeholder를 작성할 수 있고 그게 뭔지 추론해서 함수를 사용하는것. - call signature를 작성할때 들어갈 확실한 타입을 모를 때 제네릭을 사용한다. - 보통은 다른 라이브러리 또는 패키지를 사용하기때문에 직접 제네릭을 작성할.. 2022. 5. 11.
[TS]04 call Signatures / overloading(오버로딩) call Signatures 함수 위에 마우스를 올렸을때 보게되는것. 함수를 어떻게 호출해야하는지 알려준다. 인자(arguments)의 타입과 함수의 반환타입을 알려준다. type Add = (a:number, b:number) => number; // -> Call Signatures 생성 const add:Add = (a, b) => a + b const add:Add = (a, b) => {a + b} // 이런식으로 잘못 썼을경우 에러가 난다. overloading 오버로딩 function overloading 이나 method overloading이라고도 불린다. 함수가 서로다른 여러개의 call signatures를 가지고 있을 때 발생시킨다. 패지나 라이브러리를 디자인할 때 많은 사람들이 사.. 2022. 5. 10.
[TS]03 unKnown / void / never unKnown 변수의 타입을 미리 알지 못할 때 사용한다. 만약 API로 부터 응답을 받는데 그 응답의 타입을 모른다면 'unknown'타입을 쓸 수 있다. any와 차이점: any타입처럼 모든 값을 허용하지만 차이점은 할당된 값이 어떤 타입인지 알기전까진 프로퍼티 또는 연산을 하는경우 컴파일러가 체크한다. let a:unknown; //if문으로 타입체크를 하면 동작시킬수 있다. if(typeof a === 'number'){ let b = a + 1 } void void: 아무것도 return하지 않는 함수를 의미한다. 보통 void를 따로 지정해줄 필요는 없다. void는 '비어 있는 것'을 말한다. function hello(){ // void는 생략 가능 console.log('x') } nev.. 2022. 5. 10.
[TS]02 readonly / Tuple / any 타입 readonly - 읽기전용속성. js에서는 없는 속성이다. type Player = { readonly name: string, // 앞에 readonly를 적어주면 읽기전용으로 바뀐다. age?: number } const playerMaker = (name:string) : Player => ({name}) const player = playerMaker("Tom") player.name = 'Jay' // 위에서 readonly속성을 주었기 때문에 수정하려고 시도하면 오류가 난다. //배열에서 readonly 사용하기 const numbers: readonly number[] = [1, 2, 3] number.push(1) // readonly속성을 가졌기 때문에 추가가 안되고 오류표시가 생긴다... 2022. 5. 10.
[TS] 01 문법 / object, 함수 return의 타입지정 기본 문법 // 변수명 뒤에 ': 타입이름' 을 적어준다 let a : number = 1; let b : string = 'string'; let c : boolean = true; //array로 바꾸기 let aa : number[] = [1, 2]; let bb : string[] = ['string', 'hello']; let cc : boolean[] = [true]; // 타입은 자동으로 추론하는게 좋다. 굳이 명시할 필요 없음. 오브젝트 타입지정방법 & 옵셔널 // (1) 문제상황: age의 타입을 지정해줬지만 player안에 age가 없다면? -> age뒤에 '?'를 추가해서 옵셔널로 준다. const player : { name: string, age?: number } = { name.. 2022. 5. 10.
[TypeScript] 리액트에서 타입스크립트 적용하기 01. 설치하기 (1) 타입스크립트를 전역으로 설치해준다. 설치할때 에러가 나서 찾아보니 sudo를 앞에 붙이면 해결이 된다. 컴퓨터 패스워드를 입력해주면 설치가 실행이 된다. npm install -g typescript sudo npm install -g typescript //위에 것이 오류난다면 sudo를 붙이고 다시 해보기! (2) Typescript의 필수 설정파일인 tsconfig.json을 생성하자. *tsconfig.json은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정한다. tsc --init 위의 패키지를 설치해도 되고 파일을 만들어도 된다. { "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "noIm.. 2022. 5. 8.
[React] react-scroll-motion 사용하기 DEMO https://1000ship.github.io/react-scroll-motion/ 설치하기 # Use npm npm install react-scroll-motion # Use yarn yarn add react-scroll-motion 코드 예시 https://github.com/1000ship/react-scroll-motion/blob/master/_readme/docs.md import { Animator, ScrollContainer, ScrollPage, batch, Fade, FadeIn, FadeOut, Move, MoveIn, MoveOut, Sticky, StickyIn, StickyOut, Zoom, ZoomIn, ZoomOut } from "react-scroll-mot.. 2022. 5. 4.
[Typescript]리엑트에서 타입스크립트 사용하기 1. 터미널에서 타입스크립트를 설치해준다 npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom 2. 파일 확장자명 변경하기 js파일 → .ts jsx 파일 → .tsx 3. 인터페이스 만든 뒤 props타입을 만들어준 인터페이스로 선언하기 *인터페이스란 타입을 정의한 규칙을 의미한다. //(1) interface 만들기 interface IProps { //word: any; any는 절대로 남발하면 안된다. word: IWord } interface IWord{ //프로퍼티들에게 타입을 지정할 수 있다. day: string; isDone: boolean; id: number;.. 2022. 4. 29.
[React]'Recoil' 상태관리 라이브러리 사용하기 공식문서: https://recoiljs.org/ko/docs/introduction/installation 1. 설치하기 //npm 설치 npm install recoil //yarn 설치 yarn add recoil 2.사용방법 (예제-Character Counter 만들기) (1) RecoilRoot: ​부모트리에 로 감싸준다 //App.js import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( //->감싸주기 ); } (2). Atom Atom은 상태(state)의 단위를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽.. 2022. 4. 21.
[API]open API 사이트모음 1. GIPHY Devlopers -gif를 이용해 재미있는 어플리케이션을 만들어보고 싶다면. https://developers.giphy.com/ GIPHY Developers The GIPHY Developer Portal is how you integrate the world's best GIF API into your business, app or project. developers.giphy.com 2. 요리관련 https://www.edamam.com/ Edamam – Food Database API, Nutrition API and Recipe API www.edamam.com 3. 밈 제너레이터 http://apimeme.com/?ref=apilist.fun APIMeme - Meme Ge.. 2022. 4. 7.
[React-css] styled-component 설치 및 사용법 + 작업환경 셋팅하기 CSS-in-JS 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법. Component가 많을 경우, class명이 중복될 수 있는 문제를 방지해준다. 💅 1. 패키지 설치 (1) 터미널로 설치. $ npm i styled-components //타입스크립트로 작성시 아래와 같이 입력 $ npm i styled-components @types/styled-components (2) component파일 상단에 styled함수를 임포트한다. import styled from "styled-components"; 💅 2. 사용방법 (1) 기본문법 styled.태그 뒤에 백틱(``)을 작성하고 그안에 css스타일링을 한다. (작명시 첫글자 대문자 필수) con.. 2022. 4. 5.
React 설치 및 기타설치 모음 🐶 01 React 설치 준비하기 //(1)버전확인해서 node.js 안깔려있으면 사이트들어가서 설치하기 $ node -v $ npm -v //--------------------------------------------------------------- //(2)npx 설치하기 npm install npx -g //npm install -g에서 -g옵션은 시스템 디렉터리에 패키지를 설치하는 것을 의미한다. //-g 옵션이 없다면 module은 현재 디렉터리 내부에 로컬로 설치된다. //--------------------------------------------------------------- //(3)작업파일 생성 npx create-react-app my-app //'my-app'은 폴더이름이.. 2022. 4. 1.
[JS]08-async 동기와 비동기 (callback, promise, async, await) JavaScript is synchronous. 자바스크립튼 동기적이다. -호이스팅이 된 이후부터 코드가 위에서부터 하나하나씩 동기적으로 실행된다 (호이스팅: var, 함수선언들이 제일 위로 올라가는것) console.log('1'); console.log('2'); console.log('3'); // 1-2-3 차례로 실행 console.log('1'); setTimeout(() => console.log('2');, 1000);//1초뒤에 실행하라는 명령을 내림 console.log('3' ); // 1-3-2 순서로 나옴 callback synchronous callback (동기 콜백) function printImmediately(print){ print(); } printImmediately.. 2022. 3. 8.
[CSS] all 속성 - 스타일 초기화하기 요소의 기본 스타일 속성을 초기화하려면 all: unset; 요렇게 써주면 된다. 간단하다. 스타일 하나하나 바꿀 필요 없이 한줄이면 끝! /* BAD */ button{ background: inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer } /* GOOD */ button{ all:unset; } button뿐만 아니라 a태그, ul,li 등등 디폴트 스타일이 있다면 모두 사용이 가능하다. 굿굿! 2022. 3. 6.
[JS]07-JSON(stringify, parse) JSON - JavaScrips Object Notation 자바스크립트 객체표기법 (단순 데이터 표기방법이다.) 1. Object to JSON (오브젝트를 제이슨으로 변환하는 방법) JSON.stringify(obj) const rabbit = { name: 'tori', color: 'white', size: null, birthDate: new Date(), //아래와 같은 심볼이나 함수등 자바스크립트에만 있는 데이터들은 포함되지 않는다. symbol: Symbol('id'), jump:() => { console.log(`${name} can jump!`); }, }; json = JSON.stringify(rabbit); console.log(json); //원하는 목록 생성가능 json = .. 2022. 3. 2.
[JS]06-Array 배열 1. 선언하는 방법 const arr1 = new Array(); const arr2 = [1, 2]; // 좀더 흔하게 쓰이는 방법 2. Index positon const fruits = ['apple','banana']; console.log (fruits); console.log (fruits.length); //2 console.log (fruits['0']); //apple이 출력됨 console.log (fruits[fruits.length -1]); //마지막 데이터 접근 3. Looping over an array //for for(let i = 0 ; i console.log(fruit)); 4. Addition, deletion, copy push / pop //push: 배열끝에 아.. 2022. 2. 26.
[JS]05-object(for..in, for..of 등) Object - object = {key : value}; 1. Literals and properties -Object literal: {}를 이용해서 만드는 방법 const obj1 = {}; -object constructor: class를 이용하여 new라는 키워드를 이용한 방법 const obj2 =new Object(); function print(person){ console.log(person.name); console.log(person.age); } const tom = { name: 'Tom' , age: 20}; print(tom); //dynamically typed language라 properties를 나중에 추가 가능함 tom.hasJob = true; //추가 console.. 2022. 2. 25.
[JS]04-Class(클래스 만들기, 게터와 세터, static 등) class -template -declare once -no data in 연관있는 데이터들을 한데 묶어놓은 컨테이너같은 역활 붕어빵틀같음 청사진이라고 불리고 템플릿이라고도 불림 class Person{ //속성 fields name; age; //행동 method speak(); } Object -instance of a class -created many times -data in 붕어빵같음 1. Class declarations 첫번째: 클래스를 만들어준다.(템플릿 같은 역할. 데이터x) class Person{ //constructor:생성자를 이용해서 나중에 오브젝트를 만들때 필요한 데이터를 전달함 constructor(name, age){ //fields: 전달된 데이터를 바로 할당해줌 thi.. 2022. 2. 25.
[JS]03-function(함수, parameters (변수), 콜백 함수, 화살표함수/first class fn 등) Function -기본적인 빌딩블럭. (fundamental building block in the program) -subprogram 이라고도 불리며 여러번 재사용이 가능함 - 한가지의 task 나 값을 계산하기위해 쓰여짐 1. Function 선언하기 function name(param1, param2){ body... return; } -하나의 함수는 한가지 일만 하도록 만들어야함 -함수의 이름을 작성할땐 동사형태로 지정하기. e.g. createCardAndPoint -> createCard, creatPoint 처럼 세분화 하는게 함수를 깨끗하게 만들 수 있다. -js에서 function은 object 이다. 그렇기 때문에 함수를 변수에다 할당할 수 있고 파라미터로 전달이 되고 함수를 리턴할 .. 2022. 2. 24.
[JS] 02-operator (연산, 반복문, for, while, swich 등) 1. String concatenation (문자 연결) 문자열 + 문자열 console.log('my'+'cat'); -> my cat 문자열 + 숫자형 console.log('1'+2) -> 12 백틱을 이용한 스트링형 `${값}` console.log(`string literals : 1+2 = ${1+2}`); -> string literals : 1+2 =3 2. Numeric operators (숫자 연산자) console.log(1 + 1); console.log(1 - 1); console.log(1 / 1); console.log(1 * 1); console.log(1 % 1); -> 나누고 나머지값 console.log(2 ** 3); -> 2의 3승 3. Increment and de.. 2022. 2. 23.
[JS ]01-variable (var와 let차이, const, primitive 타입 등) 1. Use strict 'use strict'; js 최상단에 적기. 타입스크립트를 사용한땐 안써도 되지만 바닐라 자바스크립트를 사용할땐 적는것이 좋다. js의 flexible한 요소들을 막아준다.(선언되지 않은 함수의 값을 할당한다던지 기존의 존재하던 프로트타입을 변경한다던지 이런 비상식적인 것들을 막아주기 위함.) 2. variable(읽고 쓰기 가능) -var 와 let var는 절대 쓰지 말것! 이유1: 호이스팅문제 때문. (호이스팅: 선언을 최상단으로 끌어올리는것) 이유2: has no block scope. 블럭스코프 밖에서도 호출이되는 문제가 있음 그래서 나온게 let let은 Mutable 타입 (변화가능) * block scope란?: {}로 감싸는것. {}안에 코드작성시 안에서만 유.. 2022. 2. 23.
[JS] html에서 script를 읽는 다양한 방식 (async와 defer) 1. 아무것도 안한 상태의 script 읽는 방식 js가 실행되는 과정 (1) parsing html (한줄한줄 읽다가) (2) [blocked] -script부분을 만나면 parsing html을 잠시멈추고, -fetching js (서버에서 다운받는일)를 한뒤 -executing js (실행)한다. (3) 다시 parsing html 문제점 : js파일이 크거나 인터넷이 느리면 사용자가 웹사이트를 보는데까지 많은시간이 걸림 2. body안 끝단에 script를 추가하는 방식 js가 실행되는 과정 (1) parsing html (2) fetching js (3) exeuting js 문제점: html을 끝까지 읽은 뒤 js 다운 및 실행되기 때문에 사용자가 html의 컨텐츠를 빨리 보는 장점은 있지만 .. 2022. 2. 23.
320x100

티스토리툴바