[인프런 워밍업 클럽 0기] FE 2주차

2주차 학습 요약

(8일차는 중간 점검으로 학습할 강의가 없었습니다.)

7일차 - 프로젝트 만들기

자바스크립트만으로 Stop Watch 앱과 할 일을 추가하고 삭제하는 Todo 앱, SpeadSheet(엑셀) 앱의 기능을 구현하고, 꾸미는 방법을 배웠습니다. 앱을 만들면서 localStorage를 사용하는 방법을 새로 알 수 있었습니다.

9일차 - 리액트 기본 및 Todo 앱 만들기

리액트란 강의에서 리액트에 대한 개념과 리액트에서 사용하는 컴포넌트에 대한 개념 및 종류를 알 수 있었고, 리액트의 가장 중요한 특징인 가상돔을 알기 위해 브라우저가 렌더링하는 과정을 함께 배웠습니다. 그 외 리액트를 사용하기 위한 여러가지 환경 설정을 하는 방법을 알 수 있었습니다. Todo 앱을 만들면서 리액트의 주요 기능인 JSX와 State, Props, Hooks를 배울 수 있었고, 그 외 CSS 프레임워크 중 하나인 TailWind CSS에 대해서도 배울 수 있었습니다.

10일차 - 리액트로 Netflix 만들기

Netfilx 클론 앱을 만들면서 API를 사용하는 방법과 axios를 사용하는 방법, 커스텀 Hooks을 작성하는 방법에 대해 배울 수 있었고, Styled Component 라는 CSS 관련 라이브러리를 사용하여 꾸미는 방법과 react-router-dom을 사용하여 페이지 전환을 하는 방법을 새로 알 수 있었습니다.

미션 해결 과정

► 과제 총 합본 : https://www.inflearn.com/blogs/6988

Day2 미션 : 음식 메뉴 앱

• 각 메뉴를 클릭할 때, 메뉴에 맞는 음식 리스트를 보여주는 앱 입니다.

• 음식 메뉴가 아닌 투썸 플레이스 카페 메뉴로 변경했고, 메뉴 부분의 스타일과 전체적인 색상을 변경했습니다.

• 이미지는 투썸 플레이스 카페의 홈페이지에서 이미지 주소 복사를 통해 가져왔는데, 저작권 문제 때문에 저작권 문제가 없는 다른 이미지를 구해야하나 고민하고 있습니다. 스타일을 수정할 때 가장 시간이 오래 걸렸는데, 간격 조절이 가장 어려웠던 것 같습니다. 저번주에 막혔던 화면 크기로 인한 넘침 문제를 조금이나마 고칠 수 있게 되어, 현재 화면 크기에 따라 한줄에 나열되는 음식 아이템들의 개수가 동적으로 변경되게 했습니다. 처음에는 맥에서 진행해서 몰랐는데, 윈도우에서는 스크롤 바로 인한 밀림 현상이 있는 것을 알게 되어 스크롤 바를 항상 보이게 하는 것으로 수정했습니다.

Day3 미션 : 가위 바위 보 앱

• 컴퓨터와 진행하는 가위 바위 보 게임으로 총 10번을 진행하여 승부를 내는 앱 입니다.

• 전체적인 디자인과 색상을 변경했고, 가위, 바위, 보 대신에 아이콘을 사용하여 표현했습니다.

• 저번 주에 진행했던 것과 다르게 전체적으로 다시 꾸몄습니다. 태그 마다 간격을 설정하는 것이 가장 어려웠는데, 사용하는 맥과 윈도우의 화면 크기 차이로 인해 서로 다르게 보이는 문제가 있었고, 최대한 화면 크기와 상관없이 동일한 위치에서 보일 수 있게 개발 했습니다.

Day4 미션 : 퀴즈 앱

• 수학 연산 관련 질문이 나오고, 2~3개의 답변 중 맞는 답변을 선택하면 배경이 초록색이 되고 틀린 답변을 선택하면 배경이 빨간 색이 되는 앱 입니다.

• 맞춤법 관련 퀴즈 앱을 만들었습니다. 전체적인 디자인을 변경했고, 배경이 아닌 선택한 답변의 버튼 색이 바뀌게 했습니다. 또한 마지막에 맞은 답변의 개수를 알 수 있게 했습니다.

• 네이버의 한글날 맞춤법 테스트 사이트를 참고하여 만들었습니다. 질문 개수를 많이 만들어서 질문이 랜덤으로 나오게 하고 싶었지만 시간이 없어서 못한 것이 아쉬웠습니다. 다음에 시간이 생기면 변경해보고 싶고, 이것을 바탕으로 심리 사이트 앱을 만들어도 괜찮겠다는 생각을 하게 되었습니다.

Day5 미션 : 책 리스트 나열 앱 

• 책 이름과 저자를 입력하여 제출하면 책 리스트에 추가가 되며, 삭제할 수도 있고 추가 및 삭제가 발생할 때마다 알림이 나오는 앱 입니다.

• 전체적인 색상만 변경하고, 구조는 과제 영상과 비슷하게 만들었습니다. 또한 제출 버튼을 클릭했을 때 이름과 저자를 모두 입력하지 않으면 제출되지 않게 만들었습니다.

• 다른 과제처럼 저만의 디자인으로 변경하고 싶었지만, 시간도 부족하고 생각나는 디자인이 없어 과제 영상과 비슷하게 만든 것이 아쉬웠습니다. 다른 과제를 진행하면서 간격 조절하는 것이 익숙해진 것인지 태그들의 간격을 정하는 것이 다른 과제에 비해 수월하게 진행됐습니다.

Day9 미션 : 예산 계산기 앱

•  지출 항목과 비용을 입력하여 제출하면 리스트에 추가되고 리스트에 있는 모든 항목의 총 지출 값을 확인할 수 있으며, 수정 및 삭제가 가능하고 추가,수정,삭제가 발생할 때마다 알림이 나오는 앱 입니다.

• 전체적인 색상만 변경하고, 과제 영상과 비슷하게 만들었습니다. 또한 지출 항목을 입력하지 않으면 제출이 되지 않게 만들었습니다.

• 처음 만드는 리액트 앱이라 만드는데 시간이 오래 걸렸습니다. 알림이 나오고 일정 시간이 지나면 사라지는 기능을 구현할 때 문제가 생겼었습니다. 알림이 연속적으로 추가됐을 때, 각 알림을 기준으로 3초 후에 사라져야 하는데 마지막으로 추가된 알림을 기준으로 3초 후에 첫 알림이 사라지기 시작하는 오류였습니다. 리액트라서 어려울 거라 생각하고 복잡하게 생각해서 생긴 문제로, 현재는 오류가 해결되어 잘 작동됩니다.

Day10 미션 : 디즈니 플러스 앱

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

• 현재 개발 중으로 아직 완성되지 않았습니다.

회고

스터디 이전에 리액트 기초에 대해 조금은 공부하고 와서 개념은 알고 있는 상태였습니다.하지만 리액트를 사용하여 프로젝트를 진행한 적은 한번도 없어서 리액트 강의가 좀 어려웠습니다. 특히, API를 사용하여 개발을 해본 적이 없어 이해하기가 어려웠습니다. 그래서 과제인 디즈니 플러스 앱을 만들어 보면서 API를 사용하는 방법에 대해 자세히 알아보려고 합니다.

결국 시간이 없어서 자바스크립트 관련 과제는 4개만 완성할 수 있었습니다. 그리고 지금 제 상태를 봐서는 리액트 관련 과제도 전부 완성할 수는 없을 것 같아 아쉽습니다. 과제를 진행하면서 직접 생각하고 알아보는 과정을 통해 제 실력이 늘고 있다는 것이 느껴져 스터디가 끝나고 난 후에라도 남은 과제를 만들려고 합니다.

다음주 동안 최대한 리액트 과제를 열심히 만들어서 적어도 4개의 과제를 완성하고 싶습니다.