[인프런 워밍업 스터디 클럽 2기 FE] 2주차 발자국
2주차
Day 6
Iterator, Generator, Design Pattern
강의요약
우와 여긴 진짜 처음 듣는 내용들이었다.
Id와는 다른 방식으로 고유값을 부여하는 Symbol, 반복가능한 요소인지
여부를 판단해주며 value, done값을 Iterator, 생성자 Generator, 많이 사용되는 설계의 권장방식을 설계화해둔 Design pattern 등에 대해 수강한다.
Iterator : 반복 가능한 요소(Iterable)인지 여부를 판별해주며, next()를 통해 {value:'', done:''} 를 가진 객체를 반환한다는데. 그래서 이걸 어떻게 사용하고, 왜 만들어진지에 대한 설명이 아무것도 없어서 이해와 별개로 굉장히 의문이 들었다. 찾아보니 class, interface 등 ef6에서 등장하는 문법들에서도 작동이 가능하며, 모든 요소들을 순회하는 map, filter, 그리고 반복문인 for과 같은 역할을 수행한다고 한다.
디자인 패턴 : 일반적으로 발생하는 문제를 해결하는 데에 사용할 수 있는 모범 사례. 이는 여러 사용으로 인해 검증되었으며, 의사소통의 경제성을 높이고, 이미 효율적으로 제작된 코드이기때문에 리팩토링 등 여러 상황에 대응이 유용하다.
Singleton : 클래스의 인스턴스화를 하나의 객체로 제한, 다수가 하나의 메인 컨트롤러를 조정할 경우.
Fatory : 특수 함수인 팩토리 함수를 이용하여 비슷한 객체object의 반복적 생성 가능.
Mediator : A에서 B로, C에서 D로 등의 전송이 있을 때에, 모든 전송이 중재자 E를 거치는 패턴.
스팸 메세지 등 중간처리 과정 가능.
여러 대상이 상호간에 소통하지만, 서로에게 직접적으로 의존하지 않는다.
Observer : 대상 A를 여러 존재 B, C, D, E 가 SNS의 팔로우 등을 통해 관찰하는 형태.
게시자, 구독자 모델.
Module : use strict 로 실행되며, 인라인 모듈 스크립트도 비동기로 처리 가능하다.
strict 선언 시 해당 파일 안, 해당 모듈 안에 자신만의 모듈 레벨의 스코프가 생성되면서, 모듈 내부에서 선언한 변수, 함수를 다른 스크립트에서 접근할 수 없다. 이런 식으로 정보, 코드가 오염되는 것을 방지.
모듈화를 통해 각 기능을 명확히 인지 가능.
과제
조건
대문자, 소문자, 숫자, 특수문자 네개의 체크박스를 제공한다.
체크된 항목을 포함하는 랜덤한 비밀번호를 반환한다.
이 체크박스는 특수문자 단독으로 체크될 수 없다.
input창에 입력한 숫자를 글자 길이로 갖는 비밀번호를 반환한다.
최소 5, 최대 70 값을 입력 가능하다.
진행
html 의 element들을 정의하고, 비밀번호 생성에 사용될 글자를 사전 정의한다.
비밀번호 길이를 입력할 pwLength Input
number, smLetter, capLatter, Symbols 등 조건 여부를 확인하기 위한 각 checkbox
위 요소들을 입력 후 생성 버튼 generateBtn을 클릭하도록 한다.
사전정의 된 요소들을 활용하여, 화면상에서 "비밀번호 생성" 버튼을 누르면
input에 입력된 숫자를 인식하여 pw의 길이로 정의.
비밀번호 생성 조건 체크박스의 체크 여부들을 확인
체크박스가 정상적으로 체크되어있는지, input에 입력된 숫자가 정상범위인지 확인한다.
모두 정상범위라면 길이, 조건TF여부를 generatePassword() 함수에 인자로 넘긴다.
generatePassword함수는 input과 option를 인자로 받으며, 각각 비밀번호 길이, 비밀번호 조건이 된다.
비밀번호 조건에 따라 미리 생성한 'a~z', 'A~Z', '0~9' 등의 문자열을 다 합친뒤 (ex. abc...xyz123...789) 랜덤한 index를 뽑아 비밀번호 배열을 생성, 화면에 출력하려고 하였다.
그러나 위처럼 완전 랜덤하게 뽑을 경우, 예를 들어 숫자, 소문자, 특수문자를 조건으로 설정하였음에도 숫자는 단 하나도 뽑히지 않고 소문자와 특수문자만 뽑혀, 그 둘만으로 이루어진 비밀번호가 생성될 수 있다. (조건이 제대로 반영되지 않음.)
따라서 사전에 각 배열에서 최소 1개씩의 요소들을 미리 랜덤하게 선별하여 저장(ex. abc...xyz 중 하나, 123...789 중 하나)하고, 그 이후 완전 랜덤에 의한 비밀번호 배열을 생성한다.
Day 7
프로젝트 만들기
강의요약
스톱워치, 투두, 스프레드 시트 등을 만들며 학습한 JS 기능들을 활용한다.
과제
조건
예문을 제시한다.
예문을 따라서 입력할 input창을 제시한다.
입력한 input의 값 만큼 예문의 색이 녹색으로 변경된다.
예문과 다르게 입력된 부분은 변경되지 않는다.
input에 값이 입력되기 시작하면 time의 초 수가 1초씩 줄어든다.
예문과 input값이 얼마나 일치하는지 정확도를 제시한다.
한 예문을 전부 입력하면 다음 예문이 뜨며, 정확도는 100%로 리셋된다. (예문별 제시)
반드시 전부 일치해야만 넘어가는 것이 아닌, 예문의 글자수 = 입력 글자수 가 되면 넘어간다.
이는 정확도 계산을 위해.
전체 예문을 전부 입력하면 전체 정확도 평균을 보여주며, CPM와 WPM을 제시한다.
진행
하긴 했는데 제대로 한건지 모르겠다.
미리 유저가 따라칠 예문(문자열)이 저장된 배열을 준비한다.
유저가 예문을 입력할 수 있는 input창을 준비한다.
input의 value가 최초 추가되는 순간 타이머를 작동시킨다.
isTime 등 변수를 미리 선언해놓고, 최초 입력시에 true로 변경시킨다.
이미 isTime이 true인 상태에선 타이머를 새로 작동시키지 않는다.
유저가 입력한 값과 유저가 보고있는 예문을 비교한다.
input에 입력된 value인 string과 예문의 string을 배열화한다.(ex. ['s','t','r','i','n','g']) 각 index끼리 비교해가며 정확도를 비교한다. (input string의 길이가 예문보다 짧은 수 밖에 없으니, input string 길이만큼 조회한다.)
정확히 일치하는 값은 색상을 변경한다.
정확히 일치하지 않는 값의 수를 세어 정확도를 계산할 때 차감한다. (100 - ((틀린 글자 수 / 전체 글자 수)*100)
해당 input string과 예문 string의 배열의 총 길이 수가 서로 일치하면 다음 예문으로 넘어간다.
반드시 정확도 100%로 넘어갈 필요는 없다. 각 예문마다 정확도는 초기화하되, 각 예문의 정확도를 별도로 저장해둔다.
모든 예문을 입력했다면.
input창을 없애고 end 표시를 띄운다.
총 소모된 시간, 각 예문의 정확도, 전체 예문의 글자 수 등을 불러온다.
WPM 과 CPM을 계산하여 화면에 출력한다.
Day 9
리액트 기본 및 Todo 앱 만들기
강의요약
리액트란 SPA를 구현 가능한 라이브러리로, 화면을 구성하는 각 요소를 컴포넌트로 구성한다.
브라우저, 가상돔 등 리액트가 화면을 그리는 과정을 설명하는 이론을 배운다.
리액트 프로젝트를 생성해주는 Create react app 을 설치한다.
리액트를 활용할 때에 사용하게 되는 JSX, State 등을 배우고 활용하며 Todo App 을 배운다.
과제
조건
항목명, 가격을 입력할 수 있는 두개의 input과 추가버튼을 제공한다.
값 입력 후 추가버튼을 클릭하면 list에 항목명, 가격을 추가한다.
list에 존재하는 가격들을 더해 하단에 총액을 제시한다.
list에 존재하는 항목에 수정버튼을 누르면, input에 항목명, 가격이 입력된다.
입력된 상태에서 값을 수정한 뒤 다시 추가버튼을 누르면 수정된 값으로 list에 추가된다.
list에 존재하는 항목에 대해 삭제버튼을 누르면 해당 값이 list에서 삭제된다.
진행
state, setState정의를 통해 추가 할 예산(제품명, 가격), 수정 할 예산 (제품명, 가격) 관리를 진행한다.
추가한 예산 목록은 items라는 배열 안에 {} 형식으로 추가하고, 배열의 수만큼 li를 return하며, 각 배열 요소에서 제품명, 제품 가격 등을 불러와 자동생성하도록 한다.
items안의 모든 가격 요소를 더해 totalPrice를 계산하도록 한다.
하지만 추가, 삭제, 수정에 의한 반영이 실시간으로 되어야함을 주의해야했다.
최초 작성 시 수정, 삭제, 추가가 한박자 느렸는데, (새로 뭔가 작동을 해주어야 했음.) price계산 함수를 따로 두고, 계산값을 setTotalPrice(계산값)으로 반영하다가, setTotalPrice((prev) => prev + Number(price)); 코드로 작성하여 totlaPrice set을 prev를 통해 바로 실행시킴으로써 해결함.
회고
리액트 첫 과제라 state개념만 알면 크게 어렵지 않았다. totalPrice처럼 실시간 반영 순서가 좀 헷갈렸다.
이번과제는 단순해서 cdn을 통해 리액트를 불러왔다. 업로드하기 쉬우려고...
Day 10
리액트로 Netflix 만들기
강의요약
create-react-app을 통해 본격 프로젝트를 진행한다.
api, fetch, async, await 등을 활용하여 서버에서 데이터를 전해받고, 이를 확인한다.
전달받은 데이터를 가공하여 ui상에 구현한다.
state를 통해 상태를 관리하고, 이를 활용하여 로그인여부, 모달open 등을 구현한다.
input의 value를 실시간으로 반영하여 검색기능을 구현한다.
react-router-dom 의 navigation 을 통해 SPA안에서도 url을 통한 페이지 이동을 구현한다.
과제
조건
Api를 통해 영화, 프로그램에 대한 정보를 서버에서 받아올 것.
대시보드에서 로그인 시 메인화면으로 이동
검색창에 값 입력 시 실시간 반영하여 검색결과 출력
썸네일 클릭 시 모달창을 통해 썸네일이미지, 제목, 개봉일, 작품설명을 출력.
진행
사실 강의영상의 netflix만들기 과정을 다시한번 따라하면 그대로 구현 가능해서, 학습하는 기분으로 작성하였다. 다만, 구글 api와 useDebouce부터 말썽이 발생했는데, 정정하려면 발자국 쓸 시간이 없을 것 같아... 일단 두 부분은 빼고 구현하였다.
react-router-dom을 통해 각 페이지를 구분한다.
Navigation 기능을 통해 Dashboard, Main, Search 페이지를 이동한다.
공통 레이아웃으로 Nav.js, Footer.js 를 둔다.
대시보드
Dashboard/index.js 로 구성된다.
로그인 버튼을 누르면 메인페이지로 이동한다.
이 이동은 react-router-dom의 navigation 기능을 이용한다.
두 페이지를 나누는 분기는 로그인 여부.
로그인 여부는 isLogin state로 저장하며, isLogin이 false경우 url을 / 가 되도록 처리한다.
Nav.js에 위치한 로그인 버튼, 혹은 아바타 아이콘을 클릭 했을때 isLogin = !isLogin 되도록 처리한다.
메인페이지
Components/ Banner.js, Row.js, MovieModal/index.js로 구성된다.
랜덤한 영화가 상단 배너로 설정되고, 서버에서 전달받은 영화 썸네일, 영상 링크, 제목, 설명을 출력한다.
Row.js component를 반복적으로 사용하되, 넘기는 props를 변경하여 다른 카테고리의 영화들을 불러온다.
영화 썸네일을 클릭하면 영상 썸네일, 제목, 설명, 개봉일, 평점이 담긴 모달창을 띄운다.
Modal의 상태를 관리하는 state를 생성하여, 영상 썸네일 클릭시 true로 setState시킨다.
modal state가 true일 시 <Modal/> 창을 화면에 출력한다.
해당 컴포넌트를 불러올 때, props를 통해 선택된 영화의 정보를 전달.
전달된 정보를 통해 데이터를 불러올 영화가 무엇인지 알게된다.
nav 에 input을 입력하여 검색페이지로 이동한다.
이 이동은 react-router-dom의 navigation 기능을 이용한다.
메인 <-> 검색페이지 간의 이동은 검색input에 값이 존재하느냐 여부.
검색input에 값이 존재한다면 url을 /search 로 이동시키도록 한다.
검색페이지
input에 입력한 값을 검색어로, 일치하는 영상 목록을 띄운다.
검색결과가 없다면 안내 문구를 띄운다.
검색결과가 있다면 메인페이지의 row처럼 해당 영화 목록을 띄운다.
영화 썸네일을 클릭하면 메인페이지에서와 마찬가지로 영화 정보가 담긴 Modal을 띄운다.
Modal을 띄우는 과정은 메인페이지와 같다.
이번엔 저도 코드박스나 이미지를 넣어보려고했는데, 코드박스 안에서 탭도 안먹고 const 정의 인식도 못하고 다 깨먹어버리길래 너무 힘들어서 다 뺐습니다... 덕분에 코드 입력을 예정에 두고 1번, 코드 입력을 포기하고 1번 총 두번을 작성해서 좀 급하고.. 중구난방이고...
모르는 것도 많고, 헤멘 것도 많은 주간이었습니다.
create-react-app을 통해 만든 프로젝트는 배포는 무리여도 빌드까지 해서 개발코드랑 같이 올리고 싶었는데, 아니나 다를까 역시 빈페이지 오류가 뜨더라구요... 결국 개발코드 그대로 올렸습니다.
이번주까진 그래도 진도에 맞출 수 있었는데, 다음주는 좀 걱정이 됩니다. 일단 부딪혀 보겠습니다. 아자아자..
답변 0