카테고리
2024 FeConf 후기
2024 FeConf 는 세종대 광개토관에서 개최되었습니다. 어린이 대공원역에서 도보로 10분정도 걸린듯합니다. 예약자 이름만 말하면 바로 체크인을 해주셔서 쉽게 체크인을 했습니다. 저는 회사 동료의 취소표로 간거라서 혹시 절차가 까다롭지 않을까 걱정했는데 괜한 걱정이
[React] ReactQuery 의 staleTime, cacheTime
stale 은 곰팡이가 피고, 상했다는 뜻이다. useQuery 로 가져온 데이터가 얼마 뒤에 상할지가 staleTime 이다. 상한 데이터는 어떻게해야할까? 상한 데이터는 버리고, 서버에서 다시 신선한 데이터를 가지고 와야하겠지. (참고) ReactQuery v5 부
[React] Suspense 의 원리 및 사용법
1. Suspense 란? React 의 는 비동기 처리 상태를 나타내기 위해 사용되는 컴포넌트이다.props 는 fallback, children 을 갖는다. 비동기가 진행중일때는 fallback 을 보여주고, 비동기가 완료되면 children 을 보여준다. 2. S
[Rust] Enum 사용방법 (초급)
1. 타입스크립트의 Enum 러스트의 Enum 과 타입스크립트의 Enum 에 대해서 비교해서 설명을 해보자면,타입스크립트의 Enum 은 Tree-Shaking 이 안돼고, 코드를 빌드할때 추가적인 자바스크립트 코드를 생성해 성능상으로도 안좋습니다. 하지만 러스트의 En
[Rust] Iterator 사용법 [iter, map, collect]
Rust 에서 iter() 와 map(), collect() 같은 함수들은 타입스크립트와 비슷하면서도 다릅니다.이 함수들이 러스트의 소유권과 어떤 관계가 있는지 살펴보고 어떻게 동작하는지 익혀보겠습니다. iter() iter() 메서드는 vec 를 Iterator<
[Utility] CJS 와 ESM 에 대해서 알아보자 (CommonJS, ESModule)
Node.js 에는 두 가지 모듈시스템이 있습니다. CommonJS 와 ESM 이죠. 이 두 시스템에 대해서 알아보겠습니다. 1. CommonJS 와 EcmaScript Module 은 뭘까? 1-1. CommonJS (CJS) CommonJs 는 Node.js 의
[Javascript] Date 객체의 모든 것을 알아보자
Javascript Date Date 는 날짜, 시간 관련 기능을 가지고 있는 자바스크립트 내장 클래스입니다. Date 함수에 대해서 알아보기 전에 더 깊은 이해를 위해서 시간과 날짜에 대한 기본적인 내용을 먼저 알아보겠습니다. 1. 세계 표준시간 1-1. UTC, G
[React] 모바일 드래그 앤 드랍 구현하기
0. 들어가면서 모바일에서 Drag and Drop(DnD) 기능을 구현하면서 만난 문제와 해결하는 과정을 정리하였습니다. 1. Drag and Drop 드래그 앤 드랍의 이해를 돕기 위해 용어 정리, 기본적인 기능 순서로 살펴보겠습니다. 1.1. 용어 정리 DnD
[CSS] tailwind theme 커스터마이징 방법
1. tailwind 테마 Theme Configuration - Tailwind CSS 1-1. 테마 확장법 theme 속성은 가장 기본적인 props 이다. 기본 테마 는 정해져 있으며 기본 테마를 변경하거나 확장할 수 있다. 테마를 확장하는 방법은 extends
[Rust] fs, File 로 파일 조작하기
1. Rust 에서 fs, File 사용하기 1-1. 파일 생성 1-1-1. 파일생성하기 파일 생성 관련 동작은 fs::File 에 정의 되어 있다. use std::fs::{File}; let result = File::create("bg_test"); matc
[Rust] Path, PathBuf 제대로 짚고 넘어가기
1. PathBuf, Path 사용하기 PathBuf 와 Path 는 String 과 &str 관계와 유사합니다. PathBuf 는 경로 인스턴스를 소유하고 있고, Path 는 인스턴스의 레퍼런스를 가리킵니다. 또한 동작이나 매서드 자체도 String, &str 와 유
[Rust] 맥, 윈도우의 환경변수 가져오기
맥, 윈도우 환경 변수 가져오기 use std::env; let result = env::var("HOME"); if let Ok(value) = result { println!("{}", value); } std::env 의 정적 메서드인 var 를 사용
[Rust] if let 패턴매칭
if let 패턴매칭 을 사용하면 러스트에서 Option, Result 같은 타입의 분기처리를 간편하게 할 수 있습니다. match 패턴매칭과는 다르게 if let 패턴매칭은 모든 분기가 철저하게 핸들링 되는것을 보장하지 않습니다. // 1. match 를 사용했
[Rust] Deref Trait 과 deref coercion
Deref Trait 의 역할 Deref Trait 을 구현하면 참조 및 역참조를 커스텀 할 수 있습니다. 그래서 Deref Trait 은 보통 스마트 포인터를 구현할 때 사용합니다. Deref Trait 은 std::ops::Deref 에서 import 할 수 있
[CSS] flex 박스 안에서 text-overflow: ellipsis 적용하기
flex 박스안에 존재하는 text 에 ellipsis 적용하기 한줄로 줄이는 방법 .one_line { overflow: hidden; // 박스에서 넘치는 텍스트를 숨긴다. white-space: nowrap; // 줄바꿈이 없어진다. text-overf
[Utility] vercel 호스팅 nextjs ssr 에서 서버 응답 속도가 느린 문제 [진행중...]
왜이렇게 느리지?? 내 블로그는 1가지 고질적인 문제가 있었는데 블로그에 처음 접속할때 속도가 너무 느리다는 것이였다. 체감상 3초~5초 정도 걸리는데 이건 사실 말이 안되는 수치이다. 네트워크 요청을 보면 자바스크립트 번들 크기도 엄청 작고 뭐 별로 불러오고 있는것
[Utility] framer-motion 의 delay 사용법 [A부터 Z까지]
framer-motion 에서 delay 사용방법 transition 에서 delay 를 사용하면 애니메이션이 시작하는 타이밍을 늦출 수 있다. 즉 delay 는 애니메이션을 특정 시간만큼 지연시킨다. 주로 여러 요소에서 애니메이션을 순서대로 실행 시킬 때 delay
[Utility] framer-motion Reorder 에서 Item 의 크기가 바뀔때 애니메이션이 발생하는 버그
framer-motion 의 reorder 와 drag and drop 을 활용해 드래그로 순서를 변경할 수 있는 리스트를 만들었다. 각 리스트는 input 태그로 되어있어서 값을 입력할 수 있다. 텍스트의 길이가 늘어나면 input 의 height 도 증가하고 hei
[Utility] vercel+가비아 도메인 구매후 연동하기 A-Z 까지 모든 것!
1. 도메인 구매 가비아 에 접속해서 원하는 도메인을 구매한다. 구매 단계에서 네임서버는 가비아 네임서버를 그냥 써도 되지만 나는 vercel 로 배포할꺼라서 vercel 네임서버를 써봤다. 타사네임서버 사용을 선택한다음 아래와 같이 vercel dns 의 주소를 입
[Utility] gritql 를 사용해 90,000줄 코드 리펙토링하기
gritql 은 선언적 쿼리 언어이다. 코드에서 쿼리에 매칭되는 부분을 찾아내거나 변경할 수 있어 리펙토링할때 사용한다. gritql 이 좋은 이유는 Rust 로 작성되어 매우 빠르며, AST 와 Rust 를 gritql 문법으로 추상화했기 때문에 Rust 와 AST 를 몰라도 사용할 수 있다.
러스트
as_str() 메서드를 사용했을때 소유권이 이동하지 않는 이유 러스트에서 String 변수를 &str (String Slice 라고 부름) 타입의 변수로 사용할때 as_str() 메서드를 사용한다. 이때 소유권이 이동하지 않는 이유에 대해 알아보자. let s: St