본문 바로가기

분류 전체보기

 (388)
<알고리즘> 퀵 소트 & 힙 소트 1. 퀵 소트와 힙 소트 * 퀵 소트 - 퀵 소트(Quick Sort)는 병합 정렬(Merge Sort)와 마찬가지로 분할 정복 알고리즘을 활용한다. 그러나 병합 정렬과 달리 배열을 비균등하게 분할하여 정렬을 수행한다. - 퀵 소트는 불안정 정렬에 속한다. - 퀵 소트는 어떤 과정으로 정렬을 하는 것일까. 오름차순 정렬을 한다고 가정하자. 먼저 배열 내의 요소를 하나 선택한다. 이는 기준이 되는 원소로 피벗(pivot)이라 칭한다. 피벗을 기준으로 피벗보다 작은 원소는 피벗의 왼쪽으로 옮겨지고, 큰 원소는 피벗의 오른쪽으로 옮긴다. - 위의 과정을 한 번 거친 후, 피벗을 제외하고 왼쪽 배열과 오른쪽 배열에 대해 각각 같은방식으로 정렬한다. 부분 배열이 더 이상 분리가 불가능할 때까지 반복한다. 그러면 ..
<JS> 특수 값과 레퍼런스 1. 값 아닌 값 * undefined와 null - 자바스크립트에서는 undefined 타입과 null 타입이 존재한다. 이들은 각각 undefined와 null 값만을 갖는 타입이다. 즉 둘은 타입과 값이 같다. 둘 다 '빈 값' 또는 값이 아님을 의미한다. 하지만 둘은 엄연히 차이가 있다. - null은 식별자가 아닌 특별한 키워드이므로 변수를 할당할 수 없다. 그러나 undefined는 식별자로 쓸 수 있어서 변수를 할당할 수 있다. - 느슨한 모드에서는 전역 스코프에서도 undefined라는 식별자에 값을 할당할 수 있고, 심지어 모드에 상관없이 지역 변수를 생성할 수 있다. function foo() { "use strict" var undefined = 2; console.log(undefi..
<알고리즘> 삽입정렬과 병합정렬 1. 삽입정렬과 병합정렬 * 삽입 정렬(Insetion Sort) - 선택정렬과 버블정렬과 마찬가지로 제자리 정렬(in-place sorting) 알고리즘이다. - 삽입 정렬은 마치 카드게임에서 손 안의 패를 정렬하는 것과 같다. 카드를 새로 받으면 기존에 정렬시켜둔 카드 사이에 삽입시켜 정렬시킨다. 이에 따라 동일한 값에 대해 순서가 유지되는 안정정렬방식을 보장한다. - 삽입 정렬을 알아보기 위해 10 5 7 1 3 이라는 5개의 숫자를 오름차순으로 정렬시켜보자. - 삽입 정렬은 두 번째 값부터 정렬을 시작하며, 해당 값과 그 앞의 값들과만 비교한다. - 먼저 5와 10을 비교한다. 5가 더 작으므로 10을 뒤로 이동시키고 5를 그자리에 삽입한다. 5 > 10 7 1 3 5 10 7 1 3 - 다음은 ..
<FE> 리액트 프로젝트에 무한스크롤 도입하기 배경 최근 진행한 프로젝트의 메인페이지에서는 리스트 형태로 유저의 할일 목록을 보여주고 있습니다. 단순 todo List라면 그 양이 적을 수 있으나, 해당 팀에서 유저가 할당받은 task 들도 함께 보여주므로 한 번에 받아오기에는 양이 많았습니다. 그래서 스크롤의 위치에 따라 데이터를 조금씩 받아오는 무한스크롤을 구현하기로 하였습니다. 고민 무한 스크롤 코드를 작성하기 전에 3가지 고민이 있었습니다. 첫째, 어떤 방식으로 언제 요청할 것인가 입니다. 처음에는 스크롤의 위치를 관찰하여 약 80%위치에 도달하면 api 요청을 보내는 방식을 생각했습니다. 그러나 이는 너무 많은 이벤트가 일어나고, 이를 조절하기위해 debounce 또는 throttle을 구현해야 했습니다. 게다가 브라우저는 offsetTop..
<월간회고> 11월 | 프로젝트 회고 및 부스트캠프 수료 들어가며 드디어 길고 긴 부스트캠프 과정이 끝났다. 7월부터 정말 열심히 달려왔기 때문에 스스로가 대견하다. 네이버 부스트캠프는 1개월간의 챌린지 과정을 거치며 튼튼한 기반지식을 갖는 것으로 시작한다. 이 때, 새벽 2시전에 자본 적이 없을정도로 힘들었다. 이 때의 회고만 보더라도 그 고생이 새록새록 살아난다. 챌린지 과정에서 JS와 CS를 짧고 굵게 훑고나서 멤버십 과정이 시작됐다. 멤버십은 8주간의 학습 스프린트기간과 6주간의 그룹 프로젝트 기간으로 나뉘었다. 학습 스프린트기간은 2주 단위의 개인 프로젝트를 통해 풀스택 경험을 쌓아 올렸다. 이 때, 그룹원들과 기술적인 공유도 하고, 리뷰어 님들께 코드리뷰도 받으며 많은 성장을 했다. 학습 스프린트 기간이 끝나고, 10월 말부터 그룹 프로젝트가 시작되..
<FE> Recoil로의 마이그레이션 배경 HyupUp 프로젝트는 다양한 상태를 관리합니다. 그래서 저희는 처음 개발을 시작했을 때부터 상태관리에 관심을 가졌으며, 라이브러리의 유무에 따른 차이를 체감해보고자 하였습니다. HyupUp은 프로젝트 관리 및 협업 툴로써, 크게 유저 상태인 UserState 와 조직 내 프로젝트 상태인 EpicState, StoryState 를 가집니다. 이 글에서는 다음과 같은 UserState를 다룹니다. UserState = { id?: number; name?: string; job?: string; email?: string; imageURL?: string; admin?: boolean; organization?: number; currentProjectName?: string; currentProje..
<FE프레임워크> 리액트 vs 뷰 vs 앵귤러 vs 스벨트 1. 소개 * 소개 - 최근 웹 프론트엔드는 CSR(Client-side Rendering)이 일반화 되었다. 이는 SPA(Single Page Application) 기법을 사용하여 페이지를 렌더링 하는데, 이러한 것을 지원해주는 것 중 하나가 리액트이다. - 그러나 SPA를 지원해주는 것이 리액트만은 아니다. 그 외에 가장 대표적인 툴이 뷰(Vue), 앵귤러(Angular), 스벨트(Svlete) 이다. - 필자의 경우 단순히 리액트 수요가 많아 사용하고있지만, 단순히 그런 이유를 넘어 더 자세히 알아보고자 조사하였다. * SPA - 먼저 간단하게 SPA(Single Page Application)에 대해서 짚어보자. - SPA는 기본적으로 단일 페이지이다. 따라서 기존의 서버 사이드 렌더링에 비해 ..
<월간회고> 10월 | 학습스프린트 종료 들어가며 9월에 회고를 썼다고 생각했는데, 착각했나보다. 부커톤 후기를 올리고 9월 후기를 깜빡했다. 그래서 9월을 잠시 정리해보면, 부스트 캠프 멤버십 과정이 시작되었다. 추석이 있었던 주를 제외하고 8주간 2주 단위의 프로젝트가 반복되며 스스로 학습하는 학습스프린트 기간이었다. 2주마다 이게 2주만에 가능한 프로젝트인가 의심했다. 하지만 다 완성하지는 못했어도 목표한만큼 해낸 나를 보면 너무 뿌듯했다. 학습스프린트기간은 완성이 목표가 아닌 성장을 목표로 하는 기간이었다. 이 기간 동안 새로운 프로젝트로 배우는 것이 많았던 것도 좋았지만, 무엇보다 좋았던 것은 코드리뷰가 아니었을까. 배정된 리뷰어님이 매주 하나의 PR에 대해 코드리뷰를 해주셨고, 그 덕에 어떤 코드가 좋고 나쁜지 생각할 수 있게 되었다..
<ES2021> ES2021 Features 1. 소개 - ES2021 에는 다음과 같은 기능들이 추가되었다. 2. 기능 * Replace All - es2021에서 드디어 자바스크립트에도 replaceAll 이 생겼다. 자바스크립트의 replace는 가장 처음에 등장하는 문자열을 변경하는 메서드이다. 따라서 해당하는 문자열을 모두 바꾸려면 반복문을 돌리든지 정규표현식의 g 옵션을 사용했어야 했다. const str = 'harry is a developer. harry is smart.'; const test1 = str.replace('harry', 'IU'); console.log(test1); // IU is a developer. harry is smart. - 위의 코드를 보면 'harry' 라는 문자열은 2개 이지만 먼저 나온 문자열만..
<ES2020> ES2020 Features 1. 소개 - ES2020 에서는 드디어 BigInt와 matchAll이 추가되었다. 그 외에도 globalThis와 옵셔널체이닝, 널병합연산자 등 편의를 위해 자주 쓰이는 기능들이 추가되었다. 2. 기능 * BigInt - 자바스크립트의 숫자 최댓값은 2^53 - 1로 제한되어있다. 더 큰 정수를 저장할 수 없는 것은 아니지만 처리할때 문제가 발생하곤 한다. let limit = Number.MAX_SAFE_INTEGER; console.log(limit); // 9007199254740991 limit++; console.log(limit); // 9007199254740992 limit++; console.log(limit); // 9007199254740992 limit++; console.log..

티스토리툴바