Jacob's Development Blog

이 글에서 사용한 코드(깃 저장소) - https://github.com/JungKyuHyun/react-intl-test 오랜만에 올리는 React 관련 포스팅. 최근 react-native 프로젝트에 react-intl을 적용하면서 찾아본 것들을 적어보려고 한다. 사실 이전에도 react를 이용하여 관리자 페이지를 만들었을 때도 react-intl을 적용하는 이슈를 할당받아 해결했었다. (TMI: Jira를 사용하고 회사라는 곳에서 받은 생애 첫 이슈여서, 평생 기억에 남을거 같다.) 하여튼 react로 만든 웹이건, react-native로 만든 앱이건 둘다 사용 가능하다는 말을 하고 싶었다. 국제화라는 게 생각보다 어렵지 않으니 관련하여 참고하면 좋을 거 같다. react-intl 사실 이 라이브..

실제 상용 프락시 캐시는 매우 복잡하지만, 일단 기본적인 HTTP GET 메시지 하나를 처리하는 절차를 알아보겠다. 캐시 처리 단계 1. 요청받기 캐시는 네트워크 커넥션에서 활동을 감지하고 도착한 요청 메시지를 읽는다. 고성능 캐시는 여러 개의 들어오는 커넥션들로부터 데이터를 동시에 읽어 들이고 메시지 전체가 도착하기 전에 트랜잭션 처리를 시작한다. 2. 파싱 캐시는 메시지를 파싱 하여 URL과 헤더들을 추출한다. 여기서 파서는 헤더 부분에 대해 대소문자나 날짜 형식의 차이와 같은 중요하지 않은 차이점이 모두 무시되도록 정규화할 책임을 갖고 있다. 3. 검색 캐시는 로컬 복사본이 있는지 검사하고, 사본이 없다면 사본을 받아오며, 로컬에 저장한다. 다시 말해 캐시는 URL을 알아내고 그에 해당하는 로컬 사..

토폴로지(topology) - 컴퓨터 네트워크의 요소들(링크, 노드 등)을 물리적으로 연결해 놓은 것, 또는 그 연결 방식. 출처: 위키백과 개인 전용 캐시(private cache) - 한 명에게만 할당된 캐시, 한 명의 사용자가 자주 찾는 페이지를 담는다. 공용 캐시(public cache) - 사용자 집단에게 자주 쓰이는 페이지를 담는다. 개인 전용 캐시 개인 전용 캐시는 많은 에너지나 저장 공간을 필요로 하지 않으므로, 작고 저렴할 수 있다. 웹 브라우저는 개인 전용 캐시를 내장하고 있다. 대부분의 브라우저는 자주 쓰이는 문서를 개인용 컴퓨터의 디스크와 메모리에 캐시해 놓고, 사용자가 캐시 사이즈와 설정을 수정할 수 있도록 허용한다. 캐시에 어떤 것들이 들어있는지 확인하기 위해 브라우저 안을 들여..

웹 캐시는 자주 쓰이는 문서의 사본을 자동으로 보관하는 HTTP 장치다. 웹 요청이 캐시에 도착했을 때, 캐시 된 로컬 사본이 존재한다면, 그 문서는 원 서버가 아니라 그 캐시로부터 제공된다. 캐시의 장점 불필요한 데이터 전송을 줄여서, 네트워크 요금으로 인한 비용을 줄여준다. 네트워크 병목을 줄여준다. 많은 네트워크가 원격 서버보다 로컬 네트워크 클라이언트에 더 넓은 대역폭을 제공하기 때문에 캐싱을 이용하면 대역폭을 늘리지 않고도 페이지를 빨리 불러올 수 있다. 원 서버에 대한 요청을 줄여준다. 서버는 부하를 줄일 수 있으며 더 빨리 응답할 수 있게 된다. 페이지를 먼 곳에서 불러올수록 시간이 많이 걸리는데, 캐시는 거리로 인한 지연을 줄여준다. Flash Crowds(갑자기 요청이 몰리는 일) 대응이..

문제 + 생각의 방향(Optional) + 코드 codility는 문제 저작권 문제로 문제는 복붙 불가... Given an array of integers, return indices of the two numbers such that they add up to a specific target. You may assume that each input would have exactly one solution, and you may not use the same element twice. Given a 32-bit signed integer, reverse digits of an integer. Assume we are dealing with an environment which could only sto..

Web Proxy Server Web proxy server(이하 '웹 프락시 서버')는 중개자이다. 클라이언트와 서버 사이에 위치하여 그들 사이의 HTTP 메시지를 정리하는 중개인 역할을 한다. 클라이언트 입장에서 트잭잭션을 수행한다. 만약 웹 프락시 서버가 없다면, 클라이언트는 HTTP 서버와 직접 통신해야 하고, 있다면 웹 프락시 서버를 통해 통신하면 된다. 둘 다 트랜잭션을 완료하는 것이 클라이언트라는 점은 변하지 않지만, 프락시 서버가 제공하는 여러 서비스를 이용할 수 있게 된다. HTTP Proxy Server HTTP 프락시 서버는 웹 서버이면서 웹 클라이언트이다. HTTP 요청을 받게 되므로, 반드시 웹 서버처럼 요청과 커넥션을 적절히 다루고 응답을 돌려줘야 한다. 동시에 요청을 서버로 요..

이번 글은 스킬이기보다는 타입스크립트 작성 시에 추천 사항이다. readonly를 사용하자 타입스크립트로 프로젝트를 작성하더라도 readonly는 한 번도 작성을 안 하는 경우가 많다. 이유인즉슨 꼭 써야 되는 상황이 있는 것이 아니기 때문이다. 그렇다면 왜 쓰자고 권장하는 것일까. readonly는 Mutation(수정)으로 부터 발생할 수 있는 에러를 막아주기 때문이다. 예제를 통해 살펴보자. Trianular numbers 예제 Trianular number(=triangle number)는 삼각형 Dot Pattern을 만들 수 있는 숫자를 의미한다. 이제 수학 공부도 할겸 이거를 계산하는 것을 typescript를 이용해서 코드로 짰다고 가정해 보자. function arraySum(arr: n..

이전 글: 2019/12/27 - [Typescript] - 더 나은 타입스크립트 작성하기 1 - Skills

2019/12/27 - [Typescript] - 더 나은 타입스크립트 작성하기 1 - Skills에 이어, Skill적인 부분이다. 하지만 이것을 알기 전에 먼저 const assertions에 대한 개념을 알아야한다. const assertions const assertions은 Typescript 3.4에서 추가된 기능이다. 새로운 리터럴을 타입을 만들 때 사용할 수 있다. 그리고 const assertions을 사용하면 Object의 경우 타입 안정성을 위해 readonly가 추가되며, 객체 리터럴은 readonly 속성을 추가되고, 배열 리터럴은 readonly 튜플이 된다. 변수 선언 자체는 let으로 하건 const로 하건 차이가 없다. // Type: "jacob" let str = "ja..

자바스크립트를 다루고 코딩을 하다 보면, 객체를 다루는 게 얼마나 중요한가에 대해 알게 된다. 나 또한 처음엔 몰랐다. 요즘 들어 갈증이 생기고 예전에 겉핥기 식으로 했던 공부가 근본적인 실력 향상으로 이어지지 않다는 게 느낀다. 그래서 조금 더 자세히 공부해 보자. 우리가 다루는 자바스크립트의 대부분은 객체 타입이다. 당연히 객체를 잘 다뤄야지 자바스크립트를 잘 다룰 수 있을 것이다. What is Object? 나도 그랬지만, 가끔 Object에 대해 오해를 하고 있는 사람이 많은거 같다. object(객체)란, {key: value} 이런 식의 타입만을 의미하지 않는다. 원시 타입(primitive type)을 제외한 타입은 모두 Object 타입이며, Object를 상속 받고 있는 자식들이다. 따..