14일차
TIL을 쓰기 시작한지 벌써 2주나 흘렀다는게 신기하다😶 정신없이 한주를 보낸 것 같은데, 이렇게 차근차근 쌓으며 3개월뒤의 나와 6개월뒤의 나를 조금이나마 기대를 해본다.
공부할 목록
- News Viewer 완성하기 (진행중)
- CSS 새로 알게된 내용 정리
- 부족한 JS 개념 재공부
- 전역관리 추가 공부 (자료는 많이 찾아봤지만 proxy를 만들고 get.set 하는 등 이해X)
새로 알게 된 내용
자바스크립트의 발전과 컴포넌트
- 자바스크립트가 발전하며 브라우저단에서는 렌더링을 하고, 서버에서는
REST API,GraphQL같이 브라우저 렌더링에 필요한 데이터만 제공하는 형태로 변화 - 즉, 직접적으로 DOM을 다루는 것은 감소하고 상태(state)를 기준으로 DOM을 렌더링하는 형태로 발전
(이 과정에서 React, Angular, Vue와 같은 프레임워크,라이브러리가 탄생) - 이러한 과정속에서
Client-Side Rendering과상태관리라는 개념이 생기게 됨.
(Redux,VueX와 같은 상태관리 라이브러리(프레임워크)가 탄생)
전역관리시스템
- Vue, React와 같은 프레임워크의 주된 목적 중 하나가 상태를 기반으로 DOM을 렌더링 하는 것이다.
Observer Pattern- 객체의 상태 변화를 관찰하는 관찰자(Observe)의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 Observer에게 통지하도록 하는 디자인 패턴(publish/subscriber 모델)
Proxy- Proxy객체는 기본적인 동작의 새로운 행동을 정의할 때 사용
- 객체에 수행되는 동작을 가로챌 수 있고 커스터마이징도 할 수 있다.
- ES6에서는 모든 트랩에 대하여 포워딩을 도와주는 Reflect이라는 객체와 취소를 할 수 있는 Revocable proxy가 추가되었다.
서버 API와 Sever cache
- 프론트엔드에서 일어나는 서버 API로부터 데이터를 받아 렌더링하는 과정
- 데이터를 불러온다(비동기)
- 데이터를 호출한 컴포넌트 state로 정의한다.
- 이 state를 필요한 컴포넌트의 props로 전달한다.
- 문제점
- 1번: 언제 불러오는가?
- 2번: 어디서? 어느 컴포넌트에서 state로 정의하는가?
- 불필요한 네트워크 비용을 줄이기 위해 필요한 시점에 데이터를 불러와야한다. - 즉, 데이터를 필요로하는 컴포넌트에서 데이터를 호출하는 것이 좋다.
- 단, API응답구조와 컴포넌트 트리가 일치하리라는 보장은 없다.
비동기서버통신
-
Axios: Promise기반, Node.js에서도 사용이 가능, 구형브라우저를 지원.
import axios from 'axios' function fetchMovies() { axios .get('http://www.omdbapi.com/?apikey=7035c60c&s=frozen'). .then(response => console.log(response) } fetchMovies() -
fetch API : 가장 최신, Promise기반, 브라우저에서 기본적으로 제공.
fetch("https://jsonplaceholder.typicode.com/posts", option) .then(res => res.text()) .then(text => console.log(text)); -
Ajax
- 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법
- 최근에는 XML보다 JSON포맷을 이용해 데이터를 주고 받음.
하루를 마무리하며
오늘은 아침부터 하루 종일 News Viewer과제를 완성하는 것을 목표로 진행을 했지만, 결과가 나오지 못했다..😭 개발자는 에러와의 싸움이라고 들은 것 같은데, 하나를 해결하면 또다른 에러가 나고 공부를 시작한 후 가장 지치는 날인것 같다
아직은 과제에 나온 미션하나하나가 새롭고 이해하고 실제로 코드로 구현해보는데 많은 시간이 걸릴 것 같아 부족한 부분이 많구나 라는 생각이 드는 날이다.
그래도 첫번째 과제를 진행하기 전과 비교를 했을 때 자바스크립트를 가지고 동적으로 요소를 추가하는것이 조금은 발전하고 있다는 것에 위안을 얻는다🤗
0seo