전체 글
-
GoF PatternJavascript 2020. 9. 26. 22:28
객체 지향 프로그램 설계를 할 때 자주 발생하는 문제를 해결하기 위한 패턴 애플리테이션이 커짐에 따라서 코드 구조화가 중요해 집니다. 복잡한 코드를 유지 관리 가능하고 읽기 쉬우며 재사용 가능한 코드로 작성하기 위해서 디자인 패턴이 사용됩니다. 또한 소프트웨어를 설계할 때 특정한 맥락에서 자주 발생하는 문제를 처리하는 해결책에 공통점이 있습니다. 또한 패턴은 팀원 간의 공통된 언어를 만들어 의사 소통을 원활하게 만들어 주기도 합니다. 그러나 모든 문제를 디자인 패턴으로 해결하기보다 코드 베이스의 간결성이 생각해야 합니다. 디자인 패턴에 얽매이기 보다 그 패턴이 왜 효율적인지 이해하는 것이 좋습니다. Gang of Four 디자인 패턴 23가지의 디자인 패턴이 Creational, Structural, B..
-
TIL_200923(React Hook API)카테고리 없음 2020. 9. 24. 03:12
useCallback const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); 메모이제이션된 콜백을 반환합니다. 인라인 콜백과 그것의 의존성 값의 배열을 전달하면 useCallback은 콜백의 메모이제이션된 버전을 반환합니다. 메모이제이션된 버전은 콜백의 의존성이 변경되었을 때에만 변경됩니다. useCallback(fn, deps)은 useMemo(() => fn, deps)와 같습니다. useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 메모이제이션된 값을 반환합니다. 생성(create) 함수와 그것의 의존성 값의 배열을 전달..
-
TIL_200922(React Hook API)카테고리 없음 2020. 9. 23. 02:24
기본 Hook useState const [state, setState] = useState(initialState); 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 최초의 state 값은 첫 번째 전달된 인자인 initialState의 값과 같습니다. state 값을 갱신하는 경우 setState(newState); 함수적 갱신 function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( setCount(prevCount => prevCount + 1)}>+ ) 갱신된 값이 이전의 값(prevCount)을 바탕으로 계산됩니다. 업데이트 함수가 현재 상태와 정확히 동일한 값을 반환한다면 바로..
-
TIL_200921(GoF pattern2 & cheat sheet)Today I Learned 2020. 9. 21. 23:53
3. Behavioral Design Patterns - 객체 간의 통신을 개선합니다. Chain of Responsibility Pattern 더보기 느슨하게 결합 된 객체의 체인을 제공하는 동작 디자인 패턴입니다. 책임 패턴의 좋은 예는 일련의 중첩된 DOM 요소를 통해 전파되는 DOM의 이벤트 버블링입니다. 그 중 하나에 이벤트를 수신하고 그에 대해 작동하기 위해 연결된 "이벤트 리스너"가 있을 수 있습니다. class CumulativeSum { constructor(intialValue = 0) { this.sum = intialValue; } add(value) { this.sum += value; return this; } } // usage const sum1 = new Cumulative..
-
TIL_200920(아키텍쳐 패턴)Today I Learned 2020. 9. 21. 04:16
소프트웨어 아키텍쳐에서 일반적으로 발생하는 문제점들에 대한 일반화되고 재사용 가능한 솔루션입니다. 소프트웨어 디자인 패턴과 유사하지만 더 큰 범주에 속합니다. 1. Layered pattern 더보기 이 패턴은 n-티어 아키택쳐 패턴이라고도 불린다. 그룹으로 나눌 수 있는 구조화된 프로그램에서 사용할 수 있다. 일반적인 정보 시스템에서 공통적으로 볼 수 있는 계층 4가지입니다. Presentation layer - UI layer Application layer - Service layer Business logic layer - Domain layer Data access layer - Persistence layer 장점 하위 레이어는 다은 상위 레이어에 의해 사용됩니다. 레이어 표준화가 쉬우며 레이..
-
TIL_200919(GoF pattern)Today I Learned 2020. 9. 18. 18:23
개발자는 유지 관리 가능하고 읽기 쉬우며 재사용 가능한 코드를 작성하려고 노력합니다. 애플리케이션이 커짐에 따라 코드 구조화가 더욱 중요해 집니다. 디자인 패턴은 특정 상황에서 일반적인 문제에 대한 조직 구조를 제공하여 이러한 문제를 해결하는 데 매우 중요합니다. Gang of Four Design Patterns 1. Creational Design Patterns - 객체의 생성 과정을 제어하여 문제를 해결합니다. Constructor Pattern 더보기 클래스 기반 디자인 패턴입니다. 사실, 패턴이라기보다 기본 언어 구조에 가깝습니다. 그러나 자바스크립트에서는 객체를 생성자 함수나 클래스 없이 만들 수 있습니다. 다음 예제는 메서드를 가진 클래스를 정의하고 생성자 메서드를 호출하여 객체를 인스턴스..
-
TIL_200916([JS33] 4. 암시적 변환)Today I Learned 2020. 9. 17. 02:31
Javascript의 암시적 강제 변환은 예상하지 못한 값의 유형을 예상 유형으로 강제하려는 Javascript를 말합니다. 피해야하는 js의 특징입니다. 3 * "3" // 3 * 3 3 * Number("3") // 3 * 3 Number("5") // 5 + 연산자의 경우는 다른 수학 연산자와 달리 두 가지 기능을 합니다. 1. 덧셈 2. 문자열 연결 // 문자열 연결 1 + "2" // "12" 1 + "AB" // "1AB" // 덧셈 1 + 2 // 3
-
TIL_200915([JS33] 3. Value Type, Reference Type)Today I Learned 2020. 9. 15. 21:09
자바 스크립트는 value 타입과 reference 타입으로 나뉩니다. value 타입은 5가지가 있습니다. (primitives) Boolean, null, undefined, String, Number reference 타입은 3가지가 있습니다.이들은 모두 기술적으로 객체이므로 Object라고 합니다. Array, Function, Object Primitives let x = 10; let y = 'abc'; 메모리에 x라는 변수에 10(Number)이 할당되고, y라는 변수에 'abc'(String)이 할당됩니다. 변수에 할당되는 값을 다른 변수에 저장한다면 ' = '을 사용하여 복사할 수 있습니다. let x = 10; let y = 'abc'; let a = x; let b = y; 이제는 메..