전체 글43 Class 인스턴스 메소드의 this와 Arrow Function에 대하여 이 글은 리액트의 Function Component에서 클래스의 인스턴스 메소드를 사용했을 때, 메소드 내부의 this가 undefined가 나왔던 이유에 대해 알아번 내용이다. 우선 문제가 되었던 코드 예시는 아래와 같다. export class SomeClass { private user: User; constructor(user: User) { console.log("initializing!"); this.user = user; } someFuncWithUser() { //...무엇인가 일을 한다. console.log(this.user); } } export default function useSomeClass() { const { user } = useAuthContext(); const { s.. 2023. 1. 18. 자바스크립트로 옵저빙(변수 변화 탐지)를 구현하는 방법들 자바스크립트의 옵저빙 자바스크립트에서 변수의 변화를 탐지하는 방법들에 대해 정리해보았다. 옵저버(관찰자) 디자인 패턴 리덕스에서 사용되는 옵저버 패턴 예시 getState()를 통해 상태를 바라보는 순간 subscribe가 된다는 점이라던가 변경된 state와 이전 state를 비교해 리렌더링을 한다던가 하는 부분처럼 실제 구현과는 차이가 있다. 하지만 디자인 패턴을 파악하기 위한 예시이므로 생략한다. export function createStore() { // 외부에서 접근할 수 없도록, state값을 저장(캡퍼링)하기 위해 클로저 구현 let state; const handlers = []; function dispatch(newState) { state = newState // 호출될때마다 구독된.. 2022. 9. 22. 이벤트 플로우 (이벤트 캡처링, 이벤트 버블링, 이벤트 위임) 이벤트 플로우 Click Here! 위 html 코드에서 div, html, body 모두에 클릭 이벤트가 달려있을때 div를 클릭하면 3가지 이벤트가 모두 실행된다. 그러나 3가지 이벤트가 실행되는 순서가 존재한다. 이 순서를 이벤트 플로우라고 한다. target vs currentTarget target : 시작점을 뜻한다. currentTarget : 지금 실행중인 이벤트가 어디에서 실행중인지를 의미한다. 처음 보았던 html 코드에서 div를 클릭해서 이벤트가 발생했을때, div 이벤트 핸들러에서 target과 currentTarget은 모두 div가 된다. 반면, body 이벤트 핸들러에서는 target은 이벤트의 시작점인 div가 되고 currentTarget은 body에 연결된 핸들러이므로 .. 2022. 9. 17. React 밑바닥(webpack & babel) 부터 세팅하기 웹팩이란 ? 자바스크립트 어플리케이션을 위한 정적 모듈 번들러 의존성이 있는 모듈들을 하나의 파일로 통합시켜준다. 한 웹페이지에서 사용하는 여러개의 자바스크립트를 동시에 가져와서 생기는 네트워크 병목현상 방지한다. 모듈 단위로 개발할 수 있어 유지보수성을 높일 수 있다. 바벨이란 ? 최신 자바스크립트를 사용할 수 있게 하는 트랜스파일러 바벨은 히브리어로 '혼돈'이란 뜻이라고 성경에 나타나 있다. 자바스크립트의 문법은 빠르게 진화하고 있지만 정작 자바스크립트 코드를 실행해주는 환경은 이를 지원해주지 못하는 경우가 많다. 구약성경에서 바벨탑 건설 중 언어가 뒤섞여 혼돈 속에 바벨 탑 건설을 그만두었던 일화처럼 다양한 웹 브라우저, node.js 등 각기 다른 환경에서 혼돈에 빠지지 않고 자바스크립트 코드가 .. 2022. 8. 29. HTTP/1.1 vs HTTP/2.0 HTTP/1.1 Connection Connection 일반 헤더는 현재의 전송이 완료된 후 네트워크 접속을 유지할지 말지를 제어한다.. 만약 전송된 값이 keep-alive면, 연결은 지속되고 끊기지 않으며, 동일한 서버에 대한 후속 요청을 수행할 수 있습니다. http/1.1의 경우 일반적으로 하나의 connection에 하나의 요청을 처리 한다. 그러므로 요청마다 connection을 만들게 되고 TCP 특성상 매 연결마다 3 Way Handshake 가 반복적으로 일어나 불필요한 RTT증가와 네트워크 지연을 초래하여 성능을 저하 시키게 된다. http/1.0 에서는 요청 헤더에 Connection: Keep-Alive를 추가하면 이용할 수 있다. http/1.1 에서는 기본으로 동작한다. 3 Wa.. 2022. 3. 2. husky hook 설정을 통한 타입 에러 방지 Why husky? 지난번 타입 스크립트 마이그레이션을 하며 React Native에서는 타입에러가 발생하여도 메트로 서버에서 실행되는 번들은 자바스크립트로 컴파일된 파일이기 때문에 문제 없이 실행이 잘 되는 아쉬운 점이 있었다. 때문에 엄격한 타입 관리를 위해 빨간색 에러에 신경을 곤두세우며 마이그레이션을 진행하였는데 그럼에도 불구하고 미처 빨간 에러를 발견하지 못하고 넘어갔다가 나중에 발견하는 경우가 더러 있었다. 사실 혼자 개발하면서는 크게 문제가 되지 않을 부분이라고 생각했으나 새로운 프로젝트는 협업을 필요로 했고 미처 발견하지 못한 타입 에러를 서로 발견하지 못한채로 개발을 하다가 큰 문제를 겪을 수 있겠다는 생각이 들었다. 협업하면서 발생할 수 있는 실수를 방지하고자 커밋시에 타입 및 린트 검.. 2022. 2. 24. 리플로우와 리페인트 - 브라우저의 렌더링 과정 렌더링 과정 (Critical Rendering Path) DOM 트리 생성 마크업 언어로 만들어진 문자열을 메모리에서 다루기 위해 HTML 태그를 파싱해 DOM 트리를 구성한다. DOM은 데이터의 표현식으로 모든 HTML 태그는 태그 테이터의 표현식인 DOM 요소로 1:1로 대응해 표현된다. 메모리에 만들어진 객체를 document라고 하고 구조를 DOM이라고 한다. 이 구조는 트리형태로 구성되며 이를 DOM트리 라고 한다. CSSOM 트리 생성 StyleSheet을 파싱하여 CSSOM (스타일 구조체)를 생성한다. 스타일 정보는 단계적으로 처리되며 가장 마지막 단계의 스타일 정보가 이전 스타일보다 우선적으로 적용된다. 스타일 정보의 처리 단계 브라우저 자체에 포함된 기본 스타일 정보 (User Age.. 2022. 2. 20. 자바스크립트의 이벤트 루프 들어 가기 전 브라우저의 구성 Web APIs Event Table: 특정 event가 발생했을 때 어떤 callback 함수가 호출되야 하는지를 알고 있는 자료구조 자바스크립트 런타임 환경의 시각적 표현 스택 (Call Stack) 실행된 코드 환경을 저장하는 자료구조 함수를 호출할때 함수의 인자와 지역 변수를 포함하는 프레임이 생성되어 스택에 push 된다. 힙 객체는 힙에 할당된다. 힙은 메모리의 큰 영역을 지칭하는 용어이다. 메모리 할당이 발생하는 곳 큐 JavaScript의 런타임은 메시지 큐, 즉 처리할 메시지의 대기열을 사용한다. 각각의 메시지에는 메시지를 처리하기 위한 함수가 연결되어 있다. 이벤트 루프 임의 시점에 런타임은 대기열에서 가장 오래된 메시지부터 큐에서 제거하며 처리한다. 이때.. 2022. 2. 19. OSI 7 Layer 와 TCP/IP OSI 7 Layer 란? 네트워크 프로토콜과 통신을 7 계층으로 표현 목적 프로토콜을 기능별로 나누고 계층 별로 구분 벤더(통신장비)간 호환성을 위한 표준이 필요 -> 표준의 발달로인한 쉬운 접근성으로 기술이 발전하게 됨 역사 1970년대 초 네트워크는 정부 또는 특정 벤더에서 독점 개발했으나 공개 형 모델 필요하게 됨 1970년대 말 ISO에 의해 관리 1984 ISO 7498 릴리즈 OSI 7 Layer 모델 Physical - 네트워크 하드웨어 전송 기술 Data Link - 이더넷, 랜카드, Mac 통신, 에러검출/재전송 Network - IP 통신, 라우팅 Transport - TCP / UDP Session - TCP / IP 통신 연결을 수립 / 유지 / 중단 Presentation - 인.. 2022. 2. 16. 네트워크 정의와 구조 네트워크란? 분산되어 있는 컴퓨터들이 자원을 공유할 수 있게 통신망으로 연결한 것 네트워크 형태 LAN(Local Area Network) 사무실 또는 학교 등의 가까운 지역을 한데 묶은 네트워크 WAN(Wide Area Network) 각각 떨어진 LAN 망을 연결, 규모가 큰 네트워크, ISP로 연결 VPN(Virtual Private Network) 가상 사설망 공중망을 사설망처럼 사용, 암호화 네트워크 표준 네트워크 표준기구 ISO 국제표준화 기구 IEEE 미국전기전자협회 (LAN 위주) ITU-T 국제전기통신연합 통신표준본부 (WAN 위주) 인터넷 표준기구 IETF 인터넷 엔지니어 테스크포스 RFC 프로토콜 정의 문서 ex) 이더넷 -> IEEE 802.3 TCP/IP -> RFC 1122 & .. 2022. 2. 15. 이전 1 2 3 4 5 다음
