엘리스 실시간 강의 230307

신유빈·2023년 3월 7일
0

HTML은 문서 작성을 위한 언어에서 시작

맥은 새로운 운영체제가 나오면 모든 개발자들이 새로운 운영체제로 갈아타게됨. 지원을 끊어버림.
맥은 새 환경이 나오면 예전 거 드랍하고 새로운 것만 지원함.

윈도우는 지금 컴퓨터에 정말 예전에 깔린 os부터 현재 운영체제까지 오갈 수 있음.
95에서부터 윈도우11까지 올릴 수 있습니다.
개발자 입장에서는 그 모든 환경을 지원해야합니다.
윈도우 하위호환을 하는 걸 중심으로 개발함.

HTML,CSS,Javascript 는 기능이 줄지 않고 계속 늘어납니다.
왜냐면 옛날 문서들도 지원해야하니까.

그래서 나왔을 당시의 의도를 생각하면서 공부하면 좋습니다.
HTML은 문서작성을 위한 언어로 시작했지만 지금은 아니다ㅎㅎ 라고 말할 수 있습니다.
요즘은 웹사이트나 웹어플리케이션을 만드는 역할을 한다.

원래 속성들은 당시에 쓰던 거니까 너무 쫄지 말기~~

HTML 태그를 두가지 기준으로 분류하면 이해하기 편합니다
1. 기능적인 차이 a, h1, button, input
2. 의미적인 차이 div, section, header, nav, footer
의미적인 태그는 검색엔진 최적화 굿~ 유지보수할때 굿~

CSS 태그를 기능에 따라 분류하면 이해하기 편합니다
1. 레이아웃 display, position,
2. 크기, 여백 width, height, margin, padding
3. 꾸밈 bgc, font-family
4. 애니메이션 transition, animation

마진 병합 현상
HTML은 문서작성을 위한 언어에서 시작했기 때문에 마진이 넓게 있으면 글 쓸때 귀찮으니까
그래서 레이아웃을 만들기 위해 생긴 flex, grid에선 margin 병합 현상이 없습니다.

float
float의 원래 목적 (float만 가능합니다.): 글과 요소가 어울림하고 싶을 때 씁니다.

CSS Transform
레이아웃 계산을 끝난 뒤에 그 상태에서 옮겨줍니다.

CSS Trasition
css로 만들수 있는 가장 간편한 애니메이션

CSS Animation
좀 더 복잡한 애니메이션, 어떻게 하면 애니메이션을 중첩할 수 있을지(같은 속성 중첩 불가해서 테크닉 필요~)

애니메이션을 구현하는 4가지 방법
1. CSS - transition
2. CSS - keyframe animation
3. javascript - web api
4. javascript -

미디어쿼리
기기의 전체 뷰포트 기준, 그래서 좀 아쉬운 부분이 있었다.
특정한 요소 하나하나마다 조작하구 싶은데...

컨테이너쿼리
can i use => 컨테이너 기능
그래서 컨테이너쿼리가 생겼다. 요소 하나하나마다 크기로 조정? 짱이당~

git pull과 fetch가 비슷한 용도로 알고 있는데 굳이 한번 더 병합이 필요한 fetch가 필요한 경우가 있을까요?
항상 신규로 작업하면 곤란한 경우가 있습니당.
어디까지 진행됐는지 확인만 해보고 (fetch) 내 작업을 알아서 할때 fetch를 많이 씁니다.

git hub
insights 에서 rebase 예시 확인할 수 있습니다. 깔끔하게 한줄로 보여주기 편해서 취향에 따라서 씁니다ㅎㅎ(merge는 정말 시러요 더러워요 이러는 사람들)

심지어 코치님은 또 다른 방법을 씁니다.

git remote
개발자들도 어디가 메인 작업주소고 어디가 서브인지 어려워서
origin 이라는 키워드를 만든 것, master-main-develope 다 취향껏 정하기 나름입니다.
보통 주소로 main은 origin으로 많이 씁니다.

vim은 추천은 합니다ㅎㅎ 링크만 알려드릴게여
https://www.vimgolf.com/

자바스크립트
좋은 점 : 다양한 곳에서 쓰인다. 웹브라우저, 백엔드 등
어려운 점 : 예전에 쓰이던 레거시와 새 방식이 혼용
급하게 만든 언어라 새로 배우는 입장에선 효율적으로 학습하기 쉽지 않을 수 있습니다.

기본적인 데이터 타입
undefined : 값이 선언되지 않은 상태, 할당되지 않은 상태 / undefined는 의도적으로 값에 직접 넣는 경우는 없습니다.
null : 값이 비어있음, 의도적으로 빈 값을 설정 / 의도적으로 반환값이나 값에 null을 넣는 경우가 있을 수 있습니다.

다른 언어는 이런 경우 잘 없습니다 ㅎㅎ 코치님이 알기론
현업 개발자들도 불편해합니다ㅋㅋ 그래서 null이랑 undefined를 묶어서 쓰는 함수들이 요즘 많이 쓰이고 있습니다.

비슷한것 : c나 몇몇 언어에선 초기화를 안해주면 기본적으로 더미값이라고 쓰레기 값이 들어감.

오 prototype이 붙어있으면 직접 제가 만든 배열에 붙여서 쓰네요 내가만든배열.map()
아니면 Array.함수() 이렇게 쓰고
array라는 함수가 자체적으로 가지고있는 기능은 prototype을 의미하는거일까요?
wrapper, this등 여러 개념이 필요하니 스터디를 통해서 공부해보는 것도 좋겠네요

다른 언어에도 this가 있나요?
this, self

원시자료형 vs 자료형

  {
    let a = 10;
    let b = 10;
    a = a + 100;
    console.log(a,b)
    // 110, 10
  }
  {
    let a = {value : 10};
    let b = a;
    a.value = a.value + 45;
    console.log(a.value, b.value)
   // 55,55
  }

왜 어떤 건 값을 쓰고, 어떤 건 참조를 쓰고 할까요?

원시값은 값을 복사해서 쓴다.
true나 숫자 10같은건 크기가 엄청 작습니다.
그래서 그걸 가르키는 주소를 복사하고 저장하고 하는게 더 오래 걸립니다.

근데 객체나 배열은 안에 값이 무한히 커질수 있다.
겁나 큰걸 매번 복사하면 너무 자원이 많이 들겠죠.
그래서 그대로 복사하는게 아니라 값을 가르키는 별명이랑 주소만 저장한다.

예외 : 문자열 ^^ 도 무한히 커질수 있습니다.. 근데 얘는 왜 복사할까요?

;; 실제로 시스템이나 성능이 중요한 언어에선 문자열도 배열처럼 주소값만 저장합니다;;
이미지 파일을 문자열로 인코딩해서 넣을수도 있거든여..

근데 자바스크립트는 성능상으로는 주소값으로 쓰는게 낫지만, 개발자들이 쓰기엔 그냥 값을 복사하는게 편해서 저렇게 했습니다..

hello + world + hi 하면 편한데 이걸 객체처럼 다루면 불편하잖아요 수정을 많이 하고 싶은데

그래서 성능이 최우선순위가 아니기 때문에 한 선택입니다.

자바스크립트

자바? 마케팅적 의미
스크립트? 가벼운 스크립트 언어라고 지은건데ㅋㅋㅋ 지금은 전혀 그렇지 않고 온갖걸 다 하고있죠

==이 별로라서 =을 하나 더 붙이자ㅋㅋㅋ 다른 언어들에는 없는 표현입니다.
== 절대 쓰지마세요~

var various 변수
let 이제 뭐뭐하자~
const constant 상수

scope 중괄호로 묶여있는걸 스코프라고 생각하시면 편합니다.

var
함수 스코프
function 안에 있으면 어디 선언하든 상관이 없습니다.
for, 블록 등등

  var a = 10
  var a = 100 
  //가능

  var a = 10
  {
  var a = 100 
  }
  //중괄호를 착시라고 생각하셔야 합니다.

let, const
블록 스코프
변하지 않는 상수는 const를 많이 사용합니다~
for같은 구문 내에서 사용하는 변수는 let을 주로 사용합니다~

  let b = 100		
  {
    let b = 20; 
    console.log(b);	// 20
  }// 밖에서는 일어나는 안에서 일을 모릅니다.
  console.log(b)	//100
  let b = 100
  {
    console.log(b)	//100
  }//안에서는 자기 안에 없으면 밖에걸 찾으러 나갑니다.
  console.log(b)	//100

전역변수는 예외사항이라고 생각해주세여
지역변수만 있다고 생각하시는게 나을 수 있어요

전역변수도 전역스코프안에 있는 변수다 라고 생각하시는게 나으실겁니다.

보통은 {} 블록을 아무 의미 없이 잘 안쓰긴 합니다. if문 for문 while문에 많이 쓰이겠죠.

블록스코프는 아무데나 붙여넣어도 ㄱㅊㄱㅊ
함수스코프는 아무데나 붙여넣으면 이름 겹치나?? 이러고 사람이 봐야하는게 불편할 수 있다.

var 업데이트 O, 재선언 O
let 업데이트 O, 재선언 X
const 업데이트 X, 재선언 X

const

const c = {value:10}

c.value = 20;
console.log(c.value)

const arr = [1,2,3];
arr.push('hello');

arr = [1,2,3,'hello','바보'] //이건 안됩니다.

자바스크립트 : 저는 주소값은 드렸습니다ㅋㅋ 딴 건 책임안져용
문지기 : 저는 문을 지키라고 고용하셧자나여ㅎㅎ 강도가 창문으로 들어온건 제 책임 아님ㅋㅋ

다른 언어에서는 const가 저렇게 양아치는 아닙니다..ㅎㅎ

const는 정말 기본데이터 타입 상수만 고정가능하고 객체는 안된다고 이해하시면 됩니다.

메모리 상에서 참조하는 주소를 고정할 수 있어서 사용할거에요.

const를 써도 되는 상황이면 const를 쓰는게 좋습니다.
저는 const로 해놓고 갑자기 재선언 해야하는 경우 생겨서 에러가 나면 let으로 바꿉니다
var 같은 경우 실무에서 무의식적으로 선언한 변수를 또 선언해도 에러처리가 안돼서 많이 기피합니다ㅠㅠ

호이스팅부터 녹화강의 보기

0개의 댓글