Programming/JavaScript & TypeScript
-
TypeScript vs JavaScriptProgramming/JavaScript & TypeScript 2022. 2. 15. 08:26
Static type(TS) vs Dynamic type(JS) JS는 실행시에 점검, TS는 상시 점검 JS는 실행시 점검이기때문에 number가 맞는지 체크해야되지만, TS는 만약 문자열이면 실행조차 안됨(개발중에 에러남) //JavaScript function add(n1, n2) { if (typeof n1 !== 'number' || type n2 !== 'number') { throw new Error('Incorrect input!'); } return n1+n2; //TypeScript function add(n1:number, n2:number) { return n1+n2; } 기본제공타입 Boolean, Number, String, Null, Undefined, Symbol, Array..
-
리액트를 다루는 기술Programming/JavaScript & TypeScript 2021. 12. 16. 12:21
리액트를 다루는 기술(개정판)에서 실제 소스코드와 차이가 있는 부분 정리 13장 리액트 라우터로 SPA 개발하기 부터 사용되는 Route는 최신 react-router-dom에서는 적용되지 않습니다. react-router-dom에 대한 방법이 V6부터 변경되었기때문입니다. 책을 따라하려면 react-route-dom을 v5.3.0으로 설치하면 됩니다. 터미널에서 아래와 같이 입력하면 됩니다. yarn add react-router-dom@^5.3.0 react-router-dom V6에 대한 정리는 아래 블로그를 참고하세요. https://velog.io/@soryeongk/ReactRouterDomV6
-
mapProgramming/JavaScript & TypeScript 2021. 9. 26. 13:19
Java script 내장함수 map 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 결과 반환 array.map(callback, [thisArg]) 기본형은 함수를 넘겨서 작업하는 방법 var numbers = [1,2,3,4,5] var processed = numbers.map(function(num){ return num*num }); console.log(processed) 화살표 함수를 이용할 수도 있다. var numbers = [1,2,3,4,5] var processed = numbers.map(num=>num*num) console.log(processed) 결국 map을 어떻게 컴포넌트에 적용하느냐는 다음 예제를 보자 li를 만들어서 저장해두고 u..
-
클래스 컴포넌트 vs 함수형 컴포넌트Programming/JavaScript & TypeScript 2021. 9. 25. 21:22
react에는 함수형 컴포넌트와 클래스형 컴포넌트가 있다. 함수형 컴포넌트는 클래스형 컴포넌트와 동일하다. 클래스형 컴포넌트는 state기능및 라이프사이클 기능이 있고, 임의 메서드를 정의할 수 있다는게 장점 함수형의 장점은 선언하기 편하고, 메모리 자원도 적게 사용, 빌드 결과물의 크기도 작다. 단점은 state와 라이프 사이클 api 사용불가인데, 이게 React v16.8 이후에는 Hook으로 어느정도 커버 가능하다. 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const name = 'react' return {name} } } 함수형 컴포넌트 import React from 'r..
-
리액트 공부 / 추천 사이트Programming/JavaScript & TypeScript 2021. 9. 25. 20:52
* Learning React를 공부하면서 정리한 페이지입니다. 리액트 공식 홈페이지 https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 러닝리액트 https://github.com/MoonHighway/learning-react GitHub - MoonHighway/learning-react: The code samples for Learning React by Alex Banks and Eve Porcello, published by O'Reilly M The code samples for Learning React by Ale..
-
ES6 변경사항Programming/JavaScript & TypeScript 2021. 9. 25. 16:16
1) 템플릿 문자열 ES6 이전에는 문자열 연결시에는 병합연산자(+) 사용 ES6 이후에는 백틱을 이용해서 표현 //ES6 이전 var string1 = "안녕하세요." var string2 = "반갑습니다." var greeting = string1 + ' ' + string2 //ES6 이후 var string1 = "안녕하세요." var string2 = "반갑습니다." var greeting = `${string1} ${string2}` 2) 화살표 함수 지원 // 예전방식 var lordify = function(firstName, land) { return `${land}의 ${firstName}` } //ES6의 화살표 함수 var lordify = (firstName, land) => `$..