오늘 공부

프로그래머스에서 'roto'님이 진행하는 '[스터디/9기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)'를 수강하며 배운 내용을 정리한 글입니다. 4주차 미션 구현 기능 Todo App API를 이용하여 TodoList 구현하기 할 일 목록 불러오기 할 일 추가하기 할 일 완료여부 토글하기 할 일 삭제하기 특정 사용자의 할 일 전체 삭제하기 Users 컴포넌트를 만들고 선택된 사용자의 할 일 보여주기 API가 느린 경우의 인터렉션 처리하기 미니 트렐로 - 드래그 앤 드롭으로 할 일 완료여부 토글하기 (추가) ErrorUI 컴포넌트 만들기 구현하며 신경쓴 부분 기존 미션 코드를 참고하지 않고 빈 파일에서 하나씩 구현하며 지난 미션 내용들 복습하기 2주차 세션시간에 배운 시멘틱한 HTM..

프로그래머스에서 'roto'님이 진행하는 '[스터디/9기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)'를 수강하며 배운 내용을 정리한 글입니다. 3주 차 미션 API를 이용하여 움짤 검색기 만들기 async ~ await 사용하기 검색창에 debounce 적용 검색 히스토리(중복 X, 히스토리를 선택하여 검색) 구현 하기 1. 움짤 검색기 만들기 처음엔 아래와 같은 boilerplate가 주어진다. 간결하지만 검색을 할 수 있는, 실제 작동하는 코드이다. 함수 내 모든 코드가 연결되어 있는데, 한 뭉치지만 하는 일이 많다. ;(function() { document .querySelector('#search-keyword') .addEventListener('keyup', func..

프로그래머스에서 'roto'님이 진행하는 '[스터디/9기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)'를 수강하며 배운 내용을 정리한 글입니다. 2주차 미션 미션 내용 할 일 추가, 삭제, 완료 기능 추가 InputTodo 컴포넌트화 TodoCount 컴포넌트 추가 Event Delegate 커스텀 이벤트 localStorage에 할 일 저장 구현 결과 미션 진행하며 배운 것 할 일 삭제 시 삭제할 할 일이 todoData 중 어떤 것이지 알기 위해 데이터 속성을 이용했다. this.createTodoHTMLString = ({ text, isCompleted }, index) => { return ` ... Todo 삭제 ` } this.deleteTodoEvent = $targ..

프로그래머스에서 'roto'님이 진행하는 '[스터디/9기] 프론트엔드 개발을 위한 자바스크립트(feat. VanillaJS)'를 수강하며 배운 내용을 정리한 글입니다. 1주차 미션 (필수) TodoList 컴포넌트 작성하기 (추가-1) error 처리하기 (추가-2) 한 페이지에서 TodoList 컴포넌트 여러개 만들어 보기 (추가-3) Todo에 isCompleted 필드 추가하고 완료된 항목에 삭선 처리하기 (추가-4) setState() 함수 만들고 상태변화 시 새로 렌더링하기 학습포인트 컴포넌트의 역할과 구조 이해하기 this 다양한 오류 발생 상황에 대한 error 처리 모든 상태 변화는 setState()에서! 첫 미션은 어렵지 않아서 온라인세션 끝나고 그 날 밤에 다 해서 올렸다. 너무 쉬운..