Day7

• 프로그래머
  -코드작성, 분석및 구현, 디버깅, 컴파일, 테스트 및 구현을 통해 원하는 출력물을 만들어내는 일을 수행한다.
  -시스템이 제대로 작동되기 위한 모든 다양한 요소의 영역을 다룬다.
  -사소한 문제로 인해 발생할 수 있는 것들을 발견하고 예방한다.

• 개발자
  -다양한 유형의 문제를 해결하기 위한 시나리오와 절차를 다룬다.
  -문제에 대한 솔루션을 개념화하고 분석한 다음 문제 해결 방법을 결정한다.
  -코드분석, 디자인 패턴 등을 연구하고 습득 향상 시킨다.

• css 나 js코드에서 참조할 수 있는 tag 요소들
  tagName(div, p) : 여러개 있을 수 있다
  id(#username, #password) : 한 화면에 1개만 있어야 한다
  class(div.div1, button.btn) : 여러개 있을 수 있다

const username = document.querySelector("input[name='username']")
id를 설정하지 않았을 경우 name속성으로 가져올 수 있다

flex

• display를 flex로 설정하는 순간 div.main은 flex-box 라는 성질을 갖게 된다
  또한 div.sub들은 flex-item이라는 성질을 갖게 된다
• flex-item 들은 기본적으로 inline-block의 성질을 갖게 된다
  일정한 크기의 width 를 갖게되고 화면의 width 변화에 따라 유동적으로 변화되는
  성질을 갖는다

• flex-item에 flex 값을 정수값으로 설정하면 여백부분을 모두 차지하는 width가 설정된다
• flex-wrap : wrap; 으로 설정하면 화면이 줄어들때 다음줄로 넘어가게끔 해준다
• flex-direction은 화면 방향을 설정할 수 있다
  -flex-item 의 margin-left를 auto 로 설정하면 그 item부터 오른쪽으로 정렬되는 효과를 낼 수 있다
• flex-box(display:flex 설정된 tag)에 justify-content(좌우)와 align-items(상하) 를 center로 설정하면 내부의 flex-item들이 상하 좌우 중앙 정렬을 한다

html { 
        width: 100vw;
        height: 100vh;
      }

디바이스 화면에 맞춰서 해주는 명령어이다 (문서의 보이는 크기를 view port의 100%로 설정하기)
전체화면을 차지하는 layout을 만들때 전체화면에 대한 기준을 만드는 것
vw,vh : 화면에 보이는 view port를 기준으로 width, height를 적용하는 방법, % 를 사용하여 width, height 를 적용하면 장치에 따라서 화면을 벗어나는 경우가있다
html 문서에 최초로 100vw,100vh를 적용하여 장치 내에서 화면을 구현할 수 있도록 하는 코드

body {
        width: 100%;
        height: 100%;
        }

html 문서가 보이는 범위내에서 body를 100%로 설정하기
body에 width와 height를 적용하려면 먼저 html에 width와 height를 적용해 주어야 한다

<aside> 본문 영역의 옆에 사용하는 태그

window.open(${naverURL}?query=${txtSearch}, "_blank");
blank는 창을 따로 띄워라라는 것

데이터구조(자료 구조)

• 객체(JSON, Javascript Object Notation)
  : JS에서 객체로 조각으로 구성된 변수들을 연관된 연결고리로 한 묶음으로 묶어둔 것,
  개성을 갖고있는 주체

#참고: 객체지향 언어인 java,c++ 에서 언급하는 객체와는 약간 다른 개념으로 JS에서는 사용된다

const 성적 = {
  학번: "001",
  국어: 80,
};

이런식으로 만들 수 있다
하나로 묶여있기 때문에 다른사람의 데이터가 섞일일이 없다
학번과 국어 같은 친구를 변수 뒤에는 값이라고 한다
앞에 있는걸 key 뒤에있는걸 value라고 해서 Key value pair 라고 불린다.

const index = {
  name: 0,
  addr: 1,
  tel: 2,
};

여기서 index 속성을 가져오는 방법
1. index.name
2. index["name"]

table

테이블에서 border-collapse: separate; 가 기본값이고 border-collapse: collapse; /* 로 설정해주면 여백이 없어진다.
border-spacing: 20px;은 border-collapse 가 seperate일때 border-spacing 을 설정하면 셀 간격이 변하지만 collapse 일때는 적용되지 않는다

<table>
    <thead>
        <tr>
          <th></th>
        </tr>
     </thead>
    <tbody>
      <tr>
        <td></td>
      </tr>
  	</tbody>
 </table>

위와같이 테이블은 기본적으로 구성되어있다

• colspan -> 셀을 병합하는 속성, 가로방향으로 묶는것
• rowspan => 세로방향으로 묶는것

그외

모듈에서는 return문을 하나만 써라
else if를 쓸 때는 return을 하나만 써야한다
return을 쓰면 else if를 쓰는 이유가 없다
colgroup은 선택사항으로 보기

\n -> 다음줄로 변경해준다.
<hr/> ->수평선을 긋는 태그
white space: nowrap;

과거에 데이터를 주고받을떄 xml로 주고 받았는데 요즘에는 JSON으로 이전해 가고있다

URL = 유니파이 리소스 로케이션

디자인패턴은 참조용으로 쓰기
책 -> 디자인패턴, GOF의 디자인 패턴