개요 객체지향 프로그래밍은 필수적인 패러다임으로서 다루는 책과 글은 많다. 반면, 함수형 프로그래밍은 필수적이지도 않으며, 어떤 부분이 좋다고 콕 집어 말하기 어렵다. 이는 함수형 프로그래밍이 범용 패러다임이기 때문이다. 결국, 어디에서나 잘 어울릴 수 있다는 뜻이기도 하다 이 글은 아래 책을 읽고 난 후 작성되었습니다. 쏙쏙 들어오는 함수형 코딩 / 에릭 노먼드 목표 함수형 프로그래밍의 주요 개념과 관점을 이해하고, 함수지향 설계와 아키텍쳐를 학습한다. 여정 일급(First Class) 우리는 지금까지 코드를 분류하고, 쪼개면서 함수형 프로그래밍을 배웠다. 이번에는 함수에 함수를 더하는 고차 함수를 만들어보도록 하자. 아래와 같은 간단한 함수가 있다. 객체에 key-value 쌍을 넣어서 돌려주는 ob..

개요 객체지향 프로그래밍은 필수적인 패러다임으로서 다루는 책과 글은 많다. 반면, 함수형 프로그래밍은 필수적이지도 않으며, 어떤 부분이 좋다고 콕 집어 말하기 어렵다. 이는 함수형 프로그래밍이 범용 패러다임이기 때문이다. 결국, 어디에서나 잘 어울릴 수 있다는 뜻이기도 하다 이 글은 아래 책을 읽고 난 후 작성되었습니다. 쏙쏙 들어오는 함수형 코딩 / 에릭 노먼드 목표 함수형 프로그래밍의 주요 개념과 관점을 이해하고, 함수지향 설계와 아키텍쳐를 학습한다. 여정 계층형 설계 이번에는 분류하기(액션, 계산, 데이터)와는 약간 다른 방향에서 코드를 바라보자. 바로 계층형 설계이다. 피라미드를 생각해보면 쉽다. 각 층은 함수가 추상화된 레벨을 나타낸다. 각 층별 동작은 이런식으로 이루어져 있다. 맨 위층의 코드..

개요 객체지향 프로그래밍은 필수적인 패러다임으로서 다루는 책과 글은 많다. 반면, 함수형 프로그래밍은 필수적이지도 않으며, 어떤 부분이 좋다고 콕 집어 말하기 어렵다. 이는 함수형 프로그래밍이 범용 패러다임이기 때문이다. 결국, 어디에서나 잘 어울릴 수 있다는 뜻이기도 하다 이 글은 아래 책을 읽고 난 후 작성되었습니다. 쏙쏙 들어오는 함수형 코딩 / 에릭 노먼드 목표 함수형 프로그래밍의 주요 개념과 관점을 이해하고, 함수지향 설계와 아키텍쳐를 학습한다. 여정 코드 분류하기 지난 포스팅의 마지막에 등장한 코드를 다시 가져와액션과 계산, 데이터로 분류해보았다. // 전역변수는 액션이다 = 변경 가능하기 때문 let shoppingCart = []; let shoppingCartTotal = 0; funct..

개요 객체지향 프로그래밍은 필수적인 패러다임으로서 다루는 책과 글은 많다. 반면, 함수형 프로그래밍은 필수적이지도 않으며, 어떤 부분이 좋다고 콕 집어 말하기 어렵다. 이는 함수형 프로그래밍이 범용 패러다임이기 때문이다. 결국, 어디에서나 잘 어울릴 수 있다는 뜻이기도 하다 이 글은 아래 책을 읽고 난 후 작성되었습니다. 쏙쏙 들어오는 함수형 코딩 / 에릭 노먼드 목표 함수형 프로그래밍의 주요 개념과 관점을 이해하고, 함수지향 설계와 아키텍쳐를 학습한다. 여정 함수형 프로그래밍의 어려운 점 함수형 프로그래밍은 부수효과(Side Effect) 없이 순수함수만을 사용한다. 부수효과는 리턴 값 전달 이외에 발생하는 행동을 말한다. 순수함수는 인자에만 의존하여 같은 인자는 항상 같은 결과를 발생시키는 함수이다...

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. (이 글은 Next Step에서 진행한 js-youtube-classroom을 따라 작성되었습니다.) 목표 Youtube 재생목록 어플리케이션을 작성한다. 복잡해지는 컴포넌트 구조를 재사용 가능하도록 한다. 복합적인 상태를 효과적으로 관리할 수 있는 방법을 탐색한다. API를 활용하여 무한 스크롤 기능을 구현하도록 한다. 전체 코드는 여기에서 볼 수 있습니다. 여정 들어가기에 앞서 이번 시리즈는 지난 시간에 작성한 TodoList의 마지막 코드를 기반으로 시작한다. 당시 TodoList를 마무리하면서 부족했던 점을 개선하고, 기능을 덧대어 Youtube Playlist를 만들 것이다. 따라서, 시작 코드가 최종 코드가 아니며, 점..

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 현재 store는 아래와 같은 문제점이 있다. store를 사용하기 위해 컴포넌트들이 알아야할 정보가 너무 많다. (store 변경에 취약하다, 의존적이다) store를 호출하면서 중복되는 코드를 재사용할 수 없다. 어플리케이션을 재시작하면 정보가 초기화된다(휘발성이 있다, 실제 DB를 이용하고 있지 않다.) 하나씩 문제를 해결해보도록 하자. Store 의존성 감소 기존 컴포넌트에서는 아래와 같은 형태로 St..

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 User는 TodoList를 가져야한다 TodoList는 사람이 해야할 일을 작성한 것이다. 즉, User는 TodoList를 소유해야 한다. 마침내, 처음 작성했던 User 관련 컴포넌트와 Todo 컴포넌트를 연결하는 순간이다. 먼저 유저를 선택할 수 있도록 기능을 추가하자. UserList에 User 선택기능 추가 User를 선택하려면 User 목록을 가지고 있는 UserList에 이벤트를 붙여야한다. /..

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 TodoCount 기본 뼈대 작성 TodoCount 컴포넌트는 3가지 기능을 가지고 있어야 한다. 필터링 : 3가지 필터를 설정할 수 있다(전체보기, 해야할 일, 완료한 일) 할 일 카운트 : 현재 표시된 할 일의 갯수를 표시한다 전체 삭제 : 할 일 전체를 삭제한다. 일단 컴포넌트 뼈대부터 잡으면 아래와 같다. // TodoCount.js import Component from "../core/Compone..

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 삭제 기능 만들기 조회 기능과 다르게 삭제 기능은 버튼을 눌렀을 때 이벤트로 동작한다. 아래와 같이 이벤트를 정의해주고 Reducer를 호출해준다. // TodoList.js setEvent () { this.onClickDeleteButton(); } onDoubleClickTodoItem() { this.addEvent('dblclick', 'li', (event) => { const todoItem = ..

개요 모던 자바스크립트의 구조를 학습하고 컴포넌트 기반의 코드를 작성한다. 목표 순수 Javascript로 작성된 Todo List 어플리케이션을 작성한다. (이 글은 Next Step에서 진행한 js-todo-list-step을 따라 작성되었습니다.) 전체 코드는 여기에서 보실 수 있습니다. 여정 들어갈 자리 확인하기 기존에 작성되어 있던 index.html에서 TodoList의 자리를 한번 확인해보자. ... ... ... 위와 같이 크게 3가지 항목으로 구성되어 있다. 우리는 이 부분을 각각 컴포넌트로 작성할 것이다. 먼저, 기본 기능인 2가지 컴포넌트를 먼저 작성해보도록 하자. Todo를 생성해주는 Todo Input 목록을 보여주는 Todo List 일단 먼저, html에서 section 태그만..