code를 헤엄치는 인어공쭈

Jest는 Facebook에서 개발한 JavaScript 테스트 프레임워크로, JavaScript 애플리케이션의 품질을 유지하고 개선하는 데 도움이 된다. 자 이제 한번 사용방법을 알아보자. 1. Jest 설치npm install --save-dev jest 2. 테스트 파일 생성Jest 테스트 파일은 일반적으로 .test.js 또는 .spec.js 확장자를 사용// example.test.jstest('adds 1 + 2 to equal 3', () => { expect(1 + 2).toBe(3);}); 3. 테스트 실행npx jest 4. 테스트 작성test('2와 2는 같아야 합니다', () => { expect(2).toBe(2);});test('3과 5는 같지 않아야 합니다', () => {..

구글 계정 로그인을 구현하는 방법 https://console.cloud.google.com/getting-started Google Cloud console console.cloud.google.com 1. 구글 개발자 콘솔에서 프로젝트 생성하기 먼저 구글 개발자 콘솔에서 새로운 프로젝트를 생성. 구글 개발자 콘솔에 접속한 후, 새 프로젝트를 생성하고 API 및 서비스를 활성화 2. OAuth 2.0 클라이언트 ID 생성하기 구글 개발자 콘솔에서 OAuth 2.0 클라이언트 ID를 생성. 클라이언트 ID를 생성할 때는 리디렉션 URL도 설정. 이 URL은 사용자가 구글 계정으로 로그인을 완료한 후 리디렉션될 페이지의 URL이다. 로컬 호스트 테스트가 가능하지만 허용목록에 잘추가해줘야됌 3. 클라이언트(..

리액트 상태 관리 라이브러리 Redux: Redux는 가장 널리 사용되는 상태 관리 라이브러리 중 하나. 애플리케이션의 전역 상태를 효과적으로 관리하고 변경 사항을 추적하기 위해 사용된다. Zustand: Zustand은 리액트 상태 관리를 위한 간단하고 직관적인 라이브러리. Zustand은 React Hooks와 함께 사용되며, 전역 및 로컬 상태를 관리하고 리액트 컴포넌트 간의 상태 공유를 용이하게 해준다. Recoil: Recoil은 페이스북에서 개발한 리액트 상태 관리 라이브러리이다. Recoil은 상태의 원자성과 종속성 추적을 위한 간단한 API를 제공하며, 상태를 효과적으로 관리하고 여러 컴포넌트 간에 공유할 수 있다. 이중에서 이번에 자세히 얘기할건 이번 프로젝트에서 도입될 Zustand 라..

Introduction Angular 애플리케이션을 개발할 때, 코드의 품질과 안정성을 유지하기 위해 유닛 테스트는 중요한 부분이다. Angular에서는 Jasmine과 Jest와 같은 테스트 프레임워크를 사용하여 유닛 테스트를 작성할 수 있다. 1. Jasmine - Jasmine은 Angular에서 따로 설치할 필요 없이 기본으로 포함되어 있는 테스트 프레임워크다. - Jasmine은 BDD (Behavior-Driven Development) 스타일의 문법을 제공하여 가독성이 높은 테스트 코드 작성을 도와준다. - TestBed, async 함수, RouterTestingModule 등을 사용하여 Angular 테스트 환경을 설정할 수 있다. - Jasmine의 describe, it 함수를 사용하..

개념 웹팩(WebPack)은 모듈 번들러(module bundler)로, JavaScript와 관련된 리소스(파일)들을 처리하고 번들로 묶는 도구다. 웹 애플리케이션 개발 시 많은 리소스 파일들이 사용되는데, 웹팩은 이러한 리소스들을 하나의 번들 파일로 생성하여 성능을 향상시키고 유지보수를 용이하게 한다. 웹팩의 주요 특징과 기능 1. 모듈 번들링: 웹팩은 JavaScript 파일뿐만 아니라 CSS, 이미지, 폰트 등 모든 유형의 파일을 모듈로 취급하고, 이들 간의 의존성을 분석하고 필요한 리소스를 번들로 묶는다. 2. 로더(Loader) 사용: 웹팩은 로더를 통해 다양한 유형의 파일을 처리하고 로더는 리소스를 가져오고 변환하여 번들에 포함시킨다. Babel 로더 최신 JavaScript 문법을 이전 ..

개념 RxJS는 Observables을 사용한 반응형 프로그래밍을 위한 라이브러리이다. 이는 이벤트 처리와 데이터 스트림 관리를 위해 특히 비동기 프로그래밍에 널리 사용되는 JavaScript 라이브러리이다 비교 일반적인 자바스크립트 코드와의 비교 1) 자바스크립트 let count = 0; let rate = 1000; let lastClick = Date.now() - rate; document.addEventListener('click', () => { if (Date.now() - lastClick >= rate) { console.log(`Clicked ${++count} times`); lastClick = Date.now(); } }); 2) RxJS 사용 - 다양한 제어 연산자들은 이벤트 ..

그리드 작업하면서 넓이를 각각 조절해야되는게 너무 귀찮았다 이런식으로 컬럼에 각각 넓이를 지정해줘야 텍스트가 잘리지않았다. 그래서 자동으로 넓이를 맞춰주는 방법이 없을까 찾아봤다. 생각보다 여러가지 방법이 존재하네? 1. autoFitColumn 를 사용하기 $("#grid").kendoGrid({ // 그리드 설정 columns: [ { field: "name", title: "Name" }, { field: "age", title: "Age" }, { field: "address", title: "Address" } ], dataSource: { // 데이터 소스 설정 }, dataBound: function() { this.autoFitColumn(0); // 첫번째 열에 대해 자동 넓이 맞춤 } ..

TypeScript 이란? - 2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 특징 - 컴파일 언어, 정적 타입 언어 : 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다. 하지만 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점도 존재. - 자바스크립트 슈퍼셋(Superset) : 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어, 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있다. - 객체 지향 프로그래밍 지원 : 타입스크립트는 ES6(ECMAScript ..

호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의해야 한다. 재할당이 필요없는 경우, const를 사용해 불필요한 변수의 재사용을 방지하고, 재할당이 필요한 경우 let을 사용하는 것이 좋다. 1) function catName(name) { console.log("제 고양이의 이름은 " + name + "입니다"); } catName("호랑이"); 일반적으로 선언 2) catName("클로이"); 먼저 선언했지만 가능 function catName(nam..

- 구글에서 개발한 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크 - 단일 페이지 애플리케이션 (SPA)을 구축하는 데 매우 적합 - TypeScript와 함께 사용 - 정적 타입 검사 및 코드 예측 등의 이점을 제공 - 현재 앵귤러는 최신 버전인 앵귤러 15까지 출시 - 양방향 / 단방향 데이터 바인딩 둘다 가능 1. 컴포넌트(Component) 컴포넌트는 애플리케이션을 구성하는 기본 단위이다. 컴포넌트는 @Component() 데코레이터가 붙는 TypeScript 클래스, HTML 템플릿, 스타일로 구성된다. 컴포넌트가 템플릿에 사용될 CSS 셀렉터를 지정. 템플릿에서 이 셀렉터에 해당되는 HTML 엘리먼트마다 컴포넌트 인스턴스가 생성. Angular가 컴포넌트 내용으로 렌더링할 HTML 템플릿을 ..