코드스테이츠 자체적으로 Selector퀴즈를 해보았다.
어느정도는 눈대중으로 알아볼수 있었지만

구조 가상 클래스는 좀 알아보기 어려웠다.

• 너무 비효율적일꺼같고 가독성이 떨어진다고 생각.

자식 셀렉터와 후손 셀렉터의 차이를 잘 알고 있어야 한다.

자식 셀렉터 : 특정 태그 바로 아래에 위치한 태그

• header > p{}
• header태그 안에 있는 p태그를 가르킨다.

  header태그 안에 div 태그 안에 p태그는 가르키지 않는다.

후손 셀렉터 : 특정 태그 안에 위치한 태그를 가르킨다.

• header p{}
• header태그 안에 있는 모든 p태그를 가르킨다.

  header태그 안에 div태그 안에 p태그도 가르킨다.

css를 활용하기 전에 html의 기본 스타일을 reset시켜야 한다.

• css를 설계하는데에 방해가 된다

  example : body태그 같은 경우에는 약간의 여백이 있다.

초기화를 위한 다양한 라이브러리도 있지만 간단하게 몇줄의 코드만을 적용시키면 기본 스타일링을 제거할수가 있다.

FlexBox

flex박스는 부모요소에 선언하는 것이다.

• 자식요소에는 flex라는 속성에 값을 저장한다.
  기본값은 flex : 0 1 auto이다.
  
  0 : 팽창 지수(grow)
  1 : 수축 지수(shrink)
  auto : 기본크기(basis)
  
  grow, shrink, basis는 부모요소가 아니라 자식 요소에서 선언하는 것이다.

grow값은 비율이다.

이것에 추가한다면 box의 grow값은 0, target의 grow값은 1이므로
1+0+0이기 떄문에 전체값은 1이고 그중 target이 1을 가지고 있다.

계산대로라면 target이 모든 공간을 차지해야 하지만 다른 .box들이 있기 떄문에 가질수 있는 최대를 가지게 되는 것이다.

• 만일 .box의 grow의 값이 1이라면 1+1+1 = 3이기 떄문에 모두다 동일하게 3/1씩 가지게 된다.

반대로 shrink는 grow와 반대되는 역할을 한다.

• 그러기 떄문에 동시에 사용하는것은 권장 되지 않는다.

보통 flex: grow 1 auto로 사용하며 grow만을 수정한다.

참고 사항

• width와 flex를 동시에 적용되는 경우 flex가 우선된다.

• 부모태그에 justify-content를 지정함으로써 다양하게 자식태그를 구성할수도 있다.

  flex-direction = row : 기본값 -> main axis가 가로인 상태이다.

justify-content에는 다양한 옵션이 있다.

수직 정렬 : align-items는 적용하는 방법을 아직 모르겠다;;

• 활용법을 자세히 몰라서 그냥 계속 수정하면서 만들어 봤다.

아직은 flex가 익숙하지가 않다.

웹 앱 화면 설계하기

와이어 프레임

• 웹 또는 앱을 개발할 떄 레이아웃의 뼈대를 그리는 단계
• 선 or 도형으로 인터페이스를 시각적으로 묘사한것

목업

• 실물 크기의 모형

역동 적인 웹을 만들고자 한다면 HTML문서에 작성자, 내용 등을 변수로 관리하여 값을 동적으로 담아야 한다.

• 사용자에 따라서 값이 다르게 보이게 만들어야 한다.

• let tweet = {user : '김코딩', content: 'sns는 인생의...'}
  js 어딘가에는 tweet내용이 담긴 객채가 존재 할 것이다.

하지만 아직 div태그 내에 변수의 값을 js로 전달하는 법을 모르기 떄문에 HTML에 하나씩 입력을 해주어야 하는데 이것을 하드 코딩 이라고 부른다.

• 쉽게 말해 노가다 해서 만들어진 것을 하드코딩 이라고 한다.

====================================================================

DOM 이해하기

• 프로그래머 관점에서 바라 본 HTML이다.
• 브라우저 환경에서 JS를 이용해 HTML을 조작할수 있으며 이미 작성된 엘리먼트를 생성 또는 삭제 가능하다.

이번 챕터를 통해서 HTML과 JS를 연결하는 방법을 알아본다.

HTML에 JS적용하기

• HTML에서 같은 파일에 있는 JS를 불러오는 코드이다.

script가 작동을 하게 되면 html읽는것을 그만두고 script요소를 먼저 실행한다.

script요소는 등장과 함께 실행된다.

• 그러기 떄문에 head 또는 body의 맨 끝부분 에 script를 선언해야 한다.

• 이처럼 msg를 받고 있는 js가 msg를 출력하는 html이 나오기 전에 호출되면 null 이 된다.

• 하지만 html의 출력이 끝난뒤에 출력을하면 정상적으로 나오는 것을 볼수가 있다.

이러한 것을 보면 script는 등장과 함께 실행 된다는것을 알수가 있다.

console.log, console.dir

DOM 구조를 주회할 떄에는 주로 console.dir를 활용한다.

• dir은 log와 달리 DOM을 객체의 모습으로 출력

이러한 요인을 보면 DOM의 구조는 트리구조로 이루어져 있다고 볼수가 있다.

DOM으로 HTML조작하기

CRUD : create, read, update, delete

• 어떠한 언어를 배우든 먼저 CRUD를 습득을 한 이후에 진행을 해야 한다.

console창에서 js를 통해 div를 넣는 방법

• 제목 그대로 진행할 것이다.

편의를 위해서 생성할 div를 변수에 넣을 것이다.

const a = document.createElement('div')

이후 만든 div를 html에 넣어주면 된다.

document.body.append(a)

시각적으로는 확인할수가 없지만 개발자 도구를 통해서 html 파일을 확인하면 빈 div태그가 생겨있는것을 볼수가 있다.

• 아직 아무 값도 넣지 않고 빈 태그만을 생성한 것이다.

Read

평범한 js 에서는 자료형인 변수를 보통 변수의 이름으로 조회를 하지만
Dom은 querySelector의 첫번쨰 인자로 셀렉터를 전달하여 확인한다.

• 셀렉터로는 html태그(div), id(#), class(.)이 주로 사용된다.

이 방법 또한 변수에 담아서 사용한다.

const b = document.querySelector('#container')

• 이 방법은 html 엘리먼트중 첫 번쨰 엘리먼트만을 가져온다.

const c = document.querySelectorALL('#container')

• 이 방법은 HTML 엘리먼트중 모든 엘리먼트를 가져온다.
• 이렇게 조회한 엘리먼트 들은 배열처럼 for문을 사용해서 사용할수가 있다.

같은 기능을 하는 메소드도 있는데

document.getElementById('.tweet')

처럼 사용을 할수도 있고 역할은 앞서 만든 2개와 동일하다.

get은 역할만 동일한 옛날 방식이다. 알고만 있자

b.append(a)

이러한 방법을 통해서 앞서 만든 div를 해당 셀렉터로 들어갈수가 있다.

• b : container, a : 빈 div 태그
• 빈 div 태그를 container에 넣는다는 코드

이렇게 끝낸다면 id=container이라는 태그에 빈 div가 들어가게 되는데
이렇게 새롭게 추가한 div에는 css가 적용하지는 않는다.

• 따로 설정을 하지 않았기 떄문에

Update

이곳에서는 class or id와 내용을 추가하는 과정을 적을 것이다.

1장에서 봤듯이 html에서 값을 빼와서 js로 바꾸는 방법은 이미 학습을 해봤다.

example -> document.querySelecor.textContent = "내용";

이를 이용하면 된다.

앞서 한 작업을 하나도 안했다고 가정을 하고 순서대로 코드를 적어보면

const one = document.createElement('div')
one.textContent = "내용" -> 내용을 입력
one.classList.add('tweet') -> class를 부여

const two = document.querySelector('.container')
two.append(one) -> 자식태그로 지정

Delete

간단하게 remove를 사용하면 된다.

const a = document.createElement('div')
a.remove()

만약 여러개의 엘리먼트를 지우고자 한다면

document.querySelector('#container').innerHTML = ''

• id가 container인 엘리먼트 아래의 모든 엘리먼트를 지운다.

이 방법은 보안에서 몇가지 문제를 가지고 있기 떄문에 보통은 removeChild를 사용한다.

• 하지만 이 방법은 반드시 for문 또는 while문을 사용 해야 한다.

====================================================================
추가적인 학습을 할 필요가 있다.
-> 일단 기본적인 것들을 정리한뒤 내일 추가적인 사항을 추가로 정리해 보겠다.

유효성 검사

• 특정 조건으로 제약을 거는 것을 말한다.

  spring에서는 validation과 같은 역할

• 이 코드와 같이 DOM을 이용하여 제약을 걸수가 있다.

매우 간단하게만 구현을 한것이지 추가로 작업은 다양하게 가능하다.

====================================================================

Pos기 버튼에 따른 구동

• js의 event를 잘 몰라서 한참을 헤맸다.

event

• 사용자의 입력(onclick, onkeyup, onscroll등)을 트리거로 발생한 이벤트 정보를 담은 객체

이렇게 별다른 점이 없는 버튼이 구현되었다고 하자.

그후 누르는 버튼마다 conlog에 버튼의 textcontent를 가져 온다고 하면

기본 코드는

• 이런 식으로 짤수 있을 것이다.

button을 모두 가져오고 하나가 아니기 떄문에 각각 인덱스를 직접 넣어주어 지정해 준다.

이후 event객체중 click를 이용하여 button을 클릭하면 이벤트 함수가 작동되게 한다.

그러면 누르는 버튼에 적힌 textContent를 console에 출력을 한다.

이 부분을 채워 넣는라고 많이 헤맸다.

• 어떻게 누른 버튼의 값을 가져와야하는지를 몰랐다.
• event를 사용하라는 힌트가 있었지만 따로 선언을 안하고도 사용을 할수 있나 라는 의문도 있었다.

이떄 들어갈 코드는 event.target.textContent를 넣어주면 된다.

• event.target.value 는 클릭한 태그에 value가 있을떄만 사용할수 있다.

event에 대한 추가 학습

• onsubmit : "양식 제출 이벤트 전에 발동한다."

  form태그 내에서 input type="submit"으로 작동하는 html을 처리하는 이벤트 이다.

  • form 태그에서 input이 클릭되었을떄 action으로 작동하기 전에 submit이벤트가 먼저 작동을 하게 된다.

• onchange

  작성한 js에서 변화를 감지하는 이벤트 이다.

• onmouseover

• onkeyup

• event.preventDefault