차근차근 배우고 기록하는 곳

TDD(Test Driven Development) 란? 실제 코드를 작성하기 전에 테스트 코드를 먼저 작성 테스트 코드를 작성한 후 그 테스트 코드를 Pass 할 수 있는 실제 코드를 작성 TDD를 하면 좋은 점 TDD를 함으로 인해 많은 기능을 테스트하기에 소스 코드에 안정감이 부여됨 실제 개발하면서 많은 시간이 소요되는 부분은 디버깅 부분이므로, TDD를 사용하면 디버깅 시간이 줄어들고 실제 개발 시간도 줄어들게 됨 소스 코드 하나하나를 더욱 신중하게 짤 수 있기 때문에 깨끗한 코드가 나올 확률이 높음 React Testing Library 란? Create React App 으로 리액트 앱을 생성하면 기본적으로 테스팅할 때 React Testing Library를 사용하게 됨 React Testi..

React Router Dom 웹 앱에서 동적 라우팅을 구현할 수 있음 라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router Dom은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 함 Single Page Application(SPA) 리액트는 SPA이기 때문에 하나의 index.html 템플릿 파일을 가지고 있음 하나의 템플릿에 자바스크립트를 이용해서 다른 컴포넌트를 이 index.html 템플릿에 넣어서 페이지를 변경해주게 됨 이 때 React Router Dom 라이브러리가 새 컴포넌트로 라우팅/탐색을 하고 렌더링하는데 도움을 주게 됨 React Router Dom 설치하기 npm install react-router-dom --sa..

useMemo Memoization 비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높이는데 주로 사용되는 최적화 기술 이것을 적절하게 활용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있음 function Component({a, b}) { const result = compute(a, b) return {result} } Component 내의 computer 함수가 만약 복잡한 연산을 수행하면 결과 값을 리턴하는데 오랜 시간이 걸림 이럴 때 컴포넌트가 계속 리 렌더링 된다면 연산을 계속 수행하는데 오랜 시간이 걸려서 성능에 안 좋은 영향을 미치게 되고, UI 지연 현상..

불변성 불변성이랑 사전적 의미로는 값이나 상태를 변경할 수 없는 것을 의미함 자바스크립트 타입을 통한 분별성 의미 원시 타입은 불변성(immutable)을 가지고 있고 참조 타입은 그렇지 않음(mutable) 원시 타입: Boolean, String, Number, null, undefined, symbol 참조 타입: Object, Array 기본적으로 Javascript는 원시 타입에 대한 참조 및 값을 저장하기 위해 Call stack 메모리 공간을 사용하지만 참조 타입의 경우 Heap이라는 별도의 메모리 공간을 사용 이 경우 Call stack은 개체 및 배열 값이 아닌 메모리에만 Heap 메모리 참조 ID를 값으로 저장함 원시 타입: 고정된 크기로 Call stack 메모리에 저장, 실제 데이터..

State 부모 컴포넌트에서 자녀 컴포넌트로 데이터를 보내는게 아닌 해당 컴포넌트 내부에서 데이터를 전달하려면 State를 사용 ex. 검색 창에 글을 입력할 때 글이 변하는 것은 State를 바꿈 State는 변경 가능(mutable) State가 변하면 re-render 됨 state = { message: '', attachFile: undefined, openMenu: false, }; Props Properties의 줄임말 Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법 Props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않음 변하게 하려면 부모 컴포넌트에서 State를 변경시켜줘야 함

React Hooks ReactConf 2018에서 발표된 class 없이 state를 사용할 수 있는 새로운 기능 React Hooks의 필요성 Class Component로 사용되어 온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해서 개발됨 React Component Class Component Funcrtional Component 더 많은 기능 제공 더 적은 기능 제공 더 긴 코드 양 짧은 코드 양 더 복잡한 코드 더 심플한 코드 더딘 성능 더 빠른 성능 리액트의 생명주기 리액트의 생명주기를 함수형 컴포넌트에서는 사용을 못했기 때문에 함수형 컴포넌트가 더 간결하고 빠르더라도 클래스형 컴포넌트를 사용함 React 16.8 Hooks 업데이트로 함수형 컴포넌트에서도 생명주기를 사용할 수..

React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 인터랙션이 많은 웹 앱을 개발하기 위해서 주로 사용 Framework vs Library Framework : 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있음 Library: 어떠한 특정 기능을 모듈화 해놓은 것 프레임워크는 라이브러리를 포함하고, 작성한 소스 코드를 호출함 소스코드는 어떠한 기능을 구현하기 위해서 라이브러리를 호출함 리액트가 라이브러리? 리액트는 전적으로 UI를 렌더링 하는데 관여하기 때문 화면을 바꾸는 라우팅은 react-router-dom 모듈 사용 상태 관리를 위해서는 redux, mobx 등 여러 모듈 사용 빌드를 위해서는 webpack, npm 등 사용 테스팅을 위해서 Eslint, Mocha ..