본문 바로가기

Programming

 (36)
Javascript 일급 객체(First-class object) javascript에서 함수(Function)는 일급 객체(First-class object)이다. 일급 객체(First-class object)란? javascript에서 다음을 만족하여야 한다. 무명의 literal로 생성이 가능하다. 변수나 자료구조(배열(Array), 객체(Object) 등)에 할당이 가능하다. 다른 함수의 parameter로 전달이 가능하다. 다른 함수의 return으로 사용이 가능하다. Function이 일급 객체인 이유 javascript에서 Function은 다음과 같이 가능하다. 무명의 literal로 생성이 가능하다. var helloAlert = function(name){ (name + "님 환영합니다."); } helloAlert("world"); 변수나 자료구조(..
React Hook Memoization(메모이제이션) useCallback/useMemo React에서는 컴포넌트의 state 또는 부모에게서 받은 props 값이 변경될 때 마다 리렌더링합니다. 그리고 리렌더링될 때마다 컴포넌트의 변수와 함수들이 매번 재생성됩니다. 때문에 반복적이고 쓸데없는 리렌더링은 성능에 영향을 줍니다. 예시로 부모에게서 props로 {a, b}를 넘겨받았다면 props.a만 변경되어도 props.b관련 함수,변수도 다시 호출하여 실행합니다. 이런 불필요한 동작을 피하고자 메모이제이션을 적용한 useCallback 와 useMemo함수를 사용합니다. useCallback uesCallback은 메모이제이션된 콜백을 반환합니다. useCallback(fn, deps)와 같이 사용합니다. fn: 메모이제이션할 콜백 함수 deps: 콜백의 의존성 배열, 콜백의 의존성 배열이..
Node.js package.json이란 package.json이란? Node.js 프로젝트에 관한 정보와 Package manager(npm, yarn 등)을 통해 설치한 모듈들의 의존성(Dependecies)을 관리하는 파일. package.json 주요 구성 보통 package.json에 포함되는 fields 프로젝트에 관한 정보 name : 패키지 또는 프로젝트의 이름 *필수 fields version : 패키지 또는 프로젝트의 이름 *필수 fields semantic versioning guidelines를 따른다. Major.Minor.Patch의 형태(1.2.3) description : 패키지 또는 프로젝트에 대한 설명 author / contributor : 패키지 또는 프로젝트의 한 사람의 저자 (author) / 다수의 저자..
Flutter StatefulWidget의 lifecycle(생명주기) StatefulWidget의 lifecycle은 다음 단계를 따른다. createState() initState() didChangeDependecies() build() didUpdateWidget() setState() deactivate() dispose() 1. createState() : statefulWidget이 빌드되었을 때, createState()를 즉시 호출한다. 이 메소드는 반드시 존재해야 한다. class HomeScreen extends StatefulWidget { HomeScreen({Key key}): super(Key: key); @override HomeScreenState createState() => HomeScreen(); } 2. initState() : 각 st..
Flutter StatelessWidget과 StatefulWidget의 차이 Flutter에서 State란? : 화면(UI)에 영향을 미치는 데이터 StatelessWidget이란? : State가 없는 Widget. 즉, 화면(UI)에 영향을 미치는 데이터가 없는 위젯. 데이터에 의해 화면(UI)가 변경될 일이 없다. StatefulWidget이란? : State가 있는 Widget. 즉, 화면(UI)에 영향을 미치는 데이터가 있는 위젯. 데이터에 의해 화면(UI)가 변경될 수 있다. StatefulWidget을 사용할 경우에는 StatefulWidget의 lifecycle을 알아둘 필요가 있다.
Javascript Currying(커링) Currying은 함수형 프로그래밍에서 기초개념이다. Currying은 다음과 같이 정의되고 있다. 다중 인수를 갖는 함수를 단일 인수를 갖는 함수들의 함수열로 바꾸는 것을 말한다. 간단하게 말해서 함수를 리턴하는 함수라고 생각하면 편할 듯 하다. f(a, b, c)의 인자가 3개인 함수를 f(a)(b)(c)와 같이 사용할 수 있다. const curry = (fn) => (a) => (b) =>fn(a,b); const add = (a, b) =>a + b; console.log(curry(add)("Hello")("Wolrd")); // result: HelloWorld Currying은 뒷 부분의 파라미터를 나중에 실행할 수 있다. f(a)(b)를 실행 후 (c)는 나중에 실행 가능하다. const..
Javascript 배열(1차원/2차원) 초기화 하기 1. 1차원 배열 1. Array() 생성자 Array() 생성자는 Array 객체를 생성한다. new Array(element1, element2, ...elementN) // [element1, element2, ... elementN] new Array(ArrayLength) // [undefined, ...] ArrayLength만큼 2. Array.prototype.fill() fill() 메서드는 배열의 시작 인덱스 부터 끝 인덱스의 이전까지 정적인 값 하나로 채운다. arr.fill(value[, start[, end]]) value: 배열을 채울 값 start: 시작 인덱스. 기본값은 0 end: 끝 인덱스. 기본값은 this.length const arr = [1,2,3,4] consol..
Javascript 정규 표현식 (Regular Expression) 예시 정규 표현식에서 자주 사용하는 패턴 및 예시를 알아본다. 전화번호 패턴 매칭(***-****-****) const regex = /^d{3}-\d{3,4}-\d{4}/ 이메일 패턴 매칭 const regex = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; 비밀번호 패턴매칭 // 숫자와 문자가 포함된 8~12자리 const regex1 = /^[A-Za-z0-9]{8,12}$/; // 숫자, 문자, 특수문자가 포함된 8~12자리 const regex1 = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/;

티스토리툴바