좀 더 갓벽한 스터디를 만들기 위하여.. - (1) 스터디 전 boilerplate Docs 읽읽

모른다는 사실을 인정할 때 비로소 성장할 수 있다

다음주부터 매주 수요일 5주 동안 프로그래머스에서 하는 자바스크립트 스터디를 신청해 놓은 상태..

스터디 시간을 좀 더 알차게 쓰기 위해 미리 사전지식을 공부해 두려고 한다!!

스터디모집 글에서 이정도는 아는 상태에서 스터디에 참여하면 좋겠다라고 제공한 문서 링크들이 몇개 있는데, 한번 열어보니 아예 모른다곤 할 수 없지만 또 빠삭하게 아냐고 하면 확인이 좀 필요할 수 있을 것 같아서 이참에 제대로 문서들을 읽어보려고 한다.

오늘은 그 중에서 MDN에서 정리한 자바스크립트 첫걸음과 자바스크립트 재입문하기를 읽어보았다.

근데 생각보다 내가 몰랐던 자바스크립트의 배경 지식들을 많이 줍줍할 수 있었다.. 읽기를 잘했어 ㅎ

자바스크립트 첫걸음

이 문서는 자바스크립트를 처음 시작할 때 필요한 HTML, CSS 지식부터 자바스크립트라는 언어의 탄생부터 문제를 해결할 때 활용하는 방법 등 까지 전반적으로 넓고 얕게 훑어주는 느낌이었다.

그 중에 내가 정확히 몰랐던 몇가지 사실들, 이참에 정리해 두고 싶은 것들을 아래에 무작위로 적으면서 한번더 되짚어 볼 생각이니 관심 없으신 분들은 그냥 직접 문서에 들어가서 읽어보는 것을 추천한다 :P (아니 사실 이것도 몰랐나 싶은 게 많아서 ㅎㅎ 부끄러워서 아무도 안읽었으면 좋겠는 건 비밀.)

A. 몰랐던 HTML 편, (1가지)

📌 Img 태그에 대한 몰랐던 진실

1. 내용을 갖지 않는 빈 요소
2. 닫는 태그는 원래 없다. 효과를 주기 위해 콘텐츠를 감싸는 것이 아니라 이 요소의 목적은 이미지가 나타날 위치에 이미지를 끼워넣는 것.
3. alt(alternative) 속성 : 시각 장애인은 스크린리더를 사용한다. 무언가 잘못돼 이미지를 표시할 수 없는 경우에 해당 속성으로 대신 표시할 수 있다. (-> 알긴 했으나 이 사실은 뭔가 볼 수 없는 제한을 위한 사람들을 위해 존재하는 속성이라는 점에서 꼭 기억하고 싶어서 기록..) 충분한 정보를 제공해야 한다.

ex) 예를 들어 Firefox 로고에 대해서는 "파이어폭스 로고: 지구를 둘러싼 타오르는 여우” 라고 할 만큼 자세할 필요가 있음

B. 몰랐던 CSS 편, (7가지)

📌 + (adjacent sibling combinator)

HTML의 동일한 계층 구조 수준에서 특정 요소 바로 다음에 오는 요소의 스타일을 지정할 때 선택자 사이에 +를 배치하면 된다.

📌 Cascading Style Sheet

스타일 시트는 Cascading Style Sheet라는 이름처럼 계단식이어서 더 나중에 정의된 선언대로 스타일이 적용되지만, class 선택자의 경우 요소 선택자보다 더 구체적이거나 우선순위가 높은 것이므로 class 선언으로 스타일이 적용된다.

📌 CSS 동작 단계

1. 브라우저가 HTML 을 로드한다.
2. HTML을 DOM으로 변환한다 (컴퓨터 메모리의 문서)
3. 브라우저가 포함된 이미지와 비디오 같은 HTML 문서에 연결된 대부분 리소스와 연결된 CSS를 가져온다.
4. 가져온 CSS 구문을 분석하고 선택자 유형 별로 다른 규칙을 다른 buckets으로 정렬한다. 선택자 기반으로 DOM의 어느 노드에 어떤 규칙을 적용할지 정하고 필요에 따라 스타일 첨부한다. (Render Tree)

• 브라우저가 이해하지 못하는 CSS 선언의 경우 무시되고 오류 발생하지 않는다.
• 구형 브라우저는 calc()를 지원하지 않는다고 해도 width를 픽셀단위로 지정하면 구형과 신형 모두 대안을 제공할 수 있다.
  

5. Render Tree는 규칙 적용 후 표시되어야 할 구조로 배치된다.
6. 화면에 표시 (painting)

📌 상속 제어하기

모든 CSS 속성에 상속에 대한 제어를 허용한다.

• inherit : 부모 요소의 속성 값과 동일하게 설정
• initial : 브라우저의 기본 스타일 시트에서 설정한 것과 동일하게 설정
• unset : 상속되면 inherit된 것처럼, 그렇지 않으면 initial 처럼 작동

📌 CSS 레이아웃

이부분에서 평소에 약간 헷갈리던 것이 있었는데 이번 기회에 잡아버렸다.

• block : 요소 집합이 상대 요소 바로 아래 나타나는 것 ↔ inline

• 요소가 배치되는 방식을 변경하는 메서드 : display, floats, position, 테이블 레이아웃, 다단 레이아웃

  • display:
    • flex : 일차원 레이아웃
      • grid : 이차원 레이아웃
  • floats
  • position :
    - absolute : 절대 포지셔닝 (블록 내에서 위치 절대적으로 설정)
    • fixed : 고정 포지셔닝 (뷰포트 기준으로 위치 설정)
    • stick : 흡착 포지셔닝 (뷰포트 기준에서 우리가 정의한 간격 띄우기 지점에 도달하기 전까진 normal flow 상에서 스크롤 되지만 그 지점에서 마치 position: fixed 처럼 철썩 붙는다. 그래서 스티키~)
  • 테이블 레이아웃 : display를 table / table-row / table-cell / table-caption 등으로 적절히 배치해서 사용하면 맟피 테이블같은 정돈된 레이아웃을 표현할 수 있다.
  • 다단 레이아웃 :
    ex) column-width: 200px

드디어, Javascript 첫걸음

API : 개발자가 직접 구현하기는 어렵거나 불가능한 기능들을 미리 만들어서 제공하는 것

자바스크립트는 인터프리터를 사용하는 프로그래밍 언어이다. 웹 브라우저는 JS를 원문 텍스트 형식으로 받아서 실행한다. 기술적으로 따지면 JIT 컴파일 기술로 성능을 향상하긴 하지만 런타임에 일어나기 때문에 여전히 JS는 인터프리터 언어로 분류된다.

서버 사이드 코드는 서버에서 새로운 콘텐츠를 생성 (데이터베이스에서 데이터를 가져오는 등) 하고, 클라이언트 사이드는 클라이언트의 브라우저 내에서 새로운 콘텐츠를 생성 (새로운 HTML 표를 생성하고 서버에서 받아온 데이터로 채운 후, 사용자가 보고 있는 페이지에 표시)한다.

스크립트 중단 문제

해결할 수 있는 기능에는 async와 defer이 있다. async와 defer 모두, 브라우저가 페이지의 다른 내용(DOM 등등)을 불러오는 동안 스크립트를 별도 스레드에서 불러온다. 덕분에 스크립트를 가져오는 동안 페이지 로딩이 중단되지 않는다.

async 특성을 지정한 스크립트는 다운로드가 끝나는 즉시 실행한다. 실행은 현재 페이지 렌더링을 중단하며, 싫행 순서는 보장되지 않는다. defer 특성을 지정한 스크립트는 순서를 유지한 채로 가져오며 모든 콘텐츠를 다 불러온 이후에 실행한다. 의존성이 없는 스크립트를 불러온 즉시 실행하려면 async를 사용하고 반대의 경우이거나 DOM 로딩이 필요한 스크립트는 defer을 사용한다. (이 때는 원하는 순서에 맞춰서

이 문서를 다 읽었다면 "자바스크립트 재입문하기"로 넘어갈 차례다.

이 Docs 부터는 좀 더 자바스크립트에 집중해서 내부적으로 어떻게 구현되어 있고 이를 이해시키기 위해 꽤 자세하게 설명해 주고 있어서 정말 읽어보길 잘했다는 생각이 들었다. 하지만 아무래도 개념을 풀어서 정리해 놓은 글이다 보니 한 번 읽어서는 놓치는 부분이 좀 있을 것 같아서 몇 번 더 읽어볼 생각이다.