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

강의 수강1) 일주일 간 학습한 내용dom testing librarydom 노드를 테스트하기 위한 솔루션react testing libraryreact 컴포넌트를 테스트하기 위한 솔루션enzyme : 구현 주도 테스트(태그 하나하나의 의미가 중요하고 의도와 맞지않으면 오류로 판단)react testing : 행위 주도 테스트(사용자 입장에서 구현만 제대로 되면 되기때문에 태그의 의도가 중요하지 않음.)Jest단위 테스트를 위해 만들어진 테스팅 프레임워크 파일명.test.js / 파일명.spec.js 로 파일명 쓰면 테스트를 위한 파일이다라고 생각함describe : 관련 테스트의 묶음test(=it) : 개별의 테스트expect와 matcher는 항상 함께 쓰임쿼리함수 : 페이지에서 테스트할 요소를 찾기위한 함수 - get: 테스트 실패시 에러반환 - query : 요소가 없으면 null반환 - find: 주어진 요소가 일치하면 요소반환 - wait: 일정시간 동안 대기할때 사용 get + wait = find배포IAM(Identity and Access Management) AWS 리소스에 대한 액세스를 루트 사용자가 권한을 부여해 안전하게 제어할수 있는 웹서비스csr을 하면 빈 html을 가져와 js파일을 해석해 화면을 구성하기 때문에 검색에 노출 될 일이 없음. next.js는 ssr로 pre-rendering(js로 처리하기전 HTML생성)을 통해 완성된 html을 가져오기 때문에 검색엔진 크롤러에게 바로 렌더링된 페이지를 전달하여 검색엔진 최적화를 할 수 있음.폴더구조_app.tsx 공통되는 레이아웃을 작성하는 파일로 url로 특정 페이지에 진입하기 전 통과하는 인터셉터 페이지next.config.js Next.js 는 웹팩을 기본 번들러로 사용하므로 웹팩에 관한 설정들을 이 파일에서 사용함.데이터를 가져오는 방법getStaticProps Static Generation으로 빌드할때 데이터를 불러옴.getStaticPaths 동적 라운팅 구현 (pages/post/[id].js)getServerSideProps Server Side Rendering으로 요청이 있을때 데이터 불러옴. 데이터를 가져와야하는 페이지를 미리 렌더링해야할 때 사용함. TypeScript TypePrimitive Types : number / boolean/ string/ symbol / void / null / undefinedObject Types : functions / arrays/ classes / objects그 외Tuple : 타입이 고정된 배열Enum : 집합에서 어떤 값을 친숙한 이름으로 사용하기 위해 활용, 객체와 차이점은 선언한 이후 변경불가하다는 점Any : 잘 알지 못하는 타입Void : 함수가 값을 반환하지 않을때 사용Never : 무한루프, 오류를 리턴할때 사용 → Void에 반해 어떤값도 가질수없음.Union : 둘 이상의 데이터 유형 사용Type annotation, Type inferenceType annotation : 개발자가 타입을 직접 지정함.Type inference : ts가 알아서 타입을 추론함.Type assertion프로그래머가 컴파일러에게 내가 너보다 타입에 대해 잘알고있다 즉, 타입을 바꿀수 있는것을 말함.REACT Version18Automatic batching 업데이트 대상의 상태값들을 하나의 그룹으로 묶어 한번에 리렌더링 업데이트 될수있도록 해줌.Suspence on the server 리액트 ssr의 경우, 빨리 생성된 컴포넌트가 다른 컴포넌트를 위해 기다려야하기때문에 비효율적임. → suspense를 사용해 더 작은 독립단위로 나눠 해결가능transition상태 전환 중에 어떤 업데이트가 더 긴급한지 알려줘서 우선순위를 주게됨. 사용자 상호 작용을 개선 가능함.18버전 이전에는 어떻게 했는지? debounce이용 / setTimeout 이용 / state를 두개로 나눠서 따로 처리리덕스store를 활용해서 state 상태를 보관하거나 업데이트해주는 상태 관리 라이브러리데이터 흐름 aciton → (call the reducer) → reducer → (Update Store) → redux store → (Render new View) → react component → (Dispatch Synchronous Action) → actionaction 작업의 유형인 type속성과 선택적으로 redux 저장소에 데이터를 보내는 payload 속성을 가진 JS 객체reducer애플리케이션 상태의 업데이트 상태를 반환하는 함수(previousState, action) ⇒ nextState // 이전 state와 action object를 받아 nextState를 return함.redux store애플리케이션 전체 상태 트리를 보유하는 객체내부 상태를 변경하는 것은 action을 전달하는 것.subscribe() getState()를 호출하여 작업이 전달될때마다 콜백 내부의 현재 상태 트리를 읽을 수 있음.combineReducers() 여러개의 리듀서를 만들어주는 것 루트 리듀서를 만들어서 그 아래 서브 리듀서를 넣어주면 됨.리액트 hook 처럼 리덕스 Hooks가 있음. 아래 두개를 이용해 provider로 둘러싼 컴포넌트에서 store에 접근 가능함.useSelector : 스토어의 값을 가져올 때 사용.useDispatch : dispatch 함수에 접근할 때 사용.리덕스 미들웨어 action을 dispatch 전달하고 reducer에 도달하는 순간 사전에 지정된 작업을 실행할 수 있게 해주는 중간자. ex) 비동기 api 통신, 라우팅 등에 사용도커어떤 프로그램을 다운 받는 과정을 간단하게 만들기 위함.컨테이너를 사용해 응용프로그램을 더 쉽게 만들고 배포할수 있는 오픈소스 가상화 플랫폼.컨테이너 : 컨테이너에 물건을 넣고 쉽게 옮길 수 있듯이 컨테이너 안에 다양한 프로그램을 추상화하여 배포를 단순하게 해줌. aws, azure등 어디에서든 실행 가능함.2) 미션 / 학습 내용에 대한 회고일주일 만에 Next.js, TypeScript, Redux 를 익히고 프로젝트에 적용하기에는 무리가 있었다. 아직 리액트로 프로젝트를 개발하면서 심도있는 내용은 이해해나가는 과정인 것 같다. 비록 스터디 기한은 끝났지만 3주간의 흐름을 이어받아 React+TypeScript + Redux 조합의 프로젝트와 Next.js+TypeScript 조합의 프로젝트를 각 1개 이상씩 개발하고 싶다. 미션 저장소: https://github.com/kathy0917/inflearn-warming-up-fe-1/tree/main

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

강의 수강1) 일주일 간 학습한 내용이번주도 마찬가지로 이전에 접했던 개념이지만 다시 봐도 헷갈렸던 개념, 몰랐던 개념 위주로 정리해보았다.symbol()유니크한 식별자를 만들기위해 사용함.객체를 for in으로 추출할때 symbol 식별자는 통과하지 않음. Generator 함수사용자의 요구에 따라 다른 시간 간격으로 여러 값을 반환 function* generatorFunc(){ yield 1; //return 1과 같은 의미 yield 2; yield 3; } const number = generatorFunc(); console.log(number.next()); //1 console.log(number.next()); //2 console.log(number.next()); //3 //아래 2개는 같은 의미 const generator = generatorFuncion(); const generator = generator[Symbol.iterator](); 디자인 패턴Singletone design pattern 각각의 다른 객체를 하나의 객체로 제한하는 패턴Factory design pattern 비슷한 객체를 반복적으로 만들어야하는 상황에 이용하는 패턴Mediator Pattern 채팅방 예시) 채팅방에 입장후 메시지를 보낼때 중재자를 통해서 메세지를 보내는 패턴Observer Pattern subject를 관찰하는 observer들이 있을 때 관심있는 주제를 구독하고 취소하는 Publisher(게시자)-Subscriber(구독자) 관계 패턴Module Pattern 코드를 최대한 분할하여 모듈화하는 패턴프로젝트 개발setInterval(startTimer,10); 1000ms 가 1초이면 10ms 간격으로 startTimer 함수 실행프레임워크 vs 라이브러리프레임워크 : 앱을 만들기 위해 필요한 대부분의 라이브러리를 포함하고 있음.라이브러리 : 특정 기능을 모듈화 해놓은 것.프레임워크는 라이브러리를 포함하고 우리가 작성한 코드를 호출함. 또한 코드는 기능 구현을 위해 라이브러리를 호출하는 관계를 가짐.Node.js웹 브라우저 환경이 아닌 곳에서도 자바스크립트로 연산가능하게 하는 자바스크립트 런타임.리액트 설치 시 필요한 이유: 프로젝트를 개발하는데 필요한 도구들이 Node.js를 사용하기 때문 ex) 주요 개발 도구 - 바벨 : 최신 js 문법을 지원하지 않는 브라우저에서도 최신 js문법이 돌아갈수 있도록 변환해주는 라이브러리 - 웹팩 : 모듈화된 코드를 하나의 js코드로 압축하는 라이브러리 - npx: 노드 패키지 실행을 도와주는 도구가상 돔 virtual dom 등장 배경웹페이지 빌드 과정에서 dom에 변화가 발생하면 render tree재성성 → layout → repaint 의 과정을 반복함. 인터렉션이 많아지면 성능상의 문제를 초래하기 때문에 실제 dom을 메모리에 복사해준 virtual dom이 등장함.가상 돔은 브라우저 문서에 직접 접근하여 화면 요소를 수정할 수 없음.가상 돔 virtual dom 작동방식랜더링 이전 가상돔과 바뀐 가상 돔을 비교 → Diffing바뀐 부분만 실제 돔에 적용시켜주는 것 → reconciliation (재조정)재조정 과정에서 바뀐 state가 n개라면 n번 조작하는 것이 아닌 한번의 dom조작으로 변화를 반영함. → batch update리액트 기본구조webpack 은 src내 파일만 처리함.전개 연산자객체const obj1 = { a: 'A' }; const obj2 = { b: 'B' }; const objWrap = {obj1,obj2}; console.log(objWrap) /*{ obj1:{ a: 'A' }, obj2:{ b: 'B' } }*/ const objWrap2 = {...obj1, ...obj2}; console.log(objWrap2); /* { a: 'A', b: 'B' } */ SPASPA에서 페이지 전환(브라우징)은 html5의 history api를 사용해서 가능하게 함.history.back() : 브라우저의 뒤로가기 효과history.go(): 특정 세션기록으로 이동하게 해주는 비동기 메서드. 1을 넣으면 바로 앞페이지/-1을 넣으면 바로 뒤페이지로 이동history.pushState(): 주어진 데이터를 세션 스택에 넣음.React Hooksclass없이 state를 사용할수 있는 기능TailWindCSShtml안에서 css스타일을 만들게 해주는 css 프레임워크빠른 스타일링이 가능하며 class혹은 id명을 작성하지 않아도 됨.리액트 불변성배열과 객체 같은 참조 타입은 불변성을 가지고 있지 않음.(mutable)리액트에서 화면을 업데이트할때마다 변경된 부분을 확인해야하므로 불변성을 지켜줘야함. → spread 연산자, map, filter, slice, reduce 활용(splice, push 는 원본 데이터 변경함.) useDebouncedebounce란 검색 입력에 입력결과가 나타날때까지 지연이 있는 기능위 기능을 사용하지 않으면 입력한 모든 문자를 처리해서 성능이 저하됨.2) 학습 내용에 대한 회고그동안 React로 토이 프로젝트를 하면서 겉핡기식으로만 알고 있었다는 것을 절실히 깨달았다. 이번주 강의를 수강하며 성능을 고도화시키기 위해 hooks를 만들어 사용하는 점을 배웠다. 아직 부족하지만 앞으로 사이드 프로젝트를 하면서 적용해봐야겠다.미션1) 미션 해결 과정문제 현상예산 계산기 앱을 구현하며 예상치 못한 문제가 발생했다. 예산 데이터 리스트 Lists 컴포넌트 아래 각각의 데이터를 나타내는 List 하위 컴포넌트를 구현했다. 하지만 List 컴포넌트가 화면에 보이지 않았고 에러 메시지도 없었기 때문에 당황스러웠다.원인List 컴포넌트를 map 함수로 표기하는 과정에서 JSX 반환코드를 {} 안에서 사용한 것이 문제였다. 이러한 경우에는 return 키워드로 반환하거나 ()로 감싸서 반환해야한다. 해결방안//변경 전 코드 const Lists = ({ budgetData }) => { return ( {budgetData.map((data) => { ; })} ); }; //변경 후 코드 const Lists = ({ budgetData }) => { return ( {budgetData.map((data) => ( ))} ); }; 2) 미션 해결에 대한 회고타이핑 테스트 앱wpm, cpm 등 각각의 기능을 계산하는 방법을 파악하는데 시간이 꽤 소요됐다. 또한, 글자를 타이핑하면서 실시간으로 맞은문자, 틀린 문자를 초록색, 빨간색으로 변경하는 방법도 고민됐었다. 다른 사람들에겐 쉬운 과제였을수 있겠지만 나에게는 생각보다 고려해야할 부분이 많았던 과제였다.2. 예산 계산기 앱오랜만에 리액트 앱으로 개발을 하게되어 떨리는 마음으로 과제를 시작했다. 중간점검 때 강사님께서 어느정도 관습성을 가진 코드가 좋은 코드라 했던 말이 떠올랐다. 그래서 강의에서 다뤘던 내용을 중심으로 따라가다보니 재미를 느끼며 개발을 할 수 있었다. 물론, 모방이 주가 아닌 본인만의 색깔을 가져야 한다고 하셨으니 나만의 색을 가진 코드를 짤 수 있도록 개발 역량을 쌓아야겠다.3. 디즈니 플러스 앱아직 구현할 기능들이 조금 남아있지만 확실히 swiper와 같이 라이브러리를 추가하면서 겪는 문제들이 많아졌다. 그러다보니 시간이 더 오래걸리는 것 같다. 그래도 끝까지 마무리하는 습관을 가져야지!👏

[과제 총정리] 인프런 워밍업 클럽 스터디 FE 1기

1주차과제1 (Day2) - 음식 메뉴 앱깃허브 : https://github.com/kathy0917/inflearn-warming-up-fe-1/tree/main/01_FoodMenuApp과제2 (Day3) - 가위 바위 보 앱깃허브 : https://github.com/kathy0917/inflearn-warming-up-fe-1/tree/main/02_RockPaperScissorsApp과제3 (Day4) - 퀴즈 앱깃허브 : https://github.com/kathy0917/inflearn-warming-up-fe-1/tree/main/03_QuizApp과제4 (Day5) - 타이핑 스피드 측정 앱깃허브 : https://github.com/kathy0917/inflearn-warming-up-fe-1/tree/main/04_TypingTestApp과제5 (Day6) - 예산 계산기 앱깃허브 : https://github.com/kathy0917/inflearn-warming-up-fe-1/tree/main/05_budget_calculator_app

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

강의 수강1) 일주일 간 학습한 내용이전에 접했던 개념이지만 다시 봐도 헷갈렸던 개념, 몰랐던 개념 위주로 정리해보았다.const vs let vs varconst , let → 블록 레벨 스코프function func(){ if(true){ let a = 0; } console.log(a) // reference error } var → 함수 레벨 스코프function func(){ if(true){ var a = 0; } console.log(a) // a 출력 } 호이스팅- 코드 실행 전 변수나 함수 선언을 맨 위로 끌어올려지는 것을 의미함.// 1. var 변수 생성시 undefined로 선언 후, hello 할당 console.log(greeting); //undefined 출력 var greeting = 'hello'; // 2. let, const 변수 생성 시 // 호이스팅은 발생하지만 초기에 초기화되지 않고 값을 할당하기 전에 콘솔 로그가 발생함. // 발생 원인: TDZ(Temporal Dead Zone) // → 선언단계와 할당 단계 사이 변수를 사용할 수 없는 일시적 비활성 상태 console.log(greeting); // reference error let greeting = 'hello'; 최대한 let보다 const를 사용하되 let 사용시 scope를 좁게 만들어서 사용하자.for vs forEachfor가 forEach 보다 성능이 좋음.따라서 복잡한 코드인 경우에는 for가 좋지만 가독성 측면에서는 forEach가 좋을 수 있음.for는 await과 함께 동작하지만 forEach는 await과 완벽하게 동작하지 않음.DOMDOM vs BOMDOM(Document Object Model)- DOM은 웹 브라우저가 HTML 페이지를 인식하게 해주는 트리구조로 된 객체 모델을 의미함.- JavaScript와 html을 연결해주는 역할BOM(Browser Object Model)- JavaScript가 브라우저와 소통하는 역할- window객체를 제어함.DOM 동작방식브라우저가 서버에서 페이지에 대한 응답을 받아 화면에 표시하는 단계1. DOM 트리 생성2. Render 트리 생성 - 브라우저가 DOM과 CSSOM(javascript가 css를 조작할 수 있는 api)을 결합하는 과정으로 화면에 표시되는 노드의 정보, 스타일 정보를 포함3. Layout - 브라우저 요소의 크기와 위치 계산 4. Paint - 실제 화면에 렌더링Document Object 이용document.getElementsByTagName으로 불러온 노드를 배열로 변환하는 방법let li = document.getElementsByTagName('li'); //collection으로 출력 li = Array.from(li); console.log(li); // 배열로 출력innerHTMLhtml까지 같이 보여줌.innerText 사용자에게 보여지는 화면 그대로 보여줌.(실제 코드에서 공백이 여러개이지만 1개 공백으로 처리)textContentdisplay:none과 같이 숨겨진 노드도 출력하고 텍스트 값 그대로 보여줌.childNodes 또한 collection 이며 collection의 특징은 아래와 같음.collection을 순환할때 for…of, forEach() 사용가능하며 for…in 은 사용 불가능함.collection은 배열이 아니기 때문에 filter와 같은 배열 메서드 사용 불가함. eventeventBubbling이벤트가 발생했을 때 중첩된 상위 요소로 이벤트가 전달되는 현상e.stopPropagation()으로 해당 현상을 막을 수 있음.eventCapturing이벤트가 아래 요소로 전달되는 현상preventDefault()별도의 브라우저 행위(ex. submit 태그 실행 시 화면이 새로고침 되는 현상)를 막을 수 있음.2) 학습 내용에 대한 회고연휴 겸 여행을 가게 되어 ktx 열차 안에서 틈틈이 강의를 들었다. 덕분에 진도를 따라잡을 수 있었지만 꼼꼼하게 내용을 기록하지 못해 아쉬웠다. 또한, 과제를 더 완벽하게 해낼 시간이 부족했기 때문에 2주차는 스터디에 시간을 더 소비해야겠다는 생각이 들었다. 미션1) 미션 해결 과정문제 현상가위 바위 보 앱을 구현하며 다시 시작 버튼을 누르고 가위 바위 보 버튼 중 하나를 클릭하면 게임 총 횟수가 2개씩 줄어드는 현상이 발생했다.문제점콘솔로 가위 바위 보 버튼 이벤트 타겟을 찍어보니 클릭은 한 번만 했지만 이벤트 타겟은 2개가 찍히는 문제가 있었다.원인처음엔 버튼을 감싸고 있는 부모태그까지 이벤트가 전달되는 '버블링 현상' 인줄 알고 e.stopPropagation() 을 적용해보았지만 해결이 되지 않았다. 구글링을 통해 익명함수로 이벤트 리스너를 사용하면 새로운 객체로 생성되어 중복이 발생한다는 점을 알게되었다.해결방안익명함수 대신 선언적 함수로 코드를 수정하니 클릭 이벤트가 한번만 발생했다. 2) 미션 해결에 대한 회고음식 메뉴 앱반응형 레이아웃을 적용해보려고 노력했지만 의도와 다르게 정렬이 흐트러졌다. 해당 과제를 통해 css 지식이 많이 부족하다고 느꼈고 추후에 css 개념을 공부해서 수정해야겠다는 생각이 들었다. 지금은 JavaScript 공부에 더 집중해야겠다.2. 가위 바위 보 앱, 퀴즈 앱가위 바위 보 앱을 구현하며 이벤트 중복 현상을 해결하기 위해 시간을 많이 소비했고 처음부터 설계를 제대로 못해서 스파게티 코드가 된 것 같다. 평소에 토이 프로젝트로 프론트엔드 개발 역량을 많이 쌓아야겠다.3. 퀴즈 앱이전 과제들의 부족한 점을 생각하며 init() 함수에 미리 구현해야할 함수명들을 적어놓고 시작했다. 하지만 중간에 버튼을 변경하는 부분에서 코드가 꼬이기 시작하더니 마찬가지로 코드가 복잡해졌다. retry, next 버튼을 변경하는 부분에서 display: none으로 스타일링에 변화를 줘야할지 innerText로 버튼명을 변경해야할지 고민을 했던 것 같다. 정답 코드가 나오면 더 효율적인 코드가 무엇인지 체크해봐야겠다.