컴포넌트
- 하나의 기능 구현을 위한 여러 종류의 코드 묶음
- 컴포넌트 하나를 만들 때 목업을 하나 만들어 보기
- 목업을 만들 때 와이어 프레임 짜보기
클래스 네이밍
- 각 요소의 역할과 기능이 표현되도록 작성
클래스 네이밍에 wrapper 라는 단어가 궁금했는데..
- HTML/CSS 네이밍 시 container와 wrapper의 차이
- 둘다 레이아웃을 위한 div지만
- container는 주로 여러 개의 요소를 감싸는 div이고,
- wrapper는 단일 요소의 레이아웃을 위한 div를 말함 - 참고 : https://ryusm.tistory.com/134
form
- div 같은 걸 무작정 쓰기보다 시멘틱하게 form 태그를 넣어주는게 좋다
- 입력 요소(input, textarea)의 라벨(label)을 작성하고
- 라벨의 for 값과 input의 id 값을 일치시킨다.
- 참고 : https://dasima.xyz/input-id-label-for/
이벤트 submit 과 click 의 차이
- 요약 : 입력후 엔터를 쳐도 작동되느냐 아니냐의 차이(만 있는건가???)
- 참고 : https://ko.javascript.info/forms-submit#ref-959
input type submit 과 button type submit 의 차이
- 요약 : button은 하위 태그들을 추가할 수 있지만 input은 그럴 수 없다
=> 이에 따라 버튼 부분 디자인 방식이 달라지고 button 이 디자인 자유도가 더 높다 - 참고 : https://cocoder16.tistory.com/18
- 다양한 의견 : https://xetown.com/questions/28120
css 관련 센터 잡기(센터링)
- flex container에 display flex, justify-content, align-items 를 통해 적용해서 flex item 을 센터로 위치시킴
- 센터링할 요소에다가 margin: 0 auto 를 적용 (참고: https://hansolcha.tistory.com/4)
현재 날짜와 시간 구해서 표현하기
- toLocaleString() 함수를 사용과 이해
- 참고 : https://hianna.tistory.com/325
DOM 조작으로 요소를 추가할 때 로직
- 요소를 생성한뒤 기존 요소에 append 나 prepend 로 붙여줄 수도 있고
- 아예 한번 다 지우고 전체를 다시 그려주는 방법으로 접근할 수도 있음
추가 공부하면 좋을 부분
소그룹 회의에서 동기분들 작품 기억에 남는 부분
- overflow auto 를 활용해서 스크롤을 해도 form 작성 부분을 위에 고정시킨 부분
- container 안에 요소들간 비율 조정시 flex 속성을 활용하면 깔끔하게 줄 수 있음
- blur 라는 이벤트에 대해 찾아보기 : 요소가 포커스를 잃는 순간에 대한 이벤트
- input 요소에 값이 다 들어올때 유효성 검사를 적용하는 아이디어
폼과 폼 조작
페이지네이션 로직 이해하고 해보기
- 참고
https://min-kyung.tistory.com/30
https://velog.io/@eunoia/JS로-Pagination-구현하기
https://nohack.tistory.com/125
https://www.youtube.com/watch?v=IqYiVHrO2U8
로컬 스토리지
느리지만 꾸준하게. 부족하거나 잘못된 부분은 알려주시면 감사하겠습니다.