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