안녕하세요. IT 엘도라도 에 오신 것을 환영합니다.
글을 쓰는 것은 귀찮지만 다시 찾아보는 것은 더 귀찮습니다.
완전한 나만의 것으로 만들기 위해 지식을 차곡차곡 저장해 보아요.   포스팅 둘러보기 ▼

웹, 앱 (Web, Application) (18)

[App] PWA (Progressive Web Apps) 개념 및 구현 (feat. WWDC22)

1. PWA (Progressive Web Apps) PWA는 웹사이트를 모바일 앱처럼 활용할 수 있도록 하는 기술이다. 즉, 모바일 앱처럼 홈 화면에 아이콘을 추가하여 간편하게 접근할 수 있고 JavaScript로 푸시 알림이나 오프라인 동작과 같은 기능도 구현할 수 있으며 UI도 브라우저 주소 창 없이 모바일 앱처럼 보이게 할 수 있는 웹사이트를 말한다. 또한, 어쨌든 웹사이트이기 때문에 설치 없이 URL만으로 접근할 수 있고 플레이 스토어나 앱 스토어의 심사가 필요 없다는 장점도 그대로 지닌다. 결국 웹사이트와 모바일 앱의 장점을 합친 것이라 볼 수 있다. 물론 아직까지는 Android 또는 iOS 자체에 제공하는 깊숙한 기능들까지 전부 다 그대로 구현하지는 못하는 것이 사실이다. 그러나 지금까지 ..

[Web] GraphQL 핵심 개념 익히기 (feat. REST)

API 설계 방법에 있어 REST와 비교되는 GraphQL의 핵심적인 개념에 대해 공부해보자. GraphQL은 특정 언어에 종속된 기술이 아니기 때문에, 여기서는 언어 독립적인 방식으로 설명할 것임을 밝힌다. GraphQL 클라이언트/서버 라이브러리는 여기서 설명하는 핵심 개념을 이해한 후에 자신만의 기준으로 적절한 것을 골라 사용하기 바란다. 1. 핵심 개념 1-1. GraphQL이란? GraphQL은 REST와 마찬가지로 API를 설계하는 여러 방식 중 하나로, 일종의 쿼리 언어이다. 그런데 이는 특정 언어에 종속되는 기술이 아니다. 대신, 어느 곳에서든 쉽게 적용되어 활용할 수 있도록 언어별로 여러 라이브러리가 제공되고 있다(아래 링크 참조). GraphQL Code Libraries, Tools ..

[Web] 이메일의 발송 원리 (feat. SMTP, POP3, IMAP)

대부분의 웹 개발자(특히 백 엔드 개발자)는 이메일 발송 기능을 한 번쯤 구현해봤거나, 앞으로 구현하게 될 가능성이 크다. 따라서 이메일의 발송 원리를 이해하고 있다면 적어도 손해는 절대 아닐 것이다. 이메일의 발송은 기본적으로 [발신자 메일 클라이언트 → 발신자 메일 서버 → 수신자 메일 서버 → 수신자 메일 클라이언트]의 흐름으로 이뤄진다. 메일 클라이언트는 사용자가 이메일을 보내거나 받을 때 사용하는 프로그램 정도로 이해하면 되고, 메일 서버는 이메일 발송을 담당하는 원격 서버라고 생각하면 된다. 만약 구글 이메일 계정에서 네이버 이메일 계정으로 이메일을 보낸다면, 발신자 메일 서버는 구글 메일 서버가 되고 수신자 메일 서버는 네이버 메일 서버가 될 것이다. 그럼 이제 이메일 발송의 각 단계에 대해..

[Web] 인가 (Authorization) : JWT (JSON Web Token), 리프레시 토큰

1. 인증 (Authentication) vs 인가 (Authorization) 본 포스팅에서 인증에 관한 내용을 다루기 전에, 먼저 인증과 인가의 차이를 알아보자. 먼저, 인증(Authentication)이란 서비스로부터 일정 권한을 부여받은 사용자임을 인증받는 절차를 말한다. 조금 더 간단하게 말하면, 가입된 계정으로 로그인을 하는 절차를 말한다. 다음으로, 인가(Authorization)란 이미 인증받은, 즉 로그인을 한 사용자가 서비스의 특정 기능을 사용하기 위한 권한을 허가받는 절차를 말한다. 즉, 특정 기능을 사용하려 할 때 사용자가 이미 로그인을 한 상태인지, 그렇다면 그 기능을 사용할 권한이 있는지 검증하는 절차를 말한다. 그중 본 포스팅에서 다룰 내용은 바로 인가(Authorization..

[Web] 인증 (Authentication) : 비밀번호 암호화, 세션/토큰 기반 인증

1. 인증 (Authentication) vs 인가 (Authorization) 본 포스팅에서 인증에 관한 내용을 다루기 전에, 먼저 인증과 인가의 차이를 알아보자. 먼저, 인증(Authentication)이란 서비스로부터 일정 권한을 부여받은 사용자임을 인증받는 절차를 말한다. 조금 더 간단하게 말하면, 가입된 계정으로 로그인을 하는 절차를 말한다. 다음으로, 인가(Authorization)란 이미 인증받은, 즉 로그인을 한 사용자가 서비스의 특정 기능을 사용하기 위한 권한을 허가받는 절차를 말한다. 즉, 특정 기능을 사용하려 할 때 사용자가 이미 로그인을 한 상태인지, 그렇다면 그 기능을 사용할 권한이 있는지 검증하는 절차를 말한다. 그중 본 포스팅에서 다룰 내용은 바로 인증(Authenticatio..

[Web] CORS (Cross Origin Resource Sharing) 이해하기

이번 포스팅에서 다룰 내용은 바로 CORS(Cross Origin Resource Sharing)이다. 웹 개발자라면 한 번쯤은 CORS와 관련하여 콘솔에 뜨는 빨간 글씨의 에러 때문에 짜증 났던 적이 있을 것이다. 하지만 CORS 정책이 괜히 존재하는 것은 아니다. 브라우저의 보안과 관련하여 아주 중요한 역할을 수행하기 때문이다. 그럼 한 번 CORS가 무엇인지에 대해 차근차근 알아보도록 하자. 1. Origin의 의미 먼저, CORS에서의 Origin이 무엇을 의미하는 건지 짚고 넘어가자. 한국말로는 '출처'라고 부르는 것인데, 이는 URL, 도메인 등과 비슷해 보이지만 엄연히 의미가 다르기 때문에 확실히 알고 넘어가야 한다. Origin은 URL에서 프로토콜, 도메인, 포트 번호를 합친 부분을 의미..

[Web] SSH 접속 원리 (feat. 대칭키, 비대칭키 암호화)

원격 서버를 이용하여 서비스를 운영하고 있는 사람이라면, SSH 프로토콜을 이용하여 해당 서버에 접속해본 경험이 있을 것이다. 하지만 (필자도 그랬지만) 상당수의 개발자분들은 접속 방법은 알아도 그 원리까지 정확히 알고 있지 못할 것이다. 따라서 이번 포스팅을 통해 SSH 접속의 원리를 한 번 들여다보기로 한다. 단, SSH 접속 원리를 이해하기에 앞서 대칭키 및 비대칭키 방식의 암호화를 반드시 이해하고 있어야 한다. 그렇지 않다면 본 포스팅의 내용을 전혀 이해할 수 없으므로 여기를 참조하여 해당 내용을 먼저 공부하고 오기 바란다. 1. 개요 SSH 프로토콜을 이용한 통신은 기본적으로 서버 클라이언트 모델에 기반한다. 따라서 SSH 접속을 위해서는 기본적으로 서버에 SSH 서버(= SSH 데몬)가 설치되..

[Web] URL 인코딩/디코딩 (URL Encoding/Decoding)

이번 포스팅에서는 URL의 인코딩/디코딩에 대해 간단히 알아볼 것이다. 그런데 이것을 이해하려면 먼저 문자열 인코딩에 대한 배경지식이 있어야 한다. 만약 ASCII, UTF-8의 개념을 정확히 알고 있지 못하다면 이 포스팅을 읽어보고 오기를 바란다. URL 인코딩/디코딩은 이 두 가지의 인코딩 방식을 기반으로 하기 때문이다. 1. URL 인코딩/디코딩 (URL Encoding/Decoding) 먼저, URL 인코딩이란 URL에서 URL로 사용할 수 없는 문자 혹은 URL로 사용할 수 있지만 의미가 왜곡될 수 있는 문자들을 '%XX'의 형태로 변환하는 것을 말한다. 여기서 XX는 16진수 값이다. 그리고 URL 디코딩이란 변환된 URL을 다시 원래의 형태로 되돌리는 것을 말한다. URL 인코딩/디코딩 과정..

[Web] HTTP 캐싱 (Caching) : Cache-Control 헤더

캐싱(Caching)이란 한 번 가져온 데이터를 가까운 곳에 저장해 두고 다음번에 다시 먼 곳에서 그것을 가져올 필요 없이 저장해둔 것을 사용하는 일종의 성능 향상 기법이다. 그런데 캐싱은 특정 분야에서만 활용되는 기법이 아니다. 예를 들어, 하드웨어 수준에서는 먼 곳에 있는 메인 메모리 대신 가까운 곳에 있는 캐시 메모리에 자주 사용되는 데이터를 저장해둬서 CPU가 데이터를 빠르게 가져올 수 있도록 하는데, 이것도 캐싱의 한 예이다. 또한 일상생활에서도 쉽게 발견할 수 있다. 자주 사용하는 물건을 먼 곳에 있는 선반에 두지 않고 책상 바로 위에 올려두는 것도 캐싱의 한 예이다. 또는 자주 사용하는 프로그램의 아이콘을 바탕화면에 두는 것도 마찬가지이다. 이처럼 캐싱은 정말 다양한 곳에서 활용되고 있다. ..

[App] 모바일 앱의 종류 및 개념 (네이티브 앱, 웹 앱, 하이브리드 앱, 크로스-플랫폼 앱, PWA)

애플이 새롭게 출시하는 iOS 14에서 페이스북 픽셀 등을 활용한 마케팅에 제한을 걸게 됨에 따라(참고), 필자가 근무하고 있는 회사에서도 하이브리드 앱 개발의 필요성이 수면 위로 떠오르기 시작했다. 원래 순수한 반응형 웹사이트의 형태로 대부분의 서비스를 처리하고 있었기에, 웹에서의 페이스북 마케팅이 어려워진다면 앱에서의 마케팅으로 초점을 바꿔야 한다는 판단 때문이었다. 그런데 필자는 앱 개발 경험이 사실상 없었기에 앱과 관련된 여러 용어들에 대해 정확히 알고 있지 못했다. 그래서 이번 기회에 한 번 정리해보기로 하였다. * 본 포스팅의 내용에 직접적인 도움을 준 유튜브 '얄팍한 코딩 사전' 채널에 감사의 마음을 표합니다. (영상 링크는 게시글 하단 참조) 1. 네이티브 앱 : Native Applica..