간단정리
-
웹팩(Webpack)간단정리 2020. 12. 9. 13:21
웹팩 너란 녀석 프로젝트를 진행 하다 보면 어떤 이유에서인지 결국 webpack(이후 웹팩)을 만나게 된다. 웹팩이 파일들을 bundle.js로 export해주는 것은 이해하고 있지만 정확한 개념과 동작방식을 알아볼 필요가 있을 것 같다. 내가 너를 만나게 된 이유 파일 압축은 방법에 따라 달라지지만 우리가 흔히 사용하는 기본 압축은 파일 용량을 줄이는 압축이 아니다. 파일 이동, 다운로드를 경험한적 있는가? 3만개의 파일을 이동하는 것과 압축 된 1개의 파일을 이동하는 것은 같은 용량이여도 큰 시간 차이를 만들어낸다. 서비스를 개발 하며 확장성, 재사용성을 위하여 각 기능별로 파일을 분리하고 성격에 따라 경로도 달라진다. 하지만 위의 압축의 예시와 같이 여러개의 파일을 서버에서 내려 받고 로딩하는 것은..
-
[React] 클래스 컴포넌트와 함수 컴포넌트간단정리 2020. 12. 4. 17:27
1. 개요 1-1. 클래스 컴포넌트와 함수 컴포넌트 - React에서는 두 가지의 컴포넌트 형태가 존재한다. - 흔히 한국에서는 클래스형, 함수형 컴포넌트라고 말하지만 공식 문서에 따르면 클래스, 함수 컴포넌트가 옳바른 표현이다. (함수형 이라고 하면 오해가 생길 수 있기 때문이다.) // 안녕 난 클래스 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } // 안녕 난 함수 컴포넌트 function Welcome(props) { return Hello, {props.name}; } 1-2. Hooks의 점진적 업데이트 React 공식 문서를 확인 해보면 페이스북 또한, class컴포넌트를 ..
-
[JS] 고차 함수 (Higher-Order Function)간단정리 2020. 10. 22. 20:00
내가 고차 함수를 찾아보게 된 계기는 데코레이터를 검색하다, 고차 함수에 대한 보다 더 정확하게 이해하고 싶게 되어서이다. 고차 함수란? 고차 함수는 함수를 인자로 전달 받거나, 함수를 반환 하는 함수를 의미한다. 고차 함수는 꼭 자바스크립트에 한정 되어있지 않고, 대부분의 언어에서 지원하고 또 비슷한 방식으로 구현 할 수 있다. (위키 `고차 함수`) [예제] 고차 함수는 함수를 인자로 전달 받는다. // 갓챠 함수는 함수를 인자로 전달 받는다. (고차, 가챠 라임ㅎㅎ) function Gacha(func/*: Function*/, value/*: number*/) { console.log(func(value)); } function Squared(value/*: number*/) { return va..
-
[React, TS] react-router 페이지 전환시 ScrollToTop 예제 코드간단정리 2020. 9. 17. 18:34
페이지 전환시, 스크롤 초기화가 필요해졌다. 꼭 필요하지 않아도, 해당 기능을 넣어 놓는것이 좋을 것 같다고 판단했다. '유저가 정말 작은 화면으로 높이를 고정해서 보고 있을 수도 있겠지..?' 여러가지 방법이 있겠지만, 가장 간단한 방법인 것 같고, 타입스크립트 예제가 없어 혹여 누군가에게 도움이 될 수도 있으니 포스팅 한다. 각 페이지, 특정 조건 마다 스크롤을 제어해주는 것을 제외하고 페이지가 전환 될 때(= 라우트가 변경될 때) 마다 각 페이지 별로 componentDidMount()에 입력하기에는 번거롭다. 그래서 아래 예제를 사용한다. 공식 문서에도 예제가 존재한다. 하지만, 해당 예제에서 새로고침이 발생 되었을 때는 스크롤 이벤트가 작동 되지 않는다. (1회) 검색 해보니, 해결법으로 set..
-
[TS] 타입스크립트란?간단정리 2020. 7. 15. 10:40
개요 타입스크립트는 마이크로소프트에서 개발하고 관리하는 오픈소스 프로그래밍 언어이며, 자바스크립트의 상위 조합이고 최산 ECMA스크립트를 따른다. 타입스크립트는 ECMA스크립트를 따르기 때문에, 자바스크립트의 특성을 침범하지 않고 최신 ECMA 표준을 지원한다. (ECMA) 자바스크립트를 보완하여 변수나 함수 등에 명시적으로 타입을 추가할 수 있게 타입 안정성을 높였고, 모듈화, 객체지향 프로그래밍 지원, 도구 지원등을 해준다. 특징 * 자바스크립트는 동적 타이핑 언어로 컴파일에 시간을 들이지 않고, 동적 타이핑을 수행하기 때문에 런타임시 속도가 빠르다. * 타입스크립트는 정적 타이핑 언어로 컴파일에 시간이 들지만, 컴파일 이후 동작은 자바스크립트와 같다. 위와 같은 이유로 단순히 타입스크립트는 속도가 ..
-
[JS] 메소드와 함수간단정리 2020. 7. 11. 23:21
[스포] * 메소드와 함수의 차이는 정의의 차이다. * 화살표 함수, 일반 함수 모두 객체 안에 정의 되면 메소드가 맞다. * 화살표 함수는 고유한 this가 없어, this는 객체 외부 함수로 지정된다. [정의] * function (함수)는 그 자체로도 기능을 한다. - 함수는 매소드를 포함한 더 포괄적인 개념이다. - fucntion(); 으로 호출 할 수 있다. * method (메소드)는 객체 안에 존재 하며, 객체안에서 작동 한다. - 메소드는 클래스 안에 있는 data를 조작할 수 있다. - object.method(); 로 호출 할 수 있다. function func() { return "Call me function!"; } var obj = { method() { return "Call..
-
[JS] 화살표 함수 (Arrow Function)간단정리 2020. 7. 10. 09:18
약 2년전, Javascript를 처음 접할 때 Arrow Function이 그냥 함수를 정의할 때. 꼭 써야하는 문법이라고 생각했다. 난 시작 부터 ECMAScript2015(ES6) 가 있었기 때문이다. (왜 2015가 6가 되는진 모르겠다.) JS에 대해서 조금 알게 되고, 실제 제품을 만들 때 '굳이 화살표 함수를 써야하나?' 생각이 들었다. 도대체 이게 왜 나왔고, 무엇이 편리한지 알아보자. [스포] (1) function에 비해 구문이 짧고 (2) this, arguments, super 또는 new.target을 바인딩 하지 않는다. 1. function에 비해 구문이 짧다. // ES5 var foo = function () { console.log("foo") }; // foo // ES..
-
[JS] 암묵적(Implicit), 명시적(Explicit) 형변환간단정리 2020. 7. 9. 09:18
대부분의 언어에서 형변환이 존재한다. 직접 한땀한땀 변경하는 방법과 자동으로 변경하는 방법 정도로 생가하면 좋을 것 같다. 분명 한 것은 한땀한땀 변경하는 것을 모두가 추천할 것이다. 암묵적 타입 변환(Implicit Coercion) * 자바스크립트의 강점이기도 하지만, 가장 피해야할 기능이기도 하다. 자바스크립트는 느슨한 언어이기에 var는 어떤 타입이든 자동적으로 변경 된다. 1 + "Ryuk" // 1Ryuk : string 1 + "2" + 3 // 121 : string 1 + 2 + "3" // 33 : string 2 * "2" // 4 : number 1 + true // 2 : number 1 + false // 1 : number 예제가 더 보고 싶다면 (링크) * 위와 같은 기괴한 ..