code를 헤엄치는 인어공쭈

방법론 비교와 장단점 1. DevOps (Development + Operations) DevOps는 소프트웨어 개발과 IT 운영 간의 협력과 자동화를 강조하는 문화, 철학, 방법론입니다. 개발과 운영 간의 경계를 허물고 지속적인 통합, 배포, 자동화 등을 통해 소프트웨어 제공 과정을 최적화하는 것이 목표. 장점) 빠른 제공: 지속적인 통합과 배포를 통해 빠른 제품 출시 가능. 안정성 향상: 자동화된 테스트와 배포로 안정성을 유지. 단점) 문화 변화 필요: 조직 내에서 협력과 자동화에 대한 새로운 문화를 수용해야 함. 기술적 도전: 기존 시스템과의 통합이나 기술적인 도전에 대한 대응이 필요. 예시) Jenkins, GitLab CI/CD 등의 도구를 활용하여 지속적 통합 및 배포 파이프라인을 구성. In..

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 사용 - 다양한 제어 연산자들은 이벤트 ..