[인프런 워밍업 스터디 클럽 3기 FE] 2주차 발자국

2025-03-16T13:31:28.637Z

바다다다

수강강의1: 따라하며 배우는 자바스크립트 A-Z
수강강의2: 따라하며 배우는 리액트 A-Z[19버전 반영]
Tip: 워밍업 스터디 클럽을 참여하게 되면 [할인쿠폰]으로 강의를 할인 된 가격에 수강할 수 있다!

2주차 강의 수강

2주차를 되돌아 보며..

이번주에는 지난주 Javascript강의를 마무리하고 드디어 React에 대한 학습에 진입하게 되었다.

Javascript후반부 강의에서는 주로 디자인 패턴, Iterator, Generator에 대해 알아가고 마지막으로 Todo app, spread sheet 등을 따라 만들어 보면서 Javascript문법에 대해 조금 더 익숙해지고 복습하는 시간을 가지었다.

React는 초반에 설치와 프로젝트 환경설정을 시작으로 처음부터 앱을 따라 만들어 보면서 React의 구조에 대해 알아보았다. TODO앱과 Netflix따라 만들기 강의를 따라서 코딩을 진행을 하였지만 환경설정이나 알수없는 오류등이 발생해서 바로 미션 과제를 중점으로 학습을 진행하였다.

강의에서 언급한 이론을 실제 미션 과제에서 실습으로 결과물을 얻을 수 있어서 뿌듯했다. 지난주 과제에 비해 난이도가 많이 높아져서 진도를 따라잡기에 많이 버거웠던것도 사실이다. (특히 직장인이라면...More and more...hard..)

강의 내용을 다시 정리해보며..

(주로 개인적으로 새롭게 알게된 것, 다시 기억해야하는 것들 위주로 정리했다)

Generator
- Generator
  - 사용자의 요구에 따라 다른 시간 간격으로 여러 값을 반환할 수 있음
  - 일반 함수 → 한번 실행으로 끝까지 실행됨
    generator 함수 → 일시적으로 정지될 수도 있고, 다시 시작할 수도 있음
  - function* sayNumbers() {...} 별표로 generator함수 생성
  - yield 함수를 정지시킴 → 일반함수에서 return과 동일
```
function* sayNumbers(){
  yield 1;
  yield 2;
  yield 3;
}

const number = sayNumbers()

console.log(number.next()) // {value:1, done:false}
console.log(number.next()) // {value:2, done:false}
console.log(number.next()) // {value:3, done:false}
console.log(number.next()) // {value:undefined, done:true}
```
  - lazy evaluation에 활용가능
    계산의 결과값이 필요할 때까지 계산을 늦춰서 필요한 데이터를 필요한 순간에 생성
Singleton Pattern
- 클래스의 인스턴스화를 하나의 객체로 제한하는 디자인 패턴. 시스템 전체에서 작업을 조정하는 데 정확히 하나의 객체가 필요한 경우에 유용하다
- 클래스가 존재하지 않는 경우 클래스의 새 인스턴스를 생성하는 메서드로 클래스를 생성하여 구현할 수 있음. 인스턴스가 이미 존재하는 경우 해당 개체에 대한 참조를 반환
⇒ 객체는 1개만 만들고 그것을 계속 재사용하는 것 (값이 한곳에서 바뀌면 전역으로 바뀜)
Factory Pattern
- 특수 함수인 팩토리 함수를 사용하여 비슷한 객체를 많이 만들 수 있음
⇒ 비슷한 객체를 반복적으로 생성해야하는 경우 사용
Mediator Pattern (중재자 패턴)
- 객체 그룹에 대한 중앙 권한을 제공한다. (예: 채팅방)
Observer Pattern
- event-driven시스템을 이용하는 것 (예: facebook알림)
- topic에 대해 register하고 publisher-subscriber구조를 가지게 됨
Module Pattern
- 코드를 더 작고 재사용 가능한 조각으로 분할하는 것을 도와준다
- js코드를 작성하고 export지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근가능하게 된다
- import로 외부 모듈을 가져올 수 있음
- 모듈은 특수한 키워드나 기능과 함께 사용되므로 HTML에서 script태그를 넣을 때 type='module' 속성을 추가해줘야 한다
  - 항상 strict모드로 실행된다
  - 지연 실행 된다
  - 인라인 모듈 스크립트도 비동기 처리할 수 있다
  - 외부 orgin에서 스크립트를 불러오려면 CORS헤더가 있어야 한다
  - 중복된 스크립트는 무시한다 (최초 호출될 때 한번만 실행)
- 구형브라우저에서는 <script nomodule> ... </scirpt> 로 module을 지원하지 않을 경우 예외처리를 할 수 있음
리액트는 프레임워크가 아니라 라이브러리
- React는 라이브러리, Vue, Angular는 프레임워크
  - 왜 라이브러리? 리액트는 전적으로 UI를 렌더링하는 것에 관여하기 때문
  - 상태관리, 라우팅, 테스트 등등을 위해 다른 라이브러리가 추가적으로 필요함 (vue, angular는 이런 것들이 이미 포함되어 있음)
- 프레임워크: 어떠한 앱을 만들기위해 필요한 대부분의 것을 가지고 있는 것
- 라이브러리: 어떠한 특정 기능을 모듈화 해놓은 것
- 프레임워크는 라이브러리의 집합
리액트 컴포넌트 - Component
- 리액트 앱을 이루는 최소한의 단위, 여러 컴포넌트를 조합하여 하나의 페이지가 완성되는 것
- 클래스형 컴포너트 - class component
- 함수형 컴포넌트 - funcional component
브라우저가 그려지는 원리와 가상돔
- 리액트의 주요 특징 중 하나가 가상돔을 사용하는 것이다
- 웹 페이지 빌드 과정 (CRP) - Critical Render Path
  - browser가 서버에서 페이지에 대한 HTML문서를 응답으로 받고, 해당 문서를 읽는다. 그 후 스타일을 입히고 뷰포트에 표시하게 된다
  - DOM tree생성 → Render Tree생성(화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함) → Layout(reflow) → Paint(화면에 그리기)
  - 화면에서 DOM에 변화가 생기면 Render Tree부터 다시 랜더링 해야한다는 문제점!! → 비효율적
    → 가상돔: 실제 DOM을 메모리에 복사해준 것
    데이터가 바뀌면 가상돔에 랜더링되고 이전에 생긴 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용 시킴. 바뀐 부분을 찾는 과정을 diffing이라고 부르고, 바뀐 부분만 실제 돔에 적용시켜주는 것을 재조정(reconciliation)이라 한다.

강의 내용을 들으면서 아쉬웠던 점..

강의 내용에 대해서 불만족 스러운 부분은 없다! 너무 알차게 구현되어진 강의이고 다만 진도에 따라서 많은 양의 강의를 한꺼번에 들어야 하다보니 모두 소화하기에는 어려웠다.

강의 외에 미션과제도 수행해야 하다 보니 시간적으로 지난주에 비해 많이 부족했다. 아래 미션과제에서도 볼 수 있겠지만, 지난주와 달리 기본적인 모든 기능을 구현하지는 못했다.(특히! 디즈니플러스 클론코딩ㅜ)

2주차 미션 완료

Javascript미션은 지난주에 이어서 그나마 완성하기 했으나,

React미션은 초보자의 입장에서 강의내용 수준으로 따라가기에는 어려웠다.

처음이다보니 모든게 낯설게 느껴졌고, 그래도 다른 강의 및 자료를 통해 많은 학습을 할 수 있었다.

특히 컴포넌트를 나누는 기준과 React에서 컴포넌트를 조합해서 웹 페이지를 구성한다는 것을 미션 실습과제를 통해 좀 더 쉽게 깨달을 수 있었던 것 같다.

Javascript - Mission6: 비밀번호 생성기

Demo: https://rim0703.github.io/React-study/Javascript/6-pw-generator/
Source Code: https://github.com/rim0703/React-study/tree/main/Javascript/6-pw-generator

Javascript - Mission7: 타이핑 테스트

Demo: https://rim0703.github.io/React-study/Javascript/7-typing-test/
Source Code: https://github.com/rim0703/React-study/tree/main/Javascript/7-typing-test

React - Mission1: 예산 계산기

Demo: https://gentle-starburst-b5ca45.netlify.app/
Source Code: https://github.com/rim0703/React-study/tree/react/mission1

React - Mission2: 디즈니 플러스 앱

Demo: https://disney-plus-clone-mission2.netlify.app/
Source Code: https://github.com/rim0703/React-study/tree/react/mission2
참고자료: https://www.youtube.com/watch?v=3NHYl0Lo74A

이건 할말이 많은데.. 사실 아래 데모처럼 메인화면만 완성했다. 맨땅에서 시작하기에는 너무 막막해보여서 유튜브에 클론코딩 영상이 있어서 따라 만들어보았다.

추가로 메인 로그인 화면, 영화 상세 내용 팝업화면이 추가로 구현일 필요하다.(추후 시간이 있으면 보완할 예정!)

마지막으로 2주차 회고

이번 한주간은 너무 정신없이 지난거 같다. 강의, 미션과제 외에 처음으로 접하는 React 내용에 설정이나 오류 등에 대해 검색하면 이슈 attack을 하기 위해 많이 시간이 필요했다. 이런 부분은 점차 많이 연습해보면 적응하지 않을까 싶다.

진도표에 따르면 이제 3일만 더 수강하면 강의내용과 미션은 끝나는 일정이다. 최대한 남은 시간에 React강의를 끝내고 미션 과제 구현에 집중할 계획이다. 단기간에 많은 시간과 노력을 쏟아올린 만큼 프론트엔드에서 React에 대한 부담감(?) 두려운 마음을 조금이나마 떨쳐보고자 한다.

강의수강이 끝나면 지금까지 구현한 미션 과제에 대해 보완할 부분이 있는지, 그리고 지금까지 강의를 들으면서 노션에 정리해두었던 내용을 다시 한번 복습할 계획이다.

마지막 남은 기간도 화이팅 해보자!!!

<끝>

프론트엔드 워밍업 스터디 3기 프론트엔드 2주차 발자국 Javascript HTML CSS React

답변 0