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

강의 수강

1) 일주일 간 학습한 내용

이번주도 마찬가지로 이전에 접했던 개념이지만 다시 봐도 헷갈렸던 개념, 몰랐던 개념 위주로 정리해보았다.

symbol()

유니크한 식별자를 만들기위해 사용함.
객체를 for in으로 추출할때 symbol 식별자는 통과하지 않음.

Generator 함수
사용자의 요구에 따라 다른 시간 간격으로 여러 값을 반환


function* generatorFunc(){
	yield 1; //return 1과 같은 의미
	yield 2;
	yield 3;
}

const number = generatorFunc();
console.log(number.next()); //1
console.log(number.next()); //2
console.log(number.next()); //3

//아래 2개는 같은 의미
const generator = generatorFuncion();
const generator = generator[Symbol.iterator]();

디자인 패턴

Singletone design pattern
각각의 다른 객체를 하나의 객체로 제한하는 패턴
Factory design pattern
비슷한 객체를 반복적으로 만들어야하는 상황에 이용하는 패턴
Mediator Pattern
채팅방 예시) 채팅방에 입장후 메시지를 보낼때 중재자를 통해서 메세지를 보내는 패턴
Observer Pattern
subject를 관찰하는 observer들이 있을 때 관심있는 주제를 구독하고 취소하는
Publisher(게시자)-Subscriber(구독자) 관계 패턴
Module Pattern
코드를 최대한 분할하여 모듈화하는 패턴

프로젝트 개발
setInterval(startTimer,10); 1000ms 가 1초이면 10ms 간격으로 startTimer 함수 실행

<React>

프레임워크 vs 라이브러리

프레임워크 : 앱을 만들기 위해 필요한 대부분의 라이브러리를 포함하고 있음.
라이브러리 : 특정 기능을 모듈화 해놓은 것.
프레임워크는 라이브러리를 포함하고 우리가 작성한 코드를 호출함. 또한 코드는 기능 구현을 위해 라이브러리를 호출하는 관계를 가짐.

Node.js

웹 브라우저 환경이 아닌 곳에서도 자바스크립트로 연산가능하게 하는 자바스크립트 런타임.
리액트 설치 시 필요한 이유: 프로젝트를 개발하는데 필요한 도구들이 Node.js를 사용하기 때문
ex) 주요 개발 도구
- 바벨 : 최신 js 문법을 지원하지 않는 브라우저에서도 최신 js문법이 돌아갈수 있도록 변환해주는 라이브러리
- 웹팩 : 모듈화된 코드를 하나의 js코드로 압축하는 라이브러리
- npx: 노드 패키지 실행을 도와주는 도구

가상 돔 virtual dom 등장 배경

웹페이지 빌드 과정에서 dom에 변화가 발생하면 render tree재성성 → layout → repaint 의 과정을 반복함.
인터렉션이 많아지면 성능상의 문제를 초래하기 때문에 실제 dom을 메모리에 복사해준 virtual dom이 등장함.
가상 돔은 브라우저 문서에 직접 접근하여 화면 요소를 수정할 수 없음.

가상 돔 virtual dom 작동방식

랜더링 이전 가상돔과 바뀐 가상 돔을 비교 → Diffing
바뀐 부분만 실제 돔에 적용시켜주는 것 → reconciliation (재조정)
재조정 과정에서 바뀐 state가 n개라면 n번 조작하는 것이 아닌 한번의 dom조작으로 변화를 반영함.
→ batch update

리액트 기본구조

webpack 은 src내 파일만 처리함.

전개 연산자

객체

const obj1 = {
	a: 'A'
};

const obj2 = {
	b: 'B'
};

const objWrap = {obj1,obj2};
console.log(objWrap)
/*{
 obj1:{
   a: 'A'
},
 obj2:{
   b: 'B'
 }
}*/

const objWrap2 = {...obj1, ...obj2};
console.log(objWrap2);
/*
{
	a: 'A',
	b: 'B'
}
*/

SPA

SPA에서 페이지 전환(브라우징)은 html5의 history api를 사용해서 가능하게 함.
history.back() : 브라우저의 뒤로가기 효과
history.go(): 특정 세션기록으로 이동하게 해주는 비동기 메서드. 1을 넣으면 바로 앞페이지/-1을 넣으면 바로 뒤페이지로 이동
history.pushState(): 주어진 데이터를 세션 스택에 넣음.

React Hooks

class없이 state를 사용할수 있는 기능

TailWindCSS

html안에서 css스타일을 만들게 해주는 css 프레임워크
빠른 스타일링이 가능하며 class혹은 id명을 작성하지 않아도 됨.

리액트 불변성

배열과 객체 같은 참조 타입은 불변성을 가지고 있지 않음.(mutable)
리액트에서 화면을 업데이트할때마다 변경된 부분을 확인해야하므로 불변성을 지켜줘야함.
→ spread 연산자, map, filter, slice, reduce 활용(splice, push 는 원본 데이터 변경함.)

useDebounce

debounce란 검색 입력에 입력결과가 나타날때까지 지연이 있는 기능
위 기능을 사용하지 않으면 입력한 모든 문자를 처리해서 성능이 저하됨.

2) 학습 내용에 대한 회고

그동안 React로 토이 프로젝트를 하면서 겉핡기식으로만 알고 있었다는 것을 절실히 깨달았다. 이번주 강의를 수강하며 성능을 고도화시키기 위해 hooks를 만들어 사용하는 점을 배웠다. 아직 부족하지만 앞으로 사이드 프로젝트를 하면서 적용해봐야겠다.

미션

1) 미션 해결 과정

문제 현상
예산 계산기 앱을 구현하며 예상치 못한 문제가 발생했다. 예산 데이터 리스트 Lists 컴포넌트 아래 각각의 데이터를 나타내는 List 하위 컴포넌트를 구현했다. 하지만 List 컴포넌트가 화면에 보이지 않았고 에러 메시지도 없었기 때문에 당황스러웠다.
원인
List 컴포넌트를 map 함수로 표기하는 과정에서 JSX 반환코드를 {} 안에서 사용한 것이 문제였다. 이러한 경우에는 return 키워드로 반환하거나 ()로 감싸서 반환해야한다.
해결방안

//변경 전 코드
const Lists = ({ budgetData }) => {
  return (
    <div>
      {budgetData.map((data) => {
        <List key={data.id} id={data.id} title={data.title} price={data.price} />;
      })}
    </div>
  );
};

//변경 후 코드
const Lists = ({ budgetData }) => {
  return (
    <div>
      {budgetData.map((data) => (
        <List key={data.id} id={data.id} title={data.title} price={data.price} />
      ))}
    </div>
  );
};

2) 미션 해결에 대한 회고

타이핑 테스트 앱
wpm, cpm 등 각각의 기능을 계산하는 방법을 파악하는데 시간이 꽤 소요됐다. 또한, 글자를 타이핑하면서 실시간으로 맞은문자, 틀린 문자를 초록색, 빨간색으로 변경하는 방법도 고민됐었다. 다른 사람들에겐 쉬운 과제였을수 있겠지만 나에게는 생각보다 고려해야할 부분이 많았던 과제였다.

2. 예산 계산기 앱
오랜만에 리액트 앱으로 개발을 하게되어 떨리는 마음으로 과제를 시작했다. 중간점검 때 강사님께서 어느정도 관습성을 가진 코드가 좋은 코드라 했던 말이 떠올랐다. 그래서 강의에서 다뤘던 내용을 중심으로 따라가다보니 재미를 느끼며 개발을 할 수 있었다. 물론, 모방이 주가 아닌 본인만의 색깔을 가져야 한다고 하셨으니 나만의 색을 가진 코드를 짤 수 있도록 개발 역량을 쌓아야겠다.

3. 디즈니 플러스 앱
아직 구현할 기능들이 조금 남아있지만 확실히 swiper와 같이 라이브러리를 추가하면서 겪는 문제들이 많아졌다. 그러다보니 시간이 더 오래걸리는 것 같다. 그래도 끝까지 마무리하는 습관을 가져야지!👏