자바 풀 스택 12/9 오전 기록 013-1

8:50 경 도착인가 그럼.

지하철 파업 때문에 환승 구간에서 내려서 버스 타고 오느라 한 30분 더 소요했고, 내려서 커피 사오느라 또 10분 소요한듯. 버스타고 편하게 와서 좋았당..

 

책상이 지저분해져 있길래 정리하고, 같이 듣는 수강생들하고 수다떨고 뭐하고 하다보니 10분 뒤면 수업 시작이네.

에혀...

정신 차리자.

 

초심 되찾고.

 

정신 차리고.

 

열심히 합시다.

 

 

 

<9:30 1교시> 복습과 함수 개념 다시, backtick 다시 복습

 

자바스크립트의 function type

: 원하는 시점/특정 시점/프로그래머가 의도한 시점에 여러 줄의 자바 스크립트 코드를 실행시킬 수 있게 모아둔 데이터 타입

함수를 호출하면서 바로 내가 필요한 동작을 전달하는 경우가 많다.(이벤트리스너 경우)

 

내가 함수를 만들고 내가 함수를 호출하는 경우가 있고

내가 함수를 만든걸 내부적으로 알아서 함수를 호출하는 경우(이벤트리스너)가 있다.

 

함수가 내부적으로 언제 호출되는지를 알고 사용해야 함수를 제대로 쓸 수 있게 된다.

이벤트리스너는 함수를 작성하는 코드를 직접 작성할 필요가 없다.

모든 함수를 우리가 직접 호출할 필요가 없다.

 

우리가 만든 함수가 만든 함수가 아닌 미리 준비된 함수라고 가정했을 때, 미리 준비된 함수를 호출하면서 string type과 function type을 전달할 수 있다.

 

fetch 함수의 구조

fetch()가 호출되면 그 위치가 다른 오브젝트 값으로 바뀜.

 

함수를 호출하면서 함수를 전달하는 경우 : 함수1(함수2(){}); 함수1을 호출하면서 함수2를 전달

이런 함수를 이용해서 정보를 요청하면 화면에 변화가 없이 백그라운드에서 그 요청에 대한 응답이 함수2로 전달되고, 함수2에서 전달 받은 함수를 호출함(요청이 매우 많으면 응답에 시간이 걸릴 수 있다)

함수1을 호출한 상태에서 비동기 동작으로 응답이 올 때까지 기다리지 않고 데이터를 요청하고 다른 작업을 실행하고 응답이 오면 이 함수를 실행해주세요 하고 함수를 던져놓고 다른 작업 실행하러 감.

비동기 동작(스타벅스의 작업이라고 생각) = 자바스크립트의 동작(스타벅스인데 1명의 직원이 돌아가면서 다 일하는 상황 상상하면 됨)

동기 동작(스타벅스인데 커피를 받을 때까지 다음 사람은 커피를 주문 못함) = 자바의 동작(스타벅스인데 손님이 직원이 올 때마다 1:1 대응을 하게 생겼다 사라졌다 하고, 심지어 직원이 한 번에 한 사람만 일할 수 있는 꼴이라 일정 부분 교대로 일하는 상황이 생겨서 결국 속도 차이 크게 차이 안남)

비동기 동작과 동기 동작의 속도 차가 크게 차이 나지 않음.

 

 

${ }는 backtick `` 안에서만 의미가 있는 연결 연산자로서, backtick 외부의 변수나 상수를 가져와서 작동할 수 있다.

 

 

 

<10:30 2교시>

json은 string type인데 backtick 안에 object나 array 등을 포함하여 닮은 애들이다.

json에서 object는 key값이 반드시 쌍따옴표로만 " " 로 감싸져 있다.   `{"key":value, ...}`

대신 여기서 value가 될 수 있는 애들은 숫자, "문자", true나 false, object {}, array [], null이 여섯 가지만 가능하다.

(function은 json의 데이터가 될 수 없다) 

이런 형식을 JSON(JavaScript Object Notation의 약자) 형식이라고 하고, 문자 그대로 자바스크립트에 친화적이다.

 

JSON.parse(json) 코드를 통해, string type으로 json 안에 있던 object나 array가 얻어진다.

 

fetch함수를 만든 사람이 옵션을 정해놓고 옵션에 따라 응답된 형식을 보고 then(function(res){})를 호출하거나 그 이후에 then(function(data){}까지 호출함.

 

 

 

JSON.parse()의 반대기능을 하는 JSON.stringify() : object나 array에 있는 내용을 저장하기 위해서 사용한다.

Object나 Array는 페이지 새로고침 시 리셋되는데, 그걸 다음에도 쓰고 싶어서 저장하기 위한 형태로 만들 때, Object나 Array를 저장하고 싶어서 json 문자열로 바꿔서 저장하면 웹 브라우저의 local storage에 문자열을 저장할 수 있음.

 

//자바스크립트의 마무리 기초만 끝

이제 css에 대해서 배우고, 매일매일 조금씩 자바스크립트는 계속 할거임!! //

 

 

 

<11:30 3교시>

CSS의 정의

선택자 {

   속성 : 값;

}

 

예를 들면

div{

   color: red;

}

 

CSS는 선택자가 구체적일수록 더 우선시된다.

같은 형태의 선택자
div{color:red;} div{color:blue;}	-> div는 붉은색  -> div가 파란색으로 덮어씌워짐
클래스 선택자와 요소 선택자
.my-class{color: red;} div{color: blue;}	-> div의 class가 붉은색으로 정의되면 더 구체적인 선택자여서 아래 줄에서 파랑으로 덮어씌우려고 했어도 붉은색으로 불변이다. ->div를 파란색으로 덮어씌우려고 시도한 것이지만 선택자의 구체성이 낮아서 안덮어씌워짐.

 

요소, 클래스, 아이디 등이 갖는 CSS 속성의 가중치를 대충 표현하자면 각각 1, 10, 100 정도라고 이해하면 된다.

 

 

CSS 속성을 작성하고 !important;를 붙이면 절대적인 CSS 속성으로 자리잡아 절대 변형시킬 수 없다.

 

CSS의 적용순위 정리

1. 선택자의 구체성이 같다면, 나중에 정의한 CSS가 우선시된다.

2. inline CSS는 선택자를 이용한 CSS보다 우선시된다.(단, !important는 제외)

 

 

CSS에서는 띄어쓰기를 함부로 쓰면 안된다!! 의미의 차이가 생긴다!!

div .my-class{}  -> div의 자손 중에서 class가  my-class인 애들

div.my-class{} -> div이면서 class가 my-class인걸 찾는 거

 

 

가상 클래스

a:hover =>요소명이 a이면서 가상의 클래스 hover를 가지고 있는 요소 선택

hover라는 가상의 클래스는 실제 마우스가 그 위치에 올라갔을 때 생기는데, 그 속성을 요소에 붙이면 요소가 가상 클래스 속성을 제어할 수 있게 됨.

마우스가 그 위치에서 벗어나면 제거되는데, 걍 자연스럽게 그 제거됐을 때의 속성이 같이 제거된다고 생각하면 될듯.

 

 

<12:30 4교시>

CSS 내용 Velog에 있는 것 확인하기