vanillajavascript
[Vanilla Javascript Study] # 3. fetch API로 움짤 검색기 만들기
3주차에는 TodoList로 공부한 내용을 바탕으로, fetch API를 ajax 요청하여 움짤 검색기를 만들어보는 미션을 받았다. [필수 구현사항] SearchInput 컴포넌트: input의 내용이 변경되면 fetch API를 호출하여 데이터를 가져오는 컴포넌트 SearchResult 컴포넌트: 생성 시 파라메터로 data, target 두 개의 파라메터를 받습니다. data: 렌더링에 사용할 데이터 target : html string을 렌더링 할 element의 표현식 (ex: #search-result) function SearchResult (data, target) { .... } 이번에 진행했던 것처럼 해당 컴포넌트는 setState, render 함수를 갖고 있습니다. [추가 구현사항] ..
[Vanilla Javascript Study] # 2. TodoList 업그레이드
2주차에는 TodoList를 업그레이드하는 작업을 거쳤다. [필수 구현사항] 미션1 html에 있던 스크립트를 TodoList.js로 분리합니다 new TodoList()를 실행했던 구문은 index.js로 분리합니다 index.html에서 해당 스크립트를 로드합니다 [추가 구현사항] ✎ 데이터 모델, LocalStorage 활용 데이터 모델에 isCompleted 추가 [{ text: 'todo text', // 할 일 이름 isCompleted: false, // 완료 여부 }] todo data가 변경될 때 마다 localStorage에 저장 웹페이지에 처음 들어올 때 localStorage에 저장된 data가 있으면 불러오고, 없으면 빈 data로 시작 새로고침 시에도 작성해 둔 todo 유지 ✎..
[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에 ..