Pozafly's 블로그 - mysetting

3:09 3/20

pozafly.github.io

mobile screenshot relative

3:09

pozafly.github.io

mobile screenshot

Pozafly's 블로그
https://pozafly.github.io

pozafly의 기술 블로그

저작도구: GatsbyJS

최종 피드 수집: 2024-04-13 00:15

전체 (62)

29d

Cloudflare로 배포하는 슬랙 랜덤 추첨기 앱 만들기

팀에서 달에 한 번 오후 4시부터 팀별 활동을 할 수 있는 시간을 가지고 있다. 그 때마다 팀원 중 한 명을 뽑아 어떤 활동을 할지 정해야 한다. 그 한 명을 뽑는 날이 오면 당첨자 추첨 웹사이트를 찾고, 일일이 이름을 기재하고

000

2M

Vite에서 import.meta는 왜 사용하는 걸까? (feat. HMR)

회사에서 vue-cli로 만들어진 프로젝트를 Vite로 마이그레이션을 진행 중이다. vue-cli는 2년 전부터 maintenance mode(deprecated)에 들어갔고, webpack을 기반으로 만들어졌기 때문에 번들링 및

000

6M

모던 CSS 적용 방법 둘러보기(CSS-in-JS with zero-runtime)

모던 웹 개발 생태계에서 CSS를 제작할 수 있는 다양한 방법이 있다. JavaScript 웹 프레임워크 분야는 거의 React가 대부분을 차지하고 있다. CSS 프레임워크(혹은 라이브러리)도 React의 영향 때문인지, 프로덕션

000

7M

ESLint로 import 구문에 규칙 넣기

프로젝트를 진행하다 보면 하나의 파일에 import 대상이 많아질 때가 있다. import 문이 많으면 어떤 모듈이 import 되었는지 파악하기가 쉽지 않고 지저분해 보인다.

위의 이미지는 Next.j

002

7M

GitHub Actions 캐시 조금 더 다뤄보기 (feat. restore-keys)

컴퓨터는 캐시를 활용해 가까운 곳에서 데이터를 전달받거나, 이미 생산된 데이터를 만들기 위해 똑같은 작업을 반복하지 않아도 만들어둔 데이터를 캐시에서 꺼내 쓸 수 있다. 캐시에 저장된 데이터를 사용해 반복 작업으로부터 벗어나면 그

000

8M

Next.js의 API Routes 코드 모듈화에 대해서

메타 프레임워크
Next.js는 react의 메타 프레임워크다. 메타 프레임워크는 프레임워크의 프레임워크라고도 말할 수 있는데, 프레임워크를 사용하기 위해 기본적으로 세팅해야 하는 환경이나, 필요한 기능을 추상화 한 코드 모듈을

000

8M

글또 8기 회고

퇴사를 하면서 함께 일했던 분이 글또라는 모임을 추천해주셨다. 글또는 글 쓰는 개발자 모임이자 커뮤티니다.
글또에 참여하게 되면 예치금을 미리 내고, 2주에 한 번 글을 작성해 제출하지 못하면 예치금이 깎이는 형식이다. 예치금을

000

9M

React Query에서 mutation 이후 데이터를 업데이트하는 4가지 방법

React Query는 데이터 fetching 라이브러리로 소개되지만, 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게할 수 있는 라이브러리다. 즉, React Query를 사용하더라도 실제 API 요청을 보내는 것은 Ax

002

10M

코로나 걸려서 적어보는 한영타변환기 Alfred Workflow 개발기

코로나가 이제 종식 선언을 했다고 하는데.. 코로나에 걸렸다. 집중도 안되고, 각잡고 뭔가 하기에는 도저히 머리가 돌지 않았다. 그래서 그냥 예전에 만들어둔 Alfred Workflow를 공유해볼까 한다. 따라서 각잡고 문서의 구

000

10M

React 렌더링과정으로 알아보는 선언적이라는 의미

라이브러리와 프레임워크
“The library for web and native user interfaces” (웹 및 네이티브 사용자 인터페이스용 라이브러리)
새로 개편된 React 공식 홈페이지에 있는 문구이다. 개편 되기 전

004

10M

React는 Hooks를 배열로 관리하고 있다

React는 Hooks을 배열(Linked List)로 관리하고 있다. 이는 Hooks를 관리하고 있는 배열에 index로 접근할 수 있다는 뜻이며, 이는 호출 순서에 의존하고 있다는 뜻이다. (아래에서 예시로 든 코드는 보기 쉽

000

11M

왜 TypeScript는 void 타입을 사용해도 값을 return 할 수 있을까?

void의 기본 선언 방식
void는 TypeScript에서 흔하게 사용하거나 추론되는 타입이다. 주로, 함수에서 return이 없을 경우 return 타입으로 void를 사용한다.
void는 값을 반환하지 않는 함수의 반환 값을

000

11M

TypeScript의 기본개념과 환경설정

TypeScript를 사용해 개발 하는 단계는 크게 3가지로 나눌 수 있다.
Lint stage
Compile stage
Runtime stage
Lint stage는 개발자가 코드를 작성하는 시점이다. Compile은 코드를 모

000

11M

JavaScript MVC 패턴으로 만드는 SPA

모던 JavaScript 프레임워크는 여러 패턴을 따른다. MVVM 패턴, Flux 패턴, Component 패턴 등. 다양한 문제를 해결하기 위해 다양한 패턴이 생겨났다. 이번에는 예전부터 사용되어온 MVC 패턴을 JavaScr

000

1y

Webpack5 JavaScript 보일러플레이트 만들기

예전에 간단한 JavaScript를 사용해 페이지를 만들어볼 목적으로 webpack 기반 보일러플레이트를 만든 적이 있다. 유용하게 잘 써먹었지만, webpack을 처음부터 하나 하나 뜯어보며 설정했던 것은 아니다.
사실 요즘은

000

1y

노드 버전 매니저 툴 비교기(nvm & fnm & Volta)

nvm & fnm & Volta
모두 Node.js의 버전을 관리하는 툴이다. 가장 먼저 nvm을 시작으로 Node.js 버전을 관리하다 fnm을 알게되었고, 추가로 Volta를 알게되어 세가지 툴의 속도 및 방식에 대해서 간략하

001

1y

다시 보기 위해 적어두는 URI 구조

프론트엔드 개발자로 일하면서 다양한 네트워크 용어중 주소에 대한 용어가 항상 헷갈렸다. 하나의 주소 안에도 여러가지 용어가 나온다. Host, Domain, Site, Origin 등이 그것이다. 이전에 토이 프로젝트를 호스팅하기

004

1y

React의 클래스형, 함수형 컴포넌트 차이

react의 class, function 컴포넌트 차이
Class 컴포넌트
Class 컴포넌트로 Counter를 만들어보자.
import { Component } from 'react';
export default class My

000

1y

객체지향 프로그래밍으로 알아보는 prototype

객체지향 프로그래밍
객체 지향 프로그래밍(Object-Oriented Programming, OOP)이란 무엇일까?
객체 지향 프로그래밍은 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 ‘객

000

1y

Event Loop와 비동기

요약
JavaScript는 싱글 스레드 언어이다. 하지만 멀티 스레드 처럼 동작하는데 이는 Event Loop 때문이다.
Event Loop는 JavaScript Runtime Environment에 있으며 Web API와 Cal

000