본문 바로가기
728x90
반응형

TIL149

기초1 컴퓨터 -> 정의된 방법에 따라 입력된 데이터를 자동으로 처리하여 정보를 생산하는 기계 -> 외부로 받아들이는 입력 기능, 내부 장치 조정하는 제어 기능, 입력된 데이터를 저장(저장,기억), 연산 기능, 출력 기능 비트, binary digit : 두 개의 상태를 갖는 (on off) 가장 작은 단위임 컴퓨터는 트랜지스터를 통해 2진법 숫자로 데이터를 표현함 아날로그 / 디지털 아날로그 : 연속적인 물리량 값 디지털 : 이산적인 값으로 근사하여 표현함 아날로그 시계는 초침이 지날 때 중간 과정이 있지만, 디지털 시계는 1->2 단순히 값을 표헌함 아스키 코드 각 문자를 7비트로 표현함 2^7 = 128개 표현 1. string -> char(string) 2. char => 아스키 코드 (char -> .. 2024. 4. 11.
리액트 지역 상태 전역 상태 자바스크립트 함수는 순수 함수 / 비 순수 함수로 나뉨 순수 함수는 인수에만 의존함 동일한 인수를 받으면 동일한 값을 반환함 순수 함수 예 const addOne = (n) => n + 1 이는 전역 변수에 의존할 수 있음 let base = 1 const addOne = (n) => n + base 외부에서 함수 작동 방식을 변경할 수 있어서 좋긴하지만 외부 변수에 의존한다는 사실을 모르고 다른 곳에서 사용했다간 오류 날 수도 있음 또, base 는 싱글턴 형태라 재사용성이 떨어지기도 함 const createContainer = () => { let base = 1 const addOne = (n) => n + base const changeBase = (b) => base = b return { a.. 2024. 4. 11.
strategy template 패턴 스트래티지 패턴(Strategy Pattern) 객체지향 디자인 패턴 알고리즘군을 정의하고 각각을 캡슐화하여 교환할 수 있도록 만드는 패턴 클라이언트는 알고리즘을 독립적으로 선택, 알고리즘의 변경에도 영향을 최소화 // 오름차순 정렬 함수 const ascending = (a, b) => a - b; // 내림차순 정렬 함수 const descending = (a, b) => b - a; // 정렬 함수를 인자로 받아 배열을 정렬하는 함수 const sortArray = (arr, compareFn) => arr.slice().sort(compareFn); // 예시 배열 const numbers = [5, 2, 8, 3, 1]; // 오름차순 정렬 const sortedAscending = sortAr.. 2024. 4. 11.
useState 와 useReducer useState 1. 이 버튼을 누르면 값이 이전 값과 같기 때문에 렌더링하지 않음 ... setCount(1)}>1 ... 객체는 참조형이기 때문에 주소값이 달라져 렌더링함 ... setCount({count:1})}>1 ... - 객체는 참조형이라서 값만 바뀌면 메모리 주소 안 바뀜 밑 예시는 렌더링 안 됨 ... 1 ... 2. 함수형 업데이트 쓰셈 ... {setCount(count+1)}> {count} ... 위 코드는 빠르게 두 번 누르면 한번만 카운팅됨 이건 상태 업데이트를 비동기적으로 하는 리액트 때문임 (근데 이 설명보다는 한번에 많은 요청이 오면 성능 최적화를 위해 일괄적으로 처리하려는 리액트 때문에 그런 거 같음) 그래서 보통 함수형 업데이트 씀 c => c + 1가 호출되면서 이전.. 2024. 4. 8.
Iterator 패턴 Iterator 패턴 컬렉션 내의 요소를 순차적으로 접근할 수 있는 인터페이스를 제공하는 패턴 function createIterator(collection) { let index = 0; return { next: () => { return index < collection.length ? { value: collection[index++], done: false } : { done: true }; } }; } const numbers = [1, 2, 3, 4, 5]; // 배열에 대한 Iterator 생성 const iterator = createIterator(numbers); // Iterator를 사용하여 순차적으로 배열의 요소에 접근합니다. console.log(iterator.next());.. 2024. 3. 19.
자바스크립트 접근 제한자 public, private, protected public : 외부에서 접근 가능 (자바스크립트는 이게 디폴트임) private : # 120) { console.log("Warning: Speed limit exceeded!"); } } // public 메서드에서 protected 메서드 호출 drive() { this.#checkSpeed(); console.log("Driving..."); } } // Car를 상속받는 하위 클래스 class SportsCar extends Car { // 상위 클래스의 private 필드에 접근하여 조작하는 메서드 speedUp() { this.#speed += 20; // 부모 클래스의 private 필드에 직접 접근할 수 없으므로 오류 발생 console... 2024. 3. 9.
리액트 - 순수 함수 순수 함수란 부작용 (side Effect)가 없어야 됨 순수 함수 예시 // 두 숫자를 더하는 순수 함수 function add(a, b) { return a + b; } // 함수 호출 console.log(add(3, 5)); // 출력: 8 // 간단한 함수형 컴포넌트 function Greeting(props) { return Hello, {props.name}!; } // 함수형 컴포넌트 호출 ReactDOM.render( , document.getElementById('root') ); 한마디로 결과가 명확해야 됨 순수하지 않은 컴포넌트 1. useEffect 안에서 axios 바로 호출 하는 거 => 상태관리 쓰면 해결 2. 브라우저 이벤트 그냥 걸어버리는 거 => 상태관리 쓰면 해결 참고.. 2024. 3. 5.
Facade Pattern 여러 SubSystem들의 기능을 하나의 Facade Object로 정의하고, Client가 Facade Object를 사용하는 형태 각각의 클래스와 메서드들이 목적과 동적이 이해하기 어려워 가져다 쓰기 어려울 때 클래스를 재정리하는 것 facade - 여러 SubSystem들의 기능을 하나의 Facade Object로 정의하고, Client가 Facade Object를 사용하는 형태 SubSystem(하위 시스템) - 수십 가지 라이브러리 혹은 클래스들 Actor(Client) - 서브클래스에 직접 접근하는 대신 facade를 사용함 장점 1. 하위 시스켐의 복잡성이 줄어들어 외부에서 가져다 쓰기 쉬움 2. 복잡한 코드를 감춤으로서 시스템 코드를 모르더라도 facade 클래스만 이해하면 가져다 쓰기 쉬.. 2024. 3. 5.
추상화 팩토리 패턴 추상화 팩토리 패턴 팩토리 패턴의 단점을 보완하고자 나온 거 같음 팩토리 패턴 // 각 차종의 클래스 class Sedan { configure() { this.seats = 4; this.engine = 'V6'; } displayInfo() { console.log(`Sedan with ${this.seats} seats and ${this.engine} engine.`); } } class SUV { configure() { this.seats = 7; this.engine = 'V8'; } displayInfo() { console.log(`SUV with ${this.seats} seats and ${this.engine} engine.`); } } // 팩토리 클래스 class CarFacto.. 2024. 2. 6.
728x90
반응형

티스토리툴바