본문 바로가기

전체 글65

Next.js SSR과 Zustand 사용시 주의점 Next.js는 React 애플리케이션을 구축하기 위한 강력한 프레임워크이며, 서버 사이드 렌더링(SSR) 기능을 통해 성능 및 SEO 이점을 제공합니다. 상태 관리 라이브러리인 Zustand는 간결하고 유연한 API로 많은 개발자에게 사랑받고 있습니다. 하지만 Next.js의 SSR 환경에서 Zustand를 사용할 때는 한 가지 중요한 주의사항이 있습니다. 바로 상태(Store)를 어떻게 관리하고 제공하느냐입니다. 특히 SSR의 특성 때문에 발생하는 문제를 해결하기 위해서는 특정 패턴을 따르는 것이 필수적입니다. 이 글에서는 Next.js SSR에서 Zustand 사용 시 주의해야 할 점과 그 해결책인 Provider 패턴의 중요성에 대해 알아보겠습니다. 1. Zustand란 무엇인가? Zustand.. 2025. 5. 17.
MobX는 왜 선택을 받았을까? 최근 노빌더툴에 대한 관심이 많아 관련 기술들을 찾아보던 중, 토스에서 피그마나 Framer를 대체할 자체 디자인 편집기를 만들고 있다는 사실을 알게 되었습니다. 그리고 이 프로젝트의 상태 관리 라이브러리로 MobX를 선택했다는 것을 접했습니다. https://toss.tech/article/firesidechat_frontend_11 토스의 디자인 편집기 ‘데우스’, 이렇게 만들었어요! | EP.11토스의 디자인 편집기 데우스(Deus)! 이번 모닥불에서는 토스의 자체 디자인 편집기 데우스(Deus) 프로젝트를 소개합니다! 디자인과 개발 사이의 경계를 넘나드는 새로운 가능성을 만나보세요! 데toss.tech 저는 클라이언트 상태 관리에서 MobX를 사용해 본 경험이 없었습니다. 때문에 이번 기회.. 2025. 5. 15.
함수형 프로그래밍과 자바스크립트 그리고 이터러블/이터레이터 프로토콜 함수형 프로그래밍 자바스크립트는 멀티 패러다임 언어로, 객체지향과 함수형 프로그래밍 스타일을 모두 지원합니다. 자바스크립트는 함수를 일급 객체로 취급하는 언어로, 이러한 특성 덕분에 함수형 프로그래밍을 자연스럽게 지원합니다. 1. 일급 함수자바스크립트에서 함수는 일급 객체로, 변수에 할당하거나 다른 함수의 인자로 전달할 수 있습니다. 2. 고차 함수Array 객체의 내장 메서드들(map, filter, reduce 등)은 함수형 프로그래밍의 대표적 예입니다. 3. 클로저클로저는 함수가 자신이 생성된 환경의 변수를 기억하고 접근할 수 있는 기능으로, 함수형 프로그래밍에서 상태를 캡슐화하는 데 사용됩니다. 4. 불변성ES6부터 도입된 const와 스프레드 연산자(...)는 불변성을 구현하는 데 도움이 됩니다.. 2025. 4. 30.
NestJS의 10가지 핵심 개념 1. NestJS란 무엇이고 무엇을 만들 수 있는가?NestJS는 효율적이고 확장 가능한 Node.js 서버 애플리케이션을 구축하기 위한 프레임워크입니다. 세 가지 유형의 애플리케이션을 만들 수 있습니다.HTTP 서버 애플리케이션: NestFactory.create를 사용하여 RESTful API나 웹 애플리케이션을 구축합니다.마이크로서비스 애플리케이션: NestFactory.createMicroservice를 사용하여 분산 시스템의 일부로 작동하는 마이크로서비스를 구축합니다.독립형 애플리케이션: NestFactory.createApplicationContext를 사용하여 네트워크 리스너가 없는 애플리케이션을 만들 수 있습니다. 주로 스케줄링 작업이나 CLI 도구에 적합합니다.import { NestFa.. 2025. 4. 19.