개발/FRONTEND

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 패턴이란렌더 프롭..

S3를 프론트에서 관리하는 이유nextjs를 활용해서 S3버킷에다가 이미지를 프론트에서 직접 관리하게 되었다.S3를 프론트에서 관리하면 좀더 빠른 응답을 만들 수 있다. 그 이유는 무엇일까 생각해보자면 다음과 같다.- 클라이언트에서 백엔드로 이미지 데이터를 던져주고 서버에서 그걸 받고 aws에 넘겨주고 클라이언트한테 링크를 넘겨줘야한다. 서버가 바쁘면 이미지를 가공해서 주는 시간이 길다는 뜻이다. 서버가 바쁘니 덜 바쁜 프론트에서 대신 aws에 업로드를 해주는 것이다.- 클라이언트에서 Img업로드를 S3버킷에 해주고 s3 url을 서버한테 보내야하는데 이때 react-query를 사용해서 optimistic UI를 적용해주면 좀 더 빠르게 적용된 이미지를 볼 수 있다.단점으로는 브라우저에서 우리의 코드를..

목표어트랙션 프로젝트는 실 서비스를 염두하여 진행한 프로젝트였기때문에, 그에 맞추어 유지보수를 위한 설계가 필요했습니다. 또, 이후 서비스의 확장도 고려해야 했습니다.이를 모두 고려하여 요구 조건을 생각해보자면유지보수가 용이해야한다. (중복되는 로직은 최대한 피해야한다)추후 서비스를 확장할 수 있어야한다.인원이 변경되거나 하는 여러가지 사항에 대비해 문서화를 철저히 진행해야한다.팀원들과 어트랙션 서비스를 준비하면서 내린 결론은 다음과 같았습니다.디자인 시스템을 통해 공통 컴포넌트를 관리하여 중복되는 컴포넌트를 최대한 피한다.모노레포 구조를 도입하여 추후 서비스를 확장할 수 있도록 한다.디자인 시스템에 Storybook을 도입하여 컴포넌트에 대해서 문서화를 진행하고, 노션을 통해 개발 기록을 남긴다.모노레..

모노레포 구조에서 세팅된 ESLint 오류가 화면에 보이지 않는 문제현재 진행중인 프로젝트에서는 모노레포 구조를 채택하여 개발을 이어나가고 있는데, 이상하게 ESlint 오류가 보이지 않았습니다.근데 또 다 안보이는 것도 아니고, 몇개는 보이고 몇개는 보이지 않는 문제도 발생했구요.또 화면에는 다 안잡히지만 eslint 명령어를 통해 확인하면 보이지 않던 오류가 다 발견되었습니다.이 부분에서 저는 eslint 기능의 문제라기보단 IDE를 의심하기 시작했습니다.근데 보통 IDE를 의심하게되면 '내 IDE 설정의 잘못'으로 이해하지, 다른 사람들까지 그럴거라고는 생각하지 않잖아요.저를 더 혼란스럽게 만들었던 건, 다른 팀원들도 ESlint 오류가 보이지 않았습니다. 모두 같은 증상이었다는 것이죠.그냥 무시하..

구현 목표저희는 실제로 서비스를 운영하는 것이 목표였기 때문에 유저 인증 관련 로직들에서는 보안이 매우 중요했고, 그에 따라 요구사항은 다음과 같았습니다요구사항인증 관련 로직을 클라이언트에서 처리하지 않을 것클라이언트에서 스크립트로 접근할 수 있는 곳에 개인정보를 남기지 않을 것 ex) 로컬스토리지, 세션스토리지, 쿼리 파라미터, 쿠키 등로그인 후 새로고침을 해도 일정시간동안은 로그인 상태가 풀리지 않을 것구글에서 지원하는 OAuth 프로토콜을 사용할 것 또한 Next.js 를 차용했기 때문에 서버 컴포넌트에서도 대응이 가능했어야 했습니다  왜 브라우저에 개인정보를 저장하면 안될까?Redux 또는 Zustand 같은 전역상태관리 라이브러리에서는 전역 상태의 유지를 위해 미들웨어의 형태로 persist 를..