[인프런 워밍업 클럽 1기 FE] 3주차 미션

3주차 미션📍2024.05.13 ~ 2924.05.16🐾 3주차 발자국미션 - 퀴즈📂 레포지토리미션 - 디즈니 플러스📂 레포지토리과제할 시간이 부족해서 디즈니 플러스 앱은 다른 분들의 코드를 많이 참고했다. 추후 개선 예정 🥲

[인프런 워밍업 클럽 1기 FE] 3주차 발자국

3주차 발자국📍2024.05.13 ~ 2924.05.16🏁 3주차 미션😎 강의 수료강의 요약#6 React TDD 기본TDD (Test Driven Development) 란 테스트 코드를 먼저 작성하고, 테스트 코드를 Pass 할 수 있는 실제 코드를 작성하는 개발 방법이다. 안정적인 소스 코드, 디버깅 시간 및 개발 시간 감소, 깨끗한 코드의 장점이 있다.React Testing Library리액트 컴포넌트에 대한 테스트를 사용자 중심으로 작성하는데 도움을 주며 사용자의 행동에 대한 테스트를 강조하는 라이브러리이다. 리액트 구성 요소 작업을 위한 API 를 추가하여 DOM Testing Library 위에 구축된다. DOM Testing Library 는 DOM 노드를 테스트하기 위한 매우 가벼운 솔루션이다.render 함수 : DOM 에 컴포넌트를 렌더링 하는 함수이며 인자로 렌더링할 리액트 컴포넌트를 사용한다.쿼리 함수 : 페이지에서 요소를 찾기 위해 사용한다. get, find, query 유형이 있다.getBy : 쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없거나 둘 이상 일치하면 오류를 발생한다queryBy : 쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없으면 null 을 반환한다.findBy : 쿼리와 일치하는 요소가 발견되면 Promise 를 반환한다. 요소가 발견되지 않거나 기본 제한 시간 후에 둘 이상의 요소가 발견되면 프로미스가 거부된다. ( getBy + waitFor = findBy )waitFor : 일정 기간 동안 기다려야 할 때 사용하여 기대가 통과될 때까지 기다릴 수 있다.JestJest 는 Facebook 에 의해 만들어진 테스팅 프레임워크이다. 최소한의 설정으로 동작하며 테스트 케이스로 어플리케이션 코드를 확인한다. 단위테스트를 위해 이용한다.describe : 테스트를 그룹화하는 블록을 만든다it : 개별 테스트를 수행하며 각 테스트를 작은 문장처럼 설명한다.expect : 값을 테스트할 때마다 사용되며 matcher 와 함께 사용된다.matcher : 다른 방법으로 값을 테스트 하도록 할 때 사용된다.코드 형식 라이브러리Prettier : 코드 형식을 맞추는데 사용하며 코드 포맷터 역할을 한다.ESLint : 개발자들이 특정 규칙을 가지고 코드를 짤 수 있게 도와주는 라이브러리이며 코드 포맷터이기도 하지만 문법 오류를 파악하는 것이 주요 기능이다.#7 React TDD 를 이용한 간단한 앱 생성 및 배포FireEvent API : 유저가 발생시키는 이벤트에 대한 테스트를 하는 경우 사용한다.test('테스트 설명', () => { render(); // 테스트를 위해 App 렌더링 const buttonElement = screen.getByTestId('plus-button'); fireEvent.click(buttonElemtn); // buttonElement 에 클릭 이벤트 발생 const counterElement = screen.getByTestId('counter'); expect(counterElement).toHaveTextContent(1); // counterElement 의 텍스트가 1 });Github Action 을 이용한 AWS S3 로 앱 자동 배포Jenkins, Circle CI, Travis CI, Github 등이 배포에 쓰인다. 강의에서는 Github 을 사용한다.순서저장소 생성 - 프로젝트와 연결 - Github 페이지에서 workflow (Node.js) 생성 - S3 버킷 생성 - 버킷 설정 변경 (정적 웹 사이트 호스팅 활성화) - 버킷 정책 변경 - Github workflow yml 파일에 앱 자동 배포 코드 추가 - IAM 사용자 추가 - Github 저장소 env 설정에 IAM 키 추가#8 Next.js 와 TypescriptNext.js리액트의 SSR (Server Side Rendering) 을 쉽게 구현할 수 있게 돕는 프레임워크이다.CSR 은 검색엔진에 최적화되어있지 않기 때문에 SSR 을 사용한다.Next.js 는 모든 페이지를 pre-render 하여 HTML 을 클라이언트에서 자바스크립트로 처리하기 전에 생성함으로써 SEO 검색엔진 최적화가 좋아진다.Next.js 에서 데이터를 가져오는 방법getStaticProps : Static Generation 으로 빌드할 때 데이터를 불러온다.페이지 렌더링 시 사용자 요청보다 먼저 필요한 데이터를 가져올 수 있을 때, 데이터를 headless CMS 에서 가져올 때, 모든 사용자에게 같은 데이터를 보여줄 때, 페이지가 미리 렌더링 되어야 하고 빨라야 할 때 사용한다.getStaticPaths : Static Generation 으로 데이터에 기반하여 pre-render 시에 특정한 동적 라우팅을 구현한다.path 는 어떤 경로가 pre-render 될 지 결정한다. params 는 페이지 이름이 pages/posts/[postId]/[commentId] 인 경우 postId, commentId 이다. fallback 이 false 이면 getStaticPaths 로 리턴되지 않는 것은 모두 404 페이지로 이동되며 true 인 경우는 fallback 페이지를 보여준다.getServerSideProps : SSR 로 요청이 있을 때 데이터를 불러온다.async 로 export 하면 Next.js 는 각 요청마다 리턴되는 데이터를 getServerSideProps 로 pre-render 한다. 따라서 다른 페이지로 이동했다가 이전 페이지로 돌아가도 최신 데이터가 반영된다. 요청할 때 데이터를 가져와야 하는 페이지를 미리 렌더링 할 때 사용한다.Static Site Generation (SSG) : 빌드 때 HTML 을 각 페이지별로 서버에 생성해 놓고 요청 시에 HTML 을 반환한다.TypeScript자바스크립트에 타입을 부여한 코드를 단순화하고 쉽게 디버그 할 수 있으며 타입 검사 및 컴파일 오류 검사의 기능을 수행하는 언어이다. 타입스크립트는 자바스크립트와 달리 브라우저 실행 시 파일을 한 번 변환하는 컴파일 과정을 거친다.타입스크립트의 타입은 자바스크립트의 타입들과 추가로 tuple, Enum, Any, Void, Never, Union 타입이 있다.any : 잘 알지 못하는 타입을 표현하며, 컴파일 때 타입 검사를 거치지 않는다. noImplicitAny 라는 옵션을 사용하면 any 타입을 썼을 때 오류를 발생시킬 수 있다.union : 둘 이상의 데이터 유형을 사용할 때 유니온 타입이라고 한다. ex. let code : (string | number);tuple : 지정한 순서와 타입만을 사용할 수 있는 특수한 형태의 배열 타입이다.enum : 열거형을 의미하며 별도의 값을 설정하지 않으면 0부터 시작한다.void : 데이터가 없고 타입이 없는 상태이다. any 와 반대의 이미이다.never : 절대 일어나지 않을 것이라고 확신할 때 사용하며 주로 함수의 리턴 타입으로 사용된다. 항상 오류를 리턴하거나 리턴 값을 절대로 내보내지 않음을 의미한다.void vs never : void 는 값으로 undefined, null 을 가질 수 있으나 never 는 어떠한 값도 가질 수 없다.type annotation : 개발자가 타입을 타입스크립트에게 직접 전달한다.type inference : 타입스크립트가 알아서 타입을 추론한다.type assertion : 값의 타입을 설정하고 컴파일러에게 유추하지 않도록 지시한다.#9 React Version 18Automatic batchingbatching 은 업데이트 대상이 되는 상태값들을 하나의 그룹으로 묶어 한 번의 리렌더링으로 모든 업데이트가 진행될 수 있게 하는 것을 말한다.적은 리렌더링, 이벤트 핸들러 밖에서도 작동하며 필요할 때 제외 가능한 것이 특징이다.Suspense on the server 를 사용하여 앱을 더 작은 독립 단위로 나누어 앱 사용자가 콘텐츠를 빨리 보고 빠르게 상호작용할 수 있다.Streaming HTML : 모든 데이터를 가져오기 전에 renderToString 대신 renderToPipeableStream 을 사용하여 HTML 을 스트리밍하는 방법이다.Selective Hydration : 모든 코드가 로드되기 전에 hydrate 하는 방법이다.hydration : 자바스크립트 논리를 전체 앱에 대해 서버 생성된 HTML 에 연결하는 것이다.Transition업데이트에 urgent 를 주어 상태 업데이트 시에 우선순위를 주게 하는 기능이다.#10 Redux자바스크립트 애플리케이션을 위한 상태 관리 라이브러리이다. Redux 는 State 를 관리한다.Action -> Reducer -> Redux Store -> React Component -> (이벤트가 발생하면) -> ActionProvider : Redux Store 에 접근해야 하는 모든 중첩 구성 요소에서 Redux Store 를 사용할 수 있도록 한다.useSelector, useDispatch 를 이용해 provider 로 둘러싸인 컴포넌트에서 store 에 접근 가능하다.리덕스 미들웨어: 액션을 전달하고 리듀서에 도달하는 순간 사전에 지정된 작업을 실행할 수 있게 하는 중간자Redux Thunk : 리덕스를 사용하며 비동기 작업을 할 때 많이 사용한다.Redux Toolkit : 리덕스 로직을 작성하기 위한 공식 권장 접근 방식이다.Redux Persist : 페이지 새로고침 후에도 Redux Store 의 State 들을 유지할 수 있다.#11 도커를 이용한 리액트 실행Docker컨테이너를 사용하여 응용 프로그램을 쉽게 만들고 배포, 실행할 수 있는 컨테이너 기반의 오픈소스 가상화 플랫폼이다. 프로그램 다운로드 과정을 간단하게 만들기 위해 사용한다.컨테이너 안에 다양한 프로그램, 실행환경을 추상화하고 동일한 인터페이스를 제공해 프로그램의 배포 및 관리를 단순하게 하고 어디서든 실행 가능하게 한다.도커 클라이언트에서 커맨드 실행 - 도커 서버에서 이미지가 로컬에 캐시 되어있는지 확인 - 캐시된 이미지가 없는 경우 도커 허브에서 이미지를 가져와 로컬 캐시에 저장한다 - 이미지로 컨테이너를 생성한다 - 이미지로 생성된 컨테이너는 이미지에서 받은 설정이나 조건에 따라 프로그램을 실행한다.도커 파일, 이미지도커 파일 생성 순서 : 베이스 이미지 명시 - 추가로 필요한 파일 다운을 위한 명령어 명시 - 컨테이너 시작 시 실행될 명령어 명시베이스 이미지는 이미지의 기반으로 간단하게 OS 라고 생각하면 된다.이미지는 응용 프로그램 실행 시 필요한 모든 것 (실행 명령어, 파일 스냅샷)을 포함하고 있다.파일 스냅샷은 디렉토리나 파일을 카피한 것이다.도커 이미지 생성 순서 : 도커 파일 작성 - 도커 빌드로 도커 파일의 명령어들이 도커 클라이언트에 전달 - 도커 서버 - 이미지 생성포트 매핑이미지를 만들 때 로컬의 파일을 컨테이너에 복사하듯이 네트워크도 로컬 네트워크와 컨테이너 내부의 네트워크를 연결해줘야 한다. -p 키워드로 매핑을 할 수 있다. ex docker run -p 3000 : 3000 이미지 이름 -> 3000번 포트끼리 연결함도커 컴포즈 파일을 작성하면 도커 실행 시에 긴 명령어를 간단하게 만들 수 있다. 느낀점TDD 와 배포, 타입스크립트, 도커까지 배웠다. 테스트 코드를 직접 작성해보니 신기했다. 테스트를 용이하게 하기 위해 함수와 컴포넌트를 작게 만들어야 한다는 것을 확실히 깨달았다. 범위가 크면 테스트 코드 작성하기가 매우 복잡할 것 같다. 이전에 배포는 해본 적이 없어서 S3 에 코드 배포하는 것이 가장 흥미로웠다. 기존에 자바스크립트로 짰던 코드를 리팩토링 해볼 예정이다. 수업을 들을 때는 간단했는데 직접 하려고 했더니 많이 헷갈렸다. 시간이 부족해서 과제를 원하는 만큼 구현하지 못한 것 같아 아쉽다. 워밍업 클럽을 수료하고 나서도 남은 과제를 풀어야겠다.

[인프런 워밍업 클럽 1기 FE] 2주차 미션

2주차 미션📍2024.05.03 ~ 2024.05.10🐾 2주차 발자국미션 - 예산 계산기📂 레포지토리

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

2주차 발자국📍2024.05.03 ~ 2924.05.10🏁 2주차 미션강의 요약#7 Iterator, GeneratorSymbol 은 ES6 에서 추가된 원시 타입이며 생성자 함수를 이용해서만 생성할 수 있다.Symbol 을 사용하면 유일한 식별자를 만들 수 있다. for/in 과 getOwnPropertyNames 에서 제외된다.Iterator 는 next( )를 호출하여 두 개의 속성(value, done)을 가지는 객체를 반환하는 객체이다.Generator 는 사용자의 요구에 따라 다른 시간 간격으로 여러 값을 반환할 수 있다.yield 는 Generator 함수의 실행을 일시적으로 정지시키며 일반 함수의 return 과 유사하다.#8 Design Pattern디자인 패턴은 응용 프로그램이나 시스템을 디자인의 일반적인 문제를 해결할 때 사용할 수 있는 공식화된 모범 사례이다.최고의 솔루션, 재사용성, 풍부한 표현력, 향상된 의사 소통, 필요없는 코드 리팩토링, 코드베이스 크기 감소의 장점이 있다.싱글톤 패턴 : 클래스의 인스턴스를 한 개의 객체로 제한한다.팩토리 디자인 패턴 : 팩토리 함수를 사용하여 비슷한 객체를 여러 개 만들 수 있다.중재자 패턴 : 객체 그룹에 대한 중앙 권한을 제공한다.상태 패턴 : 특정 상태를 나타내는 객체 집합에 상태별 논리를 제공하여 객체가 내부 상태에 따라 행동을 변경할 수 있다.모듈 패턴 : 큰 파일을 여러 개의 작고 재사용 가능한 조각으로 분할할 수 있게 돕는다.관찰자 패턴 : 주체에 변경 사항이 생기면 주체를 관찰하는 관찰자가 알 수 있다.#1 리액트란?리액트는 뷰, 앵글러 프레임워크와 달리 자바스크립트 라이브러리이다.배우기 쉽고, 라이브러리 환경, 사용성이 검증됨 등의 이유로 리액트를 많이 사용한다.리액트는 실제 DOM 을 복사하여 메모리에 저장한 가상 DOM 을 사용한다. 가상 DOM 끼리의 비교하는 과정인 Diffing 을 통해 변경된 부분을 파악하고 변경된 부분을 Batch Update 로 실제 DOM 에 한 번에 적용시키는 Reconciliation 을 통해 DOM 을 조작한다.리액트 컴포넌트는 리액트로 만들어진 앱을 이루는 최소한의 단위이며 클래스형 컴포넌트, 함수형 컴포넌트가 있다.리액트를 사용하기 위해서는 웹팩, 바벨 라이브러리가 필요하다.웹팩은 여러 개의 파일을 하나의 자바스크립트 코드로 압축하고 최적화 하는 라이브러리이다.바벨은 최신 자바스크립트 문법을 지원하지 않는 구형 브라우저에서도 작동할 수 있게 변환시켜주는 라이브러리이다.#2 To-Do 앱으로 리액트 익히기packages.json 에는 해당 프로젝트의 이름, 버전, 필요한 라이브러리와 라이브러리의 버전들과 앱 시작, 빌드, 테스트할 때 사용할 스크립트가 명시되어있다.SPA란 페이지마다 html 을 가지는 MPA와 달리 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것을 말한다.SPA의 화면 변경은 History API 를 이용한다.JSX 는 자바스크립트의 확장 문법이며 UI 표현 시에 자바스크립트와 HTML 을 같이 사용할 수 있어 스크립트 내에서 UI 작업이 편리하다.리액트에서 요소의 리스트를 나열할 경우에 필요한 Key 는 리액트가 변경, 추가, 제거된 항목을 식별하는 데 사용된다. Key 를 이용해서 가상 DOM 에서 바뀐 부분을 인식할 수 있다.리액트 State 란 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 가진 객체이다. State 가 변경되면 컴포넌트가 Re-rendering 되며 State 는 컴포넌트 내에서 관리된다.#3 To-Do 앱 최적화React Hooks 란 class 없이 state 를 사용할 수 있는 새로운 기능이다.클래스 컴포넌트: 많은 기능, 긴 코드, 복잡한 코드, 더딘 성능함수형 컴포넌트: 적은 기능, 짧은 코드, 간결한 코드, 빠른 성능React Hooks 의 장점함수형 컴포넌트에서도 리액트 생명주기를 사용할 수 있다. 코드가 간결해진다.HOC (Higher Order Component) 컴포넌트를 Custom React Hooks 로 대체하여 Wrapper 컴포넌트를 줄인다. State컴포넌트 내부에서 데이터 전달 시 사용한다. 변경이 가능하다. 변경되면 리렌더링 된다.PropsProperties 의 줄임말. 부모 컴포넌트로부터 자녀 컴포넌트에 데이터를 전달할 때 사용한다. 읽기 전용이므로 자녀 컴포넌트에서는 변하지 않는다. 변경할 경우 부모 컴포넌트에서 State 를 변경시켜줘야 한다.TailWindCSSHTML 안에서 CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크이다.CSS 프레임워크는 레이아웃 및 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 프로젝트에 적용할 수 있는 CSS 파일 모음이다.장점: 빠른 스타일링, class/id 작성에 대한 어려움 감소, IntelliSense 플러그인으로 익숙해지기 쉬움리액트 불변성원시 타입: 불변성O, 고정된 크기로 call stack 메모리에 저장, 실제 데이터가 변수에 할당됨참조 타입: 불변성X, 정해지지 않은 크기로 call stack 메모리에 저장, 데이터의 값은 heap 에 저장되며 heap 메모리의 주소값이 변수에 할당됨불변성을 지켜야 프로그래밍의 복잡도가 감소하고, 리액트가 변경사항을 확인하여 업데이트할 수 있다.불변성을 지키는 방법참조 타입의 값을 바꾸는 경우 새로운 배열을 반환하는 메소드(spread operator, map, filter, slice, reduce)를 사용한다.cf. splice, push 는 원본 데이터를 변경하는 메소드이다.HTML Drag and Drop API 을 쉽게 구현할 수 있게 도와주는 모듈: react-beautiful-dndReact.memo 를 사용함으로써 불필요한 렌더링을 막을 수 있다.useCallback 을 이용하여 컴포넌트 렌더링 시 함수도 새로 만들게 되는데 이 같은 현상(리렌더링-함수 재생성-자식 컴포넌트 리렌더링) 을 막아 함수 최적화를 할 수 있다.useMemo 를 이용하여 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력 발생 시 캐시된 결과를 반환하여 컴퓨터의 속도를 높일 수 있는 메모이제이션을 사용할 수 있다. 컴포넌트가 리렌더링 되더라도 동일한 입력이라면 이전 렌더링 때 저장된 값을 재활용한다.localStorage 를 이용하면 페이지가 새로고침되어도 데이터가 남아있게 할 수 있다.객체나 배열을 저장할 경우 JSON.stringify 를 사용해야 한다.#4 Netflix 앱 - 1Axios 란 브라우저, node.js 를 위한 promise API 를 활용하는 HTTP 비동기 통신 라이브러리인스턴스화하면 중복된 부분을 계속 입력하지 않고 사용할 수 있다.Styled Component 란 Css-In-JS 라고 하는 자바스크립트 파일 안에서 CSS를 처리할 수 있게 해주는 라이브러리이다.Iframe 은 HTML Inline Frame 요소이다. 다른 HTML 을 해당 웹페이지 내부에 제한 없이 다른 페이지를 삽입할 수 있다.#5 Netflix 앱 - 2Element.scrollLeft 속성은 요소의 콘텐츠가 왼쪽 가장자리에서 스크롤되는 픽셀 수를 가져오거나 설정한다.innerWidth 는 브라우저 내부의 가로 길이이다.React Router DOMReact Router DOM 을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있고, 컴포넌트 기반 라우팅이 용이하다.Routes : 앱에서 생성될 모든 개별 경로에 대한 컨테이너 역할이며 가장 첫번째 Route 를 렌더링한다.Route : 단일 경로를 만드는 데 사용한다. path 와 element 속성을 가진다.path 는 원하는 컴포넌트의 URL 이고, 원하는대로 이름을 정할 수 있다.element 에는 경로에 맞게 렌더링 되어야 하는 컴포넌트를 지정한다.React Router DOM APIs중첩 라우팅 : 대부분의 레이아웃을 URL 세그먼트에 연결할 수 있다.Outlet : 자식 경로 요소를 렌더링 하기 위해서 부모 요소에서 사용해야 한다.useNavigate : 경로를 바꾼다.useParams : :style 문법을 path 경로에 사용한 경우 useParams 로 읽을 수 있다.useLocation : 현재 위치 객체를 반환한다.useRoutes : 와 기능적으로 동일하나 대신 자바스크립트 객체로 경로를 정의한다.useRef : 특정 DOM 을 선택할 때 사용한다.Debounce function 을 사용하면 미리 결정한 시간 동안 이벤트의 처리를 지연시킬 수 있다.swiper 모듈을 사용하면 터치 슬라이드를 쉽게 구현할 수 있다. 느낀 점예전에 다른 강의로 리액트 클론 코딩을 했었으나 자바스크립트를 잘 모를 때라 코드에 대한 이해 없이 따라쓰기를 했었다. 자바스크립트를 선행한 상태에서 리액트를 배우니 좀 더 쉽게 배우고 이해할 수 있었다. 동작의 원리가 궁금한 부분들이 있어 리액트 공식 문서를 읽어 추가로 정리할 예정이다. 아직 JSX 문법이나 state, prop 에 익숙하지 않아 미션을 수행하면서 직접 사용해봐야겠다.

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

1주차 미션📍2024.04.26 ~ 2024.05.02🐾 1주차 발자국미션 1 - 음식 메뉴📂 레포지토리menu.html 에 menu sample 을 만들어놓고 menu sample 을 clone 하여 사용했다.카테고리 클릭 시에는 해당 카테고리의 데이터를 DB에서 가져오는 것으로 가정했다.주요 로직getMenuList상단 카테고리 메뉴 클릭 시 카테고리를 파라미터로 받아 해당 카테고리의 데이터를 가져오는 함수이다.for 문을 사용하여 임시 데이터를 생성해 반환한다.renderMenumenu.html 의 menuSample 을 clone 하여 getMenuList 함수에서 받은 데이터들을 렌더링하는 함수이다. 느낀 점임시 이미지 처리를 위한 사이트가 있어 편리했다.jQuery 를 사용하다 vanilaJS 로 로직을 구현하려니 헷갈리는 점이 많았다.css 의 flex, grid 를 사용했는데 경험이 부족하여 시간이 많이 소요되었다. 다른 과제들을 하며 많이 사용해보아야 할 것 같다. 미션 2 - 가위 바위 보📂 레포지토리주요 로직즉시 실행 함수와 클로저를 사용했다.game : 즉시 실행 함수이다.match : 사용자 선택과 컴퓨터 선택을 비교하는 로직이다.renderCount : 이긴 사람의 카운트를 올린다.renderWinner : 남은 횟수가 0이 되면 우승자를 출력한다.reset : 다시하기 버튼을 눌렀을 때 실행되며, 이전 결과들을 초기화한다.return: start : 즉시 실행 함수의 return 함수이며 남은 횟수가 0이 아니면 match 함수를 호출한다.return: restart : 즉시 실행 함수의 return 함수이며 reset 함수를 호출한다. 느낀 점즉시 실행 함수를 사용하니 함수를 클래스 처럼 사용할 수 있어 재밌었다.클로저 사용이 미숙해서 시도해보았는데 이론은 알아도 직접 사용해보려니 어려웠다.클로저를 사용하니 각 함수를 호출할 때마다 파라미터로 넘겨주지 않아도 되어서 편리했다. safari devTools 스코프 체인 변수명1. 차단 변수 (Block Variable)2. 로컬 변수 (Local Variable)3. 종료 변수 (Closure Variable)미션 3 - 퀴즈📂 레포지토리미션 4 - 책 리스트📂 레포지토리form 의 submit 이벤트를 사용했다.form 영역은 flex, 리스트 영역은 grid css 를 사용했다.주요 로직클래스 문법을 사용했다.Book add Book 의 name, author 속성을 각각 span 으로 리스트 영역에 appendChild 한다.추후 삭제 처리를 위해 각 span 에 동일한 id 를 지정한다. addButton 삭제 버튼을 생성한 후 리스트 영역에 appendChild 한다. 위의 add 에서 사용한 id 값으로 버튼의 id 를 지정한다. 클릭 시 delete 함수를 호출한다. delete id 를 파라미터로 받아 동일한 id 를 가진 element 들을 삭제한다. 느낀 점grid css 를 사용했는데 타이틀 영역은 2칸인데 리스트 영역이 3칸으로 처리하느라 밑줄 표현이 까다로웠다.grid css 를 사용하기 위해 list 영역에 , 을 appendChild 했는데 html 이 깔끔하지 않아 개선이 필요하다.

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

1주차 발자국📍2024.04.26 ~ 2024.05.02🏁1주차 미션강의 요약#1 자바스크립트 기초console 객체는 브라우저의 디버깅 콘솔에 접근할 수 있는 메소드를 제공한다.변수 선언 시 var, let, const 를 사용한다. var는 함수 레벨, let/const 는 블록 레벨의 스코프를 가진다.자바스크립트 인터프리터는 선언과 할당을 분할하여 처리되므로 var, let, const, 함수가 선언 단계에서 호이스팅된다.하지만 var 는 할당 시에 undefined 가 할당되는데 let/const 는 아무것도 할당되지 않아 할당 전에 출력하려고 하면 에러가 발생한다.자바스크립트 타입에는 원시타입과 참조 타입이 있는데 자바스크립트는 느슨한 타입의 동적 언어이므로 자바스크립트의 변수는 어떤 특정 타입과 연결되지 않고 모든 타입의 값으로 할당 가능하다.자바스크립트 변수는 자바스크립트 함수를 사용하거나, 자바스크립트 자체에 의해 자동으로 다른 데이터의 유형으로 변환할 수 있다.백틱 문자를 사용하여 문자를 표현한 것을 템플릿 리터럴이라고 한다. 템플릿 리터럴을 사용하면 줄 바꿈이 쉽고 문자열 내부에 표현식을 사용할 수 있다.자바스크립트에서 루프를 사용하면 코드 블록을 여러 번 실행할 수 있다. 종류로는 for, for/in, while, do/while 이 있다.#2 Window 객체 및 DOM윈도우 객체는 브라우저에 의해 자동으로 생성된다. 윈도우 객체를 이용해서 브라우저 창의 정보를 알거나 제어할 수 있다. var 키워드로 선언된 변수나 함수는 윈도우 객체의 프로퍼티가 된다.DOM 이란 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게 브라우저가 트리 구조로 만든 객체 모델이다.DOM 에서 제공해주는 API 를 이용해 DOM 트리를 조작할 수 있다. DOM 에 수행되는 모든 연산의 시작은 document 객체에서 시작한다. childNodes 는 유사 배열 객체인 컬렉션이다. 컬렉션은 for/of, forEach 를 사용할 수 있으나 배열이 아니므로 배열 메서드를 사용할 수 없다. 배열 메서드를 사용하고 싶다면 Array.from 을 사용해 배열로 만드는 과정이 필요하다.요소 생성/제거/교체는 createElement/removeChild/replaceChild 를 사용한다.#3 Event이벤트는 웹 브라우저에서 발생하는 동작이다. 이벤트가 발생할 때 이벤트 객체를 가져올 수 있는데 이벤트 객체는 이벤트 리스너 내에서만 접근할 수 있다.이벤트 리스너는 이벤트가 발생했을 때 함수를 호출한다. addEventListener 를 이용해 이벤트 리스너를 객체나 요소에 등록할 수 있다.이벤트 종류로는 UI, 키보드, 마우스, 포커스, 폼이 있다.이벤트의 흐름에는 이벤트 버블링과 이벤트 캡처링이 있다.이벤트 버블링은 이벤트가 상위 요소로 전파되는 것이다. 타겟 이벤트에서 시작해서 document 객체를 만날 때까지 모두 발생한다. event.stopPropagation 메소드를 사용하면 버블링을 중단할 수 있다. preventDefault 메서드는 이벤트의 기본 동작을 방지하지만 이벤트 흐름을 중지하지는 않는다.이벤트 캡처링은 이벤트가 하위 요소로 전파되는 것이다.이벤트 위임은 하위 요소의 이벤트를 상위 요소에 위임하여 하위 요소의 이벤트를 상위에서 제어하는 것이다.#4 자바스크립트 중급메소드의 this 는 해당 객체이다. 함수에서의 this 는 window 객체이다. 생성자에서의 this 는 빈 객체이다. 화살표 함수에서의 this 는 상위 스코프의 this 이다.bind, call, apply 를 사용해서 this 를 바꿀 수 있다. 조건부 삼항 연산자는 if-else 문을 한 줄로 사용할 수 있게 한다.자바스크립트는 동기 언어이나 도움을 받아 비동기처럼 사용할 수 있다.이벤트 루프는 콜 스택과 콜백 큐를 주시하고 있다가 콜 스택이 비게 되면 콜백 큐의 함수를 콜 스택으로 이동시킨다.클로저는 함수 내부에 정의된 내부 함수가 있는 경우 함수가 실행이 완료되어 함수의 변수에 더 이상 접근할 수 없는 경우에도 내부 함수가 함수의 변수에 접근할 수 있는 것을 말한다.구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있는 자바스크립트 표현식이다. 구조 분해 할당을 사용하면 코드가 깔끔해진다.전개 연산자(...)는 특정 개체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다.map 메서드는 배열 내의 모든 요소 각각에 주어진 함수를 적용한 결과들을 새로운 배열로 반환한다.filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소들을 새로운 배열로 반환한다.reduce 메서드는 각 요소에 주어진 리듀서 함수를 실행하여 하나의 결과 값을 반환한다.원시 타입인 undefined / null 은 아무 값도 할당받지 않은 상태 / 존재하지 않는 값을 의미한다.null 은 자바스크립트 엔진이 이 변수에 대해 가비지 콜렉션을 수행한다.얕은 비교는 원시 자료형은 값, 참조 자료형은 참조 위치를 비교한다.깊은 비교는 모두 값으로 비교한다.깊은 복사와 달리 얕은 복사나 얕은 동결은 중첩된 부분은 복사, 동결되지 않는다.함수 선언문은 호이스팅에 영향을 받지만 함수 표현식은 호이스팅에 영향 받지 않는다.Intersection Observer 는 뷰포트와 설정한 요소의 교차점을 관찰한다.순수 함수는 same input - same output, no side effects 의 규칙을 가지는 함수형 프로그래밍 패러다임의 한 부분이다. 순수 함수는 클린 코드, 쉬운 테스트, 쉬운 디버그, 독립적인 코드를 위해 사용한다.커링은 함수와 함께 사용하는 고급 기술이며 자바스크립트 외의 언어에도 존재하며 f(a, b, c) 를 f(a)(b)(c) 로 변환한다.strict mode 는 기존에 무시되던 에러를 쓰로우하고 자바스크립트 엔진의 최적화 작업을 방해하는 실수를 바로잡아 비엄격 모드의 코드보다 더 빨리 작동하게 만든다.자바스크립트 엔진은 자바스크립트 코드를 실행하는 소프트웨어 구성 요소이며 초기 엔진은 인터프리터였으나 최신 엔진은 Just-In-Time 컴파일을 사용한다.즉시 실행 함수 표현(IIFE)은 정의되자마자 즉시 실행되는 자바스크립트 함수이다. 변수의 전역 선언과 즉시 실행 함수 내부에 다른 변수의 접근을 피하기 위해 사용한다. IIFE 를 변수에 할당하면 함수가 실행된 결과만 저장된다.#5 OOP (Object Oriented Programming)여러 개의 독립된 단위인 객체의 모임으로 컴퓨터 프로그램을 파악하는 프로그래밍 패러다임이다.명령어의 나열인 절차 지향에 비해 알아보기 쉽고 재사용성이 높다.객체 지향 프로그래밍의 특징으로는 자료 추상화, 상속, 다형성, 캡슐화가 있다.자료 추상화 - 불필요한 정보는 숨시고 중요한 정보만을 표현하여 프로그램을 간단히 만든다.상속 - 새로운 클래스가 기존 클래스의 자료와 연산을 이용할 수 있다.다형성 - 같은 메소드여도 인스턴스에 따라 다양한 형태를 가질 수 있다.캡슐화 - 클래스 안의 메서드, 변수를 하나로 묶어 보안이 강화되고 관리가 용이한 코드를 만든다.프로토타입은 자바스크립트 객체가 다른 객체로부터 메소드와 속성을 상속받는 매커니즘이다.ES6 의 Class 문법은 객체 지향 방식을 이용하지만 내부에서는 프로토타입을 사용해 작동된다. static 을 사용해 클래스 함수 자체에 설정된 정적 메서드를 만들 수 있다.extends 키워드를 사용하면 부모 클래스를 상속 받은 자식 클래스(sub class)를 만들 수 있다.super 키워드는 자식 클래스 내에서 부모 클래스의 생성자, 메서드를 호출할 때 사용한다.#6 비동기 자바스크립트는 싱글 스레드이므로 빠른 수행을 위해 비동기를 사용한다.비동기 요청이 여러 개인데 한 요청이 다른 요청에 의존하는 경우를 처리하기 위해 Callback 함수, Promise, Async await 을 사용한다.콜백 함수는 특정 함수에 매개변수로 전달된 함수이다.Promise 객체는 두 개의 실행 함수를 매개변수로 사용한다. 첫번째 함수는 작업이 성공적으로 완료했을 때 결과 값을 반환할 때 호출하고, 두 번째 함수는 작업이 실패하여 오류를 반환할 때 호출된다.Promise 의 상태로는 대기 - 비동기 처리 로직이 완료되지 않음, 이행 - 비동기 처리가 완료되어 프로미스가 결과 값을 반환함, 거부 - 비동기 처리가 실패하거나 오류가 발생한 상태가 있다.Promise.all 은 순회 가능한 객체에 주어진 모든 프로미스가 이행된 경우 이행한다.Promise.race 는 순회 가능한 객체에 주어진 모든 프로미스 중에 가장 먼저 완료된 것의 결과값으로 이행, 거부한다.async await 은 비동기 코드를 동기처럼 보이게 하고 promise-then 보다 가독성이 좋다. await 은 async 함수 내부에서만 사용할 수 있다.ECMAScript 는 ECMA-262 기술 규격에 정의된 범용 스크립트 언어이다. 자바스크립트는 ECMAScript 사양을 준수한다. 느낀 점1주차는 기존에 알고 있지만 명확하지 않았던 개념들을 정리할 수 있었다.특히 this 의 스코프 부분을 배우며 왜 함수 선언식에서는 접근할 수 없던 변수가 화살표 함수에서는 접근이 가능했는지 알게 되어 좋았다. 배운 이론들을 미션에 적용시켜 확실하게 이해할 수 있도록 노력해야겠다. 시간이 부족하여 강의 요약이 가독성이 떨어지는데 이후에 깔끔하게 정리하여 복습하기 편하게 만들어야겠다.