DND 13기의 프론트엔드로 참여하여 런닝을 처음 하는 사람들이 친구 혹은 크루와 함께 런닝을 진행하며 운동을 독려하는 앱(**Runky**)를 개발한 회고록을 작성했습니다!!

사내 AI 프로젝트를 고도화하던 중, 답변을 클릭하여 모달이 아닌 새로운 탭창에서 그래프를 보여줘야하는 로직이 있었습니다. 실시간으로 변하는 데이터를 탭에 전송해야 했기에 여러 방법을 찾아보았습니다. 그러던 중 window.postmessage와 BroadcastCha

requestionAnimation을 사용하여 프레임 드랍 없는 부드러운 애니메이션을 만들어봅시다!

Vite는 왜 process.env가 아닌 import.meta.env를 사용할까?

종속성아 잡혀줘..!

프론트엔드 개발자라면 모두 알다시피 Javascript는 싱글스레드 언어입니다.Javascript는 싱글스레드이기 때문에 한계가 명확히 존재합니다. 그렇기 때문에 작업들을 병렬로 처리할 수 없고, 다른 작업이 끝날 때까지 기다려야합니다. 이를 개선하기 위해 JS는 `

Vite를 통해 최적화를 진행하다보면 Gzip, Brotil로 압축하여 전송하라는 내용들이 많이 보입니다. 그렇다면 Gzip, Grotil은 무엇인데 사용자에게 빠른 경험을 제공할 수 있을까요? Gzip Gzip은 번들링 이후 단계에서 만들어진 파일들을 압축하는 알고

React Query의 useClient 구조를 알아보자오늘은 저번 주에 이어서 useQuery가 어떻게 실행되며 그에 따라 React가 어떻게 업데이트를 진행하는지 알아보겠습니다!useQuery(https://github.com/TanStack/query/b

서버 상태 관리를 위해 많이 사용하는 React Query는 캐싱, 동기화, 업데이트 등 많은 장점이 있어 자주 사용되는 라이브러리입니다. 그 중에서도 가장 많이 사용되는 것을 꼽자면 데이터 조회를 위해 사용되는 useQuery 기능이라고 생각합니다.실무에 적용하고 사

말머리 사내 프로젝트를 진행하다 대화 이력을 조회해야하는 로직이 있었습니다. 초기에는 성능상의 이슈가 없었지만, 대화 이력시 쌓여갈수록 많은 렌더링으로 인하여 성능이 저하되는 이슈가 있었습니다. 이를 개선하기 위해 Virtual Scroll과 Intersection O

NextAuth.js사이드 프로젝트를 진행하며 네이버 소셜로그인 파트를 담당하게 되었습니다.네이버 소셜 로그인을 구현하는 방법을 찾아보던 중, Next-Auth라는 라이브러리를 알게되었습니다.

사내 챗봇 프로젝트 구현 중에 ppt, pdf, jpeg 등 다양한 형태의 이미지를 다운로드하는 기능이 있었습니다. 처음에는 단순하게 Blob URL을 a태그에 넣고 클릭 이벤트 전달해야지라는 생각으로 구현했다가 오류가 발생했습니다. 그러다가 찾아본 내용과 해결 방법을

Next/image는 컴포넌트입니다. 서버 동작시 ./_next/image라는 이미지 최적화 라우트를 생성하고 모듈을 통해 최적화를 진행합니다. 이 때, 쿼리트스링 URL 을 만들고 prop로 전달한 속성값을 통해 최적화를 진행합니다.

서론 > 사내 프로젝트 진행 중 PM으로부터 "다른 플랫폼 사이트를 이동하기 전에 해당 사이트가 접근이 허용이 되었는지, 방화벽은 열려있는지 확인할 수 있었으면 좋겠다."라는 의견을 받았습니다. 처음에는 window.open의 postMessage 메서드를 사용할까 고

로그인 기능을 구현할 때, 가장 많이 사용하는 방식은 JWT와 Oauth2입니다. 오늘은 이 중에서 Oauth2에서 사용하는 Bearer토큰과 동장 방식에 대해 학습한 내용을 기록하려합니다.

링크텍스트사내 프로젝트에서 옛날 프로젝트의 라이브러리를 받거나 인프런의 올라와 있는 옛날 버전의 라이브러리를 다운받다보면 자주 접하게 되는 Npm 에러가 있습니다.

Next.js는 React 진영에서 가장 많이 사용하는 SSR 프레임워크입니다. CSR에서는 어려운 SEO 최적화에 많이 유리해 Next.js를 사용합니다. 또한 SSR만 사용되는 것이 아닌 CSR, SSG 등 다양한 방식의 렌더링을 통해 성능 최적화ㅣ가 가능하기 때문

사내 새로운 프로젝트에 들어가며 Modal, popup, Dialog 등 여러 팝업을 동시에 띄워야 하는 로직이 필요했습니다.

25년 1월 22일에 Tailwind 4.0이 공식 사이트를 통해 배포 되었습니다. 사내 프로젝트에서 Tailwind를 사용했기에 이번 새로운 업데이트가 눈에 들어왔습니다!! 이번 업데이트를 통해 새로운 고성능 엔진과 사용자 정의 환경을 새롭게 만들었다고합니다.

Custom Directive란? Vue.js 3에서 Custom Directive(사용자 정의 디렉티브)는 DOM 요소에 직접적으로 특정 동작을 추가하거나 제어하기 위해 사용하는 기능입니다.