본문 바로가기
728x90
반응형

분류 전체보기231

리액트 - 순수 함수 순수 함수란 부작용 (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.
2024.02.20, weekly memoirs weekly memoirs 1. 독감 걸린 이후 몸이 묘하게 주글 것 같다 싶더니 설 연휴에 된통 몸살을 앓았다 그 이후로도 컨디션 난조 오예 올해의 나 얼마나 잘되려고 이렇게 연초에 액땜을 하는지 2. 힘들어도 걍 하는 게 최곤 거 같다 그런 의미에서 회사에서 진행하는 스터디 잘 든 거 같음.... 역시 강제성이 있어야 뭐라도 한다 이걸로 스터디를 진행하진 않지만 나름 의미 있는 책이라 풍성한 블로깅을 위해 캡쳐했다 디자인 패턴 몇 개 써보고 패턴에 좀 익숙해졌다 싶으면 읽어볼만하지 않을까? (근데 표지 엄청 읽기 싫게 생겼음 대학교 책 같다) 아무튼 디자인 패턴 공부 나름 흥미롭다 솔직히 class위주라서 저건 어따 써먹지 하는 느낌이 쎈데 나름 함수형으로 바꿔서 살펴보면 익숙해서 그런지 이런 방법도.. 2024. 2. 20.
추상화 팩토리 패턴 추상화 팩토리 패턴 팩토리 패턴의 단점을 보완하고자 나온 거 같음 팩토리 패턴 // 각 차종의 클래스 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.
호이스팅 관련 const, let, var 에러 정리 호이스팅 밑에 선언, 할당되어 있는 변수들을 앞에서 호출했을 때 선언된 변수만 가져오고 할당된 값은 못 가져오는 거임 호이스팅이 발생하면 선언된 변수는 undefined로 초기화되어 있기 때문에 undefined가 반환됩니다. var : 초기화 + 할당 같이함 그래서 초기화는 일단 되었으니 undefined 뜸 레퍼런스 에러 x let 및 const : 선언 / 초기화 분리되어서 일어남. 호이스팅에 의해 선언 부분만 끌어올려지고, 초기화는 선언이 이루어진 위치에서 발생함. 그래서 undefined도 못가져오고 레퍼런스 에러 남 1. 초기값 안 줬을 때 const const a; console.log(a) const 는 무조건 초기값과 함께 있어야 함 그래서 초기값 없다고 에러 뜨는 거임 SyntaxErr.. 2024. 2. 5.
팩토리 패턴 팩토리 패턴 const car1 = { name: "차1", price: "1000만원", getInfo: () => this.name+"의 가격은 "+this.price+" 입니다." } const car2 = { name: "차2", price: "2000만원", getInfo: () => this.name+"의 가격은 "+this.price+" 입니다." } 이렇게 생기는 객체들 반복 짱 많음 이걸 만드는 걸 함수화해서 공장을 만드는 거임 const factory = (param) => { return { name: param.name, price: param.price, getInfo: ()=> this.name+"의 가격은 "+this.price+" 입니다." } } const result1 =.. 2024. 2. 5.
2024.01.29, weekly memoirs weekly memoirs 1. 와 a형 독감 첨 걸려봤는데 사경을 헤맸다 진심 주글뻔 월요일부터 수요일까지 연차 내고 누워서 약 먹고 잠만 잤다 진짜 열도 열이지만 근육통이 대박이었다 누가 뚜두려 팬 거 마냥 넘 아팠음;;; 코로나 걸렸을 때도 아팠지만 그냥 이불 끌어안고 공부했었는데 이건 공부고 회사고 진짜 저세상 구경하는 줄 알았다... 사람이 이렇게 죽는구나 함... ㅠ 그리고 목요일 회사 복귀 후 (심지어 이때까지 미열있었음 실화인가) 메일 확인하다 휘발된 내 연차들을 보며 살쨕 더 아플뻔... 2. 몸져 누운 사이 내 계획은 계속해서 밀리고 다시 새로운 목표와 계획이 필요했다ㅎ 다이어리부터 밀리니 일정 정리가 안 되어 세미 멘붕(?)이었는데 일단 코 앞에 닥친 일부터 차근 차근 풀어야했다. 일.. 2024. 1. 29.
얕은 복사 깊은 복사 다시보기 원시 타입 number, string 등등 참조 타입 arr, obj 원시 타입 값 할당하기 let a = 1; let b = 2; a = b; b = 3; console.log(a) //2 a, b 는 주소값을 가지고 있음 a = b 할 때 b가 가지고 있는 주소로 가서 값을 가져온 다음 샥 복사해서 이건 새로운 메모리 공간에 넣고 이 메모리 공간 주소를 a 에 할당하는 거임 그러니까 a와 b는 가지고 있는 메모리 주소가 다름 참조 타입 값 할당하기 let arr1 = [1,2] let arr2 = [3,4] arr1 = arr2 arr2.push(5) console.log('arr1',arr1) // [3,4,5] 배열은 참조 타입이기 때문에 arr1 자체가 arr2의 메모리 주소를 참조하게 만듦 그.. 2024. 1. 28.
자바스크립트 메모리 관리 // 호이스팅, 스코프 체이닝 1. 메모리 생명 주기 만들 때 메모리 할당함 할당된 변수나 함수를 읽거나 쓸 때 메모리를 사용함 메모리가 필요 없어지만 메모리에서 해제함 c는 메모리 할당 해제 프로그래머가 가넝함 (malloc() free()) 자바스크립트는 v8엔진이 알아서 해줌 2. 힙 // 스택 메모리 공간은 힙 / 스택 / 일반 영역임 원시값은 스택에 저장댐 고정된 메모리를 할당하게 됨 (정적 메모리 할당) => 주소값의 경우 스택에 저장되는 거임 => 실행 컨텍스트로 여기에 해당 참조값은 메모리 힙에 저장됨 힙은 동적 메모리 할당임 3. 가비지 컬렉션 자바스크립트 엔진이 메모리를 해제하는 방법 컴퓨터는 메모리가 필요한지 결정 못함 -> 자신을 참조하는 객체의 수를 세어서, 참조 카운트가 0이 되면 버림 가비지 컬렉션은 메인 .. 2024. 1. 28.
728x90
반응형

티스토리툴바