Jacob's Development Blog

글을 시작하기 전에 넋두리... 며칠 전 나는 간단한(?) 카드를 만드는 미니 프로젝트를 만들었다. 메인 라이브러리로는 평소 자주 사용하던 React를 사용했고, UI 라이브러리는 이뻐서 사용해 보고 싶었지만 기회가 없어 못 사용해봤던 antd를 사용했다. 그리고 다른 언어와 기술들을 조합하여 프로젝트를 완성했다. 사실 antd를 사용했더라도 당연히 내가 구현하고 싶은 방향과 UI/UX가 있기 때문에 CSS를 수정했다. 물론 리액트를 사용하며 inline CSS, *. css 방식, styled components, CSS-in-JS, scss (이건 조금?) 사용해본 경험은 있었지만, 빠르게 구현하자는 생각에 inline CSS를 통해 장바구니 앱을 구현했다. "그런데 이렇게 구현하면 어떤 일이 일어났..

React는 어떻게 작동할까? 먼저 아래 있는 앱과 부모, 자식 컴포넌트로 구성된 예제를 보자. // App.js import React, { useEffect } from "react"; import { Parent } from "./Parent"; import { Child } from "./Child"; function App() { console.log("자식 렌더링 시작"); useEffect(() => { console.log("자식 리렌더링!"); }); return ( ); } export default App; 더보기 // 부모 컴포넌트(Parent.js) import React, { useEffect, useState } from "react"; export const Parent = ..

동기적 프로그래밍 동기적 프로그래밍 모델에서는 일(task)은 한 번에 하나씩 일어난다. 그러다 보니 오랫동안 실행되는 동작을 수행하는 함수를 호출했다면, 그 함수가 종료될 때까지 그 프로그램은 중지되게 된다. 이제 1부에 이어, 2부에서는 비동기적 프로그래밍에 대해 알아보자. 1부 - 자바스크립트 함수 표현식, IIFE 그리고 비동기 함수 표현식 함수 표현식(function expression)은 값이 될 수 있고, 함수 역시 값이 될 수 있다. 이는 함수를 선언하는 한 가지 방법일 뿐이며, 그 함수가 익명이 될 수도 있을 뿐이다. 함수 표현식은 식별자에 할.. code-masterjung.tistory.com 비동기적 테크닉을 사용해야 하는 경우 사용자의 행동과 관련된 것(입력, 클릭 등) Ajax ..

함수 표현식 함수 표현식(function expression)은 값이 될 수 있고, 함수 역시 값이 될 수 있다. 이는 함수를 선언하는 한 가지 방법일 뿐이며, 그 함수가 익명이 될 수도 있을 뿐이다. 함수 표현식은 식별자에 할당할 수도 있고 즉시 호출(IIFE)할 수도 있다. 함수 표현식은 함수 이름을 생략할 수 있다는 점을 제외하면 함수 선언과 문법적으로 완전히 같다. const f = function() { // ... }; 위 예제는 결과적으로 함수 선언과 동등하다. 식별자 f가 이 함수를 가리키며, 일반적인 함수 선언과 마찬가지로 f()로 이 함수를 호출할 수 있다. 차이점은 먼저 함수 표현식으로 익명 함수를 만들고 그 함수를 변수에 할당했다는 거다. 익명 함수는 어디든지 쓸 수 있다. 다른 함..

자바스크립트에서는 일반적으로 this를 사용하는 방법 이외에 함수를 어디서, 어떻게 호출했는지 관계없이 this가 무엇인지 지정할 수 있다. 여러가지 방법이 있겠지만, 일단 call 메서드부터 살펴보자. call(thisArg[, arg1[, arg2[, ...]]]) 함수를 호출하면서 call을 사용하고 this로 사용할 객체를 넘기면 해당 함수가 주어진 객체의 메서드인 것처럼 사용할 수 있다. 여기서 첫 번째 매개변수인 thisArg는 this로 사용할 값이고, 매개 변수가 더 있으면 그 매개변수는 호출하는 함수로 전달된다. 바로 예제를 확인해 보자. - 매개변수 없이 greet()를 호출한 경우, 전역 변술로 name이 존재하지 않기 때문에 undefined를 반환한다. - 매개변수로 call() ..

로봇의 HTTP 로봇들은 다른 HTTP 클라이언트 프로그램과 다르지 않다. 그들 또한 HTTP 명세의 규칙을 지켜야 한다. HTTP 요청을 만들고 스스로를 HTTP/1.1 클라이언트라고 광고하는 로봇은 적절한 HTTP 요청 헤더를 사용해야 한다. 하지만 많은 로봇들은 그들이 찾는 콘텐츠를 요청하기 위해 필요한 HTTP를 최소한으로만 구현하려고 한다. 그래서 요구사항이 적은 HTTP/1.0으로 요청을 보내는 경우가 많다. 요청 헤더 식별하기 로봇 개발자들이 구현하도록 권장되는 기본적인 신원 식별 헤더들에는 다음과 같은 것이 있다. - User-Agent 서버에게 요청을 만든 로봇의 이름을 말해준다. - From 로봇의 사용자/관리자의 이메일 주소를 제공한다. - Accept 서버에게 어떤 미디어 타입을 보..

대부분의 내용은 Clean Architecture: A Craftsman's Guide to Software Structure and Design (Robert C. Martin Series)에 의존한다. 이미 이 책을 읽고 이해하였다면, 아래 글은 읽지 않아도 무방하다. 좋은 소프트웨어 시스템은 Clean Code로부터 시작한다. 코드(Code)란 건물을 짓는다고 했을때 벽돌과 같다. 여기에 대해서 Robert C.Martin이 쓴 Clean Architecture에 적절한 비유가 있어 가져와 봤다. If the bricks aren't well made, the architecture of the building doesn't matter much. On the other hand, you can m..

혼자서 만들어본 장바구니 프로젝트. 일주일 기간 동안 일하고 컨퍼런스 가면서도 중간중간 최대한 시간 내서 만들어 봤다. 그래도 시간이 없어서 잠을 최대한 줄여봤다. 아마 이번주에 3시간 이상 잠을 잔 기억은 없는거 같다. 그리고 어딜 가나 원활한 작업을 하기 위해 휴대용 모니터와 맥북을 들고 다녀야 했다는... (내 어깨..) 협업도 중요하지만, 혼자 많이 만들어 봐야하는 것도 느꼈다. 기존 프로젝트에 투입되면 "왜 이 기술을 사용하는지, 왜 이게 좋은 구조인지, 왜 이렇게 생각해야 하는지... " 등 의문점을 갖지 않는다. 의문점을 갖더라도 선임 개발자의 조언 또는 구글 검색으로 순식간에 의문이 해결돼버린다. 하지만, 그렇게 해결된 의문은 내것이 아니다. 이미 짜인 구조에서 무엇인가를 만들 수 있다고 ..

왜 이미지 최적화를 해야 할까? 일반적인 페이지에서 대부분의 자바스크립트 파일을 제외하고 바이트는 이미지가 차지한다고 해도 과언이 아니다. 사실 이미지 최적화를 하지 않았다면, 자바스크립트를 전부 합쳐도 이미지가 합도적으로 큰 용량을 차지할 것이다. 우리가 개발자 도구를 이용해서 보이는 이미지 크기는 이미 최적화된 크기임을 감안하자. 그래서 이미지를 최적화해야 한다. 그래야 바이트를 최대한 절약할 수 있고, 사이트의 성능 또한 향상할 수 있다. 또한 브라우저가 다운로드해야 하는 바이트가 줄어들고, 클라이언트의 대역폭에도 여유가 생기며, 콘텐츠를 더 빨리 다운로드하여 화면에 렌더링 할 수 있다. 서버의 저장 공간이 적게 필요하게 된다. 이는 비용 절감으로도 연결될 수 있는 부분이다. 반대로 이미지가 크다면..

웹 로봇은 사람과의 상호작용 없이 연속된 웹 트랜잭션들을 자동으로 수행하는 소프트웨어 프로그램이다. 그리고 각각의 방식에 따라 '크롤러', '스파이더', '웜', '봇' 등 여러 가지 이름으로 불린다. 크롤러와 크롤링 웹 크롤러는 먼저 웹페이지를 한 개 가져오고, 그 다음 페이지가 가리키는 모든 웹페이지를 가져오고 하는 이 과정을 재귀적으로 반복하는 방식으로 웹을 순회하는 로봇이다. 이렇게 웹 링크를 재귀적으로 따라가는 로봇을 크롤러 혹은 스파이더라고 부르는데, HTML 하이퍼링크들로 만들어진 웹을 따라 "기어 다니기(crawl)" 때문이다. 인터넷 검색엔진은 웹을 돌아다니면서 그들이 만나는 모든 문서를 끌어오기 위해 크롤러를 사용한다. 이 문서들은 나중에 처리되어 검색 가능한 데이터베이스로 만들어지는데..

이 글에서 사용한 코드(깃 저장소) - 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를 상속 받고 있는 자식들이다. 따..