![[자바스크립트] 비동기 처리 1부 - Callback](/_astro/java-script.E7jj1V9w_1BAgJN.webp)
자바스크립트의 콜백 함수와 비동기 함수애 대해서 혼란스러워 하시는 분들이 주변에 많은 것 같아서 개념 정리를 해보고자 합니다. 이번 포스팅에서는 실제 프로젝트에서 자주 접할 수 있는 유저 데이터 조회 시나리오를 통해 콜백 함수를 이용한 비동기 처리에 대해서 알아보겠습니다. 콜백 함수 유저 ID를 인자로 받아 DB나 API 연동 없이 임의의 유저 객체를 리턴하는 findUser()라는 함수를 작성해보겠습니다. 결과 위와 같이 우리가 흔히 생각하는 일반적인 함수란 입력(파라미터)이 있고 출력(리턴값)이 있습니다. 하지만 자바스크립트에서
대칭키 암호화는 빠르고 단순합니다. 하지만 한 가지 풀기 어려운 문제를 안고 있는데요. "비밀 키를 어떻게 양쪽이 안전하게 처음부터 나눠 가질 것인가"입니다. 공격자가 통신을 모두 보고 있는 상태에서 비밀 키를 그대로 보낼 수는 없는데, 그렇다고 매번 사람이 직접 만나서 키를 교환할 수도 없는 노릇이죠. 이 닭과 달걀 같은 문제를 풀기 위해 등장한 것이 비대칭키 암호화입니다. 한 사람이 한 쌍의 키를 갖고, 한쪽은 모두에게 공개하고 다른 한쪽은 자기만 가진다는 살짝 마법 같은 발상이에요. 이번 글에서는 비대칭키가 어떻게 동작하는지,
암호화라고 하면 가장 먼저 떠오르는 모습이 자물쇠와 열쇠입니다. 열쇠로 자물쇠를 잠그고, 같은 열쇠로 다시 열고. 이 직관 그대로 동작하는 방식이 바로 대칭키 암호화입니다. 같은 비밀 키 하나로 평문을 암호문으로 바꾸고, 같은 키로 다시 평문으로 되돌리는 약속이죠. 이번 글에서는 대칭키 암호화가 정확히 어떤 약속을 지키는지, AES와 GCM 같은 표준 알고리즘이 어떻게 동작하는지, 그리고 IV나 키 관리 같은 운영 포인트가 무엇인지를 풀어보겠습니다. 대칭키가 지키는 약속 대칭키 암호화는 두 가지 일을 약속합니다. 첫째는 비밀 키를
비밀번호를 다루거나, 파일을 다운로드한 뒤 무결성을 검사하거나, JWT 서명을 살펴볼 때 어김없이 등장하는 친구가 있습니다. 바로 해시 함수입니다. SHA-256이나 bcrypt 같은 이름은 익숙한데, 막상 "해시는 정확히 무엇이고 어디까지 보장하나요"라고 물으면 답이 잘 안 나오는 경우가 많죠. 이번 글에서는 해시 함수가 어떤 약속을 지키는지, 흔히 쓰이는 알고리즘들이 어떻게 다른지, 그리고 실무에서 자주 만나는 쓰임새를 한 번에 정리해 보겠습니다. 해시 함수가 지키는 약속 해시 함수는 임의의 길이를 가진 데이터를 입력으로 받아,
![[Java] 객체 정렬하기 1부 - Comparable vs Comparator](/_astro/java.BoMzGPlH_1nwVAJ.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 호출하는 방법에 대한 감을 잡는데 도움이 되셨으면 좋겠습니다. 내장 Web UI 많은 GraphQL 서비스는 GraphiQL이나 Playground와 같은 내장 UI를 제공합니다. 예를 들어, 가짜 데이터를 응답해주는 FakerQL의 경우 브라우저에서 열어보면 Playground가 나옵니다. 좌측 패널에 다음과 같이 쿼리를 입력하고 중간에 있는 실행 버튼을 누릅니다. 그러면 우측 패널에
스크립트를 읽다 보면 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라는 파일과 자주 마주치게 됩니다. 바로 웹팩 설정 파일인데요. 이번 포스팅에서는 이 설정 파일을 기본으로 한 웹팩 기본 설정법에 대해서 알아보도록 하겠습니다. 웹팩에 대한 기본 개념이나 사용법을 모르시는 분은 지난 포스팅를 먼저 읽어보시면 더 따라가기 쉬우실 겁니다. 설정 파일 웹팩을 사용할 때 반드시 설정 파일이 필요하지는 않지만, 대부분의 경우에는 설정 파일을 사용합니다. 왜냐하면 터미널에서 웹팩 커맨
자바스크립트 프레임워크로 React를 사용하든 Vue를 사용하든 Angular를 사용하든 항상 웹팩(Webpack)이라는 녀셕을 만나게 됩니다. 보통 구글링해서 겨우 필요한 설정만 바꾸면서 사용하고 했었는데 이 번에 시간을 내서 웹팩에서 대해 한 번 공부를 해보았습니다. 웹팩(Webpack)은 기본적으로 자바스크립트 모듈 번들러(JavaScript Module Bundler)이며 웹 개발을 도와주는 엄청나게 많은 부가 기능을 가지고 있습니다. 간단한 예제 프로젝트를 통해서 웹팩의 필요성을 느껴보고 기본적인 사용법에 대해서 알아보도록
![[파이썬] for 루프에서 인덱스 얻기](/_astro/python.CShaAvH4_wtjcd.webp)
enumerate() 내장 함수에 리스트를 넘기면 next() 메서드가 index와 value로 이뤄진 튜플을 반환합니다. 따라서 다음과 같이 for 루프를 돌릴 때 enumerate()를 조합해서 사용하면 인덱스와 값을 동시에 접근할 수 있습니다. 추가로, enumerate() 내장 함수를 호출할 때 start 파라미터를 사용하면 0이 아닌 다른 시작 번호를 사용할 수 있습니다.
파이썬에 기본적으로 내장되어 있는 데이터베이스인 sqlite3 모듈를 사용하는 방법에 대해서 알아보겠습니다. 자바스크립트에서 SQLite 데이터베이스를 사용하는 방법에 대해서는 관련 게시물을 참고 바랍니다. 데이터베이스 접속 sqlite3 내장 모듈을 임포트 후에 connect 메서드를 통해 커넥션 객체를 생성합니다. 메모리 DB 접속 (일회성) 파일 DB 접속 테이블 생성 커서 객체를 받아와서 execute 메서드로 CREATE TABLE 쿼리를 전송합니다. 데이터 삽입 마찬가지로 커서 객체로 작업합니다. 기본 String Que