이 저장소는 IT창업동아리 CEOS(https://www.ceos.or.kr/) 프론트엔드 팀에서 스터디를 하며 수행한 미션의 결과를 공유합니다.

https://github.com/CEOS-Developers/vanilla-todo-14th

https://bonjunku.github.io/vanilla-todo-14th/

1. html

• 중앙 컨테이너
• 대기중 / 완료됨 구분
• 새로운 할일 추가 입력 받기
• 새로운 할일 추가 버튼
• 목록에서 삭제 버튼

2. css

• 배경색 추가
• 폰트 조절, 대기중완료됨 / 목록 / 새로운 할일 추가
• 스크롤(오버플로우)
• 삭제 버튼 안보이게 - js로 처리
• 완료됨 영역에서는 흐리게 + 취소선

3. js

• 목록 개수 카운트
• 클릭시 반대편으로 이동
• 입력 후 추가버튼 누르면 대기열에 추가

• 결과 화면 구현
• CSS Flexbox 이용
• 외부 라이브러리 X
• lowerCamelCase
• 코딩 단위 기능별 Commit 메세지 작성

• 외부 폰트 사용: 눈누 사이트에서 ELAND_Choice_M 사용
• local storage로 데이터 보존

• 할일을 모두 완료하면 라이언이 따봉을 줍니다!😆😆
• 이모지 사용, 모서리 다듬기, 색상 변경
• item class를 선언, 객체들을 배열 하나로 관리

:DOM(Document Object Model)은 문서 객체 모델로, 문서를 계층적으로 구조화하여 사용자가 조작할 수 있도록 돕는 인터페이스이다.

1. document.createElement,document.createTextNode()는 Element를 생성한다. 요소인지 그 안의 텍스트인지에 따라 차이가 있다.
2. Node.appendChild, Node.innerHTML,Node.textContent처럼 노드를 먼저 가져온 후 거기 덧붙이는 방식으로 생성할 수도 있다. html 뼈대가 어느정도 잡혀 있다면 일반적으로 2번 방식이 더 유리한 듯 하다.(1번도 어차피 위치를 잡아줘야하기 때문)

: 여기(https://maxkim-j.github.io/posts/keyboard-input)를 참고합시다.
7가지 이벤트가 있으며, focus => keyDown => (keyPress) => input => keyUp => blur => change 순으로 발생합니다.

: css에서 display:flex를 이용하면 됩니다. 주 축과 수직축을 가지고 요소들을 컨테이너 안에서 자유롭게 배치할 수 있습니다. 여기에서 연습할 수 있어요.

JS는 바나나를 좋아합니다

• 프로토타입 기반 객체 지향 언어
• 인터프리터
• 동적타이핑, 약타입 언어. 유연함.
• 함수가 일급 객체
• 고차함수 존재

• 간결하게, 이해하기 쉽도록
• 일관되게
• 연속되는 라인에 있을 때는 정렬
• 업데이트하기 용이하도록

등이 있을 것 같습니다.