이안의 평일코딩

컴퓨터 프로그래밍에서 SOLID란 로버트 마틴이 2000년대 초반에 명명한 객체 지향 프로그래밍 및 설계의 다섯 가지 기본 원칙을 마이클 페더스가 두문자어 기억술로 소개한 것이다. SOLID 원칙들은 소프트웨어 작업에서 프로그래머가 소스 코드가 읽기 쉽고 확장하기 쉽게될 때까지 소프트웨어 소스 코드를 리팩터링하여 코드 냄새를 제거하기 위해 적용할 수 있는 지침이다. 단일 책임 원칙 (SRP: Single Responsibility Principle) "모든 함수/모듈/컴포넌트는 정확히 한 가지 작업을 수행해야 한다"라는 정의라고 해석할 수 있는 원칙. ✍🏻 개방 폐쇄 원칙 (OCP: Open Close Principle) OCP는 "소프트웨어의 구성요소(컴포넌트, 클래스, 모듈, 함수)는 확장에는 열려있..

✍🏻 단일 책임 원칙 (SRP) 원래 정의는 "모든 클래스는 단 하나의 책임만 가져야 한다"라고 명시되어 있습니다. 이 원칙은 해석하기 가장 쉽습니다. "모든 함수/모듈/컴포넌트는 정확히 한 가지 작업을 수행해야 한다"라는 정의라고 해석할 수 있기 때문입니다. 5가지 원칙 중 SRP는 가장 따르기 쉽지만 코드 품질이 크게 향상하기 때문에 가장 영향력 있는 원칙이기도 합니다. 컴포넌트가 한 가지 작업을 수행하도록 하기 위해 다음을 수행할 수 있습니다. 너무 많은 작업을 수행하는 큰 컴포넌트를 더 작은 컴포넌트로 나눔 주요 컴포넌트 기능과 관련 없는 코드를 별도의 유틸리티 함수로 추출 관련 있는 기능들을 커스텀 hook으로 캡슐화 👨🏻‍💻 React에 적용해보자! 이제 이 원칙을 적용하는 방법을 살펴보겠습니..

🤪 anyscript 타입스크립트 프로젝트의 tsconfig에서 strict를 true로 설정하거나, noImplicitAny를 true로 설정하면, 각종 변수에 타입을 지정하지 않았을 때 에러가 발생합니다. 타입스크립트에서 기본적으로 타입 추론이라는 것을 하는데, 추론한 근거가 없으면 암시적으로 any로 할당됩니다. 이러한 것을 못하게 하는 옵션이 noImplicitAny(말 그대로, no implicit any – 암시적인 any는 no)를 true로 설정하는 것이고, strict를 true로 설정하면 noImplicitAny도 true로 설정되죠. 타입스크립트 프로젝트에서 strict 모드를 설정하는 것은, 프로젝트에 엄격한 룰을 강제해서 추후에 코드를 수정하기 쉽게 만들어주는데, 이러한 프로젝트에..

글자 수 초과 시 ... 처리하는 방법 조건을 줘서 substr 메서드를 이용하면 간단하게 처리할 수 있다. const truncate = (str, n) => { return str?.length > n ? str.substr(0, n - 1) + "..." : str; }; 위와 같이 truncate라는 함수를 만든 후 jsx, tsx에서 가져다 쓰면 된다. {truncate(movie.overview, 100)} 그럼 100자 초과 시 나머지 글자를 자르고 "..."가 붙어서 원하는 대로 처리된다.

React Hooks React Hooks는 ReactConf 2018에서 발표된 class없이 state를 사용할 수 있는 새로운 기능이다. Class Component로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해서 개발되었다. 원래 React는 주로 Class Component를 사용하고 React Hooks는 Functional Component를 사용한다. 위와 같이, Class 컴포넌트와 비교했을 때 함수형 컴포넌트를 이용하면 더 간결한 코드, 더 빠른 성능, 더 나은 가독성을 가진다. 함수형 컴포넌트에서는 클래스 컴포넌트에서 사용하던 리액트의 생명주기를 사용하기 못했기 때문에, 함수형 컴포넌트가 더 간결하고 빠르더라도 클래스형 컴포넌트를 써왔지만, 이것은 Reac..

localStorage 값 저장하기 localStorage에 데이터 값을 담으면 페이지를 refresh 해도 데이터가 계속 남아 있다. https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage Window.localStorage - Web API | MDN localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. developer.mozilla.org 리액트의 이벤트핸들러에서 setData시 localStorage.setItem을 이용해 동일하게 값을 담아주면 된다. 객체나 배열을 저장해줄시에는 JSON.stringify를 이용해서 텍스트..

불변성이란? (원시 타입 vs 참조 타입) 사전적 의미로는 값이나 상태를 변경할 수 없는 것을 의미하는데, 자바스크립트 타입을 통해 불변성 의미를 살펴보자. 원시 타입은 불변성(immutable)을 가지고 있고 참조 타입은 그렇지 않기 때문에(mutable) 둘을 비교해보자. 원시 타입 : Boolean, String, Number, null, undefined, Symbol (불변성을 가지고 있다.) 참조 타입 : Object, Array 기본적으로 Javascript는 원시 타입에 대한 참조 및 값을 저장하기 위해 Call Stack 메모리 공간을 사용하지만, 참조 타입의 경우 Heap이라는 별도의 메모리 공간을 사용한다. 이 경우 Call Stack은 개체 및 배열 값이 아닌 메모리에만 Heap 메..

https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com CSS 프레임 워크 레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음이다. 종류로는 Material UI, React Bootstrap, Semantic UI, Ant Design, Materialize 등이 있다. TailWindCSS는 HTML 안에서 CSS 스타일을 만들 수 있게 해주는 CSS 프레임 ..