3주차 학습 요약

11일차 - 리액트 테스트 경험하기

'Test Driven Development' 줄여서 'TDD'라고 부르는 테스트 주도 개발에 대한 개념과 장점에 대해 알 수 있었습니다. 리액트에서 TDD를 할 수 있게 해주는 React Testing 라이브러리와 그 라이브러리와 함께 사용되는 프레임 워크인 Jest를 사용하는 방법에 대해서 배웠습니다. 그리고 TDD를 이용하여 간단한 Counter 앱을 만들고, 그 앱을 AWS의 S3를 사용하여 배포하기 위해 S3를 설정하고 파일을 업로드하여 배포하는 방법과 S3에 자동으로 앱을 배포하기 위해 Github를 설정하는 방법에 대해서도 배울 수 있었습니다.

12일차 - NextJS, 타입스크립트

NextJS에 대한 정의 및 개념과 NextJS 버전 12를 사용하여 간단한 블로그 앱을 만들어 보면서 사용법을 배울 수 있었고, NextJS 버전 13으로 간단한 게시판 앱을 만들어 보면서 버전 12에서 어떻게 바뀌었는지, 버전 13의 사용법은 어떤지에 대해서 배웠습니다. 2개의 간단한 앱을 만들 때 타입스크립트를 사용하여 진행되었는데, 타입스크립트의 자료형 등 기초도 배울 수 있었습니다. 마지막으로 NextJS에 있는 Server Action에 대한 정의와 사용법에 대해서도 배웠습니다.

13일차 - 리덕스 학습하기

리액트가 버전 18이 되면서 새로 생긴 기능들이 어떠한 이유로 생겼는지 그리고 어떻게 사용하는지에 대해 배웠습니다. 그리고 자바스크립트의 상태 관리 라이브러리인 리덕스를 사용하는 이유와 개념을 알 수 있었습니다. 타입스크립트와 함께 미들웨어 없이 리덕스로 Counter 앱을 만들어 보며 간단하게 사용법을 익힌 후, 리덕스 Hook과 리덕스 미들웨어 등을 사용하여 ToDo 앱을 추가하는 방법에 대해서도 배울 수 있었습니다. 마지막으로 리덕스 홈페이지에서 리덕스 툴킷을 사용하여 만든 Counter 앱의 템플릿을 타입스크립트 버전으로 설치 후, 그것을 이용하여 리덕스 툴킷의 사용법을 배울 수 있었습니다.

미션 해결 과정

Day10 미션 1 : 디즈니 플러스 앱

• API를 사용하여, 구글 연동 로그인을 진행하고 영화 리스트와 상세 정보를 확인하고 검색도 가능한 앱 입니다.

• 과제 영상과 전체적으로 비슷하게 만들었습니다. 모달 창 크기를 살짝 줄이고, 데이터를 불러올 때 존재하지 않는 동영상이나 이미지를 불러오게 될 때에는 동영상이나 이미지가 없다는 텍스트가 적힌 화면이 보일 수 있게 했습니다.

• 처음에는 하나하나 알아보면서 만들려고 했지만 API 사용법도, 리액트도 잘 알지 못해 만드는 것이 어려웠습니다. 그리고 시간도 부족해서 넷플릭스 강의 코드를 많이 참고하여 만들었습니다. 넷플릭스 강의 코드를 복사한 후 수정하는 방식으로 진행했습니다. 스스로 다 하고 싶었지만 그렇게 하지 못한 것이 아쉬워서 과제 제출이 끝나고 난 후에 다시 시도해 보려고 합니다.

Day10 미션 2: 포켓몬 도감 앱

• 구글 연동 로그인을 진행하고, 포켓몬 리스트와 상세 정보를 확인하고 검색도 가능한 앱 입니다.

• 포켓몬 API를 사용하여 현재 개발하고 있는 중 입니다.

Day12 미션 : 퀴즈 앱

• NextJS와 타입스크립트를 사용하여 만드는 것으로, 메뉴를 클릭하면 화면이 이동하고 답을 선택하고 제출했을 때 결과를 초록색과 빨간색으로 나타내고, 간단한 시험을 보는 앱 입니다.

• 전체적으로 비슷하게 만들었습니다. 약간의 디자인과 색을 변경했습니다.

• 전혀 모르던 NextJS와 타입스크립트를 이용하여 만들어야 해서 어려웠습니다. 타입을 지정해야 하는 것이 익숙하지 않았고, 어떤 타입으로 지정을 해줘야 할지 몰라서 막힐 때도 있었습니다. NextJS도 잘 몰라서 페이지 이동 때를 제외하고는 거의 리액트를 사용하여 만드는 것처럼 만들었습니다.

회고

리액트 과제는 전체적으로 어려워서 하나 해결하는데에도 시간이 오래걸리고 고민을 많이 했던 것 같습니다. 하지만 그렇게 진행하면서 새로운 지식을 쌓을 수 있었고 경험을 얻을 수 있어서 좋았습니다. 그리고 리액트를 어느정도 다룰 수 있다고 생각이 들면 나중에 NextJS와 타입스크립트를 공부하려고 했었습니다. 이번주 강의를 통해 간단하게 NextJS와 타입스크립트가 어떤 것인지 알 수 있게 되어 나중에 NextJS와 타입스크립트를 공부할 때 많은 도움이 될 것 같습니다.

제가 이 스터디를 신청한 이유는 제 자신에게 공부를 할 수 있도록 강제성을 주기 위해서였는데, 스터디 완주 조건이 저에게 강제성을 주어 공부를 열심히 할 수 있었고 공부하는 습관을 들일 수 있게 해주었습니다. 이거 하나만으로도 스터디를 신청한 보람이 있었습니다. 하지만 아쉬운 점은 현재 만들고 있는 포켓몬 도감 앱만 완성하면 완주 조건을 달성할 수 있는데, 만드는 것이 어려워서 내일까지 완성을 할 수 있을지 모르겠다는 점 입니다...🥲 최대한 노력해서 과제 제출 날인 내일까지 완성해서 제출하는 것이 목표입니다.

스터디를 시작한지 별로 안된 것 같은데 벌써 3주가 지나 스터디가 끝났다는 것이 믿기지가 않습니다. 3주 동안 공부를 하고 과제를 진행하는 것이 힘들긴 했지만, 좋은 경험과 공부하는 습관을 가질 수 있게 되어 많은 도움이 되었습니다. 다음에 또 스터디가 열리게 되면 참가하고 싶습니다.