본문 바로가기

전체 글101

[Network] DNS(Domain Name System)란? DNS(Domain Name System)? 우리가 일반적으로 보는 www.naver.com과 같이 우리가 사용하는 주소가 도메인이다. 도메인 네임 시스템은 이 주소를 사용자가 입력하면 IP 주소로 변환해주는 역할을 한다. 그 반대의 역할도 수행한다. IP 주소 우리의 컴퓨터는 네트워크 상에서 숫자를 사용하여 통신하게 된다. 192.xx.x.x 이렇게 흔히들 본 적이 있을 것이다. 이를 IP주소라고 한다. 하지만 이러한 숫자를 입력하게 되면 우리는 그 숫자들을 다 기억해야 한다. 그렇기 때문에 도메인이 나온 것이고, 그 도메인을 IP주소로 변환하는 DNS(Domain Name System)이 탄생하게 된 것이다. DNS의 동작 방식 DNS는 다음과 같은 동작 방식으로 동작한다. 동작 방식을 보기 이전에 .. 2022. 10. 6. 23:56
[JavaScript] 호이스팅(Hoisting) 호이스팅(Hoisting) 호이스팅(Hoisting)은 인터프리터가 변수와 함수의 메모리 공간을 선언전에 미리 할당하는 것이다. var로 선언한 변수는 undefined let과 const는 호이스팅시 변수를 초기화 하지않는다. 간단히 요약하자면 호이스팅은 변수의 선언 / 초기화를 분리하고 선언을 코드의 최상단으로 옮기는 것이다. 변수의 선언단계 호이스팅의 예제를 보기전 변수의 선언 단계를 먼저보자 1. 선언 단계(Declearation phase) 선언단계에서는 변수를 실행 컨텍스트 변수 객체에 등록한다.이 변수 객체는 스코프가 참조하는 대상이된다. 2. 초기화 단계(Initalization phase) 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보하고 변수를 undefined로 초기화한다. 3.. 2022. 10. 6. 14:21
[JavaScript] 클로저(Closure) 클로저(Closure) 클로저는 함수내에서 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하기 위해선 우선 자바스크립트의 변수의 유효 범위의 지정을 먼저 이해해야 한다. 어휘적 범위 지정(Lexical scoping) 어휘적 범위 지정은 변수가 어디에서 사용 가능한지 알기 위해서 그 변수가 소스 코드 내에 어디에 선언되었는지 고려하는 것을 의미한다. function init() { var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다. function displayName() { // displayName() 은 내부 함수이며, 클로저다. alert(name); // 부모 함수에서 선언된 변수를 사용한다. } displayName(); } init(); ini.. 2022. 10. 6. 00:20
브라우저의 동작원리 브라우저의 동작원리 브라우저(browser) ? 브라우저는 흔히 우리가 현재 사용하고있는 크롬, 마이크로 소프트 엣지, 파이어폭스 등을 지칭하는 말로 월드 와이드 웹에서 정보를 검색 및 탐색하기 위한 소프트웨어이다. 위키 백과는 웹 브라우저를 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스(GUI) 기반의 응용 소프트웨어라고 설명하고 있다. 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고, 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서이고, 이미지나 PDF 등 다른 형태일 수도 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 식별 된다. 브라우저는 웹 표준화 기구인 W3C.. 2022. 10. 5. 15:37
[React] Redux-Toolkit 대표적인 API 알아보기 Redux-Toolkit 대표 API 정리 1. configureStore() 리덕스 코어 라이브러리인 createStore()를 추상화한 함수. store를 구성하는 함수이다. 기본 리덕스 미들웨어인 redux-thunk를 내장하고, redux Devtools를 활성화해준다. //기본 사용 예제 import { configureStore } from '@reduxjs/toolkit'; import todoReducer from '../todo/tdooSlice'; export const store = configureStore({ reducer: { todos: todoReducer, }, }); configureStore 전체적인 구성 import logger from 'redux-logger' im.. 2022. 10. 4. 23:55
[React] Redux-Toolkit Quick Start 공식 문서 따라하기 [React] Redux-Toolkit 초기 세팅 이전 포스팅은 Redux=Toolkit 템플릿을 이용하여 RTK 구조가 잡혀있는 설치 방법을 포스팅하였다. 이번에는 Redux 공식 문서에 있는 Counter 예제를 따라하면서 구현해 보도록하자 Store 설정 방법 및 Slice 작성방법을 작성하겠다. 1. CRA 설치 우선 자신이 설치하고자 하는 디렉토리로 가서 cmd 창으로 아래와 같이 입력한다. npx create-react-app [프로젝트명] 2. rtk 모듈, react-redux 설치 설치가 완료되면 해당 디렉토리 ([프로젝트명]) 으로 이동하여 rtk 패키지와 react-redux를 설치해준다. npm install @reduxjs/toolkit react-redux 3. Store 생성 .. 2022. 10. 4. 14:21
로드 밸런서(Load Balancer)의 개념 로드 밸런서(Load Balancer) 로드 밸런서는 많은 사용자의 트래픽이 몰린다는 가정하에 모든 요청을 일관성 있게 응답하기 위하여 등장한 기술이다. 로드 밸런서란 서버에 가해지는 트래픽을 분산 시켜주는 장치 또는 기술을 통칭한다. 이는 한대의 서버나 서비스로 트래픽이 몰리지 않도록 사용자 및 서버가 최적의 환경을 유지하기 위해서 사용한다. 그러나 모든 서비스에서 로드 밸런싱이 필요한 것은 아니다. 사용자 트래픽이 많이 몰릴 환경이나, 거대한 사업의 규모의 경우 로드 밸런싱을 필수로 선택하게 된다. 로드 밸런싱 알고리즘의 종류 1. 라운드 로빈(Round-Robin) 방식 줄여서 RR방식이라고도 한다. 라운드 로빈 방식은 서버에 들어온 요청을 순서대로 돌아가면서 배정하는 방식이다. 여러 대의 서버는 .. 2022. 10. 3. 23:54
[React] Redux-Toolkit 초기설치 Redux-Toolkit Redux-toolkit은 기존 Redux를 편리하고 간편하게 사용할 수 있는 라이브러리이다. Redux코드를 보다 더 간결하게 작성할 수 있고, Redux 보다 효율적이다. 기존 Redux의 스토어 구성, 많은 패키지 추가 등등의 문제점을 개선하기 위해 나왔다. createStore => configureStore action, reducer => createSlice 등의 사용법이 좀더 개발자 친화적으로 작성할 수 있다. Redux-ToolkIt 설치 방법 1. Redux-Toolkit을 설치하기 위해서는 우선 npm(Node 패키지 관리자)가 설치 되어있어야한다. 사용방법은 아래와 같다. 더보기 https://nodejs.org/ko/ Node.js Node.js® is a.. 2022. 10. 3. 17:38
서버 인프라 무중단 배포 아키텍쳐 서버 인프라 무중단 배포 아키텍쳐 최근 직장에서 프로젝트를 진행하면서, 사용자에게 배포를 할때, 지금 우리 회사의 방식과 인프라에서는 어떤 배포방식이 더 나은지 생각해 볼 시간이 있었다. 사용자는 어떻게 배포가 된지 모르게 하지만 서비스는 끊기지 않는 무중단 배포 방식을 알아보자. 무중단 배포 무중단 배포는 운영중인 서비스를 중단하지 않고, 새로운 소프트웨어 버전을 배포하는 기술이다. 무중단 배포의 핵심은 서로 다른 IP나 포트를 이용해 인스턴스의 트래픽을 제어하는 것이다. 무중단 배포가 가능하려면 고 가용성의 시스템 인프라가 설정되어야 한다. 무중단 배포의 방식도 여러가지인데 롤링 배포(Rolling Deployment), 블루-그린 배포(Blue-Green Deployment), 카나리 배포(Cana.. 2022. 10. 3. 13:51
728x90

티스토리툴바