[week3] 이 패턴은 맵단맵단?

최민석·2021년 8월 21일

KDT vanilaJS 프로그래머스 데브코스

Programmers

목록 보기

4/5

🍧 3주차 주요 내용

이번 3주차는 1, 2주차에서 배운 선언형/함수형 프로그래밍 방식의 VanilaJS을 학습했다.

데브코스를 지내기 전, VanilaJS를 대강 배우고 React를 활용하면서

Javascript의 기초 지식 애로사항이 많았었는데 이번 강의를 듣고 많은 걸 깨달았던 시간이였다.

이번 주 요약은 Vanila JS를 React처럼 Component 단위로 관리하는 프로젝트와 선언형 프로그래밍을 분석했다.

선언형 방식 vs 명령형 방식

앞 서 2주동안 강조하고 또 강조했던 선언형 방식을 사용해야 하는 이유를 예시를 통해 살펴보자.

간단하게 선언형 프로그래밍과 명령형 프로그래밍의 방식을 보자면

선언형(WHAT)의 경우, 무엇을 하려고 하는지를 명시하는 패러다임이고,
명령형(HOW)의 경우, 어떻게 자리에 앉을지를 고민하는 방식이다.

예제

주어진 체크리스트를 확인해서 구현해보는 예제이다.

Array의 값을 넣어 2배 값으로 반환하는 함수.
number 값만 처리하도록 예외 처리를 고려할 것.

// 명령형
const double = (arr) => {
	let result = [];
	for (let i=0; i<arr.length; i++) {
		if( typeof arr[i] === 'number')  // 이런 방식은 함수의 깊이가 깊어진다.
		result.push(arr[i] * 2);
	}
	return result;
}

double([1,2,null,'ㅎㅇ']); // [2, 4]

직관적으로 보기가 어려운 함수이다.
무엇을 하려고 하는지 예측하기 어려운 코드.
이는 코드의 길이가 점점 깊어 질 수록 느껴지는 문제.

선언형 방식으로 구현해보자.

// 선언형
const double = (arr) => 
	arr
	.filter(number => typeof number === 'number') // number 타입만 도출하기
	.map(number => number * 2); // 도출한 값들을 * 2 하기

number * 2 , number === 'number' 등

한 눈에 무엇을 한다고 명시되어 있어서 확인하기가 좋다.

코드의 깊이가 짧다고 확인할 수 있다는 점.

선언형/함수형 프로그래밍의 매력을 한 눈에 느낄 수 있었던 코드 예제이다😏.

이러한 선언형 프로그래밍을 인지하고 Vanila JS로 제작 중인 TO-DO-LIST이다.

😃 To-Do-List 업그레이드하기

바닐라JS 활용을 위해서 예시로 만들었던 TO-DO-LIST이다.

기존에는 간단한 기능부분만 학습하였고, 추가적으로 완성도 있는 프로젝트를 하고 싶어서

추가적인 기능(시간 및 인터랙티브) 및 CSS 를 구성해보았다.

전체적인 코드 구성을 다 살피지 않고 핵심 부분과 요점으로 구성해보았다.

📂 디렉토리 구성

📦todo-list
 ┣ 📂src // 전체적인 소스 폴더
 ┃ ┣ 📂Assets // CSS/FONT 등 추가적인 요소 폴더
 ┃ ┃ ┣ 📂css
 ┃ ┃ ┃ ┣ 📜app.css 
 ┃ ┃ ┃ ┣ 📜font.css
 ┃ ┃ ┃ ┣ 📜header.css
 ┃ ┃ ┃ ┣ 📜input.css
 ┃ ┃ ┃ ┣ 📜list.css
 ┃ ┃ ┃ ┗ 📜reset.css
 ┃ ┃ ┗ 📂Font - Local 폰트 사용
 ┃ ┃ ┃ ┣ 📜Pretendard-Light.otf
 ┃ ┃ ┃ ┣ 📜Pretendard-Medium.otf
 ┃ ┃ ┃ ┗ 📜Pretendard-SemiBold.otf
 ┃ ┣ 📂Component // 컴포넌트 별 저장 폴더
 ┃ ┃ ┣ 📜Header.js
 ┃ ┃ ┣ 📜main.js
 ┃ ┃ ┣ 📜storage.js
 ┃ ┃ ┣ 📜TodoCount.js
 ┃ ┃ ┣ 📜TodoForm.js
 ┃ ┃ ┗ 📜TodoList.js
 ┃ ┗ 📜App.js // 메인 Component
 ┗ 📜index.html // 컴포넌트 구성을 위한 index HTML

해당 디렉토리 구성을 하는 법이 궁금하다면? 링크를 참조해주세요.

크게 2가지 부류로 나누어서 구성했다.

웹을 구성 할 Component, 그 외의 요소를 넣을 Asset으로 나누었다.

메인 파일 코드 구성

메인 HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- main css -->
    <link rel="stylesheet" href="./src/Assets/css/app.css" />
    <title>TODO-LIST</title>
  </head>
  <body>
    <main class="app">
    </main>
    <!-- main script :  type module -->
    <script src="./src/Component/main.js" type="module"></script>
  </body>
</html>

모두 JS 모듈을 통해 Component 단위로
구성하여 따로 HTML에는 많은 코드가 없다는 것이 포인트

React에서 코드를 구성할 때 이러한 방식으로 했었는데 바닐라JS를 통해서 접하니까 와닿았다.

JS를 통한 렌더링 방식을 통해 화면을 구성하고 있다.

나름대로 매력이 있던 구성 방식 재미있었다.

App 컴포넌트

import Header from "./Component/Header.js";
import TodoList from "./Component/TodoList.js";
import TodoForm from "./Component/TodoForm.js";

export default function App({ ... }) {
  ...
  // 예시 처럼 컴포넌트 단위로 사용하는 모습을 볼 수 있다.
  new Header({ ... });
  new TodoForm({...});
  new TodoList({...});
}