250907 - 우아한 타입스크립트 with 리액트 1장

먼저 간단히 이 책을 읽게 된 사유를 말해보자면..

창업팀에서 원래 js 를 사용하다가 ts 로 언어를 변경했다.

 

중간에 현업에서 개발하시던 분이 잠깐 개발을 도와주셨었는데 지금까지 내가 하던건 다 가짜라는 느낌이 들었고..

동시에 디자인 패턴이나 내가 지금 개발하고 있는 것들이 맞는지 아닌지 늘 고민을 해왔어서 이번 학기에는 무작정 코드만 짜지 말고 이론 및 개발 공부를 좀 해보려고 한다.

 

내용 정리하는건 1장이라 의미가 없을 것 같아서 읽다가 헷갈리는게 나오면 찾아보고 그걸 정리해놔야겠다.

 

DOM 구조

DOM : 문서 객체 모델, The Document Object Model, HTML과 XML 문서의 프로그래밍 인터페이스

문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공해 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다.

=> HTML 을 위한 API 이자, HTML 을 탐색할 수도, HTML 구조를 바꿀 수도 있다.

 

웹 페이지는 일종의 "문서document" 이다.

문서는 웹 브라우저를 통해 내용이 해석되어 화면에 나타나거나, HTML 소스 자체로 나타나기도 한다.

동일한 문서를 사용해 이렇게 다른 형태로 나타날 수 있다.

DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다.

 

JS 로 구현한 동작들은 대부분 DOM 을 수정하기 위한 것들이다.

JS 는 브라우저가 읽고 어떤 작업을 할 수 있는 언어, DOM은 작업이 이루어지는 장소!

 

1. 뷰포트에 무엇을 렌더링할지 결정하기 위해 사용

2. 페이지의 콘텐츠, 구조, 스타일이 js 프로그램에 의해 수정되기 위해 사용

 

.getElementsByTagName, getElementById, getElementByClassName ...

 

런타임 환경

애플리케이션이 운영체제의 시스템 자원에 액세스 할 수 있도록 해주는 실행 환경

애플리케이션은 런타임 환경을 통해 프로세서에 명령을 보낼 수 있고, 시스템 리소스를 접근하고 사용한다.

 

런타임 : 어떤 프로그램이 실행되고 있는 동안의 동작

런타임 환경 : 런타임이 일어나기 위해, 시스템 자원에 액세스 할 수 있도록 해주는 실행 환경

 

웹 사이트 vs 웹 애플리케이션

웹 사이트 : 수집된 데이터 및 정보를 특정 페이지에 표시하기 위한 정적인 웹

단방향으로 정보를 제공하기 때문에 사용자와 상호작용하지 않는다.

HTML에 링크가 연결된 웹 페이지 모음으로 콘텐츠가 동적으로 업데이트되지 않는다.

 

웹 애플리케이션 : 사용자와 상호작용하는 쌍방향 소통의 웹

ex. 구글 지도 : 길을 찾기 위해 사용자가 직접 출발지와 도착지를 입력할 수 있다는 점에서 쌍방향 소통이 가능하다.

 

컴포넌트

독립된 기능을 재사용하기 위한 코드 묶음

모듈과 달리 런타임 환경에서 독립적으로 배포, 실행될 수 있는 단위

다른 컴포넌트와의 의존성을 없애야하지만, 조합 과정에서 필연적으로 의존성이 생길 수 밖에 없다.

제대로 파악하고 사용해야 변화에 대응할 수 있을 것이다.

 

결론 : 생산성과 안정성을 고민할 때 ts 는 좋은 선택지가 될 수 있다.

2장부터 본격적으로,.. 대체왜일까

내가 납득할 수 있었으면 좋겠다..