따라하며 배우는 자바스크립트 A~Z (8~10강)

따라하며 배우는 리액트 A-Z (1~6강)

Day 6 (Iterator, Generator, Design Pattern)

• 디자인 패턴

* 프로그래머가 응용 프로그램이나 시스템을 디자인할 때 일반적인 문제를 해결하는데 사용할 수 있는 공식화된 모범 사례
* 최고의 솔루션
* 재사용성
* 풍부한 표현력
* 향상된 의사소통
* 코드 리팩토링 필요x
* 코드 베이스 크기 감소

• Singleton

* 클래스의 인스턴스화를 하나의 객체로 제한하는 디자인 패턴
* 시스템 전체에서 작업을 조정할 때 정확히 하나의 객체만 필요한 경우 유용

• Factory

* 특수 함수인 팩토리 함수를 사용하여 비슷한 객체를 많이 만들 수 있는 패턴
* 비슷한 객체를 반복적으로 생성해야 하는 경우 사용
* 동일한 코드를 반복할 필요 없게 해줌

• Mediator

* 객체 그룹에 대한 중앙 권한을 제공하는 패턴
* 대표 예시 : 채팅방
* 중재자한테 먼저 채팅을 보내고 원래 보내려던 사람에게 중재자가 전달
* 정크 메세지 등을 거를 수 있음

• Observer

* event-driven 시스템을 이용하는 패턴
* 특정 subject를 관찰하는 많은 observer가 있고, 해당 subject에 변경 사항이 있을 떄,
  알림 받기를 원하기 때문에 스스로를 등록(Register)함
* 관심을 잃게 되면 등록을 취소
* 예시 : 유명 연예인을 팔로워한 대중들

• Module

* 코드를 더 작고 재사용 가능한 조각으로 분할하는 패턴
* <script type="module"></script> 로 표현 가능
* 특징
* 1. 항상 strict 모드로 실행됨
* 2. 지연 실행됨 (defer)
* 3. 인라인 모듈 스크립트도 비동기 처리할 수 있음
* 4. 외부 origin에서 스크립트를 불러오려면 Cors 헤더가 있어야 함
* 5. 증복된 스크립트는 무시됨

* 모듈 레벨의 스코프
* 모듈 안에 자신만의 스코프가 만들어져서 모듈 내부에 정의된 변수나 함수는
* 다른 스크립트에서 접근할 수 없게 됨

* 모듈은 최초 호출시 한번만 실행됨

* 스크립트 안에서 정보를 가져오기 위해서는
* import.meta를 사용해야 함

* async
* 일반 스크립트에서 async -> 외부 스크립트에만 해당
* 모듈 스크립트에서 async -> 외부, 인라인 스크립트 둘 다 해당

Day 7 (프로젝트 만들기)

• StopWatch App

// 지정된 timeout ms가 지날 때마다 handler를 실행해주는 함수
setInterval(handler, timeout)
// setInterval에서 실행한 내용을 reset시키는 함수
clearInterval()

• Todo App

// child 요소를 맨 앞으로 넣어주는 함수
prepend() 

• Spreadsheet App

   

// csv 파일을 다운로드할 수 있는 버튼을 만드는 방법
const csvObj = new Blob([csv]);
const csvUrl = URL.createObjectURL(csvObj);

const a = document.createElement("a");
a.href = csvUrl;
a.download = "Spreadsheet File Name.csv";
a.click();

백한테 파일 형태로 요청을 보낼 때만 써봤던 Blob을 이용해서 파일 다운로드 버튼을 만들어보다니 신기했다.

Day 8 (중간 점검)

라이브러리를 잘 활용하는 것도 실력이라고 하신 점이 기억에 남았습니다.

너무 어려운 기능이 있으면 막막해서 라이브러리를 써볼까 하다가도 과연 개발자로써 직접 만들지 않고 이미 있는 것을 가져다 사용하는 것이 옳은 걸까라는 생각을 많이 했었는데, 이 부분을 확실하게 꼬집어주시면서 해결책을 주셔서 좋았습니다.

코치 님의 말씀을 들으면서 라이브러리 사용을 두려워하지 말고 적극적으로 활용하는 개발자가 되어야겠다고 생각했습니다.

그리고 third party api라는 단어를 잘 모르겠어서 찾아봤는데, 기업들이 이윤 창출을 목적으로 개발한 API라는 것을 알게 되었습니다. 예를 들어 구글을 통해 로그인, 구글맵 등이 third party api에 해당합니다. 예시로 든 두 기능은 프로젝트를 개발할 때 사용해봤던 api였는데도 불구하고 정확한 용어를 몰랐다는 점이 부끄러웠습니다. 앞으로 잘 기억해둬야겠습니다.

Day 9 (리액트 기본 및 Todo 앱 만들기)

React는 UI를 만들기 위한 JS 라이브러리 즉, Renders UI and responds/reacts to events

• SPA

SPA : Single Page Application

사용자가 버튼을 클릭했을 때 다른 페이지를 보여주는 것이 아니라
한 페이지 내에서 어떤 건 숨기고 어떤 건 보여주면서 동작하는 방식

성능 개선 부분이 너무 어려워서 코드를 따라치는 수준으로 겨우 들었다.. 추가로 공부를 더 하면서 완전히 내 것으로 만들어야겠다.

Day 10 (리액트로 Netflix 만들기)

• 강의를 보면서 더 공부하고 싶었던 내용들

* Styled Component
* Modal
* ReactRouter
* useLocation
* useDebounce
* useParams

TMDB api는 처음 사용해봤는데 넷플릭스, 디즈니 플러스 등 영화 정보가 필요한 앱을 만들때 굉장히 유용할 것 같다.

여러 훅을 사용해 볼 수 있어서 좋았지만 한번에 이해하기는 힘든 부분이라 더 공부가 필요할 것 같다.

• Styled Component 내용 정리 및 개인적인 장단점 정리

* CSS-in-JS
JS 코드 내에서 잘 스타일링 된 컴포넌트를 직접 만들어서 가져다가 쓰는 방식

* 장점
- css 파일을 왔다 갔다 하지 않고 사용할 수 있다.


* 단점
- JS파일 내에서 동작하기 때문에 수정하고 빌드할 때마다 재 컴파일 되어서 성능이 안좋음
- 스타일링과 컴포넌트를 오가며 작성해야 하는 불편함이 있음
- 컴포넌트만 봤을 때 이게 stlyed된 컴포넌트 인지 그냥 컴포넌트인지 구분할 방법이 없음

일주일 회고

저번 주는 약과다 싶을 정도로 많이 바쁜 일주일이었다. 그래도 이렇게 무엇인가에 열중하는 경험은 몸이 피곤하더라도 기분은 좋다. 다음 주가 벌써 마지막 주라니.. 시간이 정말 빠르다. 마지막 주까지 힘내서 강의도 완주하고 과제도 잘 만들어야겠다.

저번 주 회고 때 너무 많은 내용을 담은 것 같아서 아쉽다고 했었는데 확실히 저번 주 보다는 꼭 기억하고 싶은 내용들만 적어서 그런지 간략하고 가독성 있게 쓴 것 같아서 만족한다.

강의 출처

강의 주소(JS) : https://www.inflearn.com/course/따라하며-배우는-자바스크립트/

강의 주소(React) : https://www.inflearn.com/course/따라하는-리액트/

코치님 성함 : John Ahn