본문 바로가기

분류 전체보기

 (112)
React Native : 시작하기 앱을 만들어 보고 싶었고, 리액트를 사용했던 경험이 있다보니 자연스레 리액트 네이티브를 배웠다. 검색해본 결과로는 리액트 개발 경험이 리액트 네이티브를 사용할 때에도 꽤나 많은 도움이 되는 걸로 보인다. 공식문서를 기반으로 인강과 함께 정리한 내용을 적어둘 생각이다.   1) 리액트 네이티브 시작하는 방법리액트 네이티브 자체로도 시작할 수 있지만, 공식문서에서는 프로젝트를 시작할 때 Expo 라는 프레임워크를 제안한다.  'Expo' provides features like file-based routing, high-quality universal libraries, and the ability to write plugins that modify native code without having to m..
Javascript : Execution Context 실행컨텍스트 1. 실행 컨텍스트의 정의 2. 실행 컨텍스트의 세부사항 - 1) 전역 실행환경, 2) 함수 실행환경 3. 실행 컨텍스트의 생성단계 - 1) 변수 객체 생성, 2) 스코프 체인 생성, 3) this 키워드 값 생성 4. 실행컨텍스트의 실행단계 1. 실행컨텍스트 정의 브라우저의 자바스크립트 엔진은 자바스크립트 코드를 핸들링하기 위해 특별한 환경을 만들어 내는데 이것이 실행 컨텍스트이다. 현재 실행중인 코드와 실행되기 위한 모든 환경을 포함한다. 2. 실행컨텍스트의 세부사항 두가지 실행환경이 있다. 전역 실행 환경과 함수 실행환경 자바스크립트 엔진이 처음 스크립트 파일을 받으면, 전역 실행환경을 먼저 생성한다. 자바스크립트 파일에서 하나의 전역 실행환경만 있을 수 있다. 함수가 호출 될 때마다 ..
React : memo 1) memo 원리 2) memo의 사용 3) memo props의 얕은 비교 4) memo의 두번째 인자 사용 메모는 부모로 부터 받아오는 컴포넌트의 'prop'이 바뀌지 않은 이상 컴포넌트의 리렌더링이 일어나지 않게 한다. 1) memo 원리 컴포넌트를 메모로 감싸게 되면, 해당 컴포넌트의 버전이 메모이징 된다. 부모 컴포넌트가 리렌더링 되었다고 해도 해당 컴포넌트 프롭스 값에 변경이 없다면 리렌더링 되지 않는다. memo는 Component와 arePropsEqual(optional) 두가지 인자를 갖는다. 메모로 컴포넌트를 감쌀 때 컴포넌트를 변경시키는 것은 아니다. 다만 새로운 메모이징된 컴포넌트를 리턴하게 된다. 리액트 컴포넌트는 순수한 렌더링 로직을 가져야 한다. 즉 컴포넌트의 props, ..
React : useEffect에 대하여 ! 목차 1. useEffect란? 2. useEffect의 사용 3. useEffect 문제해결 1. useEffect란? useEffect(setup, dependencies?) 유즈이펙트는 외부 시스템과 컴포넌트를 동기화하는 리액트 훅이다. 리액트의 주된 목적인 UI구현을 제외한 나머지 기능들을 side effect라고 하는데 (구독, 타이머, 로깅 fetching 등) 이 때 useEffect를 사용한다. useEffect에 첫번째 인자로 전달된 setup 함수는 렌더링이 화면에 반영된 이후에 실행되게 된다. 두번째 인자로 전달된 dependency([])는 특정값이 변경될 때만 함수가 실행될 수 있게 해준다. setup 함수는 경우에 따라 cleanup 함수를 리턴할 수 있다. 컴포넌트가 처음 DO..
React : state, useState에 대하여, snapshot, batches 목차 1. React state란? state의 필요성 2. useState 1) setState * React batches state updates 2) initial state 3) 오브젝트와 배열의 업데이트 1. state란? state의 필요성 다음페이지를 눌렀을 때 기존 페이지에서 다음 페이지로 이동하기는 것, 장바구니에 담기를 클릭하였을 때 물건이 추가로 장바구니에 담기는 것과 같이 유저 상호작용 결과로 즉각적인 UI 변경이 필요한 경우가 있다. 이것들이 구현되기 위해 컴포넌트들은 우선적으로 기존의 값들을 기억해야 한다. 기존값이 1이라고 했을 때 +1을 하고 화면에 2를 보여주기 위해서는 기존값 '1'에 대한 기억이 필요하다는 것. 리액트에서는 이러한 기억이 필요한 컴포넌트 별 메모리를 가..
클로저(Closures) 에 대하여 클로저는 자바스크립트를 사용할 때 알아야 하는 개념 중 하나이다. 이해는 하고 있으나 설명하려고 하면 막막해지는 그런 개념이었다. 개념과 쓰임새를 다시 익히며 알아보려고 한다. 목차 1. 클로저란? 2. 렉시컬스코프 3. 클로저의 예시 - 클로저로 private methods 모방하기 4. 클로저 스코프체인 5. 과거 var 사용으로 인한 혼란 6. 성능관련 고려사항 1. 클로저란? 'A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment)' (MDN) 클로저는 함수와 선언된 함수의 Lexical environment..
WebSocket이란 무엇인가? Socket과의 차이점, HTTP와의 차이점 WebSocket과 Socket, 모두 통신 프로토콜이고 비슷해 보이지만 엄연히 다른 개념이다. socket 자체는 two-way 네트워크 연결의 엔드포인트, 연결부의 의미를 지닌다. 소켓은 클라이언트-서버 통신, P2P, 실시간 데이터 전송에 일반적으로 사용되고 TCP, UDP를 사용한다. 계층적으로는 전송 계층 위에 존재한다. WebSocket는 HTTP에 기반한 브라우저와 서버 사이에 양방향 인터렉티브한 통신을 위한 프로토콜이다. 지속적인 TCP 연결을 통해 빈번한 폴링 없이 클라이언트, 서버간 양방향 실시간 통신을 가능하게 한다. 온라인게임, 채팅 어플리케이션, 금융 거래 플랫폼과 같이 낮은 지연 시간, 고 처리량 통신이 필요한 어플리케이션에 사용될 수 있다. 웹소켓과 HTTP 연결과의 차이점 딥..
CORS에 대하여. 이전에 CORS Error를 접하며 관련 정보를 찾아보고 해결 했었는데, 'CORS' 개념 자체에 대해서는 부족하게 이해한거 같아 다시 공부해 보게 되었다. 1. Cors의 개념 CORS(Cross-Origin Resource Sharing)는 HTTP 헤더 안에서 브라우저가 자신의 출처(도메인, 프로토콜, 포트)가 아닌 다른 출처에 접근할 수 있는 권한을 부여할 수 있게 한다. 일반적으로 브라우저는 서버가 교차 출처 요청에 대해 허용할 것인지 확인하기 위해 실제 요청 전 사전 요청('preflight')을 보내게 된다. 이 사전 요청의 header에는 실제 요청에 사용될 HTTP method와, headers의 정보가 포함된다. 보안 상의 이유로, 브라우저는 스크립트에서 시작된 교차 출처 HTTP요청을..

티스토리툴바