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

2주차 회고

2주차에 들은 강의들을 짧게 정리해본다.  

섹션 8- 10 까지 자바스크립트 강의가 끝났다. 섹션 10이 제일 재밌었던 것 같다. 이론 강의도 좋지만 배운 이론을 이용해서 눈에 보이는 결과물이 생기는 게 제일 재밌는 것 같다.

따라하며 배우는 자바스크립트 A-Z 마무리

Generator 함수 : 비동기 프로그래밍, 메모리의 효율성, 무한 시퀀스 생성, 제어 흐름 관리

Design Pattern

• Singleton Pattern : 클래스의 인스턴스를 하나만 생성

  • 단일 객체가 필요할 때 (예: 설정 관리, 로깅)

• Factory Pattern : 객체 생성 로직을 캡슐화, 특정 인터페이스를 통해 객체 생성

  • 객체 생성 로직이 복잡하거나 변경될 수 있는 경우 (예: 다양한 유형의 UI 요소를 생성)

  • 객체의 구체적인 생성 과정이 클라이언트에 노출되지 않아야 할 때.

• Mediator Pattern : 객체 간의 상호작용 중재하는 객체를 두어 객체 간의 의존성을 줄임

  • 객체 간의 상호작용이 복잡하고, 그 관계를 단순화하고 싶을 때 (예: UI 컴포넌트 간의 이벤트 조정)

  • 여러 객체가 서로 상호작용하지만, 서로의 구체적인 클래스에 의존하지 않아야 할 때.

• Observer Pattern : 체의 상태 변화에 따라 다른 객체에 알림을 보내는 패턴

  • 데이터 변경을 여러 곳에서 반영해야 할 때 (예: 뉴스 발행 시스템)

• Module Pattern : 데이터와 메서드를 캡슐화하여 외부에서 접근할 수 없도록 하여 코드의 네임스페이스를 보호

  • 전역 변수의 오염을 피하고, 코드의 재사용성을 높이고 싶을 때.

  • 관련된 기능이나 상태를 그룹화하여 코드의 구조를 명확하게 하고 싶을 때.

따라하며 배우는 리액트 A-Z

리액트 시작. 리액트 강의를 들으면서 노트 기능을 활용해 봤는데 생각보다 좋았다. 강의를 들으면서 그때그때 해놓은 메모를 보니 복기하면서 발자국을 작성하는게 쉬워졌다.

섹션 2 / 리액트란?

섹션 2에서는 는 리액트에 대한 개념을 익힐 수 있다.

• 리액트는 프레임워크가 아닌 라이브러리

• 여러개의 컴포넌트가 모여서 하나의 페이지를 이룬다.

• 브라우저가 그려지는 원리와 가상 돔

• 리액트 앱은 웹 브라우저에서 실행되는 코드라 Node.js와 직접적인 연관은 없지만 개발하는데 필요한 주요 도구들이 Node.js를 사용한다.

섹션 3~4 / 간단한 To-Do 앱 만들며 리액트 익히기

• SPA (single page application)

   

  • 웹사이트의 모든 페이지를 하나의 페이지에 담아, 동적으로 화면을 전환

  • HTML5의 History API를 사용하여, 실제로는 페이지를 이동하지 않지만 마치 다른 페이지로 이동한 것처럼 작동

• JSX Key 속성 이해하기

  • 리액트는 가상 돔을 이용해서 바뀐 부분을 찾는다.

  • key 속성은 리스트나 컴포넌트가 렌더링될 때, 각 항목을 고유하게 식별하는 데 사용

  • key 속성으로 index를 사용하는 것은 비추천

• React Hooks

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

  • Hooks를 사용하면 소스코드가 더 깔끔해진다. useEffect로 생명주기 통합할 수 있음

• 리액트 불변성 지키기

   

  • 참조 타입에서 객체나 배열의 값이 변할 떄 원본 데이터가 변경되기에 이 원본 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있어서 프로그램 복잡도가 올라감

    리액트에서는 화면을 업데이트 할 때 불변성을 지켜서 값을 이전 값과 비교해서 변경하기 때문에 불변성을 지켜줘야함

  • 불변성 지키는 방법 : spread operator, map, filter, slice, reduce

• 리액트 죄적화 

  • 렌더링이 필요없는 컴포넌트는 memo로 감싸주기

  • useCallback 이용한 함수 최적화

  • useMemo를 이용한 결과 값 최적화

Tailwind CSS를 처음 사용해본 소감

tailwind 사용은 이번이 처음이다. 이름만 알고 나중에 써봐야지 했던 라이브러리인데 이번에 사용해 볼 수 있어서 좋았다. tailwind는 많은 유틸리티 클래스를 조합해서 사용하기 때문에 클래스 명이 길어지고 그로 인해 html이 다소 복잡해 보인다. 또한 처음 클래스명을 익히는 데 시간이 걸린다고 생각한다. 하지만 css에 익숙하다면 tailwind 클래스명은 명확한 네이밍을 가지고 있어 클래스명만 봐도 어떤 스타일이 적용되는지 쉽게 이해할 수 있다. 처음만 낯설지 익숙해지는데 어렵지는 않은 것 같다. vsCode 확장도 잘 되어있어서 Tailwind CSS IntelliSense 를 사용하면 클래스 자동완성이 되고 설명도 볼 수 있어서 확인이 편리하다.

섹션 5~6 / Netflix 앱 만들기

• React Router Dom

  • Routes : 앱에서 생성될 모든 개별 경로에 대한 컨테이너/상위 역할

  • Route : 단일 경로를 만드는 데 사용 두가지 속성을 취합

  • path는 원하는 컴포넌트의 url 경로 지정

  • element 경로에 맞게 렌더링되어야 하는 컴포넌트 지정

• React Router Dom APIs

  • 중첩라우팅, 리액트 라우터의 강력한 기능 중 하나

  • useNavigate / useParams / useLocation

• Debounce

  • 사용자가 미리 결정된 시간 동안 타이핑을 멈출 때까지 keyup이벤트의 처리를 지연 → 서버로 전송되는 api 호출 수가 줄어든다 입력된 모든 문자를 처리하면 성능이 저하되고 백엔드에 불필요한 로드가 추가될 수 있다.

 styled-components 사용

<Container>clicked</Container>

const Container = styled.div`
  background: red;
`;

이렇게 작성할 수 있다는 점이 편하다고 생각했다. 빌드 후는 모르겠지만 일단 작업할 때는 가독성이 좋다고 느꼈다. 컴포넌트 이름과 스타일이 한눈에 잘 보인다. props 활용 가능하다는 것도 좋았다. 간단한 프로젝트를 만들 때는 편하고 좋은 것 같은데 큰 프로젝트는 어떨지 모르겠다. 단점을 찾아봤는데 스타일과 컴포넌트 로직이 결합되어 분리가 어렵다는 단점이 있다고 한다.

Tailwind / Styled-components는 가볍게 사용해 봤기 때문에 각각 어떤 장점, 단점이 있는지 검색해 봤다. Tailwind, Styled-components, SCSS 등 CSS 도구들은 각기 다른 장단점을 가지고 있기 때문에 프로젝트의 방향과 요구사항에 따라 적절한 결정을 하는 것도 중요할 것 같다.

2주차 과제

이번에는 발자국이랑 과제 포스트를 분리해서 작성했다.

비밀번호 생성하기 (Post Link)

https://github.com/dpwl35/inflearn-warming-up-study/blob/main/06-password-generation/generator.js

타이핑 테스트 앱 (Post Link)

https://github.com/dpwl35/inflearn-warming-up-study/blob/main/07-typing-test/main.js

예산 계산기 앱(Post Link)

https://github.com/dpwl35/inflearn-warming-up-study/tree/main/08-budget-calculato

디즈니 플러스 앱(Post Link)

https://github.com/dpwl35/inflearn-warming-up-study/tree/main/09-disneyplus