본문 바로가기
반응형

분류 전체보기706

[VueJS] 상태 관리자 Pinia란? (ft. 설치 및 설정) Pinia란? Pinia는 Composition API를 기반으로 동작하는 상태 관리자이다. 일반적으로 Vue3와 Composition API 환경에서 사용하기 용이하며, Vue 2.x 버전에서 사용할 경우 Composition API를 따로 설치해서 적용해야 한다. Vue에서 가장 보편적으로 사용했던 상태 관리자는 Vuex인데, Vue의 창시자 Even You가 Vuex가 아닌 Pinia를 추천하는 상태 관리자로 공표하였다. 하지만 그렇다고 Vuex가 사라지는 게 아니라 Pinia와 Vuex 5.x는 사실상 완전 동일한 프로젝트로 생각해야 한다고 한다. 이는 현재 Vuex 4.x 버전이나 추후에는 Pinia와 Vuex 5.x 두 프로젝트를 하나로 합치거나 아주 쉽게 이동할 수 있도록 지원할 것이라고 한.. 2022. 9. 28.
[HTML] 태그 데이터 속성 dataset 사용하기 (ft. JS/CSS 활용) 데이터 속성 사용하기 HTML 태그에는 표준으로 정의된 속성들이 존재하는데, 데이터 속성의 경우에는 사용자가 지정한 속성을 표준화된 방법으로 제공하기 위해 제안된 것이다. 예를 들자면 개발을 하다 보면 표준 속성이 아니라 사용자 마음대로 속성을 정의해서 사용할 수가 있었는데, 아무래도 표준이 없었기 때문에 아무렇게나 사용되던 사용자 정의 속성들을 표준화하여 data-* 형식의 속성으로 정의한 것이다. HTML 문법 문법은 매우 간단하다. 어느 element나 "data-"로 시작하는 속성을 지정해서 사용할 수 있다. Javascript 에서 접근하기 Javascript에서 접근하는 방법 또한 매우 간단하다. dom을 선택하고 dataset속성을 통해 읽을 수 있다. let blog = document.g.. 2022. 9. 28.
[Jest] 비동기 코드 테스트 하기 Jest 비동기 코드 테스트 javascript를 사용한다면 일반적으로 비동기적인 코드를 작성하게 된다. Jest로 비동기 코드를 테스트하기 위해서 사용할 수 있는 몇 가지 방법에 대해 알아보자. 우선 각 방법을 알아볼때 사용되는 공통 코드를 먼저 작성해서 테스트를 진행해보자. ▷ async.js function fetchData(error) { if (error === "error") { return Promise.reject("Error"); } return Promise.resolve({ name: "Hans", like: "peanut butter" }); } module.exports = fetchData; * 콜백 테스트는 Promise가 아닌 콜백 함수를 사용하여 예제를 작성하는 게 맞을지도.. 2022. 9. 27.
[Jest] 감시모드(watch/watchAll) - 변경된 파일이 있는 경우 테스트 자동 실행하기 Jest에는 다양한 옵션이 존재하는데, 정확한 명칭은 Jest CLI 옵션이라고 한다. 다양한 옵션 중에 감시 모드 옵션인 watch/watchAll에 대해 알아보고자 한다. Jest CLI 옵션 사용 방법 watch/watchAll 옵션에 대해 알아보기 전에 우선 Jest CLI 옵션을 사용할 줄 알아야 하니 사용방법에 대해 간단하게 알고 넘어가자. npm 스크립트와 함께 사용 npm test 명령어와 같이 사용하게 되면 npm test와 Jest 인수 사이에 --를 삽입하여 명령 줄 인수를 계속 사용할 수 있다. npm test -- -h npm test -- --watchAll 실제로 -h 헬프 옵션을 사용해보면 다양한 옵션들이 출력되는 것을 볼 수 있는데, 그중에 --watch와 --watchAl.. 2022. 9. 27.
[Jest] 테스트 전(before)/후(after) 처리하기 전(before)/후(after) 처리 테스트를 작성하다 보면 모든 테스트 함수에서 공통적으로 필요한 공통 로직이 필요할 때가 있는데, 그때 전후 처리인 before/after 메서드를 사용할 수 있다. 기본적인 건 [Jest] Jest 기초 문법에서 다뤘었는데, 전후처리에 대해 좀 더 알아보자. beforeEach() / afterEach() const globalDatabase = makeGlobalDatabase(); function cleanUpDatabase(db) { db.cleanUp(); } afterEach(() => { cleanUpDatabase(globalDatabase); }); beforeEach(() => { return globalDatabase.insert({ testDat.. 2022. 9. 27.
[Jest] Jest 기초 문법 Jest 기초 문법 Jest에서는 정말 다양한 메서드들을 제공하고 있는데, 그중에서도 기본적으로 자주 사용하게 될 메서드에 대해서만 알아보고자 한다. 설명을 위해 간단한 예제 코드를 살펴보고 해당 문법들에 대해 알아보자. const sum = require("../sum.js"); describe("simple js function test", () => { let num; beforeEach(() => { num = 1; }); afterEach(() => { num = 0; }); it("num is 1", () => { expect(num).toBe(1); }); test("adds 1 + 2 to equal 3", () => { expect(sum(1, 2)).toBe(3); }); test("a.. 2022. 9. 27.
[Jest] Jest 시작하기 (ft. 설치 및 기본 사용법) Jest란 무엇일까? Jest에 대해 검색을 시작한 순간부터 이 Jest가 어디에 쓰이는지를 대충이나마 알 거라고 생각한다. 나중에는 어떻게 될지 모르겠지만, 요즘 아주 많이 사용되는 Javascript 테스트 프레임워크이다. Jest는 리액트와 마찬가지로 페이스북에서 개발하고 관리하는 자바스크립트 테스트 프레임워크라고 하는데, React뿐만 아니라 Vue, Angular, TypeScript, Node 등 다양한 것들과 함께 사용이 가능하다. 심지어 공식문서 또한 존재해 문서화가 잘되어있어 정보를 얻으며 사용하기에 아주 편리하다고 생각된다. https://jestjs.io/ Jest By ensuring your tests have unique global state, Jest can reliably .. 2022. 9. 27.
[JavaScript] structuredClone() - 객체 "깊은" 복사를 도와주는 메서드 javascript 개발을 진행하게 되면 객체를 복사해서 사용하는 경우가 빈번하게 발생하는데, 방법에 따라 흔히들 알고 있는 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)가 존재한다. 이 게시글에서는 깊은 복사를 도와주는 메서드인 structuredClone()에 대해 알아보고자 한다. ▷ 구문structuredClone(value) structuredClone(value, transferables)value: 복사할 대상인 원본 객체이다. 이는 구조화된 복제가 가능한 모든 유형을 포함한다.transferables: An array of transferable objects in value that will be moved rather than cloned to the returne.. 2022. 9. 26.
[JavaScript] 옵셔널 체이닝(optional chaining) 옵셔널 체이닝(optional chaining) 연산자 (?.)을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. ▷ 구문obj?.prop obj?.[expr] arr?.[index] func?.(args) 옵셔널 체이닝 연산자는 결국 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식으로 사용할 수 있다. 즉, '앞'의 평가 대상이 undefined 나 null이면 평가를 멈추고 undefined를 반환한다. 예제를 통해 알아보자.옵셔널 체이닝이 등장하기 이전let user = {}; // 주소 정보가 없는 사용자// 1. 에러 발생alert(user.address.street); // TypeError: Cannot read property .. 2022. 9. 23.
반응형
TOP

티스토리툴바