본문 바로가기

분류 전체보기

 (386)
<FE> 프론트엔드 상태 관리와 역사 1. 상태관리란 * 소개 - 프론트엔드하면 상태관리라는 단어를 빼놓을 수 없다. 상태를 효율적으로 관리하고 보여 주는 것이 프론트엔드 역량의 핵심이라 해도 과언이 아닐 것이다. - 그렇다면 도대체 상태가 무엇이고, 상태가 왜 프론트엔드에서 중요할까. 이러한 필요성들이 어떻게 어떤 목표를 가지고 발전해왔을까. 오늘의 포스팅은 이런 고민에서 시작하게 되었다. * 상태란? - 프론트엔드에서 상태란 주로 유저 정보나 UI에 영향을 미치는 동적으로 표현되는 데이터이다. 특정 컴포넌트안에서 관리되는 로컬 상태와 여러 컴포넌트에서 관리되는 전역 상태로 구분지을 수 있다. 말로는 어려우니 아래의 예시를 보자. - 위는 필자가 최근 진행했던 프로젝트에서 할일을 보여주는 부분을 캡쳐한 것이다. 회사 내에서 개인이 자신의 ..
<JS> 클로저에 대한 고찰 (소개 / 활용 / 단점 / 메모리) 1. 소개 * 배경 - 최근 기업 면접을 다니며 가장 자주 받은 질문 중 하나가 클로저에 대한 질문이었다. 간단하게만 묻고 넘어가는 기업도 있었지만 내가 어디까지 생각해봤는지 물어보는 기업도 있었다. 그래서 클로저가 무엇인지부터 시작해서 깊이 있게 고찰해보려 한다. * 클로저란 - 클로저는 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수를 의미한다. 자바스크립트의 렉시컬 환경은 외부 렉시컬 환경을 가리키는 outer 가 존재한다. - 알다시피 자바스크립트는 렉시컬 스코프를 따르므로 식별자가 현재 스코프에 존재하지 않으면 선언된 위치를 기준으로 외부 환경에서 해당 변수를 찾는다. - 결과적으로 자바스크립트의 함수는 모두 클로저이다. function func() { const x = 10; ret..
<React> React Router Dom V6 도입기 1. 배경 최근 리액트라우터의 메이저 버전이 5에서 6으로 올랐다는 소식을 접했다. 바뀌어봤자 얼마나 바뀌었을까 싶었는데 생각보다 많은 것이 바뀌었고, 기존 프로젝트의 리액트라우터 버전을 올려보는 것도 재밌을 것 같아서 시도해보았다. 이번 포스팅에서는 기존 필자의 프로젝트에 도입하는 과정을 서술할 예정이다. 혹시라도 react-router-dom v6를 공부하고 싶어서 들어왔다면 빈약한 내용에 조금 실망할 수는 있지만 그래도 읽어본다면 도움은 되지 않을까. 흥미 외에도 도입하고 싶었던 이유는 번들 사이즈이다. 리액트라우터 v6로 올라가면서 번들사이즈가 현저하게 줄어들었다. minified 기준으로 28kB 에서 17kB 까지 줄어들었다. 프로젝트에서 수많은 리액트 라우터 기능을 쓰는 것이 아니므로 들이는..
<네트워크> http 버전 별 특징 (3.0) 1. HTTP/3 - HTTP/3 은 UDP 기반의 프로토콜인 QUIC을 사용하여 통신하는 프로토콜이다. 아직 HTTP/2 도 점유율이 50%가 되지 않는데 놀랍다. 아직 표준은 아니지만 구글은 이미 실험적으로 사용하고 있다. - UDP를 모른다면 TCP와의 비교에 대해 먼저 알아보는 것을 추천한다. 어쨌든 UDP를 조금이라도 안다면 이런 생각이 들 것이다. TCP보다 당연히 빠르지만 신뢰성도 떨어지고 전송 순서도 보장되지 않는 프로토콜 아닌가? 이는 반은 맞고 반은 틀렸다. TCP는 신뢰성있는 통신을 위해 몇 가지 방법을 사용하였다. 이들 또한 클라이언트와 서버와의 통신이므로 레이턴시가 발생하고, 이는 TCP라는 프로토콜이 생길 때부터 정의된 표준이므로 무시할 수가 없다. 2. TCP의 문제점 - 위에..
<월간회고> 12월 | 취준 시작 들어가며 이 글을 쓰는 시점은 12월 31일, 2021년의 마지막 날이다. 2021년은 정말 많이 성장한 해이다. 특히 네이버 부스트캠프를 거치며, 개발자로서 기술적인 성장뿐만 아니라 함께하는 능력, 커뮤니케이션, 끈기 등을 배울 수 있었다. 덕분에 12월이 되었을 때, 취업시장에 뛰어들 준비가 어느정도 되어있었고, 함께 노력하는 사람들이 곁에 있게 되었다. 12월초에 부스트캠프를 수료하고 짧은 휴식과 함께 곧바로 취업준비에 돌입했다. 부스트캠프 네트워킹에 참여한 수많은 기업들이 부스트캠프 전형 공고를 올리게 되면서 자연스럽게 바쁘게 지내게 되었다. 이번 달에는 1. 취업 준비 부스트캠프 네트워킹이 끝나자마자 K사의 공고를 시작으로 너무 많은 공고들이 올라왔다. 부스트캠프 전형을 열어주신 건 감사하지만 ..
<네트워크> http 버전 별 특징 (0.9 / 1.0 / 1.1 / 2.0) 1. http/0.9 - 초기 단계의 http 프로토콜은 버전 번호도 없었으며 매우 간단했다. 이후 버전과 구별하기 위해 0.9라고 불리게 되었다. - http/0.9 요청은 단일 라인으로 구성되며 리소스에 대한 경로로 가능한 메서드는 GET이 유일했다. GET /myapp.html - 응답 또한 매우 단순하게 파일 내용 자체로 구성되어 있었다. 헤더도 없이 html파일만 전송될 수 있으며 다른 유형의 문서는 전송될 수 없음을 의미했다. 상태코드도 없어서 문제가 있을 경우 파일 내부에 문제에 대한 설명과 함께 보내곤 했다. 2. http/1.0 - http/1.0은 이전에 비해 브라우저와 서버에서 확장성있게 진화되었다. 1.0이라는 버전정보가 전송되기 시작했고, 상태코드가 응답의 시작 부분에 붙어 전송되..
<JS> 스코프란 1. 컴파일러 이론 * 스코프 소개 - 프로그래밍 언어라면 변수에 값을 저장하고 그 값을 가져다 쓰고 수정할 수 있다. 하지만 여기서 의문이 드는 점이 있다. 변수는 어디에 있는가? 변수가 필요할 때 프로그램은 그것을 어떻게 찾는가? - 위 질문에서 알 수 있듯 변수는 어디에 저장되는지, 어떻게 찾을지를 정의한 규칙이 필요하다. 이것이 바로 스코프이다. * 컴파일러 이론 - 자바스크립트는 일반적으로 인터프리터 언어로 분류한다. 하지만 실제로는 컴파일러 언어이다. 다른 컴파일러 언어처럼 코드를 미리 컴파일하거나 컴파일한 결과를 분산시스템에서 이용할 수 있는 것은 아니다. 그럼에도 불구하고 자바스크립트 엔진은 컴파일러가 하는 일들을 우아하게 처리하고 있다. - 컴파일러 언어의 처리 과정을 살펴보자. 소스 코..
<JS> 암시적 변환 1. 암시적변환 - 암시적 강제변환(이하 암시적 변환)은 부수 효과가 명확하지 않게 숨겨진 형태로 일어나는 타입변환이다. 대부분 암시적 변환은 위험하고 나쁜 코드라고 생각하기 쉽다. 필자 또한 그랬고 수많은 개발자들도 그렇게 생각하고 있다. 하지만 암시적 변환의 목적은 불필요한 상세 구현을 줄이는 것이다. 이미 나도 모르는 사이에 읽기 좋은 코드를 위해 쓰고 있었을 수도 있다. - 먼저 JS코드를 보기 전에 엄격한 타입 언어에서 말하는 이론적인 의사코드를 보자. SomeType x = SomeType(AnotherType(y)) - 어떤 y 값을 SomeType인 x에 할당하였다. 이 언어에서는 바로 SomeType으로 변환할 수 없어서 중간단계를 거쳤다고 가정하였다. 이를 만약 다음과 같이 작성할 수 ..
<알고리즘> 퀵 소트 & 힙 소트 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..

티스토리툴바