OAuth, 인증과 인가
·
Develop/Frontend
OAuth, 인증과 인가에 대해 개발을 하다보면 분명 마주하는 언어지만 정확히 무엇인지 모르고 넘어가는 경우가 많습니다.오늘은 확실히 그 개념과 과정을 이해하는 시간을 가져보도록 하겠습니다. 인증과 인가 (Authentication, Authorization)인증은 클라이언트(프론트엔드)의 몫이고, 인가는 서버(백엔드)의 몫입니다.인증은 본인이 누구임을 증명하는 행위고, 인가는 증명된 누군가에게 권한을 부여하는 행위입니다. OAuth OAuth는 Open Authorization 의 줄임말입니다. OAuth에 대해 다음과 같은 설명을 볼 수 있습니다.애플리케이션에 최종 사용자의 보호된 리소스에 대한 액세스 권한을 부여하는 개방형 표준 인증 프레임워크사용자의 비밀번호를 직접 노출하지 않고도 한 애플리케이..
AJAX - 네트워크 요청을 비동기적으로 처리하기 위한
·
Develop/Javascript
초기 웹은 문서 교환이 목적이었다. 오직 HTML만 존재했고, CSS와 JS는 존재하지도 않았다. HTML 문서를 주고 받으며 브라우저를 통해 렌더링했다. 또한 form 요소를 통한 get, post만 존재했다. (혹은 a 요소를 이용해 새로운 링크로 요청을 보내 데이터를 가져오는 형식이었다.) 즉, 요청을 주고 받는다면 HTML 문서 전체를 주고 받아 처음부터 끝까지 다시 렌더링하는 방식이었다.그래서 form의 기본 동작이 reload 였던 것이었다. 하지만 이후 "필요한 부분만 데이터를 가져와서 반영" 하기를 원하기 시작했다.이를 위해 아주 간단한 스크립트 언어였던 자바스크립트를 이용하여 데이터를 주고 받을 수 있지 않을까 하는 아이디어가 나왔다.이를 위해 비동기 처리라는 개념이 나왔고, AJAX가 ..
타입스크립트의 재귀는 몇번까지 허용될까?
·
Develop/Frontend
필자는 정확히 배열의 개수를 정한 타입을 만들고 싶었다. 예를 들어 int direction[4] 처럼.c++에서는 이를 크게 고민할 게 없다. 애초에 강타입 언어이기 때문이다.enum Direction{ Up = 0, Down, Left, Right};//최대 4개의 원소만 가질 수 있다. 이는 컴파일 타입에 잡아낸다.int dir[4] = {Up, Down, Left, Right}; //통과int wrongDir[4] = {Up, Up, Down, Left, Right}; // 실패 타입스크립트에서도 타입을 선언하여 이를 강제할 수 있다. 그러나 문제는 타입을 직접 만들어 정의해줘야한다는 점이다.그래서 아래와 같으 코드를 작성하면, 매우 큰 비효율성이 발생한다.type ArrayLengt..
페이지 교체 알고리즘 (Page Replacement Algorithm)
·
Develop/Algorithm
운영체제에서 꼭 다루는 Page Replacement Algorithm 입니다. (PRA라고 줄여 부르겠습니다) 저희는 컴퓨터의 저장공간에 프로그램을 설치해두고, 이를 더블클릭하여 실행합니다.그렇게 실행된 프로그램은 프로세스가 되어 메모리 위해 올라가면서 실행되는 원리입니다. 이때 프로세스는 한 묶음으로 반드시 통채로 올라가는 것이 아니라, 분리된 채로 쪼개져서 메모리 위에 올라갑니다.그리고 그 분리되는 단위를 페이지라고 이해하면 됩니다. 하지만 메모리의 용량은 제한적이기 때문에, 무한개의 프로세스를 만들 수는 없습니다.따라서 프로세스의 특정 페이지는 회수(즉 메모리에서 해제)되어야만 메모리의 빈 공간이 생기고 그 곳에 새로운 페이지를 올릴 수 있게 됩니다. 이렇게 페이지를 회수하고 올리는 교체 과정을 ..
라인스위핑, 투포인터
·
Develop/Algorithm
라인스위핑(line sweeping)빗자루 쓸 듯 하나의 라인을 탐색하는 알고리즘입니다. 보통 집합이나 교차점과 같은 기하 문제를 풀 때 사용되곤 하지만, 코딩테스트에서는 그 정도의 난이도로는 나오지 않습니다.따라서 보통 최대 구간, 횟수 등을 찾는데 많이 쓰이는 알고리즘입니다. 예제 문제철수는 도화지 위에 여러 번 선을 긋습니다.한 선은 두 점 (a, b)로 표현됩니다.여러 선이 겹쳐 그려지더라도, 겹친 구간은 한 번만 계산해야 합니다.즉, 모든 선분을 합쳤을 때 총 길이를 구하는 문제입니다. 입력 조건첫 줄: 선의 개수 N (1 ≤ N ≤ 1,000,000)이후 N개의 줄: 두 정수 a, b (-1,000,000,000 ≤ a ≤ b ≤ 1,000,000,000)출력 조건겹치지 않게 계산한 선분의 총..
그리디 (Greedy)
·
Develop/Algorithm
그리디 알고리즘은 지역적 최적해들을 찾아서 전역적 최적해를 구하는 방식입니다.즉, 그 순간에 '탐욕적으로' 최선이라 생각하는 선택지들을 골라, 최종적으로 최선인 정답을 도출해내는 방법이죠. 참고로, 보통 문제 풀이에서 다음의 과정을 거치곤 합니다.무식하게 풀기 -> DP -> 그리디 즉 보통 그리디는 최후의 최후에 사용하곤 합니다.또한, DP로 풀이할 수 있는 것들은 대부분 그리디로도 풀이할 수 있긴 합니다.오직 그리디로만 풀리는 문제는 DP의 메모이제이션 용량이 너~무 커서 DP를 사용할 수 없는 경우입니다. 그리디가 성립하기 위한 조건1. 최적 부분 구조전체 문제를 작은 부분 문제로 나눌 수 있어야하며, 그 작은 부분 문제의 최적해들을 모아 전체 문제의 최적해를 이룰 수 있는 구조를 의미합니다.2...
구글 태그 매니저, GTM의 원리
·
Develop/Frontend
사용자 행동 분석을 위해 구글 태그 매니저(GTM)와 구글 애널리틱스(GA4)를 사용하곤 합니다.또한 Heat map 을 통해 사용자 경험을 분석하기 위해 Clarity도 GTM과 연결하여 사용하고 하죠. 종종 헷갈리는 사람이 있곤 하는데, GA4는 결국 GTM을 기반으로 동작합니다. GTM : 여러 분석·마케팅 태그(analytics, ads, pixel 등)를 코드 변경 없이 중앙에서 관리하게 해주는 컨테이너 기반 툴.GA4 : 이벤트(event)-기반 분석 모델. 페이지뷰도 이벤트의 한 종류(page_view). 즉, GTM은 GA4(및 다른 태그)의 배포·관리 도구이고, GA4는 그로부터 수신한 이벤트 데이터를 수집·분석합니다.GTM → (GA4 Configuration/GA4 Event 태그)..
ESM과 CJS 그리고 모듈 객체
·
Develop/Javascript
관련 있는 데이터와 함수들을 모아 하나의 파일로 묶은 것을 모듈이라고 하며, 소프트웨어 개발에서 애플리케이션을 여러 개의 독립적인 "모듈" 단위로 분할하고, 이를 재사용 가능하게 관리하는 것을 모듈 시스템이라고 부릅니다. 어플리케이션의 코드는 방대한데, 이를 하나의 파일로 관리해야만 한다면 유지보수가 굉장히 난해해질겁니다.이를 개선하기 위해 나온 아이디어가 모듈시스템이라고 생각해도 좋습니다. 이런 아이디어에서 나온 개념이다보니, 모듈은 모듈별로 분리되는 Scope를 가집니다.(그렇다면 css도 모듈로 뽑아낼 수 있을까요? https://ocahs.tistory.com/40 에 정답이 있으니 궁금한 분은 확인해보세요) 오늘은 자바스크립트의 2가지 모듈시스템인 ESM과 CJS에 대해 간단히 알아보도록 하겠습..
정렬 비교 함수 (compare)
·
Develop/Algorithm
정렬 비교 함수는 어렵지 않지만, 특별한 원리가 보이진 않습니다. "그냥 그렇게 설계됐다 - 라고 받아들여져서요"이해의 필요성이 떨어지니, 조금만 사용하지 않더라도 이내 헷갈리고 빠르게 디버깅하며 코드를 작성하게 되더라고요.그래서 관계성에 더 집중해서 기억해보고자 합니다. 물론 더 정확히 판단하려면, C++, JS의 sort 함수에서 사용하고 있는 정렬 알고리즘을 면밀히 파악해야합니다.C++ : IntroSort (불안정 정렬, QuickSort+HeapSort+Insertion Sort)JS: TimSort (안정 정렬), 작은 배열에는 Insertion Sort불안정 정렬은, 중복된 값이 있을 때 입력된 순서가 유지되지 않을 수도 있는 정렬을 의미합니다.를 사용하는데, 이 알고리즘 파악이 해당 아티클..