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

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주 동안 공부를 하고 과제를 진행하는 것이 힘들긴 했지만, 좋은 경험과 공부하는 습관을 가질 수 있게 되어 많은 도움이 되었습니다. 다음에 또 스터디가 열리게 되면 참가하고 싶습니다.

[인프런 워밍업 클럽 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/6988Day2 미션 : 음식 메뉴 앱각 메뉴를 클릭할 때, 메뉴에 맞는 음식 리스트를 보여주는 앱 입니다.음식 메뉴가 아닌 투썸 플레이스 카페 메뉴로 변경했고, 메뉴 부분의 스타일과 전체적인 색상을 변경했습니다.이미지는 투썸 플레이스 카페의 홈페이지에서 이미지 주소 복사를 통해 가져왔는데, 저작권 문제 때문에 저작권 문제가 없는 다른 이미지를 구해야하나 고민하고 있습니다. 스타일을 수정할 때 가장 시간이 오래 걸렸는데, 간격 조절이 가장 어려웠던 것 같습니다. 저번주에 막혔던 화면 크기로 인한 넘침 문제를 조금이나마 고칠 수 있게 되어, 현재 화면 크기에 따라 한줄에 나열되는 음식 아이템들의 개수가 동적으로 변경되게 했습니다. 처음에는 맥에서 진행해서 몰랐는데, 윈도우에서는 스크롤 바로 인한 밀림 현상이 있는 것을 알게 되어 스크롤 바를 항상 보이게 하는 것으로 수정했습니다. Day3 미션 : 가위 바위 보 앱컴퓨터와 진행하는 가위 바위 보 게임으로 총 10번을 진행하여 승부를 내는 앱 입니다.전체적인 디자인과 색상을 변경했고, 가위, 바위, 보 대신에 아이콘을 사용하여 표현했습니다.저번 주에 진행했던 것과 다르게 전체적으로 다시 꾸몄습니다. 태그 마다 간격을 설정하는 것이 가장 어려웠는데, 사용하는 맥과 윈도우의 화면 크기 차이로 인해 서로 다르게 보이는 문제가 있었고, 최대한 화면 크기와 상관없이 동일한 위치에서 보일 수 있게 개발 했습니다. Day4 미션 : 퀴즈 앱수학 연산 관련 질문이 나오고, 2~3개의 답변 중 맞는 답변을 선택하면 배경이 초록색이 되고 틀린 답변을 선택하면 배경이 빨간 색이 되는 앱 입니다.맞춤법 관련 퀴즈 앱을 만들었습니다. 전체적인 디자인을 변경했고, 배경이 아닌 선택한 답변의 버튼 색이 바뀌게 했습니다. 또한 마지막에 맞은 답변의 개수를 알 수 있게 했습니다.네이버의 한글날 맞춤법 테스트 사이트를 참고하여 만들었습니다. 질문 개수를 많이 만들어서 질문이 랜덤으로 나오게 하고 싶었지만 시간이 없어서 못한 것이 아쉬웠습니다. 다음에 시간이 생기면 변경해보고 싶고, 이것을 바탕으로 심리 사이트 앱을 만들어도 괜찮겠다는 생각을 하게 되었습니다. Day5 미션 : 책 리스트 나열 앱 책 이름과 저자를 입력하여 제출하면 책 리스트에 추가가 되며, 삭제할 수도 있고 추가 및 삭제가 발생할 때마다 알림이 나오는 앱 입니다.전체적인 색상만 변경하고, 구조는 과제 영상과 비슷하게 만들었습니다. 또한 제출 버튼을 클릭했을 때 이름과 저자를 모두 입력하지 않으면 제출되지 않게 만들었습니다.다른 과제처럼 저만의 디자인으로 변경하고 싶었지만, 시간도 부족하고 생각나는 디자인이 없어 과제 영상과 비슷하게 만든 것이 아쉬웠습니다. 다른 과제를 진행하면서 간격 조절하는 것이 익숙해진 것인지 태그들의 간격을 정하는 것이 다른 과제에 비해 수월하게 진행됐습니다. Day9 미션 : 예산 계산기 앱 지출 항목과 비용을 입력하여 제출하면 리스트에 추가되고 리스트에 있는 모든 항목의 총 지출 값을 확인할 수 있으며, 수정 및 삭제가 가능하고 추가,수정,삭제가 발생할 때마다 알림이 나오는 앱 입니다.전체적인 색상만 변경하고, 과제 영상과 비슷하게 만들었습니다. 또한 지출 항목을 입력하지 않으면 제출이 되지 않게 만들었습니다.처음 만드는 리액트 앱이라 만드는데 시간이 오래 걸렸습니다. 알림이 나오고 일정 시간이 지나면 사라지는 기능을 구현할 때 문제가 생겼었습니다. 알림이 연속적으로 추가됐을 때, 각 알림을 기준으로 3초 후에 사라져야 하는데 마지막으로 추가된 알림을 기준으로 3초 후에 첫 알림이 사라지기 시작하는 오류였습니다. 리액트라서 어려울 거라 생각하고 복잡하게 생각해서 생긴 문제로, 현재는 오류가 해결되어 잘 작동됩니다. Day10 미션 : 디즈니 플러스 앱API를 사용하여, 구글 연동 로그인을 진행하고 영화 리스트와 상세 정보를 확인하고 검색도 가능한 앱 입니다.현재 개발 중으로 아직 완성되지 않았습니다. 회고스터디 이전에 리액트 기초에 대해 조금은 공부하고 와서 개념은 알고 있는 상태였습니다.하지만 리액트를 사용하여 프로젝트를 진행한 적은 한번도 없어서 리액트 강의가 좀 어려웠습니다. 특히, API를 사용하여 개발을 해본 적이 없어 이해하기가 어려웠습니다. 그래서 과제인 디즈니 플러스 앱을 만들어 보면서 API를 사용하는 방법에 대해 자세히 알아보려고 합니다.결국 시간이 없어서 자바스크립트 관련 과제는 4개만 완성할 수 있었습니다. 그리고 지금 제 상태를 봐서는 리액트 관련 과제도 전부 완성할 수는 없을 것 같아 아쉽습니다. 과제를 진행하면서 직접 생각하고 알아보는 과정을 통해 제 실력이 늘고 있다는 것이 느껴져 스터디가 끝나고 난 후에라도 남은 과제를 만들려고 합니다.다음주 동안 최대한 리액트 과제를 열심히 만들어서 적어도 4개의 과제를 완성하고 싶습니다.

[인프런 워밍업 클럽 0기] FE 과제 제출

자바스크립트1번 과제 (Day2) (음식 메뉴 앱)깃허브 저장소 주소: https://github.com/kyeong-hee/food-menu-app 2번 과제 (Day3) (가위 바위 보 앱)깃허브 저장소 주소 : https://github.com/kyeong-hee/rock-paper-scissors-app 3번 과제 (Day4) (퀴즈 앱)깃허브 저장소 주소 : https://github.com/kyeong-hee/quiz-app 4번 과제 (Day5) (책 리스트 나열 앱)깃허브 저장소 주소 : https://github.com/kyeong-hee/book-list-app리액트1번 과제 (Day9) (예산 계산기 앱)깃허브 저장소 주소 : https://github.com/kyeong-hee/budget-calculator-app 2번 과제 (Day10) (디즈니 플러스 앱)깃허브 저장소 주소 : https://github.com/kyeong-hee/diseny-plus-clone-app 3번 과제 (Day10) (포켓몬 도감 앱)깃허브 저장소 주소 : https://github.com/kyeong-hee/pokemon-app 4번 과제 (Day12) (퀴즈 앱)깃허브 저장소 주소 : https://github.com/kyeong-hee/nextjs-typescript-quiz-app

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

1주차 학습 요약2일차 - 자바스크립트 기초, Window 객체 및 DOM, Event자바스크립트 기초 강의에서는 Console 객체, 변수 선언 방법과 참조 범위, 호이스팅에 대한 개념, 타입 종류와 타입을 변환하는 방법, 연산, Template Literals, 반복문을 배웠으며, Window 객체 및 DOM 강의에서는 Window 객체에 대한 개념과 사용법, DOM에 대한 개념과 Document 객체를 사용한 DOM 조작법을 배웠습니다. 또한 Event 강의를 통해 여러가지 이벤트 상황에 대해 동작을 설정할 수 있는 방법과 버블링, 캡처링, 위임에 대한 개념을 배울 수 있었습니다. 3일차 - 자바스크립트 중급(1)this 키워드에 대한 개념과 사용법, bind/call/apply 메서드를 사용한 this의 참조값 변경, 삼항 연산자 사용법, 간단한 동기/비동기 개념과 이벤트 동작에 대한 내부 작동 과정, Closure에 대한 개념과 사용법, 배열/객체에 대한 구조 분해 할당 방법, 전개 연산자 사용법, 배열에 대한 Map/Filter/Reduce 메서드 사용법을 배웠습니다. 4일차 - 자바스크립트 중급(2)1일차에 배웠던 undefined와 null의 공통점과 차이점, 얕은 비교/복사 와 깊은 비교/복사에 대한 개념과 사용법, 함수 표현식과 선언문의 개념과 차이점, 즉시 실행 함수(IIFF)의 개념과 사용법, Intersection Observer 사용법, pure/impure 함수의 개념, 커링 개념과 사용법, 엄격 모드에 대한 개념과 적용법, 특징을 배웠습니다. 5일차 - OOP, 비동기OOP 강의에서는 객체 지향 프로그래밍에 대한 개념과 특징, 프로토타입에 대한 개념과 사용법, 클래스에 대한 개념과 사용법을 배웠으며, 비동기 강의에서는 callbacks, promise, async/await에 대한 개념과 사용법을 배웠습니다. 6일차 - Iterator / Generator, Design PatternIterator / Generator 강의에서는 1일차 타입 설명 때 간단하게 지나갔던 심볼에 대한 개념과 사용법, Iterator와 generator에 대한 개념과 사용법을 배웠으며, Design Pattern 강의에서는 디자인 패턴에 대한 개념과 장점 그리고 가장 자주 사용되는 패턴인 Singleton 패턴과 Factory 패턴, Mediator 패턴, Observer 패턴, Module 패턴에 대한 개념을 배웠습니다. 미션 해결 과정미션 1 : 음식 메뉴 앱각 메뉴를 클릭할 때, 메뉴에 맞는 음식 리스트를 보여준다.음식 메뉴가 아닌 투썸 플레이스 카페 메뉴로 변경했고, 메뉴 부분의 스타일과 전체적인 색상을 변경했습니다.이미지는 투썸 플레이스 카페의 홈페이지에서 이미지 주소 복사를 통해 가져왔습니다. 스타일을 수정할 때 가장 시간이 오래 걸렸으며, 현재 화면 크기에 따라 음식 아이템들의 내용이 잘리는 문제가 있어 검색을 통해 수정하고 있는 중 입니다. 미션 2 : 가위 바위 보 앱컴퓨터와 진행하는 가위 바위 보 게임입니다.전체적인 색상만 변경하고, 전체적인 스타일은 과제 예시와 비슷하게 만들었습니다.스타일을 구현하는 것이 가장 고민이 됐고 시간도 가장 오래걸렸습니다. 현재 전체적인 스타일이 과제 예시와 비슷하게 만들어져 있지만 이미지를 넣어 조금 더 보기 좋게 바꾸려고 생각 중입니다. 회고스터디를 시작하기 전에는 그래도 어느 정도 자바스크립트에 대해 알고 있다고 생각했었는데, 한 주 동안 자바스크립트에 대한 강의를 들으면서 제가 알고 있었던건 기초뿐이었다는 사실을 알게 되었습니다. 그래서 자바스크립트 강의를 들으면서 처음에는 조금 이해하기 힘든 부분도 있었고, 개념은 이해했지만 이 개념을 코드에 어떻게 적용하면 좋을지 언제 사용하면 되는지는 알기 힘들었습니다. 검색을 통해 더 알아보면서 완벽하게는 아니지만 어느 정도는 이해하고 사용할 수 있게 되었습니다. 하지만 과제는 웹에 대한 공부를 올해부터 시작했던 만큼 HTML과 CSS에 대해서도 부족한 점이 많아 이번 주에 있던 모든 과제를 완성하지 못한 것이 아쉬웠습니다. 그래도 점점 속도가 붙고 있어 과제 제출 전까지 모든 과제를 완성하는 것이 목표입니다. 역시 직접 만들어 보는 것이 배운 것을 확실하게 익힐 수 있는 시간이 된 것 같습니다.