[Vanilla Javascript Study] # 1. TodoList Component 작성

첫주차에는 간단하게 TodoList를 구현하는 미션이 주어졌다.

[필수 구현사항] TodoList Component 작성

• function, class 아무거나 사용해도 좋습니다.
• new 키워드를 통해 생성해서 사용합니다.
• 파라미터로 아래와 같은 형태의 data를 넘겨받습니다.

const data = [{ text: 'JS 공부하기' }, { text: 'JS 복습하기' }]

• const todoList = new TodoList(data); 와 같은 형태로 파라미터를 넘기고, 생성해서 사용합니다.
• TodoList 컴포넌트에 render함수를 작성합니다.
• 이 함수는 파라미터로 넘겨받은 data를 순회하며 각 배열첨자의 text를 html string으로 만든 뒤, todo-list라는 id를 가진 div에 innerHTML을 이용해 렌더링 되도록 합니다.

 

[추가 구현사항]

✎ 에러 발생시키기

• const todoList = new TodoList(data);와 같은 형태로 파라미터를 넘기고, 생성해서 사용합니다.
• TodoList 컴포넌트에 render함수를 작성합니다.
• 이 함수는 파라미터로 넘겨받은 data를 순회하며 각 배열첨자의 text를 html string으로 만든 뒤, todo-list라는 id를 가진 div에 innerHTML을 이용해 렌더링 되도록 합니다.

✎ 여러 개의 컴포넌트

• <div id="todo-list"></div> 외의 다른 div를 두 개 더 html 코드에 만듭니다.
• const data = [{ ... }] 외에 todo를 담고 있는 array data를 두 개 더 만듭니다.
• TodoList 컴포넌트를 총 세 개 만듭니다. 첫 번째 컴포넌트에는 제가 넣어둔 data와 #todo-list에 렌더링하고, 나머지 두 개는 여러분이 추가하신 div + data를 활용해서 만들어주세요.

✎ 완료 상태 표시

• <div id="todo-list"></div> 외의 다른 div를 두 개 더 html 코드에 만듭니다.
• const data = [{ ... }] 외에 todo를 담고 있는 array data를 두 개 더 만듭니다.
• TodoList 컴포넌트를 총 세 개 만듭니다. 첫 번째 컴포넌트에는 제가 넣어둔 data와 #todo-list에 렌더링하고, 나머지 두 개는 여러분이 추가하신 div + data를 활용해서 만들어주세요.

✎ setState 함수 작성

• TodoList 함수에 setState(nextData)라는 함수를 만듭니다.
• 이 함수는 해당 컴포넌트 초기 생성 시 넘겼던 data 파라메터를 nextData로 대체하고 컴포넌트를 다시 렌더링합니다.
• 해당 함수를 추가한 뒤, new TodoList(...) 하는 코드 이후에 해당 컴포넌트의 인스턴스에 todoList.setState(새로운 배열) 형태로 데이터만 다시 넣었을 때 컴포넌트가 다시 렌더링 되도록 작성해주세요.
• setState 함수 호출 후 다시 todoList.render()를 호출하는 것이 아니라, setState 함수 내에서 화면을 다시 렌더링하는 것까지 처리해야 합니다.

 

[오프라인 스터디 피드백]

스터디를 시작 전 사전 테스트를 받았다. 아래 내용은 사전 테스트에 대한 내용이다. 

1. New 키워드: 함수에도 new 키워드로 변수에 할당할 수 있다.
2. 즉시실행 함수 - 이런게 있다는 정도만 알아두기. 앞으론 많이 볼 형태는 아님. 함수 앞에 세미콜론이 붙은 경우도 있는데 이런 것은 이전 소스에서 혹시 세미콜론이 누락되어 발생할 수 있는 오류에 대비하는 것이므로 레거시 코드에서 보게 되면 세미콜론 지우지 말 것.
3. {}.bind(this) 요즘 많이 쓰는 형태는 아니지만 이런 게 있었다 정도 알아두기.
4. Event loop. Var --> let으로 바꾸면 된다. Let은 Block scope 안에서 유지를 시켜준다?
5. Es6에 있는 api를 쓰자. map, filter 등등
   1. Const nameArr = Users.filter(user => user.type === 'dog')
   2. .map(user => user.name).join()
6. 변수를 선언해놓고 할당하지 않으면 일시적으로 temporary deadzone에 들어갈 수 있다. 가급적 변수는 const를 사용. 변수형에 딸려 있는 함수들을 활용해서 값을 변경할 수 있으니 그 방법을 주로 이용.
7. CSS에서의 Position: 연산을 cpu가 한다. Transform, translate: GPU가 연산한다.
8. Inline-block은 조심해서 써야 한다. 픽셀값도 차이가 남. 가급적이면 block을 옮기는 방식이 좋다. Side effect같은 것들을 추적하기가 쉽다.
9. 원시타입과 참조타입. 참조타입에 문제가 있다. 얕은 복사 깊은 복사에 대해 알아보기.
10. 웹페이지가 렌더링되는 과정에 대해 설명하시오. 프론트엔드 면접 단골질문이다. 깊이를 알 수 있다. 렌더링 트리(DOM, CSS.. )가 만들어지고, 그 트리를 페인팅하는 과정. SPA에서 돔 트리의 일부만 변경하는 방식을 채택하게 되어 최근 프론트엔드에서 중요한 부분이 되었다.

[결과물 github 링크]

GitHub - jazzo5947/Vanilla-JS-Study: Vanilla JS Study Managed by David