S.O.L.I.D 원칙 타입스크립트 코드 예제로 이해하기깨끗하고 유지보수하기 쉬운 코드를 작성하는 것은 단순히 동작하는 코드를 작성하는 것만큼 중요합니다.S.O.L.I.D 원칙은 시간이 지나도 쉽게 조정, 확장, 유지보수할 수 있는 코드를 작성할 수 있도록 합니다.이 원칙은 2000년대 초반 Robert C. Martin(일명 Uncle Bob)에 의해 소개되었습니다.이 글에서는 5가지 원칙을 실제 코드 예제와 함께 살펴보겠습니다.S: 단일 책임 원칙(Single Responsibility Principle, SRP)클래스는 하나의 역할만 가져야 하며, 변경해야 하는 이유도 하나여야 합니다.즉, 한 클래스가 여러 가지 역할을 담당해서는 안 되며, 단 하나의 책임만을 수행해야 합니다.잘못된 예제:class..

JavaScript 개발자를 위한 함수형 프로그래밍JavaScript는 다양한 스타일로 코드를 작성할 수 있는 유연한 언어입니다. 명령형(imperative), 객체 지향(object-oriented), 그리고 함수형(functional) 프로그래밍 스타일을 모두 지원하며, 각각의 스타일은 문제를 해결하는 방식이 다릅니다. 이 중 함수형 프로그래밍은 진입 장벽이 높다고 느껴질 수 있지만, 사실 JavaScript를 사용하면서 이미 함수형 스타일을 활용하고 있을 가능성이 큽니다. 다만, 함수형 프로그래밍은 낯선 용어와 개념 때문에 어렵게 느껴질 수 있습니다. 이 글에서는 함수형 프로그래밍을 실용적인 방식으로 소개하여, 지금 당장 코드에 적용할 수 있도록 도와드리겠습니다.함수형 프로그래밍이란?객체 지향 프로..

Enums vs Dictionaries#열거형과 사전 enum은 상수 값으로 이루어져 있는 집합이라고 볼 수 있습니다. Typescript에서는 enum을 지원하지만 javascript에서는지원하지 않습니다. enum MagicianSkills { fireball = '불로 이뤄진 구체를 날림', iceball = '얼음으로 이뤄진 구체를 날림', thunderball = '번개로 이뤄진 구체를 날림', } const useSkill: MagicianSkills = MagicianSkills.fireball console.log('useSkill : ', useSkill); // 결과 useSkill : 불로 이뤄진 구체를 날림 위의 코드를 자바스..

Named Callback Function #명명된 콜백 함수 보통 콜백 함수로 익명함수를 자주 많이 씁니다. .reduce(),  .map(),  .foreach()... 등 안에 () => {} 익명의 함수를콜백 함수로 넣습니다.편하고 필요할때 적시 적소에 쓰이기 때문에 매우 유용합니다. 예를들어 객체 배열 안에 든 값을 map으로아래처럼 가공하여 보여줄 수 있습니다. interface IGoblin { name: string hp: number attack: number } const goblins: Array = [ { name: 'goblin warrior', hp: 200, attack: 30 }, { name: 'gob..

Nullish coalescing operator #?? #널 병합 연산자 실제로 코딩하다보면 null 혹은 undefind를 참조하여 에러가 뜨는 경우가 많습니다.초보인 분들은 에러 메세지를 검색해서 해결할 수도 있고 어느정도 경험이 있으신분들은 아 null 방지를 안해줬구나하고바로 AND(&&)문 아니면 옵셔널 체이닝으로 해결할 수도 있습니다.하지만 &&(AND)문이나 ?.(Optional Chaining)은 참조할 값이 null이면 그냥 아무것도 안들어오게 됩니다.만약 참조할 값이 null인지 체크하고 참조할값이 있다면 참조값을 쓰고 아니라면 다른 default값을 넣어주고 싶을때보통 삼항 연산자를 많이 쓰지요. potion ? 'drink' : 'do nothing' 하지만 널 병합 연산자로 더 ..

Optional Chaining  #?.  #옵셔널 체이닝 개발할때 보통 api에서 데이터를 가져온 후 Object 형식의 useState에서 setState로 데이터를 넣어준 후 보통 아래처럼 데이터를 사용합니다. let fireball = user.skill.fireball; or ({user.skill.fireball})근데 만약 여기서 user.skill이 null이라면 "Uncaught TypeError: Cannot read property 'fireball' of null"이런 문구의 에러가 발생합니다. 여기서 만약 optional chaining을 모른다면let fireball = user.skill && user.skill.fireball;or({user.skill && ..