code를 헤엄치는 인어공쭈

Cypress 소개 Cypress는 강력한 엔드 투 엔드(E2E) 테스트 도구로, 사용자 경험을 시뮬레이트하고 테스트하는 데 특히 용이합니다. 다양한 기능과 직관적인 사용자 인터페이스로 프론트엔드 테스트를 쉽게 작성하고 유지보수할 수 있습니다. npm install --save-dev cypress 테스트 작성 // 예시 테스트 파일 (cypress/integration/sample.spec.js) describe('테스트 예제', () => { it('홈페이지 방문', () => { cy.visit('/'); cy.contains('환영합니다!'); // 페이지에 '환영합니다!' 텍스트가 있는지 확인 }); it('로그인', () => { cy.visit('/login'); cy.get('input[n..

* 원시값이란? 불변한값 원시값의 종류 1. 문자열(string) 2. 숫자(number) 3. 불리언(Boolean) 4. null과 undefined *객체(Object) 객체는 프로퍼티(속성)를 포함하며, 프로퍼티는 값을 가지거나 다른 객체를 참조 let person = { name: "John", age: 30, city: "New York" }; *깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy) 1. 깊은 복사(Deep Copy) 원본 객체와 복사본이 완전히 독립적으로 되도록 하는 방법 // 깊은 복사 예제 let originalObject = { name: "John", address: { city: "New York" } }; let deepCopyObject = JSON..

이번글에서 저번에 다뤘던거와 비슷하지만 조금더 응용해서 테스트 코드를 작성해보자. 좀 더 복잡한 코드에선 아래에 코드로 적용해보는것이 좋을거 같다. 1. 모의 (Mocks) 모의는 외부 의존성에 대한 가짜 객체로, 함수 호출 및 동작을 추적하고 기대 대로 모의 객체를 조작할 수 있다. // 사용자 서비스 예시 class UserService { async getUser(id) { // 실제 사용자 데이터베이스에서 사용자를 가져오는 코드 } } // UserService 모의 객체 생성 const mockUserService = { getUser: jest.fn(), }; 2. 스텁 (Stubs) 스텁은 함수의 동작을 가짜로 대체하여 특정 동작을 흉내내도록 하는데 사용된다. // 네트워크 요청 모듈 예시 ..

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); // 첫번째 열에 대해 자동 넓이 맞춤 } ..