Programming310 함수형 프로그래밍 함수형 프로그래밍(Functional Programming)은 선언형 프로그래밍과 순수 함수를 이용해서 문제를 해결하는 프로그래밍 패러다임 입니다. 문제를 여러개의 순수 함수들로 나눔으로써 얻는 이점은 코드의 가독성이 높아지고 유지보수성이 크게 증가한다는 것 입니다. 1. 프로그래밍 패러다임 서론에서 함수형 프로그래밍은 프로그래밍 패러다임의 하나라고 언급했는데, 프로그래밍 패러다임이란 무엇일까요? 프로그래밍 패러다임은 프로그래머에게 주는 프로그래밍 관점입니다. 이 관점에 따라서 같은 코드도 다른방식으로 짜게 됩니다. 흔히 듣는 객체지향 프로그래밍도 프로그래밍 패러다임의 방법 중 하나이고, 지난번에 소개한 명령형 프로그래밍과 선언형 프로그래밍도 프로그래밍 패러다임의 일종입니다. 2. 순수 함수 순수 함수란.. 2022. 1. 12. [Javascript] Iterator(반복자), Generator(발생자) 오늘 소개드릴 자바스크립트 문법은 반복자와 발생자 입니다. 두 문법 모두 es2015에 추가된 문법입니다. 1. 반복자 Iterator Iterator는 반복된 처리가 가능한 객체를 의미합니다. 다른 말로는 객체 내부의 내용을 열거가 가능해서 각 요소들에 대해서 반복처리가 가능한 것들을 의미합니다. 대표적으로 Array, String, Set, Map 등이 반복자를 가지고있는 객체입니다.반복자를 가지고있는 객체들은 보통 다음과 같이 for~of문을 통해서 요소를 열거할 수 있습니다. ES2015부터 추가된 이터레이터 객체는 next()라는 메소드를 갖습니다. 이 메소드의 반환값으로는 done과 value를 가진 객체를 반환합니다. done은 반복이 끝났는지(끝났다면 true, 끝나지 않았다면 false).. 2022. 1. 11. [Javascript] Symbol 심볼은 ES2015에서 추가된 새로운 데이터 형입니다. 1. Symbol 심볼(Symbol)은 상징의 뜻을 가지고 있습니다. 흔히 이메일에 사용되는 @(a.k.a 골뱅이라고 하는 at Sign, 의미는 ~에서, 에게)가 대표적인 상징입니다. 이처럼 Symbol 형이란 어떤 값에 식별되는 유일한 이름을 붙이기 위해서 사용합니다. 우리가 문자열에 @가 존재한다면 아 이게 메일 주소일 확률이 높구나 하고 추정하거나, 길을 가다가 어떤 건물에 편지봉투가 있다면 아 여기는 우체국이겠구나 하고 알아 볼 수 있는 것 처럼, 어떤 값에 식별이 가능한 값을 주어 알아볼 수 있도록 하는 데이터 형입니다. 심볼형은 다음과 같이 Symbol()을 통해 만들어집니다. 생성자가 아니므로 앞에 new가 오지 않는 점이 여태까지의 .. 2022. 1. 10. [Javascript] numeric separators 오랜만에 돌아온 자바스크립트 문법 소개시간입니다. 이번에 소개할 문법은 es2021에 추가된 numeric separators입니다. 1. numeric separators 기존에 포스트에 합쳐버릴까 했지만, 신규 사양이니 일부러 따로 빼었습니다. numeric separators는 숫자 단위를 구분할 수 있게 해주는 문법입니다. 사용법은 간단하게 기존 숫자에서 구분하고 싶은 자리에 언더바를 넣어주기만 하면 됩니다. 예전에 제가 심심풀이로 만든 학교 과제에서 다음과 같은 상수가 있습니다. 무려 43억 5천만 단위를 가지고 있습니다. 이전까지는 우리가 이 숫자를 읽을려면 커서를 대가며 일일히 읽어야 했지만 이제는 다릅니다. const TO_THE_NEPTUNE = 4350000000; const TO_TH.. 2022. 1. 6. [React/Redux] 리덕스 활용 2022.01.05 - [Programming/React] - [React/Redux] 리액트 리덕스 사용해보기 이전 포스트에서 리덕스를 활용하는 방법들을 알아보았습니다. 이번에는 지난번에 만든 앱에서 더 편한 코딩을 하도록 만들어주는 리덕스의 편의기능들을 알아보겠습니다. 1. redux-actions yarn add redux-action redux-actions은 action creator를 간결하게 작성할 수 있게 만들어줍니다. 우선 지난번에 작성한 액션과 액션 생성 함수입니다. const INCREASE = 'reduxCounter/INCREASE'; const DECREASE = 'reduxCounter/DECREASE'; export const increase = () => ({ type: I.. 2022. 1. 6. [React/Redux] 리액트 리덕스 사용해보기 지난번에 리덕스에 대해 소개를 했으니 이번에는 리덕스를 간단하게 사용해볼 차례입니다. 일반 리액트앱에 리덕스를 이용하면 상태 관리 로직을 따로 만들고 관리가 가능해져, 프로젝트의 유지보수가 쉬워지고 다양한 편의 기능을 제공합니다. 리덕스, 리액트 리덕스를 설치해주세요. yarn add redux yarn add react-redux 1. 카운터/Todo 프로그램 우선 다음과 같은 카운터/Todo 기능이 있는 리액트 앱을 만들어줍니다. import React from 'react'; const ReduxCounter = ({number, onIncrease, onDecrease}) => { return ( {number} +1 -1 ); }; export default ReduxCounter; import.. 2022. 1. 5. 이전 1 ··· 3 4 5 6 7 8 9 ··· 52 다음 300x250
