React

모노레포 도입지금 회사 프런트 팀의 프로젝트는 원래는 도메인 메뉴별로 나누어서 멀티레포 Multi repo 방식으로 개발을 했었다. 즉 개발자마다 레포지토리를 하나하나 따로 관리해서 개발했었고, 팀원끼리 똑같은 ui를 개발한다고 하여도 저장소간에 컨텍스트 공유가 어려워서 개개인 각자가 관리하는 레포지토리 내부에서 똑같은 ui를 중복해서 개발하기도 했다. 그런데 이제 여러곳에서 중복으로 사용하는 코드를 공유해서 재사용성을 높이고 하나의 코드베이스에서 모든 프로젝트의 코드와 자원을 관리하여 서로의 관계와 의존성을 쉽게 파악할 수 있도록 모노레포 환경을 구축했다. 모노레포 환경에서 처음 개발하면서 프로젝트 실행이 안될때가 있었는데 이때 마주한 에러를 정리한다.  Monorepo 빌드 도구 Turborepo  ..

문제 트리구조 데이터 interface Data { id: string; children: Data[]; } export const data: Data = { id: "상위1", children: [ { id: "하위1", children: [ { id: "하위1-1", children: [{ id: "하위1-1-1", children: [] }] }, { id: "하위1-2", children: [] }, ], }, { id: "하위2", children: [] }, ], }; 현재 클릭하는 아이템의 id는 상태값으로 관리하고 있다. 해당 아이템을 누르면 id 상태값이 바로 변경된다. const [currentId, setCurrentId] = useState(data.id); 그 변경된 id를 가지고..

이슈사항 postTokenQuery(token) .then((res) => { console.log(res, '쿼리 res'); if (res.data) { setTokenInStorage(token); } }) .catch(() => toast.error('토큰 에러 발생')); //서버 응답 실패시 실행 안됨 rtk query 라이브러리를 활용해서 서버와 통신하는데 서버에서 보내주는 응답에 따라 성공하면? .then 으로 특정 로직을 실행하고 실패하면? .catch 로 토스트를 띄우는 로직이다. 그런데 서버의 응답에 실패해도, catch 문으로 넘어가지 않고, then에서 걸려 res 응답을 콘솔에 띄우는 이상한 점이 발견되었다. 성공시 {data: {…}} 가 콘솔에 찍히고, 실패시 {error: ..

클라이언트 단에서 http 비동기 통신 라이브러리로 axios를 사용했는데, 서버에 요청하는데 자꾸 서버에서 에러가 났다. API 요청 형식은 아래와 같다. 요청 메소드는 POST 요청 바디는 아무런 데이터도 넣지 않아야함 요청 헤더와 요청 파라메터 값으로만 서버에 요청 네트워크 탭에서 확인해보니, 헤더와 파라미터로 잘 요청이가지 않고, payload 바디에 헤더와 파라미터로 적어준 객체가 요청 바디로 보내져서 오류가 나는 것으로 확인이 되었다. 기존 코드 axios.post( 'url', { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, params: { transactionId, email, pageUri: 'http://192..

서론 정말 몇날 며칠을 디버깅했지만 해결 안되는 이슈가 있었다... Mui 프레임워크 자체의 문제인걸까? 하고 Textfield 컴포넌트를 아예 다른 컴포넌트로 갈아엎기 전 마지막으로 한번만 더 디버깅해보자 했는데 오늘 진짜 어이없게 이슈가 해결되었다... 내가 이것때문에 몇일을 고생했다고.... 😭 사내 프로젝트는 리액트 ui 컴포넌트 라이브러리로 MUI를 사용한다. MUI 공식문서에서 표현되어있는대로, 인풋박스를 Textfield 컴포넌트로 표현하고, input 박스 오른쪽 끝에있는 x 버튼은 InputProps의 endAdornment 속성으로 감싸주어 구조를 잡았다. 0 && isNameFocused && ( )} ) }} /> Expected Behaviour 인풋박스를 누르면 focus 처리되..

상황 마이페이지를 개발하는데 이전 페이지가 어디 페이지에서 진입하느냐에 따라 보여줘야할 컴포넌트 하나가 차이가 났다. 문제를 해결할 방법을 잘 모르겠어서 우선 코드가 겹치지만 마이페이지에 해당하는 페이지를 두 개를 만들었다. 로직은 똑같지만 이전 페이지가 어떤 페이지인지 정보만 안다면 마이페이지 컴포넌트를 두개 만들 필요가 전혀 없어보였다. 내정보 페이지의 로직은 아래와 같다. 이전 페이지가 수정완료 페이지라면? 내정보 페이지 + 토스트 컴포넌트 이전 페이지가 그 외의 페이지라면? 그냥 내정보 페이지 문제 고민했던 부분은 페이지 컴포넌트에 Props로 조건을 내려주어 원하는 조건대로 다른 두 방향으로 를 띄워줄 수 있을까? 라고 생각을 했었는데, 애초에 react-router-dom의 useNaviga..

요즘 사내 프로젝트에서 모바일 페이지 작업을 해서 모바일 기기로 현재 개발중인 페이지를 띄워서 확인하고 싶었다. 원래 방법대로 개발 pc와 모바일을 똑같은 wifi 환경으로 두고, 모바일에서 ip주소:port번호로 접속했는데, 모바일 기기로 로컬 서버 접속이 안되는것 ..? 계속 아래와 같은 에러가 나고 모바일 접속이 안되는 문제가 있었다. The URL can't be shown. 이라는 문구만 계속 나옴.. 예-전에 리액트 프로젝트에서는 문제없이 잘 뜨던게... 왜 안뜰까? 생각을 하다가 지금 프로젝트의 번들러는 Vite이므로 Vite의 문제인걸까? 하고 찾아서 해결 할 수 있었다. npm run dev 명령어로 개발 서버를 띄울때 vite 의 기본 호스트는 localhost, 기본 포트는 5173으..

flex container 안에 있는 자식요소들 중에서 한 아이템만 따로 정렬하고 싶을 때 css의 margin 속성을 사용하면 복잡하지 않고 손쉽게 아이템을 정렬할 수 있다. 예전의 나는 이 flex container안에 나뉘어질 두 부분을 생각해서 2개의 container를 또 만들고, 그 2개의 컨테이너를 space-between 속성을 주어 사이 공간을 띄어주는 식으로 개발했었다. 🥲 그런데 아무래도 이 방법이 너무나도 비효율적인거 같아 찾아보니 이런 간단한 방법이 있었다. flex container안의 요소중에서 정렬되고 싶은 부분의 반대 속성에 margin 값을 auto로 준다. 이 예제에선 밑에 딱붙여서 정렬시키고 싶으므로 margin-top 속성 auto 를 주면 마법같이 컨테이너의 아래부..

바이너리 타입의 파일 응답 모킹하기 지금 사내 프로젝트는 백엔드 api와 프런트 개발을 동시에 병행적으로 진행하고있다. 따라서 서버단 API가 완성되고 배포되기 이전에는 msw라는 서버 API 모킹 라이브러리를 사용하고 있는데, 실제 백엔드 api 없이도 프런트단에서 mock 서버를 구현해서 가짜로 네트워크 통신을 할 수 있다. json 형식으로 통신을 주고받는 건 공식문서에도 잘 나와있어서 Mocking을 했었는데, 이번에 바이너리 타입의 이미지 파일을 get 해오는 부분에서 목서버를 구현하는데 큰 난관이 있었다. 응답 예시 프런트에서 이미지 파일을 get 해올때 서버에서 주는 응답은 아래와 같다. 바이너리 데이터 즉, 서버에서는 이 멀티미디어 데이터를 0과 1 값만 존재하는 이진 데이터로 응답해주는 ..

MVVM 아키텍쳐 디자인 패턴 MVVM은 Model - View - View Model의 약자로 애플리케이션의 비즈니스 로직과 사용자에게 보여주는 presentation UI를 분리하는 패턴이다. View 앱의 보여지는 UI View Model 앱의 비즈니스 로직을 담고있음 뷰와 모델 사이에서 뷰의 요청에 따라 로직을 실행 모델 데이터의 변화에 따라 뷰를 갱신 모델에 데이터를 요청, 데이터를 가공 Model 데이터를 처리 뷰모델에게 데이터를 응답 뷰 ui 컴포넌트이다. 상위 컴포넌트에서 props로 전달받은 상태에 따라서 화면이 동작한다. 사용자가 이벤트를 발생시키면 이벤트에 따른 데이터 변경을 뷰에서 바로 처리하지않고, 상위 컨테이너인 View Model 컨테이너에서 처리하도록 한다. interface..