분류 전체보기 (32) 썸네일형 리스트형 testing jest 특징 facebook 에서 만듦 testing library가 아닌 testing framework 보통 testing 시 test runner, test matcher, test mock 이 필요한데 이것을 하나의 framework으로 구현한것 testing 대상 test.js 로 끝나는 파일명 __test__ 디렉터리 내의 파일 기본 패턴 test("테스트 설명", () => { expect("검증 대상").toXxx("기대 결과"); }); mathcer toBe primitive 값을 비교할때 사용됨 toEqual 참조형 데이터(ex-object) 검증시 사용 toBeTruthy / toBeFalsy true 또는 false로 간주되는 값 검증(ex-0, '', null...) 배열 관련.. Styled-component 정의 css-in-js 라이브러리:스타일 정의를 css 파일이 아닌 js로 작성된 컴포넌트에 바로 삽입하는 스타일 기법 Tagged Template Literal Template Literal - ES6 문법 const name = 'react'; const message = `hello ${name}`; console.log(message); // "hello react" const object = { a: 1 }; const text = `${object}` console.log(text); // "[object Object]" const fn = () => true const msg = `${fn}`; console.log(msg); // "() => true" 함수 선언부를 그대로 리턴 const.. React Query 동기 react app은 데이터 비동기 서버 통신에 대한 구체적인 방법을 제공하지 않음 -> 데이터 통신을 위해 react hook 또는 상태관리 라이브러리를 사용함 상태관리 라이브러리는 클라이언트 상태 작업에만 최적화 되어있어 비동기 또는 서버 상태 작업에는 적합하지 않음 서버 상태를 관리하기 위한 라이브러리 사용하는 이유 store에서 클라이언트 데이터와 서버 데이터가 공존하여 혼론을 야기함 -> react-query를 통해 클라이언트 데이터와 서버 데이터를 분리함 -> 서버 데이터를 위한 store 내 로직이 과도하게 커지고 그로 인해 store를 사용하기 위한 보일러 플레이트가 비대해지기 때문 -> 서버응답을 store에서 관리가 필요 없는경우에도 구조화를 위해 불필요한 캐싱도 일어남 따라서, 관.. 컴포넌트 디자인 패턴 디자인 패턴 정의 소프트웨어를 만드는데 있어 공통적으로 발생하는 문제에 대해 재사용 가능한 해결책 종류 소프트웨어 디자인 패턴 생성패턴 - 의존성 주입, 프로토타입, 싱글톤 … 구조패턴 - 모듈, 프록시, 어댑터 … 행동패턴 - 옵저버, 템플릿 메소드, 상태 … 어플리케이션 디자인 패턴 MVC MVVM MVP Flux 컴포넌트 디자인 패턴 Presentational and Container Component Pattern Atomic Design Pattern VAC 패턴 Presentational and Container Component Pattern 정의 데이터 처리와 데이터 출력을 분리하는 패턴 Container Components 주로 fetch 가 이루어짐 연관있는 서브 컴포넌트 렌더링 Mar.. Core javascript(01-데이터 타입) 데이터 타입 1. 데이터 타입의 종류 2. 데이터 타입 배경지식 각 비트는 고유한 식별자가 있음 자바 등에서는 메모리 낭비를 최소화 하기위해 같은 정수여도 short → int 처럼 범위에 따라 형변환이 불가피했음 자바스크립트는 숫자의 경우 정수 or 부동소수 구분없이 8바이트를 확보함 모든 데이터는 바이트 단위의 식별자(메모리 주소값)을 통해 서로 구분하고 연결됨 3. 변수 선언과 데이터 할당 변수(variable) 변할 수 있는 데이터 식별자(identifier) 데이터(변수)를 식별하는 이름(변수명) 데이터 할당 var a; a = 'abc'; (변수 영역)주소(변수 영역)데이터(데이터 영역)주소(데이터 영역)데이터 … 1002 1003 … 이름: a 값: @5004 … 5002 5003 5004 .. Nuxt 정의 vue.js 프레임워크 기반의 개발환경 구축에 도움을 주는 프레임워크 즉, vjue.js 프로젝트 구성시 사용되는 여러 라이브러리들을 기본적으로 탑재 특징 렌더링 모드 → Universal SSR로 SSR 과 CSR 간의 전환이 가능 프로젝트 구조화 → 프로젝트 구조에 대한 고민이 적어짐, 협업하기 좋음 SEO 친화적 → SSR 기반의 서비스로 검색 엔진 최적화 page기반 라우팅 → 디렉토리 구조의 직관적인 라우팅 개념 Views nuxt의 view구성 page pages 디렉토리 내 .vue 파일들을 읽고 자동으로 라우터 구성을 생성 속성 asyncData created() 이전에 실행 비동기식일 수 있으며 context를 인수로 받음(this 사용 불가능) return 된 객체는 data 객체.. Composition API 정의 컴포넌트 로직을 유연하게 구성할 수 있는 API의 모음 로직의 재사용성과 가독성을 높여줌 하나의 기능에 대한 코드들이 data, methods, computed, … 에 각각 흩어진 로직을 모아줌 인스턴스 옵션 단위가 아닌 기능이나 논리 단위의 코드로 그룹화 하는것 Setup 컴포넌트가 생성되기 전에 props가 반환 되면 실행되는 컴포넌트 옵션으로 진입점 역할 setup()에 전달된 인자에 대한 타입을 추론하려면, defineComponent를 사용 composition api 사용 비교 사용 전 ... 사용 후 ... 반응형 데이터 reactive 오직 객체만을 인자로 받음 이자로 받은 객체와 완전히 동일한 프록시 객체를 반환(원본 내부에 Vue옵저버만 추가하여 그대로 반환) 생성된 객체는 Vu.. Vuex 정의 vue.js의 상태 관리를 위한 패턴이자 라이브러리 중앙 집중식 저장소 역할 컴포넌트 개수가 많아지면서 컴포넌트간 데이터 전달(props, emit)이 어려워짐 여러개의 컴포넌트에서 같은 데이터를 동기적으로 업데이트 flux패턴에서 영감을 받음(단방향 데이터 흐름) flux: MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 MVC: 하나의 컨트롤러가 여러개의 model, view를 컨트롤하는데 제약이 없어 기능 추가 및 변경시 생기는 문제점 예측이 어려움 actions mutations에 대한 커밋 비동기적 작업 포함 mutations 스토어의 상태를 변경할 수 있는 유일한 방법 반드시 동기적이어야함 commit 메소드의 호출되어 상태의 변경이 비동기적이면 상태 추적이 어려워지기 때문 .. 이전 1 2 3 4 다음
