[week4] 프.젝.조.아(feat. 프로그래머스 굿즈)

minsgy·2021년 8월 29일
4

Programmers

목록 보기
5/5
post-thumbnail

같이 데브코스하시는 고종현 님께서 만들어주신 멋진 디자인 목걸이.. 감사합니다!

😎 4주차 주요내용

이번 4주차는 VanilaJS를 활용한 토이 프로젝트를 진행해보았다.

3주차에서 배운 컴포넌트로 나누어 React처럼 사용하는 VanilaJS를 이용해서 TO-DO-LIST를 구성했다.

이번 프로젝트를 진행하면서 테스팅과 관련된 내용을 찾아서 적용해서 이에 대한 내용을 정리해보았다.


테스팅(Testing)

해당 앱이 제대로 동작하는가? 를 확인하는 과정을 말한다.

예를 들자면,Javascript의 경우 이와 같은 경우가 있다하자.

  • button element가 제대로 Mount되는지?
  • button을 클릭했을 때, event가 발생되는지?

이러한 경우를 대상으로해서 제대로 동작을 하는지를 확인하는 걸 테스팅이라 할 수 있다.

Components로 단위로 구현하면서 함수로 만든 생성자에 대해서 new 연산자에 대한 방어 코드, Todos 데이터 검사하기 등

여러 부분에 대해서 예외 처리를 진행했고, 이에 대해 자세히 찾아보았다.

Validation(검토) 처리하기

최종적으로 결과물이 잘 나오는지를 확인하는 방식을 말한다.
즉, 결과물에 이상없도록 예외처리를 해야한다는 의미

나는 2가지 Validation 처리를 통해 오류를 최소화하고 프로그램을 완성시켰다.

new 생성자 예외처리

기본적으로 생성자를 만들기 위해서는 new 연산자를 표기해서 생성한다.

new란? 영역을 지정해 함수 내부의 정의된 내용을 실행시켜줌을 나타낸다. this 키워드를 사용하는..

그러나 new 연산자를 붙히지 않았을 때의 경우?
해당 함수는 본인의 영역을 받지 못했기 때문에 undefined 오류가 뜨게 된다.

// new 연산자가 없다.
Header({ $header: $headerContainer, text: "Today List" });

이렇게 코딩을 하게 된다면?
기본적으로는 undefined 오류가 발생하게 된다.

그래서 이에 대한 예외 처리를 해주었다.

if (!new.target) {
    return new Header({
 	$header: $headerContainer,
    	text: "Today List"  });
  }
  1. Header 컴포넌트를 정의하기 전, 위와 같은 예외 처리 코드를 통해서 new 생성자가 지정되어 있는지 확인한다.

  2. !new.target 을 통해서 new 연산자로 지정된게 없다면, 다시 new 생성자를 붙힌 Header를 정의한다.

이렇게 new 연산자를 포함하지 않아도 예외처리를 통해 작동하게 된다.

Today List 데이터 Validation

TO-DO-LIST의 핵심인 일정 리스트 내용에 대한 validation 예외처리를 했다.

일정 리스트에 대한 Data field 값은 다음과 같았다.

todos : [
  {
    text: '단추 목욕시키기',
    isCompleted: false // false시, 일정 미완료
  },
  {
    text: '땅콩 목욕시키기',
    isCompleted: true // true시, 일정 완료
  },
]

이렇게 object array 형식으로 구성되어있다.

여기서 만약 textisCompleted를 가지지 않은 오브젝트가 전달되면 어떻게 될까?

text 대신 test 값을 전달 했을 때 undefined 상태로 값이 나오는 오류.
데이터 값 검증이 제대로 이루어지지 않아 생긴 오류이다.

이에 대한 값을 제대로 가져오기 위해서 하나의 validation 함수를 구성했다.

// 가져온 데이터 중, 정상적이지 않은 데이터 판별을 위한 Validation
  const confirmTodosData = getItem(STORAGE_TODOS_KEY, [])
	.filter(({ text, isCompleted }) => 
	text !== undefined && 
    	isCompleted !== undefined
  );
  1. 일정 리스트 데이터 값을 불러옵니다.
  2. filter 함수를 통해 오브젝트 값 중 text, isCompleted가 존재하는 값만 뽑스비다.
  3. 걸러져서 유효한 값만 있는 일정 리스트를 저장합니다.

결과적으로 유효한 값만 출력하게 되어 데이터대한 validation을 구현했습니다.

setState에 대한 validation

this 키워드를 통해 만들어진 값 변경을 위한 setState 함수에 대한 validation 이다.

this.setState = (nextState) => {
    if (!nextState) {
      return Error("바꿀 값이 존재하지 않습니다.");
    }
    this.state = nextState;
    this.render();
  };

조금은 간단하게 변경 할 값이 없다면 Error 문을 통해 예외처리를 하는 과정이다.

만약 이 과정을 거치지 않는다면 기존의 데이터를 삭제하고 없는 값을 대입하는 무서운(?) 경우가 될 수 있다는 점....!

최종 결과

여러가지 기능을 추가해서 최종적으로 to-do-list를 구성했다.

구현 기능 리스트

  • 오늘 날짜 년/월/일 UI 구현
  • 완료 일정 toggle event 구현
  • 일정 삭제하기 event 구현
  • 완료 및 전체 일정 Count 구현
  • 일정 추가 event 구현

개인적으로 디자인 부분이 마음에 들었다.
기존 ---년 --월 --일 이라는 UI방식이 아니고, 숫자로만 구성해 나타냈다는 점이 좋았다.

🖥 DEMO

당근마켓 같다는 의견이 많다(?)

화면 자체는 웹/앱어플리케이션 둘 다 적용하기 편하도록 디자인을 구성했다.

반응형을 따로 구현하지 않아도 모바일/웹 환경 둘다 문제없이 사용가능하다.


이번 주는 완벽한 힐링!

개인적으로 1,2,3주차도 매력적이고 많은걸 배워서 정말 재밌었던 주였지만,

배웠던 내용을 가지고 프로젝트에 적용을 한다는 거는 정말 최고였다!

특히 테스팅 부분에 대해서 많은걸 배웠던 내용이였다. Validation과 Verification의 차이라던지..?

다음주에는 Notion 클론 프로젝트를 진행해보려고 한다.

에디터와 페이지별로 나누어진 내용의 화면 구성과 노션의 자동저장 Editor를 구현하는 것이 목표이다.

그리고 추가적으로 완벽하게 Notion을 카피하기 위해서 디자인 컬러도 다 뽑아놓으려고 한다.

계속 느낀거지만 나는 배운 지식을 가지고 프로젝트에 적용해보면서 해야 쏙쏙 들어오는 성격임을 느꼈다.

물론 진득하게하는 것도 중요하지만..!

개인적으로 정말 재밌었던 기간이였고, 이번주나 다음주나 힐링하는 주가 될듯하다 :)


feat. 프로그래머스 브랜드키트

기다리고 기다렸던!! 프로그래머스에서 보내준 브랜드키트를 받았다!

프로그래머스 브랜드키트 안내

구성품?

실용적이면서 너무 매력적인 굿즈들을 받았다.

머쓱이 디자인 하신분은 천재가 아닐까? 라고 생각이 든다.

개인적으로 스티커와 마우스패드의 퀄리티가 너무 좋다..😍

  • 프로그래머스 티셔츠
  • 3단 우산
  • 마우스패드
  • 웹캠 커버
  • 고급 먼지닦이
  • 머쓱이 뱃지
  • 머쓱이 스티커⭐️⭐️

사진 진짜 못찍는데 어쩔수가 없다(?)

프로그래머쓱ㅋㅋ 다 너무 매력적인 디자인과 자극되는 대사들(?)

힘들었던 4주를 보상받는 기분이랄까..?

프로그래머스라는 뽕을 차게해서 열심히 공부를 할 수 있는 발판이 되었다..
또 한 달은 더 열심히 달릴듯!

좋은 아이템 주신 프로그래머스에게 감사합니다 😍 열심히 공부할게요!

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

4개의 댓글

comment-user-thumbnail
2021년 8월 29일

민석님 투두리스트 완전 이쁘네염... 목걸이도 포스팅해주시니 뿌듯하구만유😭

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

민석님 투두 빛이나네요 ⭐️⭐️

1개의 답글