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

3주차

 강의만 간신히 들었다.

Day 11

테스트 주도 개발, React TDD 를 통한 간단한 앱 생성 및 배포

강의요약

• TDD

  • 실제 코드를 작성하지 전에 테스트 코드를 작성하고, 테스트 코드를 패스 할 수 있는 실제 코드를 작성하는 것.

    • 그런데 여기까지 들으면 원래 그렇게 하지 않나? 라는 생각이 들었는데. 그것과는 별도같다.

• React Testing Library

  • DOM testing library이라는 DOM Node를 테스트하기 위한 솔루션 위에 react를 위한 테스트를 하는 api를 추가한 것이 React Testing Library.

• Jest

  • 페이스북이 만들어낸 테스팅 프레임 워크. 최소한의 설정으로 동작, Test Case 를 만들어서 코드가 잘 작동하는지 확인한다. (unit단위 테스트를 위해 진행)

• Prettier

  • 들여쓰기 값, 따옴표의 종류 등을 정리해서 보기 좋게 해주는 코드 포맷터

• ESLint

  • 개발자들이 규칙성을 갖고 코드를 깔끔하게 작성할 수 있도록 도와주는 라이브러리. 문법 오류를 알려주고, 코드 작성에 가이드를 제시한다.
    

    ---

     

    Day 12

    Next.js 와 TypeScript, 리액트 version 18

    강의요약

    • Next.js

      • React의 서버사이드 렌더링을 쉽게 구현할 수 있게하는 프레임워크이며, 라우팅 기능을 쉽게 만들어준다.

      • 리액트는 SPA 이기 떄문에 클라이언트 서버 렌더링(빈 html을 가져와 js 파일을 해석하며 화면 구성)에는 편리하지만, 빈 html을 가져오는 방식 때문에 SEO 등이 좋지 못한데, next js가 pre-rendering을 통해 미리 렌더링한 완성된 html을 가져와 이 문제를 보완한다.

    • TypsScript

      • 자바스크립트에 타입을 부여한 언어. (자바스크립트의 확정 언어)

      • 브라우저에서 실행하려면 js와 달리 변환(컴파일) 이 필요하다.

      • 등장배경

        • js는 원래 클라이언측 언어였는데, Node.js의 개발로 서버측에서도 활용하게 되면서 코드의 유지, 관리, 재사용을 용이하게 하기 위해 ts가 만들어지게 되었다. 타입 검사, 컴파일 오류 검사 등의 기능 또한 보완하였다.

      • 타입 종류

        • string, number, booleadn, null, undefined, symbold 이외에도 존재한다.

        • any : 타입실드를 아예 삭제시킴으로써 제한을 없앤다.

        • unknown : 모든 타입 사용 가능

        • Enum : 열거형, 숫자값 외에 문자열도 가능.

        • Union : 할당될 값의 타입이 확실하지 않은 경우, or 연산자를 사용하여 union 타입을 작성. 변수나 함수 매개변수가 여러 타입 중 하나를 가질 수 있음

           

        • Void : 값이 없음. 반환값이 없을 때 주로 사용된다.

        • Never :  절대로 사용 안할거라는 의미.

           

     

     

    과제

     

    • 퀴즈앱

    • 조건

      • 4지선답 문제를 제시, 유저가 선택한 문제가 정답인지 오답인지 알려준다.

        • 문제마다 카테고리가 있으며, state 메뉴에서는 카테고리를 골라 문제를 풀 수 있도록 한다.

      • quiz 메뉴로 이동 시, 카테고리 선택> 카테고리에 해당하는 문제를 시험칠 수 있다.

        • 이 경우, 문제를 푼 뒤 바로 답을 알려주지 않고, 문제를 모두 푼 뒤 결과를 채점해준다.

    진행

    • next js를 통해 프로젝트 생성

      • 라우팅 기능을 이용해 각 메뉴 페이지 생성

      • data 폴더를 생성하여 공통으로 사용될 문제의 정보를 담을 파일 생성

      • fuc 폴더를 생성하여 정답판별 등 공통으로 사용될 함수 작성

    • 각 페이지에서 화면에 그릴 요소를 정하는 것은 변수의 t/f로 최대한 단순하게 작성.

    • 시간이 없어서 최대한 단순하게 하려고 노력했다.

Day 13

리덕스, 도커를 이용한 리액트 실행, 리액트 19

나는 리덕스가 너무 어렵다. 뭔가 활용법이 와닿지 않는 것들이 유독 난해하고 이해하기 어렵게 느껴지는 것 같은데, 리덕스 또한 그런 종류다... 아마 리덕스를 쓸정도로 복잡하거나 데이터가 많이 필요한 프로젝트를 아직 안해봤고, 사실 그 이전에 데이터 관리를 할 일이 그렇게 많지 않았어서인듯.

강의요약

• 리덕스

  • js 애플리케이션을 위한 상태 관리 라이브러리

     

  • 데이터가 기존의 방식으로는 관리 불가능할 정도로 많고 복잡해졌을 때, 값을 이동하는 방식을 단순화하고 관리의 용이성을 위해 store 등을 이용해 관리한다.

    • props없이도 component간 state공유를 지원한다.

    • redux store에 state를 저장하고, 각 component들이 store에 접근하여 state를 사용한다.

       

• 도커

  • 프로그램 다운 과정을 간략하게 만들어준다.

  • 컨테이너 기반의 오픈소스 가상화 플랫폼, 생태계

• 리액트19

  • react compoiler, use() hook, actions, use client, use server, useForm status, useActionState, useOptimistic, Meta tages, React SErver Component등 비교적 신기능을 학습한다.

    • use() 라던가 Meta Tage, use Client/use Server 등 어쩌다보니 오류 고치다가 미리 써본 기능들도 있다. 알아두면 도움 될 것 같은데, 아마 까먹고있다가 다음에 필요하게되면 다시 검색해서 쓰겠지.

후기

2주차 후반부터 회사일이 뭔가... 정신없게 돌아가면서 도저히 집에 와서도 과제를 할 만한 상황이 아니었다.

본격적으로 공부하고, 본격적으로 집중했어야 할 리액트 리덕스 등 내가 어려워하는 파트였는데.

후반부 집중력이 많이 흐트러지고 과제도 간신히 한 개 한게 많이 아쉽다.

워밍업 클럽 기간이 끝나고 따로 공부해볼 예정이다.