우유부단 프로젝트(팀 북두칠성)

FE 기술 \- NextJs, TypeScript, ReduxToolkit, StyledComponents, prettier, ESLint, Axios, react-hook-form, sweet alert, react font awesomeFE 기타 \- 변수명 :

현상: 페이지를 새로고침하면 문제가 없음, 다른 페이지에서 next/link로 이동해서 넘어오면 인라인으로 설정한 margin이 적용되지 않는 문제를 발견원인: 인라인 스타일을 입력할 때 속성값 뒤에 세미콜론을 넣은것이 문제ex) { marginRight: '5px;'

에러: useRouter로 pid.tsx로 이동하면 페이지가 잘 뜨는데 새로고침을 하거나 브라우저에 직접 url을 입력하여 페이지에 접근하면 404 에러가 발생원인: router로 이동할 때는 pid폴더의 index.tsx 파일을 찾아서 보여주지만 직접 입력할 때는

상황 : PR을 Merge한 뒤 git pull origin fe -> npm install 을 한 결과 일부 dependency의 버전이 맞지 않는 문제가 발생 해결방법 : npm install --save --legacy-peer-deps 로 설치 출처 : ht

hydration 관련 오류가 발생하는 이유nextjs에서 styled components 설정이 잘못되어 있는 부분이 있다window 객체를 썼다 -> 서버에는 window객체가 없기 때문에 발생폰트 위치를 다시 고려해 볼것현재 위치는 pages - src - fon

상세 읽기 페이지는 보이는 경우의 수에 따라 페이지의 형태를 바꿔야 한다.\-> 컴포넌트를 어떻게 쪼개서 어디까지는 공용으로 사용하고 어디까지는 별도로 작성해야 될지가 고민되었다.경우의 수 1\. 로그인을 한 경우, 로그인을 하지 않은 경우 2\. 로그인한 사용자

이 에러를 처음 맞딱뜨렸을 땐 typescript 관련 에러인줄 알았다. 그러나 다행히 나보다 먼저 이 에러를 겪었던 팀원분이 이거는 비동기 처리에서 아직 데이터가 들어오지 않았을 때 생기는 에러라고 말해주었다 덕분에 오래 헤메지 않고 에러를 해결하게 되었다원인 : u

현재 전역 상태에 따라 다르게 보여야하는 것은isVoted 투표를 했다면 투표한 버튼의 배경이 파란색으로 변경되어야 한다모달에는 '투표를 변경하시겠습니까?', '투표를 취소하시겠습니까?'라는 텍스트가 보여야 한다.isAuther본인이 투표자라면 투표 버튼에 변화가

삭제 확인 알림창을 모달로 만들었더니 이미지로된 버튼과 순서가 맞지 않는 상황이 발생하였다. 이미지와 모달 모두 position 속성을 사용한게 원인이었다해결방법 : 가장 앞에 놓고 싶은 이미지를 큰 인덱스로 설정한다. 버튼으로 쓰이는 이미지는 z-index:1, 모달

프로젝트 피드배에서 라디오버튼의 라벨을 클릭했을때도 버튼이 클릭되게 수정해보라고 하셔서 고쳐보았다.radio버튼의 특징 1\. name이 같은 버튼 안에서는 1개의 버튼만 선택이 가능하다라벨의 htmlFor과 버튼을 같은 id로 묶으면 라벨을 선택했을 때 해당 라디오

모달창을 구현하는 도중에 모달의 백그라운드에 연결된 클릭 이벤트가 백그라운드 내부에 있는 모달 컨테이너를 클릭했을 때는 발생하지 않도록, 클릭이벤트를 비활성화 시키는 방법에 대해서 검색을 해보았다. 전에 한번 만들었던 기억이 있는데 너무 오래되어서 키워드를 이것저것 검

발생한 문제 : 같은 페이지에 있는 SideBar와 radio버튼의 id를 all, progress, closed로 만들고 사용자가 클릭했을 때 id값으로 api요청을 하려고 했다. input radio버튼이 동작하는데는 문제가 없었지만 label을 클릭했을 때 htm

처음 설정은 다음과 같았다페이지 헤드부분 검색해보니 public/image 폴더에 넣어야 된다고 해서 ico파일을 옮겨보았다 옮기니까 잘 보였다index.tsx에 넣으니 메인페이지가 아닌 다른 페이지에서 favicon이 안보이는 문제가 발생하여 Head의 위치도

원인 : Nextjs에서 SSR을 할 때 처음 렌더링하는 과정에서 window나 document 전역 객체가 존재하지 않는다. 해결방법 : typeof window !== undefined일 때 해당 소스코드가 실행되게 한다

문제 : react(Nextjs)에서는 하나의 컴포넌트에 고유한 key가 들어가야되는데 '1'이라는 키가 중복되었을 때 발생하는 에러. 원인 : mock data에 'id: 1'이 여러개 있었기 때문이었다.해결방법 : id를 모두 다르게 수정해주었다. 실제 서버에서는

new Date()에 month를 넣으면서 계산된 D-day가 1달이 넘는 문제가 발생했다. 원인은 closedAt의 날짜에서 month를 2로 입력했는데 Date객체에서 리턴하는 값은 3월(Mar)이었던 것원인 : getMonth() 메서드는 0~11로 반환한다. 2

문제 : 일치하는 오버로드가 없습니다원인 : 핸들러에서 변수를 입력 받도록 입력했지만 해당 이벤트에서 전달할 인자가 없어서 발생해결 : 잘못 입력된 변수를 핸들러에서 지워준다

원인 : CORS를 해결하기 위해 next.config.js에 Proxy 설정을 넣었던게 원인이었다. 그리고 Proxy를 설정해도 CORS문제가 해결되지 않아서 header를 수정하였다해결방법 : 아래에 있는 Proxy 설정을 삭제

에러 : Access to XMLHttpRequest at 'https://e833-222-233-138-154.jp.ngrok.io/topics/2' from origin 'http://localhost:3000' has been blocked by

분리했을 때 장점 컴포넌트의 재사용성이 좋아지고 전체적인 소스코드의 양이 줄어든다. input 컴포넌트가 들어가는 CommentCard 컴포넌트에서 별도로 input 값을 전송하는 api함수등을 작성하지 않아도 돼서 CommentCard 컴포넌트의 소스코드는 짧아진다.

elements의 id가 동일해서 발생하는 두번째 문제였다첫번쨰는 라디오 버튼의 id가 동일할 때 label을 클릭해도 원하는 id의 checked 상태가 변하지 않는 것이었고 이번은 type=submit이었을 때 id가 동일한 두개의 input이 동작했다는 것이었다.

댓글 수정 input을 만들면서 기존에 있던 content를 default value로 넣고 싶었다. 입력용 input에서는 place holder로 '댓글'을 넣어주었던 것과 차이가 있다.방법1\. props로 기존에 입력되어있던 내용을 받는다2\. useForm안에

key={bestComment?.commendId} 로 key를 만들어 줬을 때 bestItem이 일반 아이템 리스트에도 들어가고 상단에 있는 bestItem에도 들어가서 itemId가 중복되는 에러가 발생하였다. bestItem은 1개의 컴포넌트로 만들었고 아이템 리

원인 : 서버에서 넘어오는 데이터에는 투표가 끝나는 closedAt 날짜만 있고 이 투표가 종료됐는지 종료되지 않았는지 상태는 표시되어있지 않았다. 프론트에서 이 부분은 계산해서 투표의 종료/진행중을 전역상태로 만들어줘야 했는데 이 과정에서 데이터를 어떻게 처리할 것인

문제사이드바에서 전체리스트를 보고 있다가 종료된투표의 데이터를 요청하여 페이지를 렌더링 했을 때 페이지의 state는 그 전에 보고있전 전체리스트의 state로 저장되어있는 문제를 발견하였다.원인page의 state는 클릭했을때만 바뀌고 데이터를 요청할 때는 바뀌지 않