FE 개발을 위한 JS 스터디 - 1주차

프로그래머스에서 'roto'님이 진행하는 '[스터디/9기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)'를 수강하며 배운 내용을 정리한 글입니다.

 

1주차 미션

• (필수) TodoList 컴포넌트 작성하기
• (추가-1) error 처리하기
• (추가-2) 한 페이지에서 TodoList 컴포넌트 여러개 만들어 보기
• (추가-3) Todo에 isCompleted 필드 추가하고 완료된 항목에 삭선 처리하기
• (추가-4) setState() 함수 만들고 상태변화 시 새로 렌더링하기

학습포인트

• 컴포넌트의 역할과 구조 이해하기
• this
• 다양한 오류 발생 상황에 대한 error 처리
• 모든 상태 변화는 setState()에서!

 

내 스터디 첫 PR #404

 

첫 미션은 어렵지 않아서 온라인세션 끝나고 그 날 밤에 다 해서 올렸다.
너무 쉬운거 아닌가?라고 생각하는 순간 리뷰가 마구마구 달리는데......

 

새로 배운 내용

TodoList 컴포넌트 작성하기

• 생성자를 통해 컴포넌트를 생성하면 알아서 render 되도록 하기
• DOM접근 최소화
• 상태를 변화는 한 곳에서

export default function TodoList1(todoData, $target) {

  // 오류처리
  if(new.target){ throw new Error('new 키워드가 없음') }
  this.checkValidData(todoData)

  this.todoData = todoData
  this.$target = $target

  this.checkValidData = (state) => {
    ...
  }

  // 상태 변화는 여기에서만 전담!
  this.setState = (nextData) => {
    this.checkValidData(nextData)
    this.todoData = nextData
    this.render()
  }

  this.render = () => {
    ...
  }

  // new키워드를 통해 새로운 컴포넌트 생성 시 자동으로 render!
  this.render()        
}

 

오류처리하기

학교 과제로 웹 프로젝트를 할 때는 최소한의 검사만 하고, 내가 오류를 만나는 순간...하나 둘 늘어가고는 했던 기억이 난다. 코드를 통해 알아서 형식에 맞는 데이터를 추가하는데 무슨 문제가?라고 생각하면 안된다. 누가(혹은 내가ㅎㅎ) 무슨짓을 할 지 모른다.

new 키워드 검사

this.constructor나 instanceof를 이용하는 방법은 부수적인 방법이다. 가장 확실한 방법은 new.target을 사용하는 것이다.

if(new.target) throw new Error('new 키워드가 없음')

 

module

<script type="module" src="./js/App.js"></script>

여러 모듈을 만들고 import, export해서 사용하기 위해 index.html에 스크립트 타입을 module로 설정했다. 하지만 바로 error!

Access to script at 'file:///C:/파일경로/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

오류메세지를 보니 CORS문제였다.

MDN Javascript Modules Guide에 로컬에서 테스트하는 경우 자바스크립트 모듈 보안 요구 사항으로 해당 오류가 발생하니 서버를 통해 테스트해야 한다는 내용이 나와있다.

VSCode Live Server

VSCode에서 Live Server를 설치하고 서버를 통해 테스트하니 해결되었다.

 

EOL(End Of Line)

EOL은 기능구현과는 상관없는 내용이지만 나를 포함하여 많은 스터디원이 지적받은 내용이다.

Github 'No newline at end od file' 경고 표시 

PR을 보내고 올라간 파일들을 확인하는 도중 위와 같은 표시를 발견했다. 불길한 빨간색 표시...

마우스 커서를 올려보면 No newline at end of file이라는 문구를 확인할 수 있는데, 말 그대로 파일의 마지막에 개행이 없다는 의미이다. 파일의 마지막에 개행이 없는데 무슨 문제길래 경고 표시를 해줄까???

파일 마지막에 개행을 추가해야 하는 이유는 POSIX 명세에

텍스트 파일은 행의 집합이고, 행의 끝은 반드시 개행(EOL)으로 끝난다

라고 정의되어 있기 때문이다. 따라서 이 파일의 마지막이라는 것을 알려주기 위해서 개행을 추가해야 한다.

 

 

 

1주차가 지나갔다. 이제 1주차인데도 머리속에 숙청해야할 지난 코드들이 아른거린다...

---

 

참고사이트

• 로컬에서 CORS policy 관련 에러가 발생하는 이유 - takeknowledge
• MDN Javascript Modules Guide
• 파일 끝에 개행을 추가해야 하는 이유 - Coderifleman's blog
• 파일 끝에는 항상 개행을 추가해야 해요 - doondoony