개발

기수 정렬: 소개 (Radix sort) 지금까지 살펴 본 모든 정렬들은 비교 정렬 알고리즘이라는 그룹에 속한다. 그 의미는 이렇습니다. 버블 정렬에 대해 다루거나, 더 발전된 퀵 정렬을 다루더라도 결국 본질적으로 기본 비교는 주어진 시점에서 두 개의 항목을 비교한다. 한 항목은 왼쪽에 있고, 하나는 오른쪽에 있으며 정렬 방식에 따라 어느것이 먼저 오고 나중에 올지 결정합니다. 그러므로 비교 정렬은 두 가지 비교한다는 의미이다. 더 작은 것과 더 큰 것을 비교한 다음에 항목의 위치를 결정합니다. 문제는 비교 정렬보다 더 나은 방법이 있을까요? O(n log(n))에서 더 나아질 수 있을까요? 더 좋아질 수 있나요? 답은 yes입니다. 하지만 비교를 통한 방법이 아니다. 수학적으로, 비교 정렬의 평균 시간..

퀵정렬 소개 퀵 정렬은 합병 정렬과 같은 방법으로 작동한다. 바로 재귀이다. 이건 기본적으로 데이터를 분할하여 배열에 0개 또는 1개의 항목이 남을 때까지 분할하고 개별적으로 정렬하는 방식이다. 이때 피벗포인트라고 불리는 단일 요소를 선택하여 수행한다. 어떤 배열에서 어떤 요소를 선택하든 중요하지 않다. 그저 만약 한 요소를 선택했다면 해당 요소보다 작은 것은 왼쪽으로 큰 것은 오른쪽으로 옮겨야한다. 이건 정렬이 아니라 그저 옮기에 가깝다. 즉 배열을 순회하면서 선택한 수보다 작은 것을 모두 선택해서 왼쪽으로 옮긴다. 모두 확인한 다음에 가져온 것끼리 배열한다. 피봇 helper 소개 배열이 주어질 때 한 요소를 피벗 포인터로 지정한다. 그 후 배열 속 요소를 재배치하는 함수를 작성한다. 피벗보다 작은 ..

기가 막히게 빠른 정렬 소개 목표 지금까지 배운 기초 알고리즘의 한계를 이해하기 합병 정렬 구현 퀵 정렬 구현 기수 정렬 구현 왜 배우나요? 버블 선택 삽입 정렬은 큰 규모에 적합하지 않다. 시간복잡도 O(n^2) → O(n log n)으로 바꿀 수 있다. 단순성은 떨어지지만 효율성이 더 좋다. 효율적인 알고리즘은 확실히 더 길고 이해하기 어렵다. 합병 정렬 소개(Merge Sort) 1948년 조나다 벤 노이만이 처음 고안했다. 이를 뒷받침하는 개념은 실제로 합병과 정렬이라는 두 가지 조합으로 이루어져 있다. 사실을 세가지 조합이라고 볼 수도 있다. 분할, 정렬, 합병이 모두 일어난다. 0개 요소, 1개 요소 배열이 이미 정렬되어 있다는 점을 활용한다. 배열을 더 작은 배열로 나누는 방식이다. 흔히 분..

OSI 7계층이란? 국제 표준 기구 iso가 발표한 네트워크 모델 7계층: 어플리케이션 계층(Application Layer)이란? 응용 프로세스를 직접 사용하여 직접적인 응용 서비스를 수행한다. 예를들면 우리가 아는 FTP, HTTP, SMTP, Telnet 등의 프로토콜이 속한 계층. 6계층: 프레젠테이션 계층(Presentation Layer)이란? 데이터의 변환, 데이터의 압축, 데이터의 암호화가 이루어진다. 서로 다른 통신 기기 간의 다른 인코딩을 사용할 수도 있기 때문에 해당 계층에서 데이터 변환이 이루어지는 것이다. 5계층: 세션 계층(Sesstion Layer)이란? 세션을 열고 닫고 제공하는 메커니즘 계층이다. 세션 복구도 지원한다. 세션 도커는 체크포인트라는 것을 통해 동기화 시켜줍니다..

TCP가 무엇인가요? TCP란 Transmission Control Protocol의 줄임말로 해석하면 전송 제어 프로토콜(규약)입니다. 왜 TCP를 알아야 하나요? 오늘날 대부분의 통신은 TCP/IP 환경 기반이다. 코딩을 위해 컴퓨터 지식을 공부한다면 TCP/IP에 대한 내용을 이해해야 한다. 공부하다보면 OSI 7 Layer가 더 중요하게 다뤄진다. 그런데 왜 현재 통신은 TCP/IP 기반일까? 개념적으로는 OSI 7 Layer가 더 중요하나 상업적으로 TCP/IP가 성공했다. 출시일이 빠른 탓에 통신 프로토콜이 급하게 미국 국방성이 TCP/IP를 공식적으로 채택했다. 그 탓에 오늘날 인터넷은 TCP를 근간으로 발전했다. TCP와 OSI 모델의 비교 TCP/IP 프로토콜 스택 4계층(Or 5계층)에..

해당 포스팅은 자바스크립트에서 undefined와 null의 공통점과 차이점. 해당 값을 체크하는 방법에 대해 다룹니다. Null null은 JavaScript의 원시 값중 하나로, 어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 거짓으로 취급합니다. -MDN- console.log(!null); // true console.log(!!null); // false console.log(null === false); // false console.log(!null === true); //true // null => math =>0 console.log(null + 123) //123 console.log(typeof null); // object' null 자체는 불리언 값을 가지지 않지만 !n..

해당 포스팅은 자바스크립트에서 많이 쓰는 linter인 Eslint에 대해 다룹니다. Eslint가 무엇인가요? Eslint는 Linter의 한 종류 중 하나다. lint는 소스코드에 문제가 있는지 탐색하는 작업을 의미하고 linter는 이 작업을 도와주는 도구를 의미한다. 개발자가 특정한 규칙을 가지고 코드를 깔끔하게 짤 수 있도록 도와주는 것이다. 자바스크립트를 사용하는 가이드라인을 제시하고 문법적 오류가 나면 알려주는 역할을 한다. 올바른 코딩 습관을 가지기 위해 필수적으로 사용할 것을 권장한다. 1. Eslint VSCode extention 설치 이미 Creat React App으로 리액트를 설치했다면 기본 eslint가 설정되어 있다. 하지만 이 상태로는 Vs Code에서 바로 에러 확인이 불..

해당 포스팅에서는 innerHTML, innerText, textContent에 대한 특성을 알아보고 innerText와 textContent의 차이점에 대해 다룹니다. 프로퍼티 textContent innerText innerHTML 값 raw text rendered text HTML parsed text 성능 좋음 보통 나쁨 보안 취약 Element.innerHTML const content = element.innerHTML; element.innerHTML = htmlString; 이름 그대로 HTML을 반환한다. 간혹 innerHTML을 사용해 요소의 텍스트를 가져오거나 쓰는 경우가 있지만, HTML로 분석할 필요가 없다는 점에서 textContent의 성능이 더 좋다. XSS 공격 (en-U..

해당 포스팅은 react에서 datalist 태그를 사용해서 이메일 자동 완성 기능을 구현하는 방법에 대해 다룹니다. SPOTV NOW 회원가입 페이지에 본 이메일 자동완성 기능이 인상 깊어서 진행중인 프로젝트에 적용해봤다. 구현 방법 자주 사용하는 이메일 리스트를 미리 정의한다. input value와 Email List 두 개를 useState로 등록한다. input에 onChange 이벤트를 등록한다. input value가 자주 쓰는 이메일 값과 합쳐져서 Email List 를 만든다. Email List를 순회하여태그의 value로 넣어준다. 선택한값을 input 값에 넣어준다. 란 무엇일까 email: 이메일 자동 왼성 로직을 구현하기 위해서는 라는 조금 생소한 태그를 사용한다. 을 담는 태그..

해당 포스팅은 React에서 axios interceptors를 typescript로 설정하는 방법에 대해 다룹니다. interceptors란? then이나catch로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다. https://axios-http.com/kr/docs/interceptors 사용자가 수신하는 모든 요청 또는 응답에 자동으로 추가되는 기본 설정입니다. 수신되는 응답의 상태코드를 확인하거나 인증 토큰을 넣을 때 유용합니다. 인터셉터에는 두가지 유형이 있습니다. request interceptor : 요청이 전송되기 전에 코드 일부를 작성하거나 실행할 수 있습니다. response interceptor: 응답이 발신 측에 도달하기 전에 코드 일부를 쓰거나 실행할 수 있습니다. 1. ax..