전체 글

지금까지 나는 상속을 단순히 재사용하는 것들이 있으면 공통적으로 묶어주기 위해 상속을 생각했다. 하지만 정말 우연한 기회로 조합이라는 것을 알게되었다. 이 영상을보다 댓글을 보니 이런 댓글이 있었다. 리팩토링 할때도 느꼈지만 상속을 사용하면 중복코드를 제거할 수 있고 확장도 쉽게 가능하고 계층구조에 유리하니 편해서 사용했던 것 같다. 하지만 위 댓글처럼 만약 상속을 통해서 엄청난 규모의 프로젝트를 했는데 최상층에 있는 부모클래스에 변동이 생기면 거기에 연관된 모든 자식클래스는 강하게 영향을 받고 결국 전부 수정을 해줘야한다. 자바스크립에서도 부모클래스에서 input 값이 stirng을 받을 것을 예상하고 로직을 만들고 상속을 통해 자식 클래스들을 여러개를 만들었는데 어느날 array로 바뀌다면 그에 따른..

module을 처음봤을 때 와 익숙하지 않았다. 요즘은 보통 바벨과 같이 사용하여 import / export default 를 자주써서 그랬던 것 같다. 이참에 제대로 이해하고 넘어가야겠다.( es6부터 사용) 1. 모듈이 필요한 이유 자바스크립트는 웹페이지에 있어서 보조적인 기능을 수행하기 위해 한정적인 용도로 만들어진 태생적 한계로 다른 언어에 비해 부족한 부분이 있는 것이 사실이다. 그 대표적인 것이 모듈 기능이 없는 것이다. 웹 페이지에서 자바스크립트를 사용하기 위해서는 위 사진과 같이 스크립트 태크를 통해 자바스크립트 파일을 가져오면된다. 그런데 만약 필요한 자바스크립트 파일이 2개라면 어떻게 해야할까? script 태그를 하나 더 추가하고 파일을 가져오면 된다. 하지만 지금과 같이 두 파일에..

얼마전 부터 추후에 eslint config을 공유하기위해 배포하며 계속 수정하고있는데 이 과정에서 package.json에 대해 어렴풋이 알고있었던 내용들을 제대로 공부하는 시간을 가졌다. 특히 배포할 때 depndencies / devDependencies / peerDependencies를 어떻게 설정하냐에 따라 정말 큰 차이가 있기 때문에 이 부분은 확실히 정리해야 겠다고 생각해서 이렇게 글을 쓰게 되었다. 1. dependecies "dependencies": { "express": "^4.16.4", "compression": "~1.7.4" } dependencies는 소프트웨어 개발에서 프로젝트가 원활히 작동하기 위해 꼭 필요한 외부 패키지 또는 라이브러리를 말합니다. 즉 어떤 프로젝트를 ..

싱글톤 패턴 싱글톤 패턴이란 클래스의 인스턴스화를 하나의 객체로 제한하는 패턴입니다. 싱글톤 구현에는 여러가지 방법이 있습니다. 1. Object Literal var Discount = { dDay : 25, gift : 'champagne', info() { return `dDay : ${this.#dDay}\ngift : ${this.#gift}`; } } 이렇게 코드를 작성하면 불변성이 성립되지 않기 때문에 언제든지 재정의될 수 있는 위험이 있습니다. const Discount = Object.freeze({ dDay : 25, gift : 'champagne', info() { return `dDay : ${this.#dDay}\ngift : ${this.#gift}`; } }) export d..

먼저 배열을 복사하는 방법을 알기 전에 배열이 어떤 원리로 복사되는지부터 알면 더 좋다. 따라서 만약 원시타입과 객체 타입을 잘 모른다면 간단하게 정리된 아래 글을 읽고 오면 좋다. [JS - 개념] 원시타입(Primitive Type)과 객체 타입(Object/Reference Type) 원시 타입 ( Primitive Type ) 원시 타입에 속하는 데이터 타입에는 아래와 같이 6가지가 존재한다. Number & Bigint String Boolean null unjdefined Symbol 객체 타입은 원시 타입을 제외한 나머지 객체 타입(참조) html-jc.tistory.com 배열 복사하는 방법은 여러가지가 있다. 그중 여러분이 생각하는 가장 쉬운 방법은 아래와 같다. // 1번 문제 let..

원시 타입 ( Primitive Type ) 원시 타입에 속하는 데이터 타입에는 아래와 같이 6가지가 존재한다. Number & Bigint String Boolean null unjdefined Symbol 객체 타입은 원시 타입을 제외한 나머지 객체 타입(참조)이라 할 수 있다. 객체의 하위 분류에 속하는 데이터 타입은 아래와 같다. Array FUnction Date RegExp 등등 원시 타입과 객체 타입은 크게 세 가지 측면에서 다르다. 쉽게말해 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 pass by value 이라 한다. 객체를 가리키는 변수를 다른 변수에 할당하면 우너본의 참조 값이 복사되어 전달된다. 이를 pass by reference 이라..

jest의 공식문서를 봐도 잘 이해가 가지 않아 찾아보던 중 rickhanlonii - Overview React Core @facebook · he/him. rickhanlonii has 111 repositories available. Follow their code on GitHub. github.com 이 분이 Mock에 대해 정리해 주셨는데 너무 쉽게 설명해주셔서 글을 가져와 보았다. Mocking은 테스트를 독립시키기 위해 의존성을 개발자가 컨트롤하고 검사 할 수 있는 오브젝트로 반환하는 테크닉이다. The Mock Function Mockng의 목적은 우리가 컨트롤할 수 없는 무엇인가를 대체하는 것이기 때문에, 우리가 대체하는 것이 필요로하는 모든 기능을 갖고 있는게 중요하다 Mock 함수는..

여러 분들은 혹시 코드리뷰를 해보셨나요? 1. 코드 리뷰란? 코드 리뷰란 코드의 체계적인 평가로, 버그를 식별하고 코드 품질을 향상시키며 개발자 소스 코드를 학습하는 데 도움을 주는 것을 목적으로 진행하는 리뷰입니다. 기업이나 단체들도 이러한 코드리뷰를 통해 서로 지식을 공유하고 잠재적인 결함들을 찾아 버그를 사전에 예방하고 밝혀지지 않은 극단적인 사례나 기타 문제들에 대해 이야기를 나누면서 성장해나간다고 합니다. 실제로 2022 Global DevSecOps설문조사를 참여한 개발자중 76%가 코드 리뷰가 "매우 가치 있다"고 말했습니다. 2. 코드 리뷰시 주의 할점 1) 코드리뷰라는 점 인지하기 항공 분야에서 아래와 같이 유명한 말이 있다고 합니다. in aviation, for example, peo..

React Hook Form은 왜 필요했을까? 여러 회사에서도 사용하고 있다. 그 중에 유일하게 react-hook-form을 왜 사용하는지 이유를 써놓은 회사가 있어서 가져와봤다. Toss에서는 왜 React Hook Form을 사용하는지 아래와 같이 간단하게 기재되어있다. React Hook Form 홈페이지에서는 아래와 같은 텍스트가 가장먼저 나온다. 이렇게만 설명하면 확 와닿지 않으니 예제코드를 보면 바로알 수 있다. 아래 코드는 유저이름 이메일 비밀번호를 입력할수 있는 정말 간단한 form을 react로 구현한 것이다. 더보기 'use client'; import { useState } from 'react'; type InputType = 'text' | 'email' | 'password';..