![[자바스크립트] 비동기 처리 1부 - Callback](https://img.daleseo.com/cdn-cgi/image/width=800,height=450,fit=cover,format=auto,onerror=redirect/7q4oTYVT.webp)
자바스크립트의 콜백 함수와 비동기 함수애 대해서 혼란스러워 하시는 분들이 주변에 많은 것 같아서 개념 정리를 해보고자 합니다. 이번 포스팅에서는 실제 프로젝트에서 자주 접할 수 있는 유저 데이터 조회 시나리오를 통해 콜백 함수를 이용한 비동기 처리에 대해서 알아보겠습니다. 콜백 함수 유저 ID를 인자로 받아 DB나 API 연동 없이 임의의 유저 객체를 리턴하는 findUser()라는 함수를 작성해보겠습니다. 결과 위와 같이 우리가 흔히 생각하는 일반적인 함수란 입력(파라미터)이 있고 출력(리턴값)이 있습니다. 하지만 자바스크립트에서
인터넷에서 받은 프로그램이 개발자가 배포한 그대로인지, 로그인 요청이 정말 등록된 기기에서 왔는지, 웹사이트가 접속하려던 서버가 맞는지는 어떻게 확인할까요? 내용을 암호화하면 제삼자가 읽지 못하게 숨길 수는 있지만 누가 만들었고 중간에서 바뀌지 않았는지까지 저절로 증명되지는 않습니다. 이때 사용하는 도구가 디지털 서명(digital signature)입니다. 디지털 서명은 종이에 하는 서명처럼 데이터에 신원을 연결하지만 눈으로 필체를 비교하는 대신 개인 키와 공개 키를 사용해 수학적으로 검증하는데요. TLS의 서버 인증, JWS와
결제 서비스가 우리 서버로 다음과 같은 웹훅(webhook)을 보냈다고 해볼까요? HTTPS로 받았으니 무조건 믿고 결제 완료 처리를 해도 될까요? HTTPS는 전송 구간을 보호하지만, 이 요청이 정말 결제 서비스가 만든 것인지 애플리케이션이 확인할 방법은 따로 필요합니다. 공격자가 우리 웹훅 주소를 알아내고 가짜 요청을 직접 보낼 수도 있으니까요. 메시지의 SHA-256 해시를 함께 받으면 해결될 것 같지만, 공격자는 가짜 메시지의 해시도 다시 계산할 수 있습니다. 누구나 계산할 수 있는 해시만으로는 메시지를 만든 상대를 가려낼
대칭키 암호화는 빠르고 단순합니다. 하지만 한 가지 풀기 어려운 문제를 안고 있는데요. "암호화하는 쪽과 복호화하는 쪽이 비밀 키를 어떻게 안전하게 공유할 것인가"입니다. 공격자가 통신을 모두 보고 있는 상태에서 비밀 키를 그대로 보낼 수는 없는데, 그렇다고 매번 사람이 직접 만나서 키를 교환할 수도 없는 노릇이죠. 이 닭과 달걀 같은 문제를 풀기 위해 등장한 것이 비대칭키 암호화입니다. 비대칭키 암호 기술의 주된 목적은 미리 비밀을 공유하지 않은 상대와 안전한 통신을 시작하는 데 있습니다. 이 기술을 디지털 서명에 적용하면 개인
암호화라고 하면 가장 먼저 떠오르는 모습이 자물쇠와 열쇠입니다. 열쇠로 자물쇠를 잠그고, 같은 열쇠로 다시 열고. 이 직관 그대로 동작하는 방식이 바로 대칭키 암호화입니다. 같은 비밀 키 하나로 평문을 암호문으로 바꾸고, 같은 키로 다시 평문으로 되돌리는 약속이죠. 대칭키 암호화의 주된 목적은 같은 비밀 키를 공유하는 사람이나 시스템이 많은 데이터를 빠르게 암호화해 기밀성(confidentiality)을 지키는 데 있습니다. 파일을 저장하거나 HTTPS로 메시지를 주고받을 때처럼, 내용을 제삼자가 읽지 못하게 막아야 하는 자리에 잘
비밀번호를 다루거나, 파일을 다운로드한 뒤 무결성을 검사하거나, JWT 서명을 살펴볼 때 어김없이 등장하는 친구가 있습니다. 바로 암호학적 해시 함수입니다. 해시의 주된 목적은 데이터를 숨겼다가 되찾는 것이 아니라, 짧은 지문을 만들어 같은 데이터인지 또는 중간에 바뀌었는지 확인하는 데 있습니다. 해시 함수는 흔히 "단방향 암호화"라고 불리지만, 암호학에서는 일방향 해시 함수나 일방향성이라고 표현하는 편이 더 정확합니다. 정확히 말하면 해시는 암호화와도 다른 변환인데요. 암호화는 키를 사용해 평문과 암호문을 오갈 수 있지만, 해시는
운영체제 이미지나 개발 도구를 내려받다 보면 파일 옆에 길고 낯선 문자열이 붙어 있는 경우가 있습니다. SHA-256이나 checksum이라는 이름 아래 16진수 숫자가 빼곡하게 적혀 있죠. 내려받기가 끝났으니 파일을 바로 실행해도 될 것 같은데, 왜 굳이 이 값을 함께 제공할까요? 전송 도중 일부가 깨졌거나 저장 장치에서 데이터가 손상돼도 파일명과 용량만으로는 알아채기 어려울 수 있기 때문입니다. 이때 원본과 내려받은 파일이 같은지 확인하는 짧은 값이 체크섬(checksum)입니다. 이번 글에서는 체크섬이 오류를 어떻게 찾아내는지
![[Java] 객체 정렬하기 1부 - Comparable vs Comparator](https://img.daleseo.com/cdn-cgi/image/width=800,height=450,fit=cover,format=auto,onerror=redirect/Ia4m8wKH.webp)
자바와 같이 객체 지향 언어를 사용하여 프로그래밍을 하다보면 객체들을 정렬해야하는 경우가 생깁니다. 예를 들면, 온라인 게임 서비스에서 게이머들을 높은 점수 순으로 보여주는 게이머 랭킹 페이지를 생각해볼 수 있겠습니다. 정렬 대상 클래스 먼저, 각 게이머의 정보를 표현하기 위해 다음과 같은 간단한 클래스를 생각해보겠습니다. 그리고 5 명의 게이머가 담고 있는 리스트를 생성하였습니다. 자, 이제 이 게이머 리스트를 점수 기준으로 어떻게 정렬할 수 있을까요? Chloe 가 일등이기 때문에 리스트의 맨 앞으로 나와야하고, Alice 는
자바에서 최소나 최대 원소를 찾을 흔히 사용되는 3가지 코딩 스타일에 대해서 알아보겠습니다. Loop 제일 먼저 반복문을 통해 각 원소에 하나씩 접근해서 최대값을 구하는 다음과 같은 고전적인 코드를 생각해볼 수 있습니다. 반복문(for)을 이용해서 지속적으로 변수(max)에 새로운 값을 할당하는 방식이 전형적인 명령형 프로그래밍(Imperative programming) 스타일을 따르고 있습니다. 많은 프로그래머들에게 가장 익숙한 방법이지만, 고수준의 비지니스 로직 중간에 이러한 저수준의 코드가 들어가게 되면 가독성에 나쁜 영향을
웹페이지 상의 모든 엘리먼트는 하나의 박스의 개념으로 모델링 할 수 있습니다. 이 박스 모델이라고 불리는 컨셉은 CSS의 근간이 되기 때문에 반드시 이해하고 있어야 합니다. Box Model 이란? 우리가 웹페이지에 배치하는 모든 HTML 엘리먼트는 3개의 층을 가진 사각형 구조의 형태를 띠고 있습니다. 가장 외곽의 층을 margin 영역이라고 부르는데, 보통 주변에 위치한 다른 엘리먼트와의 상하좌우 간격을 두기 위해서 쓰입니다. 그 바로 아래 층을 border 영역이라고 부르는데, 경계선을 그리기 위해서 쓰이며, margin과 p
CSS의 display 속성에서 inline과 block의 차이를 정확히 알고 사용하고 계신가요? 😄 이 둘을 합쳐놓은 inline-block이라는 녀석은 또 뭘까요? 😅 이번 포스팅에서는 display 속성에서 가장 근간이되지만 은근히 많은 분들이 헷갈려하시는 inline과 block 그리고 inline-block에 대해서 알아보도록 하겠습니다. inline display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 대표적인 inline 엘리먼트로 <span>이나 <
브라우저 주소창에 daleseo.com을 치고 엔터를 누르면 1초도 안 되어 페이지가 뜨는데요. 이 짧은 순간에 사실은 인터넷 곳곳에 있는 여러 대의 서버가 서로 묻고 답하면서 이 도메인이 어떤 IP 주소를 가리키는지 알아내는 작업이 벌어지고 있습니다. 이 일을 책임지는 시스템이 바로 DNS(Domain Name System)이고, 실제로 작업을 수행하는 주체가 DNS 서버입니다. 예전에 DNS 레코드 유형이나 dig 명령어를 다루면서 표면만 살짝 짚었었는데요. 이번에는 한 걸음 더 들어가서 도메인 이름이 IP 주소로 바뀌기까지 어
Java9에서는 기존 Java8 때 부터 있었던 Stream 클래스의 iterate() 메서드를 오버로드(overload)한 신규 메서드가 추가되었습니다. 이번 포스팅에서는 Stream 클래스의 정적 메서드인 iterate()에 대해서 얘기해보고자 합니다. 메서드 이름이 암시하듯 iterate()는 어떤 연산을 반복적으로 수행할 때 사용되는 메서드이며, 명령형 프로그래밍(imperative programming)에서 for나 while과 같은 루프문으로 해결하던 코드를 함수형 프로그래밍(functional programming) 방
Java9에서 Optoinal 클래스에 몇가지 유용한 메서드들이 추가되었습니다. 이번 포스팅에서는 이 새로운 메서드들을 어떻게 활용할 수 있는지 살펴보겠습니다. Java8에서 추가되었던 Optional의 좀 더 기본적인 사용법은 아래 포스팅를 참고바랍니다. 자바8 Optional 1부: 빠져나올 수 없는 null 처리의 늪 자바8 Optional 2부: null을 대하는 새로운 방법 자바8 Optional 3부: Optional을 Optional답게 or() 메서드 Optional 객체가 담고 있는 값에 접근할 때, 비어있는 경우를
좀 더 간결한게 불변 컬렉션을 생성할 수 있도록 Java9에서 List, Set, Map 인터페이스에 새로운 팩토리 메서드들이 추가되었습니다. 불변 컬렉션이란? 불변(Immutable) 컬렉션(Collection)은 아이템 추가, 수정, 제거가 불가능합니다. 따라서 신규 아이템을 추가하거나 기존 아이템을 수정또는 제거하려고 하면 java.lang.UnsupportedOperationException이 발생합니다. 컬렉션이 생성된 후에 변경되기를 원하지 않는 경우에 사용하며, 의도치 않은 컬렉션 변경을 예방에 도움이 됩니다. 불변 컬
2018년 8월 10일 Vue CLI 3가 정식 릴리즈되었습니다. Github 릴리즈 페이지: https://github.com/vuejs/vue-cli/releases Evan You의 포스팅: https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb Vue CLI는 React의 create-react-app처럼 Vue 프로젝트를 손쉽게 만들 수 있도록 도와주는 커맨드 라인 도구 입니다. 이번 포스팅에서는 Vue CLI 3 사용법에 대해서 간단하게 알아보도록 하겠습니다.
GraphQL API를 별다른 라이브러리 없이 최대한 간단하게 호출하는 방법에 대해서 알아보겠습니다. 아래에 소개된 방법들로 GraphQL API 호출하는 방법에 대한 감을 잡는데 도움이 되셨으면 좋겠습니다. 호출법을 넘어 GraphQL이라는 언어 자체가 표준으로서 어떻게 정의되는지 궁금하시다면 GraphQL 명세 함께 읽기 시리즈에서 깊이 다루고 있습니다. 내장 Web UI 많은 GraphQL 서비스는 GraphiQL이나 Playground와 같은 내장 UI를 제공합니다. 예를 들어, 가짜 데이터를 응답해주는 FakerQL의 경우
스크립트를 읽다 보면 sed 's/foo/bar/g' 같은 구문이 자주 등장합니다. 뜻은 대충 짐작이 가는데, 정확한 문법이나 다양한 활용법은 막상 모르는 경우가 많죠. CI/CD 파이프라인 설정 파일이나 배포 스크립트에도 단골로 등장하고, 코딩 에이전트가 터미널에서 파일을 수정할 때도 종종 꺼내드는 도구입니다. sed는 Stream Editor의 약자입니다. 파일이나 표준 입력으로 들어오는 텍스트를 줄 단위로 읽어서 변환한 뒤 출력하는 도구예요. 1974년 Bell Labs에서 태어났으니 grep, find와 마찬가지로 반세기가
웹팩은 자바스크립트 개발자들이 좀 더 쾌적한 개발 경험을 할 수 있도록 여러 가지 개발 편의 기능을 제공합니다. 이번 포스팅에서는 웹팩을 사용하면서 개발 편의성을 개선시킬 수 방법에 대해서 알아보겠습니다. 실습 프로젝트 먼저 실습 프로젝트를 만들겠습니다. 새로운 디렉터리를 만들고 NPN 프로젝트를 초기화 후, 웹팩과 웹팩 CLI 패키지를 설치합니다. 그 다음, 다음과 같이 src/index.js와 dist/index.html 파일을 작성합니다. src/index.js dist/index.html 자 이제, 터미널에서 웹팩을 커맨드를
React나 Vue, Angular와 같은 자바스크립트 프레임워크를 기반으로 프로젝트를 하다보면 webpack.config.js라는 파일과 자주 마주치게 됩니다. 바로 웹팩 설정 파일인데요. 이번 포스팅에서는 이 설정 파일을 기본으로 한 웹팩 기본 설정법에 대해서 알아보도록 하겠습니다. 웹팩에 대한 기본 개념이나 사용법을 모르시는 분은 지난 포스팅를 먼저 읽어보시면 더 따라가기 쉬우실 겁니다. 설정 파일 웹팩을 사용할 때 반드시 설정 파일이 필요하지는 않지만, 대부분의 경우에는 설정 파일을 사용합니다. 왜냐하면 터미널에서 웹팩 커맨