post-thumbnail

Webpack 마이그레이션(v4 → v5)

왜 webpack을 유지하고 버전을 업그레이드했을까Webpack은 2023년 기준으로 vite, rollup 등에 자리를 내어주고 있지만 여전히 번들러로서 1순위를 지키고 있다. 필자의 경험에 비추어볼 때 webpack은 비교적 hot-reload 속도가 느리고, co

2023년 5월 19일
·
0개의 댓글
·
post-thumbnail

플레이어블 광고 만들기(feat. Phaser.js with Applovin)

플레이어블 광고는 앱을 설치하기 전에 해당 게임을 경험해볼 수 있도록 기회를 제공하는 광고이다. 일반적인 광고와 다르게 유저의 인터렉션을 통해 광고가 진행되는 것이 특징이며 빠른 시간 내에 게임의 핵심 내용을 담아내야한다.

2023년 5월 17일
·
2개의 댓글
·
post-thumbnail

Phaser.js: JavaScript 기반 게임 개발 프레임워크

초기 JavaScript는 웹브라우저에 인터렉티브 요소를 추가하기 위해 개발된 경량의 스크립팅 언어였습니다. 그러나 현재는 서버, 모바일, 게임 등의 개발에도 사용되며 그 위상을 넓히고 있습니다. 예를 들어 “뱀파이어 서바이벌”이라는 1인 개발게임은 일반적인 게임 개발

2023년 5월 7일
·
0개의 댓글
·
post-thumbnail

모노레포 구축기 (feat. npm workspace)

274개의 댓글을 거쳐 1시간 반만에 배포한 모노레포 이야기

2023년 4월 18일
·
5개의 댓글
·
post-thumbnail

Notion으로 좀 더 빠른 정적 웹사이트 만들기

Notion은 유저들이 권한에 따라 쉽게 실시간 편집을 할 수 있도록 구현하기 위해 fine-grained access control 방식을 사용한다.

2023년 4월 12일
·
0개의 댓글
·
post-thumbnail

Typewriter 애니메이션 구현하기

ChatGPT의 등장에 그 놀라운 질의응답 기능 이외에도 관심을 끈 것이 있다면, 인터렉티브하게 답변을 눈앞에서 만들어낸다는 사실을 직관적으로 보여주는 typewriter 애니메이션이다.

2023년 4월 5일
·
6개의 댓글
·
post-thumbnail

SPA에서 filter, pagination 구현하기

많은 웹사이트들은 게시물이나 문제 등을 기준에 따라 필터링하고, 페이지를 넘기며 확인할 수 있도록 구현하고 있다. 예를 들어 아래와 같이 좌측에서는 “풀이 여부”, “카테고리” 등의 필터를 통해 문제를 검색하고, 하단에서는 페이지 번호를 통해 여러 페이지로 구성하는 흔

2023년 4월 5일
·
0개의 댓글
·
post-thumbnail

React Carousel 구현하기

react-material-ui-carousel 라이브러리에서 직접 구현한 carausel로 진화한 이야기

2023년 4월 5일
·
0개의 댓글
·
post-thumbnail

PCB와 Context Switching

PCB, Context Switching 정리 + 퀴즈

2023년 3월 26일
·
0개의 댓글
·
post-thumbnail

React Error Handling(feat. react-query, axios)

에러란 무엇인지 정의하고 프론트엔드 개발자가 해야할 일을 정리해보자.

2023년 3월 26일
·
2개의 댓글
·
post-thumbnail

Refresh 토큰은 정말 필요한가?

토큰 기반 인증에서 Refresh 토큰은 Access 토큰의 유효기간을 줄여 보안상 이점을 가져가려는 목적에서 도입된다. 하지만...

2023년 3월 24일
·
0개의 댓글
·
post-thumbnail

CPU Scheduling

CPU라는 한정적인 자원을 어떻게 하면 최대한 잘 쓸 수 있을까?

2023년 3월 19일
·
0개의 댓글
·
post-thumbnail

손쉽게 모노레포 사용하려면, Turborepo

단일 repository에 여러 서브 프로젝트가 존재하는 형태의 repository기존에 자주 사용되던 모놀리식 레포는 소스코드를 모듈화하지 않고 하나의 레포지토리에 모두 넣은 것으로 아래와 같은 특징을 가진다.장점모든 코드가 단일 버전코드 재사용 용이빌드, 배포 용이

2023년 3월 14일
·
0개의 댓글
·
post-thumbnail

HTTP 정리

브라우저와 서버가 통신하는 약속HTTP/0.9 - 90년단순한 문서 요청, 응답콘텐츠 형식은 HTML문서 뿐응답코드도 없다HTTP/1.0 - 96년현대의 HTTP 기본 기능 포함메서드 추가헤더 추가HTTP/1.1 - 97년TLS 암호화 통신(HTTPS)Keep-aliv

2023년 3월 12일
·
1개의 댓글
·
post-thumbnail

JavaScript Date API: 분석 및 대안 탐구

JavaScript의 Date는 왜 구릴까?

2023년 3월 12일
·
6개의 댓글
·

위상정렬

순서가 정해져있는 작업을 차례로 수행해야 할 때 그 순서를 결정해주기 위한 알고리즘순서가 있으므로 사이클이 존재하지 않는 방향 그래프(DAG, directed acyclic graph)로 구성할 수 있을 때 사용 가능하다.모든 노드를 순회하면서 각 노드의 간선을 순차적

2023년 3월 9일
·
0개의 댓글
·
post-thumbnail

CORS란?

CORS(Cross-Origin Resource Sharing)은 웹 브라우저에서 다른 출처의 자원에 접근할 수 있도록 해주는 보안 기술보안 상의 이유로 브라우저는 기본적으로 스크립트에서 다른 도메인의 자원에 접근하는 것을 제한한다. 이것은 웹 애플리케이션이 다른 도메

2023년 3월 5일
·
2개의 댓글
·
post-thumbnail

React에서 자료구조의 활용

리액트로 프로젝트를 진행하다 보면 Computer Science 시간에 배운 여러 자료구조를 잊어버릴때가 있다. 이에 리액트 사용 시 자료구조에 대한 깊은 학습이 필수적으로 수반되어야 하는지에 대한 논쟁은 개발자들 사이에서도 의견이 분분하다. React(javascri

2023년 2월 25일
·
0개의 댓글
·
post-thumbnail

SASS vs CSS-in-JS

HTML이 등장하고 3년 후인 1994년, 웹의 디자인에 대한 요구를 해결하기위해 CSS가 등장했다. 이후 웹이 복잡해지고 인터렉션 등이 발전하며 여러 웹 구성 방식이 등장했고 그 과정에서 CSS는 크게 CSS-in-CSS(CSS 모듈, CSS 전처리기 등)와 CSS-

2023년 2월 12일
·
0개의 댓글
·
post-thumbnail

삶의 지도

도저히 이유는 생각나지 않지만 나는 프로그래머라는 직업에 꽂혀 컴퓨터 동아리 차장까지 맡고 있었다.

2023년 1월 15일
·
1개의 댓글
·