프로그래머스 자바스크립트 스터디 - mission 1

혼자 공부를 하다보니 누군가에게 피드백을 받을 일이 없어서

내가 맞게 하고 있는지 의구심이 자주 들어서 남의 리뷰에 대해 갈증을 느끼던 중

프로그래머스의 강의 중에 프론트엔드 개발을 위한 자바스크립트 스터디라는

강의가 있어서 신청하게 되었다.🙌

 

매 주 미션을 받고 구현사항에 맞게 코드로 구현을 하고 코드 리뷰를 받는 형식이다.

 

일단 첫 주차 미션은

todo리스트의 컴포넌트 만들기, 다중컴포넌트, 완료된 todo 체크, setState사용

그리고 데이터에 대한 에러 체크도 해야했다.

 

스터디를 진행하면서 알게 된 부분들을 잊어버리지 않게 정리해서 기록을 할 예정이다.

 

---

 

1. 에러체크

instanceof 연산자 / new.target 

생성자함수에서 new 키워드가 들어있는지 확인할 수 있는 것을 검색하면서 처음 알았다.

if(!new.target){
    throw new Error("new 키워드를 사용해야 합니다.");
}

 

 

 

typeof, Array.isArray(), data.length === 0, Object.hasOwnProperty, some 등

데이터를 체크, 탐색하는 여러가지 함수를 사용해보는데

이 중 hasOwnProperty, some은 이 때 처음 사용해봤다.

비슷한 기능을 구현하는 함수는 또 뭐가 있을까 여러가지 검색하면서 알게된 듯하다.

 

다양하게 에러를 확인해보고 값을 조회해보았다.

 

 

---

 

2. 재사용성을 위한 코드 분리.

 

에러체크할때 함수 내부에서 에러체크를 했었는데

코드적으면서도 분리해야 되지 않을까? 고민하다 함수 내부에 적었는데

역시나 재사용성을 위해 데이터타입을 validation하는 함수를 따로 만들어서

호출을 하는게 좋다고 하셨다.

 

function TodoList(data, elementId){
    // Error
    function checkObj(el){
        if(typeof el !== "object"){
            throw new Error("데이터 타입이 Object가 아닙니다.");
        }
        if(!el.hasOwnProperty("text") || !el.hasOwnProperty("isComplated")) {
            throw new Error("Object에 지정한 것과 다른 property가 있습니다.");
        }
        if(Object.values(el).some(value => value === null || value === '')){
            throw new Error("Object에 비어있는 value가 있습니다.");
        }
    }

    if(!new.target){
        throw new Error("new 키워드를 사용해야 합니다.");
    }
    if(!Array.isArray(data) || !data.length ){
        throw new Error("데이터 타입이 Array가 아니거나 비어있습니다.");
    }
    if(data.some(checkObj)){
        throw new Error("데이터의 object를 다시 확인해주세요.");
    }
 
 
 // ..생략
 }

처음엔 위와 같이 TodoList안에 직접적으로 에러 처리를 해주었는데,

다시 봐도 사실 컴포넌트 안에 직접적으로 저렇게 줄줄이 에러처리를 하는건 지저분하긴 하다..🤣

 

✅ 수정된 코드

function dataValidate(data) {
      const dataType = {
        text: "string",
        isComplete : "boolean"
      }

      if(!Array.isArray(data) || data.length === 0 ){
          throw new Error("데이터 타입이 Array가 아니거나 비어있습니다.");
      }

      data.forEach(obj => {
          if(typeof obj !== "object"){
            throw new Error("데이터 타입이 Object가 아닙니다.");
          }
          if(Object.keys(dataType).some((key)=> !(key in obj) )){
            throw new Error("Object에 해당하는 property가 없습니다.");
          }
          if(Object.keys(dataType).some((key)=> typeof obj[key] !== dataType[key])){
            throw new Error("property의 값이 지정한 타입과 다릅니다.");
          }
          if(Object.values(obj).some(value => value === null || value === '')){
            throw new Error("Object에 비어있는 value가 있습니다.");
          }       
      });
    }

 

처음으로 만들어본 validate 함수였는데

들어오는 데이터의 변수들을 생각해 보는 것이 재밌었다.

이후에 에러 메세지들도 정리해보고 싶다는 생각이 들었다.

 

---

 

3. setState사용

vanilla javascript에서 setState는 어떤 방식인가 했는데

setState를 호출하면 데이터가 변경되고 render함수가 호출되는 방식으로

state를 변경하는 것이였다.

this.setState = function(nextData){
    this.data = nextData;
    render();
}

생각보다 간단했다. state값을 변경해주고 render를 하는 방식이었다.

 

---

4. EOL

항상 파일 맨 끝에 비어있는 행을 추가하여

파일이 끝났음을 알려주어야 한다고 한다.

new line으로 끝나지 않으면 실제 행으로 간주되지 않을 수도 있다고 한다.

 

---

 

✍ mission1을 진행하며 느낀 점.

 

생성자 함수를 책이나 관련 글에서 예시로 보기만 했지

직접 활용하는 것은 처음 접해봐서 작성하면서도 이게 맞는 작성법인지 헷갈렸다.

관련 검색을 해보면 보통 class문법이 나와서 이 부분에 대한 이해가 없다보니

class문법으로 작성한 것을 function으로 변경해서 생각하기도 어려웠다.

또한 this관련된 내용들을 접해야 했었는데 이론적인 이해만 조금 있었을 뿐

실제로 접하지를 못했었어서 전체적으로 나의 부족함을 많이 느꼈다..😓

 

검색하면서 이건 뭘까 저건 뭘까?하며 다양하게 보느라 시간이 꽤 걸렸지만

미션을 완성해가면서 알것도 같은 부분들이 많이 생겼다.

아직은 많이 부족하지만 부족한 것이 많았던 만큼 얻을 수 있는 것 또한 많을 것이니!!

앞으로의 미션들 또한 잘 해결해 나가야겠다🔥