필자는 자바 프로그래밍을 꽤 오랜 기간동안 해왔습니다. 때문에 객체 지향 프로그래밍 외의 코딩 스타일은 사실 거의 모른다 해도 과언이 아닙니다. 그런데 이번에 리액트를 공부하면서 거의 모든 곳에 함수형 프로그래밍이 쓰이고 있었고 때문에 이해는 커녕 따라치기에 급급한 수준임을 인정할 수 밖에 없었습니다. 물론 자주 보이는 함수들은 대충 뭐가 어떻게 굴러가는 구나 정도로 이해하고 넘어갔지만 리덕스와 미들웨어를 배우고 있는 요즘 자바스크립트, 특히 함수형 프로그래밍에 대한 기초지식이 상당히 부족함을 느끼고 있기에 자바스크립트의 함수형 프로그래밍에 대해 정리하고 넘어가려고 합니다. 함수형 프로그래밍은 말 그대로 '모든 걸 함수로 실행'하는 것입니다. 프로그램의 전부를 함수로 표현하는 거죠. 그럼 함수란 뭘까요?..

비구조화 할당이라는 말은 말 그대로 非구조화, 구조를 깬다.는 의미죠. 간단히 구조화 되어있는 것을 쪼개서 쉽게 구조(배열이나 객체) 안에 있는 값을 가져오려고 한 노력의 결과로 보입니다. POJO(plain old javascript object) 에서 이런 객체가 있다고 해봅시다. const myObject = { a : "foo", b: false, c: 11 } 이 객체 안에 있는 a,b,c 의 값을 콘솔로그로 찍어보려고 한다면 '원래는' 이렇게 해야할 겁니다. console.log(myObject.a); // foo console.log(myObject[b]); // false console.log(myObject.c); // 11 그런데 참 어이없게도 es6 이후의 비구조화 할당을 사용하면 다..

https://codecrafting.tistory.com/12 에서 이어지는 내용입니다. [REACT] 리액트로 TODO 리스트 구현하기 :: (2) 기능 구현하기 https://codecrafting.tistory.com/11 에서 이어집니다! [REACT] 리액트로 TODO 리스트 구현하기 :: (1) UI 구성하기 서론 요즘 리액트를 다루는 기술이라는 책으로 코딩을 시작하고 처음으로! 리액트를 접하고. codecrafting.tistory.com 지난시간에 만든 일정관리 어플리케이션은 아직까지 많은 데이터가 추가되지 않았기 때문에 무리없이 정상적으로 작동하는 모습을 보입니다. 하지만 할일 목록이 1000개를 넘어가면 처리속도가 기하급수적으로 느려지는 것을 확인할 수 있습니다. 이는 리액트의 특징인..

https://codecrafting.tistory.com/11 에서 이어집니다! [REACT] 리액트로 TODO 리스트 구현하기 :: (1) UI 구성하기 서론 요즘 리액트를 다루는 기술이라는 책으로 코딩을 시작하고 처음으로! 리액트를 접하고 있습니다. 요즘 트렌드가 기존의 MVC구조에서 SPA위주로 추세가 전환되고 있다는 소식이 자주 들려옵 codecrafting.tistory.com 이제 일정 관리 애플리케이션이 실제로 동작할 수 있도록 기능을 구현해봅시다. App 에서 todos 상태 사용하기 나중에 추가할 일정 항목에 대한 상태들은 모두 App 컴포넌트에서 관리합니다. App에서 useState를 사용하여 todos라는 상태를 정의하고, todos를 TodoList의 prop으로 전달합니다. A..

서론 요즘 리액트를 다루는 기술이라는 책으로 코딩을 시작하고 처음으로! 리액트를 접하고 있습니다. 요즘 트렌드가 기존의 MVC구조에서 SPA위주로 추세가 전환되고 있다는 소식이 자주 들려옵니다. 때문에 Vue.js 나 React에 대한 관심이 많았는데 마침 스프링 부트 프로젝트도 끝났겠다, 이번 기회에 한번 도전해보고 싶은 생각이 들어 맘이 맞는 친구와 함께 스터디를 진행하고 있습니다. 공부과정은 깃헙에 상시 올라가고 있습니다. 😇 본 포스팅 시리즈는 이 책의 10장에 해당하는 '일정 관리 웹 어플리케이션 만들기'를 따라하면서 정리합니다. 프로젝트 빌드하기 프로젝트를 시작하기에 앞서 node.js와 npm, yarn이 설치되어 있어야 합니다. 설치방법은 여기에서 다루지 않습니다. 설치가 되어 있으면 이제..