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

minsgy·2021년 8월 21일
5

Programmers

목록 보기
4/5
post-thumbnail

🍧 3주차 주요 내용

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

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

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

이번 주 요약은 Vanila JSReact처럼 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({...});
}

다른 컴포넌트들을 모아서 관리하는 App

$ 연산자에 대해서는 이 링크를 확인하면 된다.

그리고 실행을 확인하려면 모든 Javascript는 모듈을 활용해서 작동해 Live Server를 이용해야 한다.

vscode 익스텐션인 Live Server를 활용 !!

결과 화면

작은 흰 바탕의 리스트 메인을 구성하였고, 바깥 백그라운드 컬러를 지정했다.

background: linear-gradient(120deg, #f6d365, #fda085);

간단한 그라데이션 컬러를 사용했을 뿐 인데 한결 FANCY해졌다.

앞으로의 추가 기능 리스트이다.

  • 현재 년/월/일 출력
  • Session을 활용해 당일 00시까지 유효시간 지정
  • Checkbox 기능 구현 -> 텍스트 중앙 선 긋기 event
  • 아이템 리스트 부분 삭제/초기화 구현하기

🚗 3주차 회고

이번주는 단? 너무달아 !!!

저번주 함수형 프로그래밍을 하면서 가장 느꼈던 점은 벽을 느꼈다. 라고 말할 수 있었다.

아무래도 너무 어려웠고 처음 접하다보니까 많이 헤맸던 부분이기도 했고...

사고력이 많이 부족했던 탓이기도 하다.

그렇지만 이번주는 그 전에 사용했던 React와 비교해서도 많은 궁금증이 풀려서

재밌었던 강의 내용이였다. 그리고 무엇보다 아는 내용이라 알아들을 수 있어서 좋았던 강의!

이번주와 저번주를 비교해서 맵단맵단 방식으로 과제가 나오는 것 같다고 생각했다.

다행히 이번주는 '단' 타임이라는 것! 천천히 복습하면서 내용을 정리해 나갈려고한다.

✔ 지금까지?

지금까지 지켜왔던 체크리스트가 있다.

  • 하루 1 day 강의 다 듣고 TIL
  • 모르는 것 메모하고 찾아보기
  • 최소 주 4일 운동
  • 매 주 여자친구와 시간 보내기
  • 매 주 꾸준한 회고 진행

이 중에서 운동빼고 다했다.

운동은 정말 꾸준히 하려고해도 귀찮으면 안가고 많은 생각이 들었고

다음 달에는 꼭 고쳐봐야겠다!

9월 체크리스트에는 이렇게 진행하려고한다.

  • 졸업논문 작성하기
  • 졸업작품 마무리하기
  • 코딩테스트 스터디하기
  • 포트폴리오 + 깃허브 레포 정리하기

이렇게 정리하는 습관을 들여서 많이 바뀐 내 모습이 신기했고, 꾸준함이 무기라고 생각했다.

목표를 못이룸에 있어서 자괴감은 절대 들지 않는 것이 이번 새로운 목표이다.

항상 아쉬운 목표 달성이지만, 겸어히 인정하고 남은 4개월도 꾸준히 진행하는 것이 목표이다.

천천히 집중있게 8월을 마무리하는 것이 나의 작은 소망이다.

꾸준히 관리하고 있는 개인 Notion 일기쓰는 것 같아서 기분 좋다.

다음 회고는 프로젝트 마무리 결과 보고서를 적어볼 예정이다. 이번주도 수고한 내 자신에 박수를 🤗

profile
커뮤니케이션은 내 성장제🔨

4개의 댓글

comment-user-thumbnail
2021년 8월 21일

민석님... 벌써 과제를 완벽하게 끝내시다니... 대단하심니다...

1개의 답글
comment-user-thumbnail
2021년 8월 21일

굳굳👍👍

1개의 답글