전체 글

CommonJS (CJS)역사적 배경: CommonJS는 Node.js 환경에서 모듈을 관리하기 위해 도입된 모듈 시스템입니다.모듈 사용 방법:모듈 가져오기: require() 함수를 사용해 다른 모듈을 가져옵니다.const math = require('./math');모듈 내보내기: module.exports를 사용해 모듈의 기능을 내보냅니다.module.exports = { add: (a, b) => a + b, subtract: (a, b) => a - b,};동기적 로딩: CommonJS는 동기적으로 모듈을 로딩합니다. 즉, 모듈을 가져오는 코드가 실행되면 해당 모듈을 즉시 불러오고 실행합니다.Node.js 환경에서 널리 사용됨: Node.js는 기본적으로 CommonJS를 지원합니다.ECMA..

라이브러리 만든 계기Next App Router를 이용해서 처음 팀프로젝트를 진행했는데 기술스택에 관해서 팀원들과 논의를 하던 중 이전 React로만 작업을 했을 때와 같이 Axios를 활용하려 했는데 Next App Router에서 적용하려고 보니 문제점이 있었다. 바로 Next App Router는 자체적으로 fetch를 확장에서 쓰고 있는데 그 예시는 다음과 같다.const data = await fetch('~~', { next: {revalidate: 300}})위와 같은 Next 캐싱원리가 궁금하다면 이전에 쓴 글인 캐싱원리 블로그를 참조하면 좋다.일단 그때는 프로젝트 구현이 우선이였기에 팀원 모두 fetch를 쓰기로 했다.프로젝트를 구현하면서 fetch를 사용하다보니 다음과 같은 불편함..

요구 사항개인 설정 페이지를 담당하고 있는데 모바일 상황에서 모달을 Drawer형식으로 바꾸는게 좋을 것 같다고 팀원들과 회의를 통해 결론이 났었다. 현재상황의 모바일 모달은 다음과 같았다  위의 사진과 같은 모달이 여러개 있는데 기존에는 마감기간이 있어서 구현하는데만 집중하는 나머지 각 모달마다 각각의 컴포넌트가 있었다 이러한 상황이 발생하니까 문제점이 모바일 화면에서 Drawer 모달을 구현하려고 하면 각각의 컴포넌트별로 Drawer 형식의 모달을 구현해야했다.이를 해결하기위해 여러 레퍼런스를 찾던중 대표적인 패턴 2가지를 찾았다 바로 컴파운드패턴과 render props 패턴이다. 먼저 간단히 설명을 얘기하고 해결방법을 알아보도록 하자.Render Prop 패턴Render Prop 패턴이란렌더 프롭..