캐시 히트! 🥊   Next.js를 사용하는 대표적인 이유가 뭘까? 누구나 쉽게 답할 수 있다. 서버 ! 사이드 !! 렌더링 !!!   Next.js의 공식 문서를 처음부터 끝까지 정독해 본 적이 있는가? 그렇다면 분명 Next.js 공식 문서의 꽃은 아래의 두 글이라는 의견에 적극 공감할 것이다. Server Components Caching   서버에서 렌더링 작업을 수행하면 데이터 페칭, 보안, 캐싱, 성능, 초기 페이지 로드, SEO, 스트리밍 면에서 장점을 가져갈 수 있다. 이는 서버에서 HTML을 미리 렌더링하여 준비하는 기술인 Prerendering 개념으로 볼 수 있으며, HTML을 빌드 타임에 생성하는 SSG 주기적으로 생성하는 ISR 요청마다 매번 생성하는 SSR 이렇게 세 가지 방식으로 이야기해볼 수 있다. 추가적으로, Next.js에는 SSG와 SSR을 결합한 Partial Prerendering(PPR)이 실험적 기능으로 도입되어있다.   위 공식 문서를 …

컴포넌트에 다형성을 적용하는 방법으로 Polymorphic Component를 소개했다. Polymorphic 컴포넌트의 경우 prop을 전달하여 컴포넌트를 결합하게 되는데, 이때 전달할 수 있는 prop이 어떤 컴포넌트의 것인지 알기 힘들다. 게다가 코드만 봐서는 어떻게 렌더링 되는지도 알기 힘들다. 이를 해결하기 위해 속성과 행동을 자식 컴포넌트에 넘긴 후 자식이 직접 부모 컴포넌트를 대신하여 렌더링하는 Render Delegation이 등장했다. Polymorphic 컴포넌트와 마찬가지로 다형성을 위한다는 점은 동일하지만, Render Delegation의 경우 기존 컴포넌트와 합성이 될 컴포넌트를 코드에서 분리한다는 점이 다르다. Render Delegation 컴포넌트는 보통 Slot과 Slottable이라는 두 컴포넌트를 통해 구성된다. Slot은 자식 컴포넌트를 렌더링하는 역할을 하고 Slottable은 Slot에 들어갈 것이 무엇인지를 나타낸다.   Render D…

테스트 코드를 작성해야 한다~ TDD를 해야 한다~ 프론트에서는 테스트 코드 쓸모 없다~ 참 말 많은 테스트! 우선은 공부해봐야 뭐라도 알겠지? 테스트 계의 거장들과 함께 테스트에 대해 한 번 알아보자!   Kent Beck의 TDD 한 번 쯤은 들어봤을, 그리고 표지 디자인은 꽤나 익숙할 바로 그 책이다. 다들 읽어봤을지는 모르겠지만.. 최근 1회독을 해 본 내 짧은 후기는 다음과 같다. 문장이 상당히 산만한데다 번역체까지 더해지니 살짝 아찔하다.   책 두께의 반 이상을 예시 코드와 개념 설명이 차지하고 있기에, 책을 관통하는 내용은 문장 몇 개로 정리할 수 있었다. TDD의 리듬은 다음과 같다. (빨강 → 초록 → 리팩토링) 우선 테스트를 작성한다. 실패하는 구현을 짠다. (빨강) 성공하는 구현을 한다. 성공하기만 하면 된다. 가짜로 구현해도 된다. (초록) 올바르게 리팩토링 한다. 명백하게 구현해야 한다. 테스트들의 단계는 작게 분리되어야 한다. 그래야 테스트들 간에 서로…

자바스크립트로 문자열을 뒤집고 싶다면 어떻게 할 것인가? 다들 를 떠올렸을 것이다. 하지만 여기에 이모지가 포함되어 있다면?   물론 말고 스프레드 연산자나 을 떠올린 사람도 있을 것이다. 여튼, 어떤 방법을 쓰냐에 따라 결과가 크게 달라질 수 있는데…   위 코드를 실행하면 어떤 글자가 출력될까? 라는 아주 끔찍한 결과가 나온다.   반면 스프레드 연산자나 을 사용한다면?   이 차이는 자바스크립트에서 문자열과 이모지, 특히 ZWJ(Zero Width Joiner) 시퀀스를 처리하는 방식 때문에 발생한다.   잠깐! ZWJ는 뭔데? ZWJ(Zero Width Joiner)는 유니코드 문자 U+200D로, 이모지들을 결합하여 새로운 의미를 만드는 특수한 보이지 않는 결합 문자다. 이러한 결합 이모지를 ZWJ 시퀀스라고 한다. ZWJ는, 시각적으로 보이지 않고 개별 이모지들을 하나로 결합하는데 이는 플랫폼마다 지원하는 조합이 다를 수 있다.   하나의 기본 이모지는 두 개의 UT…

리액트 공식 문서를 읽다보면 다음과 같은 문장을 마주할 수 있다. 주의사항 useState는 Hook이므로 컴포넌트의 최상위 레벨이나 직접 만든 Hook에서만 호출할 수 있습니다. 반복문이나 조건문 안에서는 호출할 수 없습니다. 필요한 경우 새 컴포넌트를 추출하고 state를 그 안으로 옮기세요.   🤔 “왜 useState를 반복문이나 조건문 안에서 쓰면 안 되는 걸까?”   React 훅의 동작 원리 리액트 훅의 핵심 원리 중 하나는 훅의 호출 순서가 항상 같아야 한다는 것이다. 리액트는 컴포넌트가 리렌더링될 때마다 훅들을 순서대로 실행하는데, 만일 이 순서가 변경된다면 리액트는 어떤 상태가 어떤 useState 호출에 해당하는지 추적할 수 없게 된다. 만일 조건문 내에서 useState를 사용한다면, 조건의 값에 따라 훅의 호출 순서가 바뀌게 된다. 반복문 내에서도 마찬가지다. 반복 횟수에 따라 훅의 호출 횟수가 달라지게 된다. 위 두 경우 모두 리액트가 예측할 수 없는 동작…

선언형과 함수형 리액트 공식 문서에서 우리는 선언형이라는 표현을 볼 수 있다. How를 강조하는 명령형 프로그래밍과 달리, 선언형 프로그래밍은 What을 강조한다. 그리고 함수형 프로그래밍은 선언형 프로그래밍을 실현하는 방법 중 하나다. 함수형 프로그래밍의 대표적인 키워드 중 하나는 순수 함수다. 순수 함수란 외부의 값을 변경하는 사이드 이펙트가 없는 함수다. 순수 함수에 대한 더 자세한 내용은 [자바스크립트의 순수 함수와 비순수 함수 ](https://www.jeong-min.com/62-pure-impure-function/)에서 확인할 수 있다. 외부의 값을 변경하지 않는다는 개념은 불변성과도 밀접한 관련이 있다.   불변성이란? 불변성이란 값이나 상태를 변경할 수 없는 것이다. 그리고 자바스크립트의 원시타입은 불변성을 가진다.   자바스크립트의 변수 타입 자바스크립트의 변수 타입에는 크게 원시타입과 참조타입이 있다. 원시타입으로는 string, number, bigint, …

해시 테이블이란? 해시 테이블은 키-값 쌍을 저장하는 자료구조다. 해시 테이블은 평균 O(1)의 시간 복잡도로 삽입, 검색, 삭제 연산을 수행하기에 매우 유용하다. 해시 테이블의 대표적인 예로는 파이썬의 dictionary, 루비의 hash 자바의 map을 들 수 있겠다. 해시 테이블은 해시 함수를 사용하여 키를 배열의 인덱스로 변환한다. 이 과정을 해싱이라고 한다. 해시 함수는 같은 입력에 대해 항상 같은 출력을 반환해야 하며, 다른 입력에 대해서는 최대한 다른 출력을 반환하도록 설계되어야 한다. 그렇지 않으면 최악의 경우 O(n)의 시간 복잡도를 갖게될 수도 있다. 즉, 해시 함수의 품질에 따라 성능이 크게 좌우된다.   해시 함수가 다른 입력에 대해 동일한 출력을 반환한다면 해시 충돌이 발생한다. 해시 충돌을 완화하는 방법도 존재한다. 개방 주소법 (open addressing): 고정된 해시 테이블 내에서 저장 위치를 잘 찾기 분리 연결법 (separate chaining…

함수형 컴포넌트와 화살표 함수가 많이 사용되는 요즘, this 바인딩은 실무에서 점점 찾아보기 힘들어지는 개념이 되어가는 듯하다. 하지만 어쩔 수 없다. 꼭 알아야 하는 개념이다. 공부하자.   함수가 호출되는 방식에 따라 다르게 바인딩되는 this 자바스크립트의 this는 매우 강력하면서도 때로는 혼란스러운 키워드다. 함수가 어떻게 호출되느냐에 따라 동적으로 바인딩되는 this, 한번 같이 알아보자!   1. 일반 함수 호출 일반 함수로 호출될 때 this는 전역 객체를 가리킨다. 즉, 브라우저에서는 window, node.js에서는 global을 가리키게 된다.   🤔 “전역 스코프가 아닌 함수 스코프를 가지는데 왜 전역 객체를 가리키는 거지?” 함수 스코프와 this 바인딩은 서로 다른 개념이다! 함수 스코프는 변수의 접근 범위를 결정하는 규칙인 반면, this 바인딩은 함수가 어떻게 호출되었는지에 따라 결정되는 실행 컨텍스트다. 함수 내부에서 변수를 찾을 때는 스코프 체인…

“자바스크립트의 실행 컨텍스트에 대해 설명해보세요.” 아.. 그.. 알긴 아는데.. 아.. 어떻게 설명을..   질문을 받을 때 마다 머릿속이 새하야지는 바로 그 질문!   자바스크립트 실행 컨텍스트란? 실행 컨텍스트는 말 그대로, 자바스크립트 코드가 실행되는 환경으로, 코드가 실행될 때 생성되는 일종의 컨테이너라고 볼 수 있다. 실행 컨텍스트에는 변수 및 함수 선언, 스코프와 this 바인딩 정보 같은 것들이 저장된다. 실행 컨텍스트는 크게 전역 실행 컨텍스트와 함수 실행 컨텍스트로 나눌 수 있는데, 함수가 호출되면 새로운 실행 컨텍스트가 만들어지고 콜 스택에 쌓이게 되며, 함수 실행이 끝나면 해당 컨텍스트는 콜 스택에서 제거된다. 콜 스택을 포함한 자바스크립트 런다임에 대한 더 자세한 내용은 자바스크립트 엔진: “어, 아직 싱글이야” | JS 런타임에 대해 알아보자에서 확인할 수 있다.   놀랍게도, 이러한 실행 컨텍스트로 인해 스코프 체인, 클로저, 변수 호이스팅 같은 것들…

CLI, 우리는 이미 사용하고 있다. Command line interface 개발을 조금이라도 해봤다면 한 번쯤은 써봤을 것이다. 터미널에서 명령어와 파라미터로 조작하는 CLI, git과 aws를 터미널에서 사용해봤다면 당신은 이미 CLI 마스터!   CLI, 직접 한 번 만들어보자. 최근 CLI를 실행하면 자기 소개 몇 줄을 출력하는 식으로 포트폴리오(?)를 만드신 분을 봤는데, 이에 큰 감명을 받아 여기에 몇 가지 기능을 더 추가한 나만의 CLI를 만들어보려고 한다.   1. 환경 세팅 프론트엔드 개발자는 뭐다? 자바스크립트 개발자다 당연히 node.js 기반의 CLI를 만들고자 했고, 타입스크립트 및 최신 문법 사용을 위해 babel을 함께 사용했다. 그리고 라이브러리를 만들 때 주로 사용되는 rollup을 번들러로 선택했다. CLI 프로그램 개발을 위한 툴로는 commander, inquirer, chalk를 사용했다. commander: node.js 기반의 CLI를…

네비게이션 성능 향상을 위한 API 어떤 페이지에서, 사용자가 그 다음으로 이동할 페이지를 미리 가져올 수 있다면? 사용자 경험뿐만 아니라 성능까지 향상시킬 수 있는 방법일 것이다. 이런 접근은 특정 리소스 파일보다는 문서 URL을 타겟으로 하기 때문에, 싱글 페이지 애플리케이션(SPA)보다는 멀티 페이지 애플리케이션(MPA)에 좀 더 유용하다. 이 기능에 대해서는 두 가지 개념이 존재한다.   1. prefetching 프리패치, 프리패칭. 들어보셨죠? prefetch가 적용된 페이지들에 대해, 브라우저는 페이지의 하위 리소스는 다운로드하지 않고, 응답 바디만 다운로드하여 캐시에 저장한다. prefetch된 문서로 이동하는 경우를 제외하고는 페이지를 떠날 때 캐시는 비워진다. 이를 위해 를 사용할 수 있는데, 이 방법은 여러 한계점을 가진다. 교차 사이트 탐색에 사용할 수 없다. Cache-Control 헤더에 의해 차단된다. 자동으로 우…

이번 글에서는 변수, 함수 호이스팅 위주로 알아볼 예정입니다 :) 호이스팅에 대해 깊에 알아보기 전에, 아마 많은 사람들이 오해하고 있을 세 가지를 짚고 넘어가보겠다. let/const는 호이스팅 되지 않는다. 호이스팅은 ECMAScript에 정의된 용어다. 함수 표현식 코드에서 호이스팅되는 건 아무것도 없다. 놀랍게도, 모두 다 맞다고도, 틀렸다고도 할 수 있다. 잠시 놀라움은 뒤로 하고, 차근차근 알아가보도록 하자.   호이스팅이란? 자바스크립트 인터프리터가 코드를 실행하기 전에 변수, 함수, 클래스, 임포트의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상이다. 이번 글에서는 변수와 함수에 대해 어떻게 호이스팅이 일어나는지 알아보도록 하자!   함수 스코프를 가지는 var var로 선언된 변수의 범위는 현재 실행 컨텍스트다. 즉, 변수 선언을 둘러싼 함수 또는 전역이 될 수 있다. 따라서 var는 현재 함수 또는 전역 스코프 어디에서나 접근할 수 있는 변수를 …

“자바스크립트의 비동기 함수에 대해 설명해보세요.” “Promise에 대해 설명해보세요.” “Promise와 async/await의 차이에 대해 설명해보세요.” 프론트엔드 면접 유경험자라면, 정말 진절머리 나도록 많이 들어본 질문일 것이다.   그래서 어떻게 답변하면 되냐고? 어.. 음.. 그래서 써보는 글!   Promise란? 프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체다. 개발을 하면서 우리는 대부분 이미 만들어진 프로미스를 사용했을 것이다. 프로미스가 없었을 때는 어떻게 비동기 로직을 순차적으로 처리했을까? 그 해결책은 콜백 함수였다. 대표적인 예시로, 기존의 콜백 기반 API인 XMLHttpRequest을 대체하기 위해 나온 프로미스 기반의 Fetch API를 떠올려볼 수 있겠다.   콜백으로 비동기 처리하기 지금은 누구나 사용하는 fetch와 axios. 그 이전에는 XMLHttpRequest가 있었으니…   XMLHttpRequest를 이용하여 …

Sign을 보내~ Signal 보내~ 찌릿 찌릿 찌릿 찌릿   Signals 라는 개념을 들어본 적이 있는가?! 평소 리액트와 뷰만 써왔다면 처음 들어보는 단어일 수도 있다. 글에서는 시그널(signal), 단수형으로 표현할 예정이다. 한국인들에겐 언제나 단수형이 익숙한 법!   시그널이란? 시그널은 애플리케이션에 상태(state)를 추가하는 방법이다. 리액트의 상태가 변경될 경우 앱이 매번 리렌더링되는 반면, 시그널 값이 변경될 경우 정말 변경이 이루어지는 UI에서 업데이트가 이루어진다. 렌더링도 디핑도 필요없이 말이다!!   이 시그널이라는 개념은 Preact, Angular, Solid.js를 써본 사람이라면 들어봤을 것이다. Preact에서 useState 훅과 signals를 모두 제공하니, 한번 Preact의 시그널을 살펴보자!   vite를 사용해서 Preact + TypeScript 프로젝트를 바로 만들 수 있다!   Preact의 시그널 자바스크립트에서, 값은 …

본격 순수 함수를 시작으로 조금씩 함수형 프로그래밍과 친해져보기로 마음먹은 김에 시작해보는 시리즈 ㅋㅋ 지난 글에서는 함수형 프로그래밍에서 말하는 순수 함수에 대해 알아보았는데, 이번 글에서는 일급 값과 함께, 일급 함수와 고차 함수에 대해 알아보도록 하겠다!   일급이란? 월급 아니고 일급이요 ㅋ.ㅋ 다음과 같은 식으로 쓸 수 있는 값을 일급이라고 한다. 변수에 할당하기 함수의 인자로 전달하기 함수에 의해 반환되기 배열이나 객체에 담기   일급이 아닌 것은? 물론 자바스크립트에는 일급이 아닌 것도 있다. 수식 연산자, 반복문, 조건문, try/catch문 같은 것들은 자바스크립트에서 값이 아니기 때문에 일급이라고도 할 수 없다. 자바스크립트 뿐만 아니라, 대부분의 언어가 일급이 아닌 값들을 가진다.   중요한 것은 일급이 아닌 것을 일급으로 바꾸는 것이다! + 연산자를 변수에 할당할 수는 없지만, + 연산자와 동일한 행동을 수행하는 함수를 만들 수는 있다. 일급이 아닌 것도 …

저번 글에서는 리액트 19의 새로운 훅들에 대해서 알아보았다. 이외에도, 리액트 19에서는 리소스를 렌더링 시점에 읽기 위한 api로 use가 새롭게 등장했다. 이번 글에서는 use의 대표적인 쓰임새 두 가지를 알아보도록 하자!   use(Context) : use로 context 읽기 use는 기존의 useContext를 대체할 수 있다. useContext는 컴포넌트의 최상위 레벨에서 호출해야 하는 반면, use는 if와 같은 조건문이나 for와 같은 반복문 내부에서도 호출할 수 있다. 즉, use는 useContext보다 더 유연하게 사용될 수 있다. 대충_유연한_짤.jpeg   context가 전달되는 상황이라면 언제 어디서든 use를 사용할 수 있다. 참고로, 리액트 19에서는 를 프로바이더로서 렌더링할 수 있게 되었다. 더 이상 를 사용하지 않아도 된다는 것! 따라서 는 곧 depreca…

4월 25일, 리액트 19 베타가 공식적으로 나왔다! 리액트 19에서는 뭐가 달라졌는지 이번 글에서는 Hook 위주로 한 번 살펴보도록 하자.   들어가기 전에,   리액트 19 설치하기 (2024/05/03 기준) React 및 React DOM 최신 버전 설치 TypeScript를 사용한다면 types 설치   리액트의 비동기 처리 리액트 19에서는 전체적으로 비동기 처리와 관련된 훅이 많이 나온 것을 볼 수 있다. 리액트에서 흔히 사용되는 코드 패턴 중 하나는 비동기 요청을 처리한 다음 응답에 따라 상태를 업데이트하는 것인데, 이 과정에서 신경써야 할 몇 가지가 있다.   1. Pending 상태 api 요청이 진행중이라는 것을 노출하기 위한 상태다. 2. Optimistic 상태 api 요청이 성공할 것이라고 낙관적으로 보고, 응답을 기다리지 않고 미리 결과값을 노출하기 위한 상태다. 3. 에러 핸들링 api 요청 단계에서 에러가 발생했을 때 대처하기 위한 개념이다. 4.…

순수 함수요? 자바스크립트로 함수형 프로그래밍이 가능하다고요? 자바스크립트는 프로토타입 기반 프로그래밍 언어 아닌가요? 맞는 말이다. 자바스크립트는 프로토타입 기반 프로그래밍 언어로, 객체지향 프로그래밍 언어의 한 갈래다. 하지만 순수 함수형 프로그래밍 언어가 아닌 자바나 자바스크립트로도 함수형 프로그래밍은 가능하다! 반드시 스칼라와 같은 함수형 프로그래밍 언어를 사용해야만 함수형 프로그래밍을 한다고 말 할 수 있는 것은 아니다. 자바스크립트를 좋은 함수형 프로그래밍 언어로 보기는 어렵지만, 몇 안 되는 함수형 기능을 살펴보도록 하자.   순수 함수란? 순수 함수는 부수 효과가 없는 함수이며, 부수 효과를 잘 관리하는 것은 함수형 프로그래밍의 가장 큰 목적이다. 놀랍게도 우리는 모두 순수 함수와 가까이 지낸 적이 있는데..! 바로 학창 시절 배웠던 수학의 함수가 모두 순수 함수다.   함수 f:X -> Y 는, 집합 X의 원소를 함수 f에 대입하면 집합 Y의 원소가 나온다는 것…

회사 외 부업으로 개발자 멘토링을 시작한 지도 반 년이 넘어갔다. 개발자 붐이 사그러들었다고는 하나, 여전히 개발자 지망생(?)들은 많은 것 같다. 멘토링을 진행하면서, 그리고 IT 모임에서 다른 개발자들과 인생 이야기를 나누면서, ‘나는 상당히 운이 좋았구나’ 하는 생각도 많이 들었다. 나는 어쨌거나 전공자였고, 공부를 그리 열심히 하는 학생이 아니었음에도 주워 들은 전공 지식은 많았다. 정말 당연한 개념들이라고 생각했는데 모를 수도 있겠구나를 멘토링을 하면서 많이 깨달았다. 주변 사람들도 대부분 전공자들이었기에 좋은 팁과 정보들을 계속해서 얻을 수 있는 환경이었고, 그 덕에 IT 커뮤니티도 일찍부터 시작할 수 있었다. 내가 컴퓨터공학과를 나와서 다른 직군으로 취업을 해본다고 상상해보니, 정말 힘든 일이 아닐 수 없다는 걸 깨달았다. 당장 무얼 해야할지 감도 잡히지 않는 사람들에게 조금이라도 도움이 될 수 있는 내용들을 한 번 정리해보면 어떨까 하는 생각으로 글을 써보려 한다.…

배열에서 특정 값 찾을 때, find만 쓰진 않았나요? 자바스크립트 배열을 다룰 때, map, forEach, find, findIndex 등의 메서드는 정말정말 유용한 친구들이다. 하지만 매번 똑같은 배열에 대해 루프를 여러 번 돌아야 한다면..? 루프의 루프의 루프를 돌아야 한다면..? 우리들의 시간은 소중하니까!!! 더욱 효율적인 방법이 어디 없을까?   reduce, 들어는 보았나 reduce 함수는 줄인다는 뜻과 일맥상통하게, 배열을 하나의 값으로 줄여 반환해주는 친구다. 즉, 배열을 하나의 값으로 만들어버리고 싶을 때 쓰면 되는 것! (물론 새로운 배열을 만들 수도 있다) 위 처럼 acc와 cur로 표현되는 reduce 식을 본 적은 다들 한 번 쯤 있을 것이다. 정확히는, reduce가 실행하는 콜백은 네 가지 인수를 받는다. accumulator: 콜백의 반환값을 누적 currentValue: 현재 처리할 요소 currentIndex: 현재 처리하는 요소의 인덱스 …

Context API부터 시작해보는 리액트의 상태 관리 이야기. Flux, Proxy, Atomic에 대해서도 알아봅시다.   리액트 상태 관리, 왜 하는데?   1. 단방향 바인딩 양방향 바인딩을 하는 앵귤러나 뷰와 달리, 리액트는 단방향 바인딩을 지원한다. 즉, 부모의 상태를 자식으로 전달할 수는 있지만(props) 자식의 상태를 부모로 전달하는 방법은 없는 것이다. 물려받기만 할 줄 아는 불효자 리액트 자식에서 부모의 상태를 바꾸려면 상태를 바꾸는 setState도 자식에게 전달해야 하니, props의 개수는 점점 증가하게 된다.   2. props drilling , 그리고 A의 자식인 , 그리고 B의 자식인 있다고 해보자. A의 상태값을 B에서는 사용하지 않는데 C에서는 사용한다면, 우리는 어쩔 수 없이 B에게도 상태값을 props로 전달하게 된다. 만약 이런 형태의 컴포넌트가 계속 깊어진다면.. 그리고 상태값도 더 많아진다면.. props drilling으로 꽤나 고생…

엑셀이나 구글 스프레드 시트를 input에 그대로 복붙할 수는 없을까? 엑셀 또는 스프레드 시트 파일을 서버에 업로드하기 전에, 프론트에서 한 번 validation을 한다든가 하는 전처리 과정을 진행해볼 수도 있다. 그렇다면 엑셀이나 구글 스프레드 시트를 복붙해 넣을 수 있는 input과 뷰가 필요한데, 과연 엑셀과 스프레드 시트 파일은 어떤 형태로 클립보드에 저장될까? 복붙 가보자고~   input의 onPaste 속성 input에는 onInput만 있는 줄 알았지? HTMLElement의 paste 이벤트의 이벤트 타입은 Event를 상속받는 ClipboardEvent이다. 우리가 자주 사용하는 input 이벤트와 한 번 비교해보자!   1. 어떻게 복사한 값을 가져올 수 있을까? 의 의 메서드를 활용하면 포맷에 따른 값을 가져올 수 있다. 위와 같이 작성된 컴포넌트를 만들고, 다음과 같은 화면에서 를 복사해서 위 컴포넌트에 붙여넣어 본다고 해보자. 그럼 다음과 같은 결…

공부를 해보겠다고 책이나 독스를 읽어 내려가다 보면, 무념무상이 되곤 한다. 타입 가드.. 그렇구나.. 타입 좁히기.. 그렇구나.. 타입 서술어.. 그렇구나.. 그러다 문득 든 생각, 🤔 실제로 개발할 때 써본 적은 없는 것 같은데? 이거 왜 쓰는 거지?   반환 타입을 굳이..? 우리는 생각보다 타입스크립트의 기능 중 정말 일부만을 사용한다. 반환 타입이 타입 서술어인 함수를 사용하는 일은 거의 없다 보니, 와 같은 문법은 잊혀지곤 한다. 그렇다 할지라도, 기능이 있는 데에는 다 이유가 있는 법! is를 어떻게 요리해볼 수 있을지 한 번 알아보도록 하자.   생각보다 타입스크립트는 멍청하다 위와 같은 코드가 있다고 할 때, 함수를 통과한 값은 어떻게 타입이 추론될까? 😯 통과했으니 당연히 Developer 타입으로 추론되지 않을까? 는 큰 오산이다. TS: ? 니가 라며   위와 같은 상황을 마주하면, 당황스러운 마음에 as를 써버리곤 한다. 이럴 때 잊혀졌던 is 친구…

이것도 필요하고 저것도 필요하고 다 필요한 속성인데..? 싶을 때 우리는 종종 “일단 다 optional 처리하고 조건부 렌더링 해버리자!” 또는 “그냥 as 써버려!” ..가 되어버리는 것 같다. 애써 무시하기 스킬을 획득하셨습니다. 하지만 그렇게 짜게 되면 optional 속성에 대해 불필요한 값들도 조건부 렌더링에 추가하게 되는 불상사가 일어나곤 한다. 현실에선 일어나지 않을 코드이지만, 위 상황에 대한 연출을 위한 간단한 코드로 한번 예시를 들어보도록 하겠다!   서로 다른 상황에서 사용되는 동일한 인터페이스를 만들어야 한다고 해보자. 예를 들어, 내가 작성한 포스트와 남이 작성한 포스트를 다르게 노출시켜야 한다고 해보자. 위와 같은 구조를 만든다고 할 때, Post 컴포넌트의 props를 어떻게 설계할 것인지 꽤나 고민이 된다. 우선은 두 가지 상황에 대한 대처가 필요하다.   1. 아묻따 optional 처리 일단 다 optional 처리를 하는 방법이 있겠다. 하지…

Demo Website: jeong-min.com Open source Code: Github   👋 소개 X로그, X스토리, X런치, X디엄.. 안 써본 블로그 플랫폼이 없을 정도로 유목민 생활을 해왔는데요, 결국 돌고 돌아 블로그를 직접 만들게 되었습니다! 이 템플릿의 베이스가 되어준 줌코딩 님의 블로그 템플릿도 많은 관심 부탁드리며, 흔쾌히 커스터마이징을 허락해주신 제 사우님, 줌코딩 님께 감사드립니다! 🙇   ✨ 기능 ✨ 홈 화면에 원하는 글 선택적 노출 🌘 다크모드 지원 💅 코드 하이라이팅 지원 👉 글 목차 자동 생성(ToC) 💬 Utterances 댓글 기능 지원 ☕️ 후원을 받을 수 있는 Buy me a coffee 컴포넌트 📚 글을 카테고리별로 보여주는 Posts 페이지 👨‍💻 타임스탬프로 활동 경력을 보여주는 About 페이지 👋 Utterances를 활용한 방명록 페이지 😎 프로젝트를 보여줄 수 있는 Playground 페이지 📈 다양한 개츠비 플러그인 지원 (Goog…

| Bun is an all-in-one toolkit for JavaScript and TypeScript apps. Bun은 자바스크립트 런타임이자 패키지 매니저이자 번들러이자 테스트 러너이다. 만두 귀여워 Bun을 다른 JS 런타임들과 비교해보고, 간단하게 사용도 해보자!   그래서 Bun이 뭔데? 즉, Bun은 bundler, transpiler, task runner, npm client를 모두 포함하는 새로운 자바스크립트 런타임이다. 즉, JS/TS 프로젝트를 번들링하고, 트랜스파일링하고, 설치하고, 실행시킬 수 있다는 것이다. Bun의 기능들을 한 번 살펴보자. Fetch, WebSocket, ReadableStream과 같은 web API들을 제공한다. 모든 파일을 트랜스파일하기 때문에, TS와 JSX도 동작한다. Node.js의 모듈 resolution 알고리즘을 구현하기 때문에, npm 패키지들을 사용할 수 있다. 엄청 빠른 SQLite3 클라이언트를 제공한다…

closure와 closer해져보자 ㅋ.ㅋ   클로저를 알기 전에, 자바스크립트의 렉시컬 스코핑에 대해 먼저 알아보도록 하자!   스코프(Scope)란? 스코프란 참조 대상 식별자(변수와 함수같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. 전역 스코프를 가진 변수는 어디서든 참조할 수 있지만, 함수 레벨 스코프를 가진 변수는 함수 외부에서 참조하려고 할 경우 참조에러가 발생하게 된다. 이러한 개념을 스코프라고 한다.   렉시컬 스코프(Lexical scope)란? 렉시컬 스코프는 함수를 어디에 선언하였는지에 따라 상위 스코프가 결정되는 것을 말한다. 자바스크립트를 포함한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따르며, 이를 정적 스코프(Static Scope)라고 부르기도 한다. 내부 함수에서 외부 함수의 변수에 접근이 가능한데, 이것은 함수가 중첩될 때 구문 분석기가 변수 이름을 확인하는 방법을 설명하는 정적 스코프의 예시다.…

자바스크립트 엔진과 런타임에 대해 이야기하기 전에, 자바스크립트 자체가 무엇인지 이해하는 것도 중요하다! 자바스크립트는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나로, 웹 브라우저에서 실행되는 스크립트 언어다. 실제로 자바스크립트는 웹 브라우저뿐만 아니라 다양한 환경에서 실행될 수 있으며, 이때 코드가 실행되는 환경을 “런타임(runtime)“이라고 한다. 특히 자바스크립트 엔진과 브라우저 런타임은 웹 개발에서 핵심 역할을 하는 주요 구성 요소다. 이 두 가지는 웹 애플리케이션의 동작과 성능에 중요한 영향을 미친다.   자바스크립트 엔진 자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하는 핵심 구성 요소다. 가장 널리 사용되는 자바스크립트 엔진 중 몇 가지를 살펴보도록 하자. V8 (Google Chrome, Node.js) V8은 Google에서 개발한 자바스크립트 엔진으로, Chrome 브라우저와 Node.js에서 사용된다. V8은 JIT(Just-In-Tim…

그냥 도메인 주소만 입력하면 뚝딱 되는 건 줄 알았지? 우리가 을 입력하고 화면이 뜰 때까지, 그 뒤에선 수많은 일들이 바삐 일어나게 된다. 우리에게 친숙한 호스트네임을 IP 주소로 변환해주는 DNS(Domain Name System)이 있기에 가능한 일이다. 즉, DNS는 인터넷의 중추로 볼 수 있다. DNS는 계층적인 이름 구조를 가지는데, , , 은 모두 도메인 이름의 계층이다.   DNS 관련 용어를 알아보자 Domain Registrar: 도메인 이름을 등록하는 곳이다. 대표적으로 AWS의 Route 53와 GoDaddy가 있다. DNS Records: A, AAAA, CNAME, NS 등 다양한 종류가 있다. Zone File: 모든 DNS 레코드를 포함한다. Name Server (DNS Server): DNS 쿼리를 실제로 해결하는 서버다. TLD (Top Level Domain): 최상위 도메인으로 , , 등이 있다. SLD (Second Level Doma…

개발을 하다보면 다이어그램을 작성해야 할 때가 종종 있다. ERD를 그릴 때 뿐만이 아니라, 다이어그램은 도메인 또는 아키텍처를 더 쉽게 파악할 수 있도록 돕는 도구가 되어주기도 한다. draw.io, ppt, figjam, excalidraw, cloudcraft, eraser.io 등 다이어그램을 그릴 수 있도록 해주는 서비스는 다양하다. 하지만 나는 직접 그리는 게 아닌, 더 쉽고 체계적으로 작성할 수 있는 무언가가 필요했다..!   마크다운으로 다이어그램을 그릴 수 있다고? 누구든 쉽게 작성할 수 있는 마크다운. 애초에 지금 이 글도 마크다운 파일로 작성되고 있는데..! 머메이드는 마크다운 문법으로 다이어그램을 그려주는 라이브러리다. 즉, UI를 직접 그리지 않고 텍스트로 다이어그램을 표현할 수 있다는 것! 더더욱 좋은 점은, mermaid 문법은 컨플루언스, github, gitlab, vscode(플러그인 필요)에서도 지원이 된다. 나의 경우 현재 회사에서 컨플루언스를…

Git으로 협업을 하고 있다면 당연히 써봤을 clone과 fork 기능! 프로젝트 초기에 그라운드 룰을 정할 때면 항상 하게 되는 고민이 있다. 🤷‍♂️ 클론받아서 피쳐별로 브랜치 파서 main으로 PR 올릴까요? 🤷‍♀️ 포크 떠서 origin에서 upstream으로 PR 올리는 건 어때요?   Git Clone clone은 원격 저장소를 로컬 환경으로 복제해오는 방법이다. 이를 통해 원격 저장소에 있는 모든 코드, 히스토리, 브랜치 등을 로컬 환경에 가져올 수 있다.   Git Fork Fork는 다른 사람의 원격 저장소를 복제해서 내 저장소를 따로 만드는 방법이다. 즉, Fork를 한 후 내 저장소를 Clone해서 작업하게 되는 것이다.   보통 다른 프로젝트나 오픈소스에 기여할 때 Fork를 많이 사용하곤 한다. 원본 프로젝트와 완전히 분리된 환경에서 작업하여 코드를 안전하게 수정하고 실험할 수 있기 때문이다. 그렇다면 팀 프로젝트를 할 땐 어떻게 해야 할까?   Clone은 위험할…

input 또는 scroll 이벤트를 아무 생각 없이 다루다보면 내 의도와 다르게 엄청나게 많은 요청이 발생하게 되곤 한다. 예를 들어, 스크롤 이벤트가 걸려있는 상태에서 스크롤을 몇 천 픽셀 내리게 되면 100개 이상의 스크롤 이벤트에 대한 콜백이 발생할 것이고, 이는 엄청난 리소스를 잡아먹을 것이다..! 바로 이때 나 을 사용하여 이벤트나 함수의 실행 빈도를 줄여 성능을 높일 수 있다. 이벤트 핸들러가 많은 연산을 수행할 때, 제약을 걸어 제어할 수 있는 수준으로 이벤트를 발생시키게끔 하는 것이다. 그렇다면 이 둘의 차이는 뭘까?   Debounce 는 이벤트를 그룹화하여 특정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 것이다. 즉, 연이어 호출되는 함수들 중 마지막 또는 제일 처음만 호출하도록 하는 것이다. 따라서 일정 시간 내에 이벤트가 계속 발생하면 함수가 실행되지 않다가, 이후 일정 시간 동안 이벤트가 발생하지 않으면 함수가 실행된다. 특히 텍스트 인풋에 글자를 …

타입스크립트는 자바스크립트의 상위 집합 언어로, 정적 타입을 지원하여 코드의 안정성과 생산성을 향상시켜준다. 이젠 더 이상 자바스크립트를 쓸 수 없는 몸이 되어버린.. 그 중에서도 제네릭(Generic)은 타입스크립트의 핵심 기능 중 하나다. 오늘은 제네릭의 개념, 사용법, 그리고 실제 활용 방법에 대해 알아보자!   제네릭이란? 제네릭은 타입스크립트에서 코드의 일반화(generic)를 가능하게 해주는 기능이다. 제네릭을 사용하면 함수, 클래스, 인터페이스 등을 다양한 타입에 대해 작동하도록 만들 수 있다. 제네릭을 사용하면 컴파일 시점에서 타입 체크를 할 수 있어 런타임 에러를 사전에 방지할 수 있고, (타입 안정성) 한 번 작성한 제네릭 코드를 다양한 타입에 대해 재사용할 수 있고, (재사용성) 제네릭을 통해 일반적인 동작을 정의하고, 구체적인 타입은 사용하는 곳에서 결정할 수 있다. (추상화) 그렇다면 실제로 어떻게 제네릭을 사용하는지 살펴보자!   1. 함수 제네릭 함수를…

💡 깨알 상식 : etc.는 라틴어 et cetera의 줄임말이다.   자바스크립트 사용하는 사람~? 타입스크립트 사용하는 사람~? 외부 패키지 사용하는 사람~?   패키지 매니저란? 자바스크립트 프로젝트를 개발한다면 당연하게 사용하는 패키지 매니저! 자바스크립트 패키지 매니저는 자바스크립트 프로젝트에서 사용되는 의존성 관리 도구다. 패키지 매니저는 프로젝트에 필요한 외부 라이브러리, 모듈, 플러그인 등을 손쉽게 설치하고 관리하는 역할을 한다. 우리들의 만능 집사 패키지 매니저!   자바스크립트 패키지 매니저의 주요 기능은 다음과 같다. 패키지 설치 패키지 매니저를 사용하여 프로젝트에 필요한 패키지를 설치할 수 있다. 패키지는 일반적으로 오픈 소스 라이브러리이며, 패키지 매니저를 통해 패키지의 이름 또는 버전을 지정하여 설치할 수 있다. 의존성 관리 패키지 매니저는 프로젝트의 의존성을 관리한다. 패키지는 다른 패키지에 의존할 수 있으며, 패키지 매니저는 이러한 의존성을 자동…

1탄의 내용을 참고하여 이미지 업로드 미리보기를 구현해보자. 놀랍게도 그 방법은 한두 개가 아니다!   1. URL.createObjectURL 참고 자료: MDN web docs: URL.createObjectURL() 메서드를 사용하여 선택한 이미지 파일을 Blob 또는 File 객체로 변환하고, 그 객체를 URL로 변환하여 미리보기 이미지로 사용할 수 있다. 이 방법은 메모리 사용량이 적고 효율적이다. 하지만 URL은 사용이 완료되면 을 호출하여 메모리 해제를 해주어야 한다. 장점 간단하고 직관적인 방법으로 이미지를 미리보기할 수 있다. 추가적인 데이터 변환이나 처리 없이 바로 URL을 생성하여 사용할 수 있다. 메모리 관리에 대한 부담이 적다. 단점 생성된 URL은 페이지 세션이나 브라우저 세션 동안 유지되며, 페이지를 벗어나도 자동으로 해제되지 않는다. 큰 이미지 파일을 다룰 경우 메모리 사용량이 늘어날 수 있다.   2. FileReader.readAsDataURL …

침착맨 라이트노벨 제목 월드컵 편을 보고 재밌어서 써본 제목입니다   파일을 다루는 일이 생길 때마다 구글링을 하게 되는 것 같다. 나만 그런 거 아니겠지? 여튼 그래서 들고와 본 주제!   Blob, File, 그리고 URL File, Blob, 그리고 URL은 웹 애플리케이션에서 파일과 데이터를 표현하고 다루는 데 사용되는 개념들이다. Blob Blob은 일련의 데이터를 나타내는 객체다. Blob은 Binary Large Object의 약자로, 텍스트나 이미지, 오디오, 비디오 등과 같은 다양한 종류의 데이터를 처리할 수 있다. File 객체는 Blob 객체의 하위 클래스로 볼 수 있다. File File은 사용자의 로컬 파일 시스템에서 선택한 파일을 나타내는 객체다. 일반적으로 파일 업로드나 파일 조작을 위해 사용된다. File 객체는 Blob 객체를 상속하며, 파일의 이름, 크기, 타입 등의 추가적인 정보를 가지고 있다. URL URL은 웹 리소스의 주소를 나타내는 문…

현재 IT 동아리를 운영 중에 있는 나. SIPE 많관부탁드립니다 😉😉 구글폼으로 서류 원서를 접수받고, 서류 결과 메일을 보내야하는 상황에 다다르는데..   이거, 한 사람 한 사람 메일을 다 따로 보내야 하는 건가?   하지만 개발자로서 그런 노가다를 하는 것은 용납할 수 없는 일. 결국 구글에서 제공하는 API를 발견해내고야 말았다. 링크를 들어가보면 메일 말고도 다양한 API를 제공하는 것을 볼 수 있다.   1. 구글폼 상단의 를 클릭하면 응답을 스프레드시트로 확인할 수 있다.   2. 스프레드시트 메뉴의 를 클릭하자.   3. 코드를 작성하자! 이제 상단의 Run만 누르면 메일이 발송되는데, 정말 배포도 아닌 코드 실행이 이렇게 긴장되는 건 처음이었다. 이렇게 많은 수의 사람들에게 동시에 메일을 보내는 것도 처음인데다, 누군가에게는 불합격 소식을 전할 수밖에 없었기에 너무 죄송스러운 마음이 들기도 했다.   여튼 무사히 한 고비를 넘겼고, 이제 시작인 우리 S…

지난 글에서 에 대해 알아보았다. 어떤 독자는 해당 글을 읽으면서 한 궁금증이 떠올랐을지도 모른다. ‘왜 은 타이머 주기를 보장하지 않는 거지?’ 이를 알기 위해서는 이벤트 루프에 대해 알아야 하는데, 우선 자바스크립트가 어떻게 동작하는지부터 알아보자.   자바스크립트의 동작 자바스크립트 엔진은 하나의 콜 스택을 가지는 싱글 스레드 모델로 동작한다. 하지만 현실에서 자바스크립트는 웹 브라우저나 노드js와 같은 멀티스레드 환경에 임베디드되어 실행되기 때문에 자바스크립트와 웹api, 이벤트 루프 등을 분리하여 말하기는 어렵다. 따라서 자바스크립트를 작동시킬 때는 싱글 스레드와 멀티 스레드의 타이밍이 따로 존재한다고 말할 수 있다. 일반적으로 프로그램은 코드를 위에서 아래로 순차적으로 실행하지만, 이벤트 루프를 통해 이벤트가 발생할 때마다 해당 이벤트에 대한 작업을 처리할 수 있다. 이를 통해 비동기 작업을 효율적으로 처리할 수 있고, 블로킹되는 작업 없이 다른 작업을 계속 수행할 수…

과 이 정확한 타이머 주기를 보장하지 않는다는 사실, 알고 계신가? 과 이 불필요한 리소스를 소비할 가능성이 있다는 사실, 알고 계신가? 과 이 비동기적으로 작업을 비동기적으로 예약한다는 사실, 알고 계신가?     requestAnimationFrame이란? 은 브라우저에서 제공하는 메서드로, 애니메이션과 그 외의 반복 작업을 수행하기 위해 사용된다. 이 메서드는 브라우저의 리페인트 주기에 맞게 콜백 함수를 실행하도록 예약한다. 콜백 함수는 화면이 갱신되기 전에 실행되므로, 부드럽고 성능이 좋은 애니메이션 효과를 구현할 수 있다.   requestAnimationFrame을 사용해보자! 을 호출할 때, 실행하고자 하는 콜백 함수를 전달한다. 이 콜백 함수는 브라우저에서 리페인트 주기에 따라 호출된다. 콜백 함수는 브라우저에 의해 전달되는 단일 인수로 실행된다. 이 인수는 형식으로 제공되며, 애니메이션 시작 이후 경과한 시간을 나타낸다. 이 값을 활용하여 애니메이션을 제어할 수…

개인적으로 보통은 styled-components나 emotion을 사용한 CSS-in-JS 기법을 많이 쓰는데, 이번 글에서는 생략하도록 하겠다.   외부 CSS 프레임워크를 쓰는 우리 팀. 하지만 CSS 프레임워크 하나로 모든 게 뚝딱 완성될 리는 없었다. 어쨌거나 CSS 커스터마이징이 필요했는데… 🙋 “inline으로 커스텀할까요? 아니면 className을 추가할까요?”   Inline Style을 지양하자 위와 같이, 인라인 스타일은 HTML 요소의 style 속성을 사용하여 직접 스타일을 적용하는 방법이다. 인라인 스타일을 사용하면 간단하고 빠르게 스타일을 적용할 수 있다. HTML 요소에 직접 스타일을 작성하므로 별도의 CSS 파일을 만들 필요도 없다. 하지만 편리함이 있기에 단점도 있는 법. 인라인 스타일의 단점을 살펴보자. 코드의 재사용성이 떨어진다. 인라인 스타일은 요소마다 개별적으로 작성되기 때문에 스타일을 재사용하기가 어렵다. 유지보수가 어렵다. 스타일을 인…

문득 개발을 하면서 라우팅을 하다가 궁금증이 떠올랐다. ‘왜 우리는 URL에 케밥 케이스를 사용하고 있지?’ 뇌 빼놓고 코딩하는 습관을 고치기 위해, URL 컨벤션에 대해 한 번 찾아보았다!   URL에서 케밥 케이스를 사용하는 이유 가독성과 사용자 친화성 URL은 사용자에게 직접 노출되는 요소다. 따라서 가독성이 좋고 사용자가 이해하기 쉬운 URL을 제공하는 것이 중요한데, 특히 케밥 케이스가 단어 사이에 대시를 사용하여 각 단어를 명확하게 구분해주기 때문에 가독성이 좋다. 특수 문자 제한 URL은 특수 문자를 제한하는 경우가 많다. 공백이나 다른 특수 문자를 URL에 직접 사용할 수 없기 때문에, 단어를 구분하는 데에는 특수 문자를 사용할 수 있는 유일한 방법은 대시(-)다. 케밥 케이스는 단어 사이에 대시를 사용하여 단어를 분리하므로, URL의 구조를 깨지 않고 유효한 문자만 사용하여 URL을 작성할 수 있다. 검색 엔진 최적화(SEO) URL은 검색 엔진 최적화에 영향을 …

삐까뻔쩍 나도 한번 잘살아보자🎵 웹사이트를 만들다 보면 피할 수 없는 그것… 바로 모달 창 만들기..! 드롭다운이 아닌 일반적인 모달의 경우 화면 전체를 채우게끔 구현을 해야 하는데, 이 때 사용할 수 있는 몇 가지 팁을 정리해보려 한다. 현재 내 블로그에 있는 컴포넌트를 예시로 들어보도록 하겠다.   일단은 모달을 만들어보자 버튼을 클릭하면, 다음 사진처럼 모달이 열리게 된다. 자.. 그렇다면 닫히는 건 어떻게 해야 할까? 보통 모달은 모달 바깥을 클릭하면 닫히곤 한다.   모달 밖을 클릭하면 모달이 닫히게 하고 싶어! 여기에는 두 가지 방법이 있다. 1. ref 사용하기 ref를 사용해서 클릭 이벤트가 컴포넌트 내부에서 발생한 것이 아니라면 close를 해주는 방법이다.   2. Wrapper를 추가하기 모달을 감싸면서 화면 전체를 덮는 Wrapper를 추가하여 onClick 이벤트를 걸어주는 방법이다. 나는 어차피 모달 뒤에 배경을 넣어주고 싶었기에 Wrapper(Mod…

hosts 파일이란? hosts 파일은 운영체제가 호스트 이름을 IP 주소에 매핑할 때 사용하는 파일이다. 우리가 주소창에 url을 입력하면 DNS를 통해서 해당 도메인의 실제 IP 주소로 접속하게 되는데, 이 때 DNS를 통하지 않고 원하는 IP 주소로 접속하고자 할 때 hosts 파일을 수정하는 방법을 이용할 수 있다. 개발을 하다보면 로컬 환경에서 도메인 테스트를 해야 하는 경우가 생긴다. 이 때 원하는 도메인을 로컬 IP 주소를 바라보게끔 hosts를 수정할 수 있다.   sudo vi /etc/hosts vscode를 사용한다면 를 입력해도 된다. 터미널에서 위 명령어를 입력하고 비밀번호를 입력하자. 그러면 아래와 같은 파일이 뜰 것이다. 나는 이미 수정된 내용이 있다. 입력 hosts 파일 수정 입력 (저장 후 종료) 입력   요즘은 이런 거 해주는 앱도 있더라 Gasmask와 같은 앱을 사용하는 것도 좋은 방법이다. 기존 hosts 파일을 직접 건드리지 않고 …

제목을 ‘form생form사’로 하고 싶었으나 처참히 실패 폼과 관련된 서버 통신 작업을 할 때, 보통은 이미지를 업로드하는 api와 폼데이터를 전송하는 api를 함께 사용해 서버로 데이터를 전송하곤 했다. 그러던 어느 날, 파일은 파일대로 json data는 json 대로 넣어서 하나의 api를 사용해 같이 전송해달라는 서버 개발자의 요청을 받게 되었는데…   FormData란? FormData는 HTML 폼 데이터로, 폼을 쉽게 보내도록 도와주는 객체다. 네트워크 메서드의 바디에 FormData 객체를 넣으면, HTTP 메시지는 인코딩되고 속성은 로 지정된 후 전송된다.   어떻게 동시에, 따로 보내야 하지? 그냥 다짜고짜 파일과 함께 보냈더니, 에러가 발생했다. 그래서 file은 multipart/form-data, 그 외의 데이터는 application/json 형식으로 따로 보내기 위해 Blob을 사용해주었다. Blob(Binary Large Object)은 이미지,…

CORS 에러는 터지는데.. 아무힘이 없는 프론트 개발자가 과연 무얼 할 수 있을까?   CORS란? CORS (Cross-Origin Resource Sharing)는 웹 어플리케이션에서 다른 도메인의 리소스에 접근할 때 발생하는 보안 이슈를 해결하기 위한 표준 방법이다. CORS는 브라우저 단에서 작동하며, 웹 서버가 특정한 HTTP 헤더를 반환함으로써 웹 브라우저가 자원에 대한 권한을 부여하도록 한다. 이 헤더는 서버에게 특정한 도메인, 프로토콜, 포트에서만 요청을 허용하도록 지시할 수 있다. CORS는 웹 어플리케이션에서 다른 도메인으로부터 리소스를 요청하는 데에 있어서 발생하는 보안 문제를 해결한다. 이전에는 같은 도메인에서만 요청할 수 있었기 때문에, 다른 도메인으로 요청을 보내는 경우 보안 문제가 발생할 수 있었다. 그러나 CORS를 사용하면 다른 도메인에서도 자원에 접근할 수 있다. CORS는 다음과 같은 방법으로 작동한다. 브라우저는 HTTP 요청을 보낸다. 서버…

JSX란? React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 마크업과 로직을 모두 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. JSX도 결국엔 표현식입니다. 컴파일이 끝나면, JSX는 JavaScript 객체로 인식됩니다. 이전 글에서, 우리는 마크업과 해당 엘리먼트 내의 로직을 따로 분리하여 코드를 작성했었습니다. JSX를 구현하여 이를 함께 포함할 수 있도록 해봅시다! JSX를 구현한 후, 우리는 컴포넌트 내 렌더함수에서 다음과 같은 형태로 컴포넌트를 작성하게 될 것입니다. 위의 구조가 동작될 수 있게끔 JSX를 구현해보도록 하겠습니다. (Header의 props로는 스트링 타입의 와 함수 타입의 를 전달해주도록 하겠습니다.)   1. jsx 함수 기본 구조 우선 jsx 함수는 스트링 배열과 ${}에 포함된 아규먼트를 받아서, 공정을 거쳐 최종적으로 엘리먼트를 반환하게 됩니다. 초기 template은 div 엘리…

컴포넌트와 라우터가 만들어졌으니, 한번 애플리케이션을 띄워봅시다!   src/index.ts   src/pages/Main.ts   src/pages/Sub.ts   src/components/Header.ts state와 props가 잘 동작하는지도 확인해보기 위한 코드도 함께 넣어주었습니다. 한 번 실행시켜 볼까요? 1. BrowserRouter의 경우 2. HashRouter의 경우 HashRouter의 경우 BrowserRouter와 다르게 이 들어가있는 것을 볼 수 있습니다. 두 경우 모두 state와 props가 잘 보여지고 있네요! 지금은 메서드로 string을 반환하여 UI를 그리고 있는데요, 때문에 클릭같은 이벤트도 메서드 내부에서 등록해주고 있는 것을 볼 수 있습니다. 다음 글에서는 jsx를 구현하여 더욱 효율적으로 엘리먼트를 그릴 수 있도록 해봅시다. src/index.ts src/pages/Main.ts src/pages/Sub.ts src/co…

이번 글에서는 BrowserRouter를 구현해보도록 하겠습니다.   1. Route 타입 정의 이는 HashRouter와 동일합니다.   2. Router 구조 라우터 구조 또한 HashRouter의 경우와 똑같이 잡아주도록 하겠습니다. 다만 이번에는 가 아닌 로 네이밍해주었습니다.   3. Class 초기화 당연히 생상자 내부 코드도 동일하겠죠? 최상단 엘리먼트 객체, fallback url, 라우트들을 초기화해주고, 를 실행합니다.   4. hash가 변경될 때의 이벤트 처리 이제부터 HashRouter와 다른 로직이 등장하게 됩니다. HashRouter의 경우 Hash가 변경될 때 이벤트 처리를 해주었지만, BrowserRouter의 경우 history API를 사용합니다. 에서 window 객체의 이벤트 리스너에 핸들러를 등록해줍시다. 여기서 의문이 들 수 있습니다. document 객체의 이벤트 리스너에 라는 이벤트가 있었나? 싶을 텐데요. 맞습니다. document 객…

라우터를 구현하는 대표적인 방법에는 두 가지가 있습니다. 바로 BrowserRouter와 HashRouter인데요, 이 둘의 차이에 대해 잘 모르신다면 아래의 글을 먼저 읽어주세요! [BrowserRouter와 HashRouter, 뭐가 다를까? (feat. React Router)] HashRouter와 BrowserRouter를 모두 구현해 볼 텐데요, 이번 글에서는 HashRouter에 대해 먼저 다루어보도록 하겠습니다.   1. Route 타입 정의 라우트는 path와 해당 path에 해당하는 컴포넌트를 가지는 객체입니다.   2. Router 구조 SPA의 최상단 엘리먼트 객체와 정의된 라우트들을 필수적으로 받게 됩니다. 그리고 이벤트와 라우트를 다루는 여러 메서드를 통해 라우팅을 하게 됩니다.   3. Class 초기화 우선, 라우터 객체가 인스턴스화될 때의 설정을 생성자에서 해주어야겠죠. 최상단 엘리먼트 객체, fallback url, 라우트들을 초기화해주고, 를 실행…

CRA로 리액트 프로젝트를 생성하면, 기본적으로 react-router-dom을 사용하게 됩니다. 이 react-router-dom은 두 가지 라우터를 제공합니다. 바로 BrowserRouter와 HashRouter죠. 이 두 개념은 react-router-dom에만 해당되는 이야기는 아닙니다. BrowserRouter는 HTML5의 history API를 사용한 방식이고, HashRouter는 URL의 hash를 사용한 방식입니다. 리액트를 사용하지 않고 직접 라우터를 직접 구현한다 하더라도, 우리는 이 방식 중 하나를 선택할 수 있습니다.   react-router 우선은 리액트 라우터에 대해 잠깐 살펴봅시다. SPA가 등장하기 전에는 어떻게 페이지를 이동시켰을까요? 를 사용해서 직접 url을 변경시켰습니다. 하지만 이렇게 하면 모든 페이지를 reload하게 되므로 속도가 느려질 수밖에 없습니다. 리액트에서는 SPA라는 특성을 활용하여 라우터를 이용하여 변경된 소스만 바뀌도록 …

리액트 컴포넌트와 유사한 구조를 class로 만들어 봅시다!   1. Component 구조 target으로는 해당 컴포넌트가 들어갈 Element를 받게 됩니다. 컴포넌트는 부모로부터 받은 props와 스스로 관리하는 state를 가집니다. 컴포넌트 생명주기와 관련된 메서드, 첫 렌더링과 이후 상태가 변경되었을 때의 리렌더링을 위한 메서드, 상태 업데이트와 이벤트 등록과 관련된 메서드를 적어주었습니다. template 메서드에서는 실제 엘리먼트를 그리게 됩니다. 기본값으로는 빈 스트링을 반환하도록 해주었습니다.   2. Class 초기화 우선, 컴포넌트 객체가 인스턴스화될 때의 설정을 생성자에서 해주어야겠죠. 컴포넌트가 들어갈 Element를 받아 등록하고, props도 받아서 등록해줍니다. state는 빈 객체를 할당합니다. setup 메서드에서는 state 초깃값 선언, api 호출 등 컴포넌트가 렌더링되기 전에 일어나야 할 일들을 처리하는 용도입니다. 그 후 컴포넌트를 마…

별도의 SPA 라이브러리 없이 Single page application을 만들어봅시다! 언어는 타입스크립트, 번들러는 웹팩을 사용하도록 하겠습니다. html과 css 웹팩 플러그인도 함께 설치하고, 바벨 트랜스파일러도 설치합시다. 저는 sass를 사용하기 위한 추가적인 설치를 함께 해주었습니다. devDependencies @babel/cli @babel/core @babel/preset-env @babel/preset-typescript babel-loader css-loader html-loader html-webpack-plugin mini-css-extract-plugin sass sass-loader ts-loader typescript webpack webpack-cli webpack-dev-server   1. webpack.config.js   2. tsconfig.json 절대 경로를 alias를 따로 설정해주었습니다.   3. .babelrc   4. index…

DOM이란? DOM(Document Object Model)이란, 웹 페이지를 이루는 태그들을 브라우저가 트리 구조로 만든 객체 모델입니다. HTML과 자바스크립트를 이어주는 역할로 볼 수 있습니다. 자바스크립트로는 Document라는 전역 객체를 통해 HTML 태그들을 조종할 수 있습니다. 기존의 웹 애플리케이션은 자바스크립트로 직접 DOM을 제어했습니다. 이렇게 돔을 직접 제어하는 방식이 아닌, 리얼 돔을 추상화한 자바스크립트 객체를 구성하여 사용하는 방식이 가상 돔의 개념입니다.   SPA의 등장 전통적인 웹 사이트는 인터렉션이 발생할 때마다 완전히 새로운 페이지를 서버에서 전송해 주었습니다. 그러나 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고, 매번 새로운 페이지를 전달하는 게 점점 버거워지게 되었습니다. 또한 기존의 웹 애플리케이션은 돔 전체를 직접 접근하여 조작해서 브라우저에 화면을 나타내는 방식이었고, 웹 어플리케이션의 규모가 커질수록…

렌더링이란? HTML, CSS, JS 문서가 브라우저에 출력되는 과정을 말합니다. 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있는데, 크롬은 블링크(Blink), 사파리는 웹킷(Webkit), 파이어폭스는 게코(Gecko)라는 렌더링 엔진을 사용합니다. 렌더링 순서는 다음과 같습니다. HTML 파일과 CSS 파일을 파싱해서 각각 Dom Tree와 CSSOM Tree를 만든다. (Parsing) 두 Tree를 결합하여 Render Tree를 만든다. (Style) Render Tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다. (Paint) 레이어를 합성하여 실제 화면에 나타낸다. (Composite)   1. Parsing 파싱 우선 HTML을 파싱하여 DOM(Documnet Object Model) Tree를 만들게 됩니다. 파싱 도중 CSS를 만나면 파싱하여 CSSOM(CSS O…

1. 기본 맥북 세팅 세 손가락 드래그 애플리케이션 창을 움직여 이동시키거나, 문서 내 글을 드래그할 때 클릭으로 하면 불편함이 많죠. 이걸 굳이 클릭해서 끌지 않아도, 간편하게 터치 & 드래그로 할 수 있는 방법이 있습니다. 시스템 환경설정 > 손쉬운 사용 > 포인터 제어기 > 트랙패드 옵션으로 들어가면 드래그 활성화 옵션이 있는데, 세 손가락으로 드래그하기로 설정해주면 됩니다. 저는 세 손가락으로 드래그 활성화를 하고, 페이지를 쓸어 넘기거나 Mission Control을 사용할 경우 네 손가락을 씁니다. 앱 expose 시스템 환경설정 > 트랙패드로 들어가면 앱 Expose를 켤 수 있습니다. 현재 포커스 된 탭과 동일한 애플리케이션 내의 탭들만 노출시키는 기능으로, 큰 기능은 아니지만 유용합니다.   2. 설치할 앱 이건 지극히 프론트를 하는 제 주관적인 의견입니다 크롬, 카카오톡, 노션, VScode, Zoom, Slack, Figma, Typora, iTerm2, Git…