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을 통한 페이지 이동을 구현한다.

과제

• disney plus 앱 만들기

• 조건

  • 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을 통해 만든 프로젝트는 배포는 무리여도 빌드까지 해서 개발코드랑 같이 올리고 싶었는데, 아니나 다를까 역시 빈페이지 오류가 뜨더라구요... 결국 개발코드 그대로 올렸습니다.

이번주까진 그래도 진도에 맞출 수 있었는데, 다음주는 좀 걱정이 됩니다. 일단 부딪혀 보겠습니다. 아자아자..