개인 프로젝트가 끝났다!
열심히 찾아보면 당연히 수정할 부분들이 더 있겠지만 일단 이렇게 마무리하기로 했다.
어제 새벽 네 시 까지 호다다닥 해가지고 거의 끝내씀.
웹페이지에 넣으려고 귀여운 파비콘이랑 로고도 만들었당 히히.
개인 프로젝트 회고 - 함수형 프로그래밍에 대해.
어제에 이어서 오늘 영화 사이트 프로젝트를 진행하며 함수형 프로그래밍에 대해 깨닫는 순간들이 있었다. 유튜브나 블로그 등을 돌아보다보면 객체 지향 프로그래밍과 함수형 프로그래밍에 대한 글들이 보이고는 했었는데, 그저 막연하게 "저게 뭘까"라는 생각을 가졌었던 것 같다. 그런데 최근에 캠프를 진행하면서 자바스크립트 코드를 짤 일이 많아지고, 함수의 재사용성 등에 대해 고민하면서 어렴풋이나마 함수형 프로그래밍의 편린을 엿본듯한 기분이 든다.
대부분의 코드는 어제 작성했지만 함수형 프로그램의 힘을 오늘 느끼게 된 이유가 뭐냐면 어제 짠 코드를 대부분 다시 사용해서 정작 오늘은 코드를 많이 작성하지 않았기 때문이다.
어제 내가 작성한 코드가,
function 데이터 가져오는 함수(쿼리){
return 데이터;
}
function 가져온 데이터를 객체로 만들어주는 함수(데이터) {
return 객체;
}
function 객체 데이터를 HTML태그로 만드는 함수 (객체) {
return HTML태그;
}
function HTML태그를 body에 추가하는 함수(HTML태그) {
body.appendChild(HTML태그);
}
function 인기있는 영화 정보 가져오기 (인기있는 영화 쿼리) {
const 데이터 = 데이터 가져오는 함수(인기있는 영화 쿼리);
const 객체 = 가져온 데이터를 객체로 만들어주는 함수(데이터);
const HTML태그 = 객체 데이터를 HTML태그로 만드는 함수(객체);
HTML태그를 body에 추가하는 함수(HTML태그);
}
인기있는 영화 정보 가져오기(쿼리);
이런 형태 였는데, 오늘 구현한 기능이 별점이나 개봉일에 따라서 정렬할 수 있도록 만드는 기능과 검색기능이었다.
물론 아직 익숙하지 않아서 중간중간 전역변수를 사용하거나 한 부분들이 있지만 대부분의 코드를 재사용할 수 있어서 훨씬 수월했던 것 같다. 그리고 예전에는 함수의 이름을 대충 지었었는데 알아보기 쉽고 함수의 역할을 명확하게 이름으로 선언하는 것이 중요하다는 것을 새삼 깨닫는 하루였던 것 같다.
검색 기능의 주된 아이디어는, 화면에 표시된 20개의 영화 중에서 사용자가 검색한 영화만 남기는 것이 아니라, 모든 노드를 지우고 조건에 해당하는 새로운 노드들을 불러오는 것이었다.
이렇게 하니까 기존의 카드들을 지우는 함수는 node에 removeChild()같은 메서드로 간편하게 가능했기 때문에 기존에 작성해놨던 함수들을 이용해서 필터링된 정보를 가져오는 함수를 다시 작성하면 됐다.
function 사용자 입력에 따라 원하는 영화만 골라오는 함수(객체) {
return 필터링된 데이터;
}
function 인기있는 영화 정보 가져오기 (인기있는 영화 쿼리, 사용자입력) {
const 데이터 = 데이터 가져오는 함수(인기있는 영화 쿼리);
const 객체 = 가져온 데이터를 객체로 만들어주는 함수(데이터);
const 필터링된 데이터 = 사용자 입력에 따라 원하는 영화만 골라오는 함수(객체, 사용자입력);
const HTML태그 = 필터링된 데이터를 HTML태그로 만드는 함수(필터링된 데이터);
HTML태그를 body에 추가하는 함수(HTML태그);
이렇게 코드를 작성하니 기존의 코드를 거의 다 쓸 수 있어서 편했다. 물론 내 코드가 위에 코드처럼 완전 깔끔하고 아름답게 맞물리며 작성된 건 당연히 아니지만 그래도 함수형 프로그래밍의 맛을 살짝 본 것 같아서 조금 기쁘다.
