분류 전체보기

모노레포 도입지금 회사 프런트 팀의 프로젝트는 원래는 도메인 메뉴별로 나누어서 멀티레포 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를 가지고..

회사 1차 프로젝트 개발 마감에, 방통대 기말고사에 ~ 꽤나 바쁜 12월을 보냈다. 시험은 12월 10일에 끝났는데.. 시연이 거의 연말 가까이인 12월 20일에 잡혀있어 그때까지 조금 힘들었던 느낌이 있었다. 시험 및 시연이 끝나고는 좀 널널하게 개발했는데, 연말까지 맨날 회사를 가서인지 목/어깨 통증이 지속되어서 그랬는지 에너지가 없던 나는... 내 개인시간에는 개발공부는 하지 않고 거의 쉬는 시간을 가졌던 것 같다. 근데도 회사를 맨날 나가니 뭔가 충분히 쉬지 못한 느낌이 계속 들었다.ㅠ 짧게 휴가를 내고 12월 회고를 1월 중순이 되어서 이제서야 제대로 발행한다~ 회사 업무 - 회원가입, 마이페이지 개발 공통으로 사용되는 회원가입, 마이페이지 인증 관련 페이지를 만들었다. 회사의 서비스가 3개로 ..

이슈사항 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..

상황 개인 브랜치에서 개발을 하고 있는 도중, 매니저가 develop에 새로 변경사항을 푸쉬했으니 새로 변경된 코드를 Pull해서 개인 프로젝트에 적용해서 사용하라고 함 브랜치 develop 브랜치 - 팀원들의 작업을 모두 합치는 브랜치 RND-2457 브랜치 - 내 개인 작업 피쳐 브랜치 지금 나는 피쳐브랜치인 RND-2457 브랜치에 있다. 여기서 git pull을 해서 원격저장소에 푸쉬된 새로운 커밋내용 볼 수 있다. 나의 피쳐브랜치 (위 사진의 빨간 화살표)를 보면, 가지 모양이 최신상태가 반영되기 이전 상태의 develop 브랜치 (사진에는 짤려서 안보임 더 맨 밑에 가지의 베이스가 있음)에서 따와 새로 만들어진 브랜치이므로 분홍색으로 보인다. 최신 변경된 코드가 반영된 develop 브랜치는 ..

요즘 사내 프로젝트에서 모바일 페이지 작업을 해서 모바일 기기로 현재 개발중인 페이지를 띄워서 확인하고 싶었다. 원래 방법대로 개발 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 를 주면 마법같이 컨테이너의 아래부..