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)" 때문이다. 인터넷 검색엔진은 웹을 돌아다니면서 그들이 만나는 모든 문서를 끌어오기 위해 크롤러를 사용한다. 이 문서들은 나중에 처리되어 검색 가능한 데이터베이스로 만들어지는데..