Today I learned
- twittler 목업 및 기능 구현
- Dom
- css
- 유효성 검사
[twittler 목업 및 기능 구현]
- localStorage의 활용
- 몇분 전, 몇 시간 전과 같은 친화적 시간 표현하기
- new Date()
- 데이터 html 파싱 및 filter 처리
[DOM]
-
DOM 도 자바스크립트와 마찬가지로 하나의 객체다.
-
const 값으로 DOM 을 할당해도 상관없다. 속성 값이 추가되도 값이 변하는 것이 아니다. (객체의 속성값이 바뀌는 것이 재할당이 아니듯)
-
append는 여러가지 인수를 전달할 수 있다. (한꺼번에 여러개를 담을 수 있다)
-
className 보다 classList.add() 가 보다 더 모던한 방법이다.
-
클론하고 append를 해야 복사해서 넣을 수 있다. 이미 append 한 엘리먼트를 또다시 append해도 복제되진 않는다.
-
semantic tag
-
HTML 시맨틱 태그 정리
-
semantics
코드 조각
-
header, footer, form , table, nav, h1 처럼 자신의 컨텐츠를 정의하는 의미를 담고 있는 태그를 말한다.
-
의미론적 마크업을 하면 검색 엔진은 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주
-
웹 접근성을 높인다. (시각장애인이 푯말로 사용할 수 있다)
section - 섹션, 구역 의미
aside - 문서의 주요 내용과 간접적으로 나타나는 부분을 나타낼 때 주로 쓰는 사이드바
article - 문서 내에서 독립적으로 구분 배포, 재사용할 수 있는 구획 (블로그 글, 매거진, 뉴스기사)
main - 주요 콘텐츠를 나타냄
header - 페이지 도입부, 로고나 사이트 이름 혹은 수평 메뉴
footer - 페이지 종결부, 저작권이나 법률적 고지, 회사 정보 등이 나열돼 있다.
nav - 네비게이션 링크 포함하는 섹션. 네비게이션 링크들의 목록.
h1 ~ h6, 해당 섹션의 제목을 중요도에 따라 분류한 것.
-
DOM CRUD
-
create
- createElement
-
read
- querySelector
- querySelectorAll
- getElementById, getElementsByTagName, getElementsByClassName
-
update
- textContent, innerHTML, innerText, setAttribute()
-
Delete
-
remove, removeChild(), innerHTML, textContent
-
-
dom 조작이 필요한 경우, 브라우저가 html 문서를 다 읽고 파싱할 때까지 dom 을 읽어들일 수 없기 때문에 바디 안쪽 하단에 script를 처리하거나 혹은 javascript 스크립트에 onload 와 같은 메소드를 사용하여 브라우저가 로드되고 스크립트가 실행되도록 처리해야한다.
-
event 객체
이벤트 핸들러 함수에서 파라미터로 들어오는 event 객체
[css]
-
선택자
- 전체 선택자
- 태그 선택자
- 클래스 선택자
- ID 선택자
- 복합 선택자
- 하위 선택자
- 자식 선택자
- 형제 선택자
- 일반 형제 선택자
- 인접 형제 선택자
- 속성 선택자
- 슈도 클래스 선택자
-
css 의 선택 우선 순위
-
기본적으로 스타일 시트를 명세할 때 더 하단에 있을 수록 큰 우선 순위를 가진다.
-
부모태그와 자식 태그의 관계에 대해 자세하게 기입할 수록 더 큰 우선 순위를 가진다.
-
인라인 스타일 태그가 큰 우선 순위를 가지고, style 시트 선언시 하단에 명세한 것일 수록 높은 우선 순위를 가진다.
-
!important 는 우선 순위를 무시하고 가장 높은 우선 순위를 가진다. 사용을 자제해야 한다.
ex) #main div.className > div.className > div
-
-
box model
- margin, border, padding, content
-
position
- relative, absolute, fixed, sticky
[유효성검사]
- 데이터가 서버에 보내지기 전에 그 데이터의 적합성을 확인하는 절차를 말한다.
- 데이터의 길이 혹은 숫자, 문자 등 데이터베이스에 적합한 형태가 맞는지 확인한다.
[Comment]
@@ 오늘 드디어 트위터 기능 구현을 완료 했다. css로 나름 예쁘게 꾸민다고 꾸며봤다.
목표 했던 advanced 과제인 localStorage 활용과 moment.js 는 활용 하지 않았지만 올린지 몇분 경과와 같이 좀 더 친화적으로 올린 시간을 보여주는 기능을 구현해봤다.
처음에 데이터를 파싱해주는 게 가장 어려웠고, filter 함수를 쓰니 나머지 기능은 의외로 쉽게 풀렸다. localStorage도 처음 써보는 JSON.parse(), JSON.stringify()와 같은 함수에서 조금 버벅였는데 localStorage 자체는 메소드가 몇개 필요하지 않아서 금방 했던 것 같다.
오늘 페어는 진행되지 못했지만, 그래도 공부하며 나름 시간을 잘 보냈다.
내일은 고차함수에 들어간다. 미리 예습을 좀 해보았는데 커리 함수, 콜백 함수 등 새로 친해져야 하는 함수가 많아서 또 당분간 버벅일 것 같다. 이제 점점 멘탈 싸움으로 가는 것 같다.
