[인프런 워밍업 스터디 클럽 2기 FE] 3주차 발자국

3주차 강의만 간신히 들었다. Day 11테스트 주도 개발, React TDD 를 통한 간단한 앱 생성 및 배포 강의요약TDD실제 코드를 작성하지 전에 테스트 코드를 작성하고, 테스트 코드를 패스 할 수 있는 실제 코드를 작성하는 것.그런데 여기까지 들으면 원래 그렇게 하지 않나? 라는 생각이 들었는데. 그것과는 별도같다.React Testing Library DOM testing library이라는 DOM Node를 테스트하기 위한 솔루션 위에 react를 위한 테스트를 하는 api를 추가한 것이 React Testing Library.Jest페이스북이 만들어낸 테스팅 프레임 워크. 최소한의 설정으로 동작, Test Case 를 만들어서 코드가 잘 작동하는지 확인한다. (unit단위 테스트를 위해 진행)Prettier들여쓰기 값, 따옴표의 종류 등을 정리해서 보기 좋게 해주는 코드 포맷터ESLint 개발자들이 규칙성을 갖고 코드를 깔끔하게 작성할 수 있도록 도와주는 라이브러리. 문법 오류를 알려주고, 코드 작성에 가이드를 제시한다. Day 12Next.js 와 TypeScript, 리액트 version 18강의요약Next.jsReact의 서버사이드 렌더링을 쉽게 구현할 수 있게하는 프레임워크이며, 라우팅 기능을 쉽게 만들어준다.리액트는 SPA 이기 떄문에 클라이언트 서버 렌더링(빈 html을 가져와 js 파일을 해석하며 화면 구성)에는 편리하지만, 빈 html을 가져오는 방식 때문에 SEO 등이 좋지 못한데, next js가 pre-rendering을 통해 미리 렌더링한 완성된 html을 가져와 이 문제를 보완한다.TypsScript자바스크립트에 타입을 부여한 언어. (자바스크립트의 확정 언어)브라우저에서 실행하려면 js와 달리 변환(컴파일) 이 필요하다.등장배경js는 원래 클라이언측 언어였는데, Node.js의 개발로 서버측에서도 활용하게 되면서 코드의 유지, 관리, 재사용을 용이하게 하기 위해 ts가 만들어지게 되었다. 타입 검사, 컴파일 오류 검사 등의 기능 또한 보완하였다.타입 종류string, number, booleadn, null, undefined, symbold 이외에도 존재한다.any : 타입실드를 아예 삭제시킴으로써 제한을 없앤다.unknown : 모든 타입 사용 가능Enum : 열거형, 숫자값 외에 문자열도 가능.Union : 할당될 값의 타입이 확실하지 않은 경우, or 연산자를 사용하여 union 타입을 작성. 변수나 함수 매개변수가 여러 타입 중 하나를 가질 수 있음 Void : 값이 없음. 반환값이 없을 때 주로 사용된다.Never : 절대로 사용 안할거라는 의미. 과제 퀴즈앱조건4지선답 문제를 제시, 유저가 선택한 문제가 정답인지 오답인지 알려준다.문제마다 카테고리가 있으며, state 메뉴에서는 카테고리를 골라 문제를 풀 수 있도록 한다.quiz 메뉴로 이동 시, 카테고리 선택> 카테고리에 해당하는 문제를 시험칠 수 있다.이 경우, 문제를 푼 뒤 바로 답을 알려주지 않고, 문제를 모두 푼 뒤 결과를 채점해준다.진행next js를 통해 프로젝트 생성라우팅 기능을 이용해 각 메뉴 페이지 생성data 폴더를 생성하여 공통으로 사용될 문제의 정보를 담을 파일 생성fuc 폴더를 생성하여 정답판별 등 공통으로 사용될 함수 작성각 페이지에서 화면에 그릴 요소를 정하는 것은 변수의 t/f로 최대한 단순하게 작성.시간이 없어서 최대한 단순하게 하려고 노력했다. Day 13리덕스, 도커를 이용한 리액트 실행, 리액트 19 나는 리덕스가 너무 어렵다. 뭔가 활용법이 와닿지 않는 것들이 유독 난해하고 이해하기 어렵게 느껴지는 것 같은데, 리덕스 또한 그런 종류다... 아마 리덕스를 쓸정도로 복잡하거나 데이터가 많이 필요한 프로젝트를 아직 안해봤고, 사실 그 이전에 데이터 관리를 할 일이 그렇게 많지 않았어서인듯. 강의요약리덕스js 애플리케이션을 위한 상태 관리 라이브러리 데이터가 기존의 방식으로는 관리 불가능할 정도로 많고 복잡해졌을 때, 값을 이동하는 방식을 단순화하고 관리의 용이성을 위해 store 등을 이용해 관리한다.props없이도 component간 state공유를 지원한다.redux store에 state를 저장하고, 각 component들이 store에 접근하여 state를 사용한다. 도커프로그램 다운 과정을 간략하게 만들어준다.컨테이너 기반의 오픈소스 가상화 플랫폼, 생태계 리액트19react compoiler, use() hook, actions, use client, use server, useForm status, useActionState, useOptimistic, Meta tages, React SErver Component등 비교적 신기능을 학습한다.use() 라던가 Meta Tage, use Client/use Server 등 어쩌다보니 오류 고치다가 미리 써본 기능들도 있다. 알아두면 도움 될 것 같은데, 아마 까먹고있다가 다음에 필요하게되면 다시 검색해서 쓰겠지. 후기2주차 후반부터 회사일이 뭔가... 정신없게 돌아가면서 도저히 집에 와서도 과제를 할 만한 상황이 아니었다.본격적으로 공부하고, 본격적으로 집중했어야 할 리액트 리덕스 등 내가 어려워하는 파트였는데.후반부 집중력이 많이 흐트러지고 과제도 간신히 한 개 한게 많이 아쉽다.워밍업 클럽 기간이 끝나고 따로 공부해볼 예정이다.

[인프런 워밍업 스터디 클럽 2기 FE] 2주차 발자국

2주차 Day 6Iterator, 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 Inputnumber, 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일 시 창을 화면에 출력한다.해당 컴포넌트를 불러올 때, props를 통해 선택된 영화의 정보를 전달.전달된 정보를 통해 데이터를 불러올 영화가 무엇인지 알게된다.nav 에 input을 입력하여 검색페이지로 이동한다.이 이동은 react-router-dom의 navigation 기능을 이용한다.메인 검색페이지 간의 이동은 검색input에 값이 존재하느냐 여부. 검색input에 값이 존재한다면 url을 /search 로 이동시키도록 한다.검색페이지input에 입력한 값을 검색어로, 일치하는 영상 목록을 띄운다.검색결과가 없다면 안내 문구를 띄운다.검색결과가 있다면 메인페이지의 row처럼 해당 영화 목록을 띄운다.영화 썸네일을 클릭하면 메인페이지에서와 마찬가지로 영화 정보가 담긴 Modal을 띄운다.Modal을 띄우는 과정은 메인페이지와 같다. 이번엔 저도 코드박스나 이미지를 넣어보려고했는데, 코드박스 안에서 탭도 안먹고 const 정의 인식도 못하고 다 깨먹어버리길래 너무 힘들어서 다 뺐습니다... 덕분에 코드 입력을 예정에 두고 1번, 코드 입력을 포기하고 1번 총 두번을 작성해서 좀 급하고.. 중구난방이고...모르는 것도 많고, 헤멘 것도 많은 주간이었습니다.create-react-app을 통해 만든 프로젝트는 배포는 무리여도 빌드까지 해서 개발코드랑 같이 올리고 싶었는데, 아니나 다를까 역시 빈페이지 오류가 뜨더라구요... 결국 개발코드 그대로 올렸습니다.이번주까진 그래도 진도에 맞출 수 있었는데, 다음주는 좀 걱정이 됩니다. 일단 부딪혀 보겠습니다. 아자아자..

[인프런 워밍업 스터디 클럽 2기 FE] 1주차 발자국

1주차Day 1 OT공지사항을 보니 발자국에 정해진 형식은 없다고 하여, 코드 작성 시 생각의 흐름을 정리 작성하는 방식으로 하기로 하였다.강의를 보고 느낀점, 과제를 보고 판단한 과제 제작 기준, 과제 구현 방식을 요약하여 작성한다.이번엔 시간분배를 잘못해서 캡쳐 등 이미지나 코드를 본문에 첨부하진 못했는데, 다음주엔 첨부하여 좀 보기좋게 만들고싶다. 시간이 나면 본 포스팅에 추가도 하고. Day 2 자바스크립트 기초 (Section 2 ~ 4)자바스크립트 중급(1) 강의요약자바스크립트를 쓰기위한 기초적인 요소(변수, 연산, 루프 등), Window 객체, DOM의 개념과 클릭 등 활동에 반응하기위한 EVENT 에 대한 개념을 설명한다.과제메뉴판 만들기조건 클릭 이벤트를 감지할 것클릭된 요소들을 구분할 것클릭에 다라 출력되는 화면이 변화할 것해결addEventListener를 통한 클릭 이벤트 감지클릭 한 요소의 data 값을 인식하도록 처리메뉴 카테고리를 배열화하여, 각 배열 요소 중 data값과 동일한 값을 class명으로 가진 요소들이 존재하는지 판별. 해당하는 요소들은 display 상태 변화.회고생각해보니 category를 html 로 작성한 뒤에 getElement를 통해 불러와 array로 저장 할 바엔 그냥 처음부터 배열[오브젝트] 로 작성한 뒤, 해당되는 요소만 걸러서 새 배열을 만들고, 그렇게 만들어진 배열로 html을 작성하게 하는게 나았을 것 같단 생각이 든다. Day 3 자바스크립트 기초 (Section 5 (1~8))자바스크립트 중급(1) 강의요약자바스크립트의 활용에서 자주 쓰이는 this 키워드, 삼항 연산자를 통한 if문 처리, event loop, map filter등을 통한 배열처리를 학습한다.if else보다 삼항 연상자, 배열에서는 map 등 적절한 기능을 적절한 때에 쓰는게 효율이 좋다는건 아는데, 마음이 급하면 자꾸 새 기능보다 기존에 알던 기능, 손에 익은 작성법대로 작성하게 되어서 고민이 된다. 옛날엔 this 키워드를 엄청 자주 활용해서 아주 잘 알고있다고 생각했는데, 근 1년 반정도 사용하지 않았더니 굉장히 낯선 개념처럼 느껴졌다.과제가위바위보조건매 회 컴퓨터는 가위 ,바위, 보 중에 랜덤한 값을 제시해야한다.매 회 컴퓨터가 제시한 값과 유저가 제시한 값을 비교해야한다.매 회 컴퓨터와 유저가 제시한 값에 따라 승패를 판별하며, 승 패를 기록한다.총 승패의 횟수가 10회가 되면 전체 게임을 정지하며, 유저와 컴퓨터 중 승리한 횟수가 더 많은 쪽을 최종 승자로 판별하여 화면에 출력한다.해결매 회 컴퓨터가 제시할 세가지 값을rsp = ['rock', 'sissor', 'paper'] 형태로 저장. Math.random() 을 사용하여 0, 1, 2 중에 랜덤한 값을 얻고, rsp 배열 중 해당 값을 인덱스로 갖는 값을 컴퓨터가 제시할 값으로 삼는다.if문을 통해 컴퓨터와 유저의 승리여부를 판가름한다.이 때 컴퓨터, 유저의 승리 횟수를 각각 변 수에 저장한다.이 때 totalCnt 를 1씩 증가시키고, restCnt는 10 - totalCnt로 표시한다.totalCnt가 10에 도달하면 컴퓨터, 유저의 승리 횟수를 비교한다.if문을 통해 컴퓨터와 유저 중 어느 쪽의 승리 횟수가 더 많은지에 따라 출력값을 변경한다.회고분명히 더 간략하게 추릴 수 있는 방법이 있을텐데, 진도가 빡빡한 편이다보니 일단 단순무식하지만 빠르게 쳐낼 수 있는 방법으로 작성했다는 기분을 떨칠 수 없다.원래 본 코드는 강의내용에 포함되어있는 삼항연산자로 작성했지만, 올바른 코드임에도 unexpected 괄호 닫음 등의 오류를 많이 발생시켜 if else문으로 재작성, 일부만을 삼항연산자로 작성하였다.컴퓨터나 유저의 선택지를 배열에 저장시킨 후 판가름하면 강의에 나온 map이나 filter등을 사용하여 총합 승패여부를 판별할 수 있지 않을까 하고 좀 더 활용방안을 생각했는데, 그럼 실시간 승패여부판가름 및 카운트를 올릴 수 없기 때문에 관뒀다.script에 addEventListener를 다는 대신, button onclick시 함수를 실행, 실행 함수에 좀 더 처리를 하면 this요소를 활용할 수 있지 않을까 했는데, 굳이 그럴 이유가 없는데다, 시간도 없고, 강의 활용하려다 괜히 빙 돌아가는 길만 만들까봐 그만두었다. Day 4 자바스크립트 기초 (Section 5 (9~17))자바스크립트 중급(2) 강의요약undefined와 null, 비교와 복사의 얕고 깊음, 함수 표현과 선언문, Strict mode 등 알고는 있지만 헷갈렸던 개념을 되짚었다. 사실 얇고깊음의 비교는 아직도 헷갈리며(특히 지칭대상이라는 것이), 함수 표현과 함수 선언은 엄격히 구분해가면서 쓸 일이 적었어서 자꾸 무시하고 작업하려고 하게 된다.IIFX, Intersection observer, Pure Function, Curry Function등은 알고는 있지만 아주 낯설거나 아예 모르는 것들이었는데. 덕분에 뭐 어떻게 활용해야할지 모르겠다. 9~17이 전반적으로 그러한듯.과제퀴즈앱조건문제가 주어진다.답 선택지가 주어진다.유저의 선택지가 올바른지, 올바르지 않은지 판가름하여 채점화면을 출력한다.동영상과 같이 배경색으로 표현하였으며, 선택 후 정답이면 녹색바탕, 오답이면 붉은바탕이 뜬다.정답 선택지는 녹색, 오답 선택지는 붉게 표현한다.다음을 클릭하면 다음문제가 뜬다.일정 갯수 이상 문제를 풀면 종료되고, Restart를 통해 처음으로 되돌아간다.해결questionList라는 오브젝트형 변수를 정의한다.오브젝트 내 요소 1인 ques1은 배열이고, Math.random과 Math.floor를 통해 0~30까지의 랜덤수 3개 갖는다.오브젝트 내 요소 2인 ques2은 배열이고, Math.random과 Math.floor를 통해 0~30까지의 랜덤수 3개 갖는다.ansList라는 오브젝트형 변수를 정의한다.오브젝트 내 요소 1인 ans1은 빈 배열로 정의, 후에 ques1의 각 요소를 ques2의 각 요소와 순서대로 더한 값을 3개 갖는다. 이는 정답배열이다.오브젝트 내 요소 2인 ans2는 배열이고, Math.random과 Math.floor를 통해 0~60까지의 랜덤수를 두개 뽑아 서로 곱한 값을 3개 갖는다.ques1 + ques2 라는 문제지를 화면상에 출력한다.선택지를 출력한다. 이 때 0부터 2까지의 랜덤값을 생성한다.랜덤값이 2이면 정답선택지는 없다. 랜덤한 오답선택지를 생성한다.랜덤값이 0이면 0번째, 1이면 1번째 버튼이 정답선택지가 되며, 다른 버튼은 오답 선택지가 된다.각 문제의 정답 오답 여부에따라 배경색상이 변한다.문제를 3개풀면 Restart를 통해 화면을 reload하고 새 문제를 시작한다.회고동영상이 숫자문제길래 일단 숫자문제로 했는데, 넘버와 스트링을 섞거나 해서 비교를 얕고 깊게 해볼 수 있도록 답변을 구성했어도 좋았을 것 같다.curry function 을 어떻게 활용해볼 수 있었으려나...? 연구해보기엔 시간이 짧았다. Day 5 자바스크립트 기초 (Section 6~7)OOP, 비동기 강의요약객체지향 프로그래밍(OOP), 비동기(Promise, Async, Await), Class객체 등 과제책 기록 앱조건책이름과 저자명을 입력받을 것입력받은 값을 각각 화면에 출력할 것출력한 값 옆에 삭제 버튼을 둘 것버튼을 클릭하면 해당 값을 삭제할 것해결새로 추가된 input값을 오브젝트 newData에 저장한다.table에 newData값을 추가한다.createElement를 통해 추가할 tr, td(책제목용, 저자용 2개)를 변수로 (총 3개) 저장한다.각 td에 textContent를 통해 newData의 각 값을 추가한다.createElement를 통해 변수정의한 tr에 appendChild를 통해 두 td를 추가한다.table에 appendChild를 통해 tr을 최종적으로 추가한다.위 같은 방식으로 삭제 버튼 또한 추가한다.삭제 버튼을 클릭하면 해당 행이 삭제되도록 한다.삭제버튼에 addEventListener 'click' 을 추가한다.삭제버튼을 클릭하면, 추가했던 행(변수정의해둔 createElement tr)을 삭제하도록 한다.회고class객체 써볼 수 있었을 것 같은데, 이걸 발자국 쓰면서야 생각했다. 하지만 배열과 객체로 해결할 수 있는데 인스턴스로 제작해서 더 이점이 있었을까. 이 부분은 따로 검색해서 알아봐야겠다. 아직 class나 인스턴스에 대해 아는게 너무 적다.document.getElement~ 를 통해 객체를 찾으면 변수에 저장해놓고 쓰는게 습관이었는데, 이번 과제를 하다보니 굳이 안그래도 되었을 것 같은 부분들이 있었다. 습관적으로 코딩하는 부분이 많다는걸 다시금 깨달았다.과제2깃헙유저검색조건입력받은 값으로 실시간 검색결과를 출력할 것.실시간으로 api를 요청, 값을 전달받아 출력할 것.해결async를 통해 api로부터 값을 요청한다.이때 요청키워드는 입력값이다.입력값은 input값이 변화할 때마다 (키보드 입력이 있을 때마다) 업데이트 되어 새 요청을 한다.addEventListener의 input을 사용하여 input 의 value를 얻는다.textContent, innerHtml, appendChild를 이용하여 화면상에 출력한다.회고데이터를 요청하는 과정에서 필수적으로 비동기 요청이 사용되었기 때문에 차라리 강의내용을 어떻게 끼워넣어볼지 생각 안해도 되는건 편했다.비인증계정 60회 제한이 있는 api 라 테스트하다가 자꾸 막혔다.책 과제를 할 때엔 table 안 tr을 추가하여 td, 혹은 또 그 안의 button을 추가해야해서 코드가 길어졌는데.. 이번엔 두번째 해서인지 혹은 구조가 간단해서인지 비교적 짧게 끝나서 좋았다.