Arch-Spatula의 개발 레시피

nuxtContent로 블로그 마이그레션
2024-09-20
- #nuxt
- #nuxtContent
- #blog
nuxtContent로 블로그를 다시 만드는 과정
vercel에 storybook을 배포하기
2024-02-29
vercel에 storybook을 배포
neovim의 발을 들이면서...
2024-02-14
- #vim
- #neovim
neovim을 설정하는 과정
안전한 개발환경을 만들어보자
2024-01-31
- #docker
- #보안
- #npm
- #pip
개발환경의 보안을 신경써봅시다.
자바스크립트 Task Queue 블러킹 풀기
2023-12-01
- #Task Queue
- #자바스크립트
46주차
vitest로 통신 mocking하기
2023-11-11
vitest로 통신 mocking하기
go 언어로 TIL-CLI 만들기
2023-10-14
- #TIL
- #CLI
- #Go
- #golang
go 언어로 TIL-CLI 만들기
bun 1.0 출시
2023-09-17
bun 1.0이 출시
마크다운으로 만드는 PPT
2023-09-11
- #Markdown
- #PPT
마크다운으로 만드는 PPT
이제는 TypeScript 시대에서 JSDoc 시대로...
2023-09-10
- #테크 트렌드 줍줍
- #type gymnastics
36주차
API 통신과 token mocking
2023-09-01
- #testing
- #API
- #mocking
- #token
API 통신에 대해서 token 로직을 포함해 mocking함
MSW 번들 사이즈 2배 이벤트
2023-07-31
- #error log
- #vite
- #IIFE
- #msw
MSW 설정하면서 번들사이즈가 2배가 된 문제 해결
에러 바운더리 적용
2023-07-27
리액트에서 컴포넌트 차원에서 예외처리하는 방법입니다. 에러를 발생할 수 있고 우아하게 처리하는 방법을 소개합니다.
axios, react-query 타입지정
2023-07-24
axios와 React-Query에 특히 Error에 타입지정하는 여정입니다.
배포 플랫폼 알아보기
2023-07-23
- #회고
- #blog
백엔드를 배포하는데 deno deploy는 실망스러운 것이 너무 많아서 다른 배포 옵션을 고려하기 시작했습니다.
Super Oak로 테스트 코드 작성하기
2023-07-22
- #testing
- #deno
- #oak
Super Oak 테스트에 도입했습니다. 부분만 적용할 수 있었습니다.
fetch에서 mongoose로 전환
2023-07-20
- #mongoDB
- #mongoose
빠르고 더럽게 fetch로 만들었던 API를 mongoose로 리팩토링하는 과정을 다룹니다.
리액트 코딩 컨벤션
2023-07-19
- #react
- #코딩 컨벤션
개인적으로 적용하고 있는 리액트 코딩 컨벤션입니다. 일부는 차용했습니다. 또 배운 것이 있으면 추가할 것입니다.
flash card 회고
2023-07-17
flash card 프로젝트 회고입니다.
useStopScroll
2023-07-07
- #react
- #custom hook
스크롤을 정지하는 방법입니다.
이메일 저장하기
2023-07-06
- #react
- #ux
- #auth
이메일을 저장하는 방법입니다.
react portal
2023-07-06
- #react
- #react portal
지금 구현해야 하는 것은 삭제시 경고 modal(더 구체적으로 Dialog)입니다. 이 작업을 기록하는 이유는 react portal로 구현하는 것이 처음이기 때문에 기록합니다.
nav 라우트를 활용해서 상태관리하기
2023-07-05
- #react
- #react portal
React-Router-DOM에 대해서 저는 생각보다 모르는 지식이 상당히 많습니다. url path에 접근하는 방법을 이번에 찾게 되었습니다.
서버 key 고정시키기
2023-07-05
- #deno
- #auth
- #deno deploy
Deno Deploy로 배포하고 있는데 서버가 재시작하면 Module 스코프로 1번만 실행해야 할 함수 모두 재실행하고 서버의 키가 바뀌는 문제가 발생했습니다. 이 문제를 해결하기 위해서 항상 동일한 key를 만들도록 해결했습니다.
request waterfall 해결
2023-07-03
- #react
- #custom hook
로그인하고 홈페이지로 이동하면 하면 로딩 스피너가 보입니다. 잘 몰랐지만 상당히 기초가 없는 짓이라고 합니다.
useOutSideClick
2023-06-28
- #react
- #custom hook
예전에 포트폴리오 프로젝트를 진행할 때 동료가 custom hook을 추가했었습니다. 하지만 아쉬운 점이 많아서 개선한 버전을 다시 만들었습니다.
webp 이미지 처리
2023-06-26
- #react
- #webp
- #vite
그냥 vite으로 만든 react에서 webp로 이미지를 처리하는 방법입니다.
2023 StackOverflow Survey
2023-06-25
2023 StackOverflow Survey 결과가 나왔습니다. 생각보다 문제가 많은 설문입니다. 하지만 몇가지 인사이트가 있습니다.
Jotai provider
2023-06-24
Jotai로 순회할 때 각각의 atom이 독립적인 context를 가져야 할 때 사용할 수 있는 전략입니다.
로그아웃 통신 기만...
2023-06-23
- #auth
- #sign out
- #log out
- #react
오늘은 사용자들에게 로그아웃 통신을 한다고 기만하는 기능을 만들었습니다. 이유는 사실 토큰을 비우는데 그냥 1 ~ 2초 기다리게 만들었습니다.
switch case 리팩토링 전략
2023-06-23
switch case를 사용할 수 있는 상황이면 `map` 혹은 `object`를 사용할 수 있습니다.
타입에 따라 조건부 랜더링
2023-06-21
switch case 보다 더 깔끔한 in 연산자로 타입에 따라 조건부 랜더링하는 방법입니다.
dropdown menu 만들기
2023-06-21
- #dropdown menu
- #dropdown
- #menu
- #ui
dropdown menu 만들는 방법입니다. 의외로 별거 없습니다.
돌아가기만 하는 date formatting
2023-06-20
드럽고 끔찍한 코드로 돌아가는 date formatting 하는 방법입니다.
falsy를 조심합시다.
2023-06-19
- #falsy
falsy를 조심합시다.
토큰 갱신 처리하기
2023-06-19
- #auth
- #token
- #axios
- #jotai
- #refresh
토큰 갱신을 위해서 interceptor를 구현한 이야기입니다.
버튼에 로딩 스피너를 추가
2023-06-19
- #falsy
버튼에 로딩 스피너를 추가하는 방법입니다.
로그인, 회원가입 관련 유효성 검증
2023-06-19
- #auth
- #regex
버튼에 로딩 스피너를 추가하는 방법입니다.
카드 뒤집기
2023-06-17
카드 뒤집기 구현은 생각보다 난이도 있었습니다. 하지만 재미있습니다.
새 React 프로젝트는 vite를 활용해야 하는 이유
2023-06-11
- #vite
- #react
- #vitest
- #React.dev
- #Alias 설정
이유가 있다면 더 간소하고 성능이 더 좋습니다. HMR 지원이 상당히 빠릅니다.
cookie는 도메인이 같아야 주고 받을 수 있습니다.
2023-06-10
우회할 방법은 cookie를 사용 안 하는 것 말고 없습니다.
lazy loading은 default export만 지원합니다.
2023-06-09
https는 서버만 있으면 됩니다.
https 인증은 서버만 필요합니다.
2023-06-08
https는 서버만 있으면 됩니다.
도메인 객체
2023-06-07
토큰을 생성, 검증하는 테스트 코드를 작성하는 방법입니다. token을 싱글튼으로 제어하는 것은 일반적이지 않은 패턴입니다. 이부분을 리팩토링하고 테스트합니다.
백엔드 마무리?
2023-06-06
백엔드가 끝났다는 크나큰 저의 착각이었습니다.
토큰 테스트 코드 작성
2023-06-05-token-testing
지금 다시보면 분명 필요 없고 구현만 확인하면 되는데 추가한 테스트 코드를 다룹니다.
22주차 - 테크 트렌드 줍줍
2023-06-04
- #테크 트렌드 줍줍
이런저런 테크 트렌드를 보고 줍줍한 것들입니다.
에러로그: oak testing에서 get과 set은 서로 관련이 없습니다.
2023-06-03
- #deno
- #oak
- #testing
- #token
- #error log
Deno oak에 테스트 코드를 작성하면서 cookie 설정이 특이하다는 점을 발견했습니다.
refresh token과 access token 이해하기
2023-06-02
refresh token과 access token을 이해하기 위해 했던 노력입니다.
리액트 개발 착수
2023-06-01
플레시 카드 프로젝트 프론트엔드 착공시작하고 겪은 일과 생각들입니다.
CORS에러와 Deno
2023-05-31
Deno 백엔드를 활용하면서 발생한 CORS 에러를 해결한 이야기입니다.
프론트엔드 관심사 분리
2023-05-30
프론트엔드 엔지니어링 코드의 관심사를 분리하는 방법을 훔쳐배웠습니다.
vitest, RTL, MSW 테스트 설정
2023-05-29
- #vitest
- #axios
- #vite
- #react
- #msw
- #react testing library
vitest처럼 빠른 테스트러너에 RTL과 MSW를 같이 사용할 수 있게 설정하는 방법을 다룹니다.
공룡이 좋아졌습니다.
2023-05-28
deno 런타임에서 axios로 mongoDB랑 통신하는데 에러가 계속됩니다.
에러로그: deno deploy에서는 Worker API를 지원하지 않습니다.
2023-05-27
- #deno
- #deno deploy
- #error log
- #bcrypt
- #worker
싱글튼 패턴이 적당해보여서 활용했습니다.
에러로그: Connection was forcibly closed by a peer
2023-05-25
싱글튼 패턴이 적당해보여서 활용했습니다.
토큰 싱글튼
2023-05-23
- #deno
- #token
- #singleton
싱글튼 패턴이 적당해보여서 활용했습니다.
에러로그: 왜 mongoDB는 POST만 허용하는가?
2023-05-22
- #deno
- #axios
- #mongoDB
- #error log
왜 mongoDB는 POST 요청만 허용되어 있는가?
생일 선물 받음
2023-05-16
생일 축하합니다.
생일 선물
2023-05-15
- #docusaurus
- #blog
- #birthday
- #astro
생일 축하합니다.
오늘은 어린이날
2023-05-05
- #docusaurus
- #blog
사실 어린이 날인 것은 별로 안 중요합니다.
원티드 프리온보딩 과제 - 제출
2023-04-19
- #wanted
- #pre-on-boarding
원티드 과제 진행과정
원티드 프리온보딩 과제 - 9일차
2023-04-17
원티드 과제 진행과정
원티드 프리온보딩 과제 - 8일차
2023-04-16
원티드 과제 진행과정
원티드 프리온보딩 과제 - 6일차
2023-04-15
원티드 과제 진행과정
Go 언어 어디에 써야 할까? - 컨프런스 방문
2023-04-13
golang 컨프런스를 다녀왔습니다.
원티드 프리온보딩 과제 - 3일차
2023-04-12
원티드 과제 진행과정
원티드 프리온보딩 과제 1, 2일차
2023-04-10
원티드 과제 진행과정