profile
프론트엔드 개발자로 살아가기

Next.js와 React Query의 SSR 최적화

React-query(tanstack-query) 는 서버 상태 관리를 위한 인기있는 라이브러리 입니다.클라이언트 기반으로만 작동되던 React 에서는 바로 사용하면 됐지만, 최근 Next.js 가 급 부상하며 SSR 방식에는 조금 문제가 되었습니다.이에 tanstac

2024년 8월 27일
·
0개의 댓글
·

Zustand의 create vs createStore

Zustand 는 간단하고 강력한 상태 관리 라이브러리 입니다.이 라이브러리를 사용하기 위해서는 두개의 주요 API 를 제공하는데요. create / createStore 두가지를 제공합니다.처음 라이브러리를 확인했을때 어떤 용도로 써야하는지 고르기가 어려웠는데요, 두

2024년 8월 27일
·
0개의 댓글
·
post-thumbnail

WebRTC(Web Real-Time Communication) 구현하기

WebRTC(Web Real-Time Communication)는 웹 브라우저 간에 플러그인 없이 실시간으로 오디오, 비디오, 데이터를 교환할 수 있도록 설계된 오픈 프레임워크입니다. WebRTC는 피어 투 피어(P2P) 방식으로 동작하며, 직접적인 브라우저 간 통신

2024년 8월 26일
·
0개의 댓글
·

MSE(Media Source Extensions) 구현하기

MSE(Media Source Extensions)는 웹 브라우저에서 동적으로 미디어 콘텐츠를 생성하고 제어할 수 있는 JavaScript API입니다. 기존에는 video, audio 태그의 src 속성에 미디어 URL을 지정하는 방식으로 동영상을 재생했는데요. MS

2024년 8월 26일
·
0개의 댓글
·
post-thumbnail

도커 이미지 최적화: 멀티 스테이지 빌드와 Turbo Prune 활용

도커 이미지 크기를 최적화하고 빌드 속도를 개선하기 위한 전략을 소개합니다. 멀티 스테이지 빌드와 Turborepo의 turbo prune 명령어를 활용하여 이미지 크기를 대폭 줄이는 방법에 대해 알아보겠습니다.기본 환경 설정node:20-slim 버전을 사용하여 베이

2024년 8월 26일
·
0개의 댓글
·
post-thumbnail

ClickUp과 GitLab 연동하기

clickup 에서 지원하는 Apps 에는 gitlab이 있다.이를 통해 업무 효율성을 높히는 방법을 고려해보자.먼저 ClickUp과 GitLab 계정이 있어야 합니다. 아직 계정이 없다면, 각 공식 사이트에서 회원가입을 진행해 주세요.ClickUp 회원가입GitLab

2024년 7월 9일
·
0개의 댓글
·
post-thumbnail

Ngrok으로 로컬서버 외부 접근하기

웹 개발을 하다 보면 로컬 서버의 작업을 간단하게 접근해서 테스트하고 싶은 경우가 있습니다. 물론 내부에서 모두 접근하면 베스트지만, 외부 접근이 필요한 경우가 생기는데 (예: 웹훅 테스트) 이런 경우에 사용하는 것이 Ngrok 서비스입니다.먼저 Ngrok을 설치해야

2024년 7월 9일
·
0개의 댓글
·
post-thumbnail

ClickUp API를 이용한 Webhook 구현 가이드

ClickUp에서는 Webhooks를 위한 API를 제공하고 있습니다. 이 가이드에서는 ClickUp API를 사용하여 Webhooks를 생성, 수정, 삭제하는 방법을 찾아봤습니다Step 1: ClickUp API 설정Postman에서 API 가져오기ClickUp은 공

2024년 7월 9일
·
0개의 댓글
·

리액트 디버깅

값이 안 들어올 때 체크하기 컴포넌트에 값이 안들어오는건지 먼저 확인(코드) 리액트 컴포넌트에서 값을 받아오는 부분이 정상적으로 작동하지 않는 경우, 가장 먼저 해야 할 일은 해당 값이 실제로 컴포넌트에 전달되고 있는지 확인해야한다. 이때 보통 console.lo

2024년 5월 23일
·
0개의 댓글
·
post-thumbnail

Docker failed to solve: nginx:1.21.0-alpine: error getting credentials - err: exit status 1, out: `` ERROR

failed to solve: nginx:1.21.0-alpine: error getting credentials - err: exit status 1, out: \`\`

2024년 1월 29일
·
0개의 댓글
·

[UXUI] 왜 웹 디자이너들은 검정색 대신 #000000을 사용할까?

웹 사이트에서 가장 기본으로 많이 사용하는 색은 블랙이다.글씨조차 모두 검정색인데 이 검정색을 나타내는 코드는 \*\*디자인에 있어서는 가장 가독성이 뛰어나 보이는 블랙을 사용하지 않는 이유가 있을까?또한 대비가 심해질 수록 사람의 눈은 피로도를 강하게 느끼게 된다.

2023년 4월 17일
·
0개의 댓글
·

React Page to PDF

회사 페이지 중 주요 사안으로 Page 를 자동으로 PDF로 만들어 서버로 전송해달라는 요구 사항이 있었다.해당 부분을 개발한 기록을 남겨보도록 하겠다페이지를 서버 단에서 처리하는 방법도 존재했으나, css 가 제한적으로 사용가능하고 웹 페이지와 유리된다는 점이 불편했

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

ECMA Script(ES) 란?

널리 사용되는 프로그래밍 언어인 JavaScript는 Netscape Communications에서 일하던 Brendan Eich가 1995년에 처음 만들었습니다. 원래 Mocha라고 불렸던 이 언어는 나중에 LiveScript로, 마지막으로 JavaScript로 이름

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

DNS란?

✔ 도메인 이름과 IP 주소에 대한 정보를 관리 하는 시스템✔ 인터넷 사용자가 IP 주소를 모르고 사람에게 자연스러운 문자로 접근하도록 1️⃣ DNS 구조 DNS는 전화번호부와 같은 기능이라고 표현한다. 사용자가 웹사이트 이름(예: www.example.com)을 입력

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

react-toastify 쓰기

React Toastify는 개발자가 React 애플리케이션에 토스트 알림을 쉽게 표시할 수 있도록 하는 인기 있는 라이브러리입니다.React Toastify 사용 경험을 공유하려고 해요.React Toastify의 가장 큰 장점 중 하나는 개발자가 토스트 알림을 애플

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

express multer 이미지 업로드시 name 일치

올리는 쪽의 이름이 일치해야만 인식이 된다.input 의 name 주목이때 같은 이름이여야만 인식이 된다.

2022년 5월 23일
·
0개의 댓글
·
post-thumbnail

Quasar Table no data available

퀘이사 해당 예제인 table을 실행시키고자 했으나, rows 가 바인딩이 안되는 이슈가 생김. columns 는 잘 가져오는데 뭐가 문제일까 싶었음예제와는 달리, data를 통한 바인딩을 통해 정상적으로 출력되었음.

2022년 5월 16일
·
0개의 댓글
·
post-thumbnail

Div 안의 요소 세로정렬하기

가로로 되어있는 버튼 하나의 div 안에 들어가있는 4개의 버튼display 와 flex-direction 속성을 변경하여 해결

2022년 5월 12일
·
0개의 댓글
·
post-thumbnail

PowerShell UnauthorizedAccess Error

서명되지 않은 파워쉘 스크립트를 실행하려고 했기 때문.서명되지 않은 파워쉘 스크립트를 실행하려면 실행 규칙 정책을 변경해주면 된다.쉘에서 직접 확인해보기PS C:> ExecutionPolicyRestricted파워쉘에서 직접 규칙을 변경하자.\-> 관리자모드로 파워쉘

2022년 5월 11일
·
0개의 댓글
·