늘 겸손하게

목차 디자인 패턴 싱글톤 패턴 옵저버 패턴 팩토리 패턴 디자인 패턴 디자인 패턴은 프로그램을 설계할 때 발생했던 문제점을 효율적으로 해결 할 수 있는 코딩 아이디어, 방법론을 말합니다. 대표적인 디자인 패턴으로는 '싱글톤 패턴', '옵저버 패턴', '팩토리 패턴' 등이 있습니다. 싱글톤 패턴 하나의 클래스가 하나의 인스턴스만을 가지고 계속 재활용해 메모리를 아끼고, 데이터 공유를 수월하게 하는 디자인 패턴. 보통 데이터베이스 연결 모듈에 많이 사용합니다. 메모리 사용량을 줄일 수 있는 장점이 존재하나 모듈간의 결합이 강해져 유지보수성이 떨어지고, TDD를 어렵게 하는 단점이 존재합니다. Java class Singleton { private static class singleInstanceHolder {..

목차 단언의 문제점 타입 가드 단언의 문제점 단언으로 모든 오류를 해결할 순 없다. function printText(el: Element) { console.log(el.textContent) } const h1 = document.querySelector('h1') printText(h1); 타입스크립트는 마지막 줄에서 오류를 출력한다. 여기서 단언을 통해 타입스크립트 에러 출력은 막을 수 있지만 실제 코드를 실행해보면 오류가 발생합니다. function printText(el: Element) { console.log(el.textContent) } const h1 = document.querySelector('h1') as HTMLHeadingElement printText(h1); 위와 같은 문..

목차 문제명 문제풀이 코드 단언? 단언은 '주저하지 않고 딱 잘라 말한다'는 의미이다. 데이터 타입을 개발자가 딱 잘라서 정하는 것을 '단언'이라 한다. 변수에 할당 가능한 데이터 타입이 여러가지일 경우 타입스크립트는 어떤 타입의 데이터가 할당될지 알 수 없는 경우가 있다. 이때 개발자는 단언을 통해 할당되는 데이터 타입을 결정한다. const el = document.querySelector('body') el.textContent = 'Hello world?!' 식별자 el에는 HTMLBodyElement 혹은 null 타입의 데이터가 할당될 수 있다. ('body' 요소가 없을 수 있으니) 타입스크립트는 el에 할당될 데이터 타입이 어떤 타입인지 알 길이 없다. 이러한 경우 개발자가 el 에 할당될..

목차 타입추론 판단근거 1 - 초기화 된 변수 판단근거 2 - 기본값이 설정된 매개변수 판단근거 3 - 반환 값이 있는 함수 타입 추론 타입 추론은 말 그대로 변수의 데이터 타입을 추측하는 것을 말한다. 데이터 타입의 추측 근거는 아래와 같습니다. 1. 초기화된 변수 2. 기본값이 설정된 매개변수 3. 함수의 반환값 판단 근거 1 - 초기화된 변수 let num = 12 let country = 'Korea' let isTrue = true 판단 근거 2 - 기본값이 설정된 매개변수 매개변수에 기본값이 정해져 있다면 기본값의 데이터 타입으로 식별자 데이터 타입 추론 function multi2(a = 2) { return a * a; } // 이렇게 쓰지 않아도 됨 function multi2(a: nu..

목차 TypeScript의 타입들 string number boolean Null / Undefined 배열 객체 함수 Any Unknown Tuple Never Union Intersection TypeScript의 타입들 타입스크립트에서 변수에 값이 할당될 때 : (콜론) 기호로 변수에 할당될 값을 고정시킬 수 있다. let age: number = 30 let name: string = 'Mike' string // string let str: string // 지금은 undefined가 할당되어도 나중에는 string 타입이 와야한다는 의미 let red: string = "Red" let blue: string = "Blue" let templateStr: string = `I have colo..

목차 case문 syntax-구문 예시 CASE 문 MySQL 구문으로 프로그래밍 언어의 if, else 문과 똑같은 역할을 한다. Syntax - 구문 CASE WHEN 조건1 THEN 결과1 WHEN 조건2 THEN 결과2 .. .. WHEN 조건N THEN 결과N ELSE 결과 END; 다른 프로그래밍 언어와 같이 위에서 아래로 조건을 탐색하다가 맞는 조건의 결과를 반환하고 탐색이 중단된다. 만약 어떤 조건도 맞추지 못한다면 ELSE 문의 결과를 반환한다. ELSE 문도 없다면 NULL을 반환한다. 예시 car price 소나타 3,000 람보르기니 30,000 위와 같은 테이블이 있다고 가정할때 select car, case when price > 10000 then 'expensive' whe..

목차 문제 상황 문제 원인 해결책 - dependencies 배열 (의존성 배열) dependencies 배열 특징에 따른 결과 문제 상황 useEffect 메서드의 첫 번째 인자로 컴포넌트가 렌더링 된 이후에 실행할 코드를 넘겨주었습니다. api를 통해 데이터를 가져오는 코드였는데 데이터를 성공적으로 가져오면 dataRead state를 true로 변경하여 loading 화면에서 실제 앱 화면으로 변환되도록 구현했습니다. 하지만 불필요하게 api 호출을 두 번하는 문제가 발생했습니다. useEffect(() => { async function fetch_data() { console.log("fetch_data") console.log("dataRead : ", dataRead) const api_ke..

목차 hover 코드 hover 특정 버튼 위에 마우스 포인터를 올리면 확대되는 이펙트를 본 적이 있을 겁니다. 이를 css로 구현 가능합니다. 코드 해당 요소에 대해 hover 되기 이전과 hover 된 상태의 css 스타일이 각각 한 개씩 필요합니다. 위 gif에서 화살표 버튼의 id는 'scroll-to-top'입니다. 그러므로 마우스가 요소 위로 올라왔을때올라왔을 때 요소 크기를 키우기 위해서는 ':hover' 가상 선택자를 붙여주고 transform: scale() 속성을 사용합니다. 아래와 같은 css를 적용하면 마우스가 요소 위로 올라왔을 때 요소 크기는 1.2배로 커집니다. #scroll-to-top:hover { transform: scale(1.2); } 여기에 자연스러운 전환을 적용하..