IT/JavaScript (15) 썸네일형 리스트형 JavaScript Functional Programming [ pipe ] 함수형 프로그래밍 사실 뭐 함수형이니 객체 지향이니 .. 뭐 요즘 말이 많은데 주로 내가 Project할 땐 가려서 쓰지 않는 느낌이다. 작업을 진행할 때마다 느끼는 거지만 장단점이 있는 느낌..? 근데 함수형 프로그래밍으로 여러 Util 함수들을 만들어 놓고 작업을 진행하는 경우가 많으므로 자주 사용하는 함수에 대해서 정리도 하고 기록도 하고 일석이조 아니겠는가. 보통 개인 Git에 올린 유용한 Util 함수들을 프로젝트를 진행할 때마다 만들어서 사용하곤 하는데 꽤 유용한 것들 중에서 pipe함수에 대한 포스팅 하겠다. Pipe 이름에서도 느껴지지만 뭔가 실제 파이프처럼 연결된 그런 느낌적인 느낌이 드는데,,, 대충 요약하자면 여러 함수들을 합쳐서 하나의 함수로 만든 뒤 반환해주는 느낌적인 느낌이 있는.. Request body validation middleware 회사에서 FrontEnd 뿐만 아니라 BackEnd 작업도 많이 한다, 지금도 Node.js기반 백엔드 작업을 굉장히 많이 하고 있는데 하면서 느낀점 및 꿀팁들을 작성해 보고자 한다. 언어가 JavaScript인 만큼 넘어온 요청 Body값이 Number인지 String인지 구분도 못하고 그냥 넘겨주는 것이 너무 불편하고 보기 껄끄러워서 Midleware를 활용하여 Request body 검증 로직을 수행하도록 했다. 그냥 Type검사 안하고 바로 통과해 버리는 JavaScript 보면 매우 불편해서 참을 수가 없다. 이게 회사 뿐만이 아니라 현재 진행하고 있는 Side project에도 적용을 해봤는데 매우 좋은 것 같다. 회사 로직을 옮겨 적을 수 없으니 Side project에서 진행한 Middle.. if를 통한 명확하고 확실한 조건 처리 if JavaScript뿐만 아니라 기타 다른 프로그래밍 언어에는 if문이 존재한다. 라이브러리, 프로젝트 기타 등등 if문 없이 프로그래밍이 가능할까? 라는 생각이 드는데,,, if문을 간단 명료하게 작성하기란 쉽지 않은 것 같다. 간단 명료한 if 작성 프로그래밍을 배우면서 귀에 딱지가 앉도록 클린코드에 대해 들어왔을 테지만 실제로 클린하게 코드를 작성하기란 여간 쉬운 일이 아니다. 이러한 일의 원인은 매우 다채로울 것이지만 그 중 하나가 바로 if문을 통한 예외처리 때문이리라,,, 어떻게 조건을 처리하는 것이 좋을까 이러한 조건 처리가 왜 프로젝트의 규모와 상관이 있을까? 대부분의 서비스는 수명이 길지 않은데 수명을 연장시키기 위해서는 누구나 알아보기 쉬운 코드로 작성되어야 한다. 따라서 복잡하고 .. Object, Array each 함수 Object? Array? forEach는 Array만 돌릴 수 있기 때문에 반복문을 돌릴려면 Object.keys(obj).forEach 뭐 이런 식으로 돌려야 하기 때문에 체이닝이 매우 많아진다. 그래서 Array이든 Object든 forEach를 돌릴 수 있게 구현해봤다. function each( target: Array | Type.HashType, cb: (item: T, key: string | number) => any ): void { if (!isFunction(cb)) return; match(target) .on( () => isArray(target) === true, () => { const arr: Array = target as Array; arr.forEach((item: .. TypeScript 타입 단언 Type assertion 타입스크립트는 명확한 타입 표기 및 타입 추론을 통해 타입을 판단한다. 하지만 때에 따라서 명확한 타입 표기가 불가능하거나 개발자가 임의의 타입을 값에 할당하고 싶은 경우도 존재한다. 이러한 경우 Type assertion을 활용하여 타입을 단언한다. interface Something { do: number | string; } 위 코드의 경우 do는 number 혹은 string의 타입을 가질 수 있다. 경우에 따라서 do 라는 값을 사용할 때 as를 활용하여 타입을 단언할 수 있다. /** * Add month function * @param {Date} target * @param {number} value * @returns {Date | null} */ export .. TypeScript 타입 추론 Type Inference TypeScript는 명시적인 타입의 표기가 없는 경우 타입의 정보를 제공하기 위해 사용. 즉 TypeScript가 코드를 해석해 나가는 동작 // num: number const num = 3 // isTrue: boolean const isTrue = true 타입을 여러 개 사용하는 경우 가장 근접한 타입을 Best Common Type이라고 함 // number | null const arr = [123, 4, null] Type Assertion Type Assertion은 타입을 단언하는 것을 의미. function getString(): any { return "123"; } const a = getString(); console.log((a as string).l.. axios HTTP 비동기 통신 피하고 싶어도 피할 수 없다. 이왕 이렇게 된거 좀 제대로 알고 써보자. 근데, 방법이 axios 뿐일까? Node.js를 활용하여 비동기 통신을 할 수 있는 방법이 axios 뿐인가? 그게 아니라면 왜 굳이 axios일까? fetch도 있는데... axios axios의 특징에 대해서 알아보자 기본적으로 axios는 HTTP에 대한 응답을 JSON으로 바꿔준다. axios instance를 만들 때, 공통적인 config 부분을 설정할 수 있다. ( header... ) 공통적인 response, request 에러 처리가 가능하다 위의 특징들은 axios의 특징인 것과 동시에 fetch와의 차이점 이라고 볼 수 있다. fetch를 활용한 비동기 통신에서는 이러한 것들을 요청을 보.. async / await async / await Promise보다 더욱 사용하기 편리하고 쉬운 async/await 문법에 대해서 알아 보도록 한다. async/await 는 기존의 비동기 처리 방식인 callback과 promise의 단점을 보완하고 가독성을 높여준다는 장점이 있다. JavaScript에서는 특히 비동기 처리 방식 때문에 위에서 아래로 진행되는 일반적인 코드의 흐름이 아닌 경우가 꽤 있다. async/await 는 이러한 단점을 보완하고 위에서 아래로 코드가 진행되도록 한다. async function getA() { return "A"; } function 앞에 async 키워드를 붙이는 순간 반환 값은 항상 Promise 이다. 이 값을 불러오기 위해서 then() 을 사용하곤 한다. async funct.. 이전 1 2 다음