seopport.log

const dateForOrder = new Date(); 리덕스 날짜 state에 날짜데이터를 추가하려고 하니 오류가 났다. 에러를 해석해보면 리덕스 state에 추가된 값 중에 직렬화가 불가능한 값이 감지됐다고 한다. 직렬화 가능한 값(serializable value)이란 JavaScript의 기본 데이터 유형인 문자열, 숫자, 불리언, 배열, 객체 등과 같이 JSON.stringify()를 사용하여 문자열로 변환할 수 있는 값을 의미한다. 그러나 Date 객체는 직렬화 할 수 없는 값이다. 따라서 toISOString() 메서들르 이용하여 문자열로 바꿔서 넣어주어야 한다. toISOString() 메서드는 JavaScript의 Date 객체에서 호출할 수 있는 내장 메서드 중 하나로 Date 객체..

reducers: { setReview: (state, action) => { //페이로드: 리뷰 데이터 전체 return { ...state, reviews: action.payload }; }, addReview: (state, action) => { //페이로드: 리뷰 데이터 객체 하나 return { ...state, reviews: [...state.reviews, action.payload] }; }, modifyReview: (state, action) => { //페이로드: 리뷰아이디, 수정된 리뷰 내용, 평점 const targetReviewId = action.payload.reviewId; const modifiedContent = action.payload.modifiedConten..

우선 색상 랜덤 생성 함수를 만든다. 밝은 색만 만들어내게 범위를 지정해주었다. const randomColor = randomBrightColor(); return ( {item.nickname[0]} 그런다음 map을 돌릴때 randomColor를 생성해서 프롭스로 넘겨준다음 스타일드 컴포넌트 선언 부분에서 배경색을 처리해주었는데, 문제는 이렇게 하면 아래와 같이 화면이 리렌더링 될때마다 색이 바뀐다는 것이다. 해결하기 위해서는 색상마다 지정된 컬러값을 생성해서 배경색 style을 지정해주어야 했다. 일단 리렌더링 될때마다 색이 바뀌는 것을 방지하기 위해 각 리뷰 댓글마다 지정해줄 색 배열 state를 만든다. useEffect를 사용하여 useEffect 안에서 review를 map하여 리뷰 댓글 ..

댓글마다 개별 모달 렌더링하기 이번에 댓글 기능을 구현하면서 댓글에 있는 점 옵션 메뉴를 클릭하면 수정,삭제 모달이 뜨도록 구현했는데, 문제는 옵션 버튼을 클릭하면 전체 댓글의 모달이 뜨는 문제가 생겼다. 이때까지 로그인 모달 등 모달이 하나만 뜨면 되는 것을 구현했었는데, 이번에는 어떻게 클릭한 리뷰를 특정해서 모달을 열리게 할까 고민해보았다. 원래코드는 점 버튼을 클릭했을 때 isOptionMenuOpen을 true로, 리뷰 전체 컨테이너를 클릭하면 false로 프롭스를 이용해서 렌더링을 관리했었다. export const StOptionsMenuModal = styled.ul` z-index: 999; width: 65px; height: 65px; font-size: 12px; display: $..

인증 : 사용자가 누구인지 확인하는 과정 ex) 사용자가 이름과 비밀번호를 입력하여 자신을 식별한다. 인가 : 인증된 사용자가 수행할 수 있는 작업을 결정하는 과정 ex) 특정 문서에 대한 읽기 권한을 부여할 수 있다. accessToken과 refreshToken 두가지를 서버로부터 발급받는다. accessToken은 유효시간이 짧고, refreshToken은 유효 시간이 길다. 프론트에서는 accessToken으로 브라우저에서 인가 처리를 하고, refreshToken은 자바스크립트로 접근할 수 없고 HTTP 서버요청시에만 접근할 수 있기 때문에 보안처리를 할 수 있다.

https://nbc-travel-vibe.vercel.app/ 이번 프로젝트는 뉴스피드 프로젝트를 주제로 우리팀은 여행 주제의 블로그 플랫폼을 제작했다. 우선 프로젝트 초기 세팅을 탄탄하게 잡고 시작했는데, 많은 것을 배웠고 초기 세팅이 중요하다는 것을 느꼈다. 초기 세팅을 얼마나 탄탄하게 하냐에따라 개발의 효율성이 달라지는 것 같다. 이번 프로젝트에서는 프로젝트 협업 방식을 많이 배웠다. 코드 컨벤션부터 깃허브 커밋 룰, PR 방식, DB ERD 등 많은 세팅을 시작에 잡아놓고 하니까 중간에 뭘 더 추가하거나 하지 않아 혼란이 오는 경우가 적었다. 그리고 프로젝트를 할 때 마다 느끼는 것이지만 작은 기능 하나하나에도 많은 고민과 노력이 들어간다는 것을 느꼈다. 리덕스와 데이터베이스를 활용한 리액트 프..

HTTP의 GET을 이용하여 데이터를 가져올 때, sort 쿼리를 작성하여 데이터를 정렬하여 가져올 수 있다. const { data } = await letterApi.get('/letters?_sort=createdAt'); 이런식으로 ?_sort 뒤에 서버의 데이터에서 정렬의 기준이 될 키 이름을 적어주면된다. 기본적으로 ASC 오름차순 정렬이고, const { data } = await letterApi.get('/letters?_sort=-createdAt'); 이렇게 키 이름 앞에 마이너스를 추가하면 DESC 정렬이 된다. 날짜 정보는 현재 시점과 멀수록 작은 값이다. 현재 날짜 값 크기 > 과거 날짜 값 크기 따라서 최신순으로 배치하려면 날짜순 DESC로 정렬하면 된다. 🔽 참고하기 좋은 글..

저번에 찍먹해본 모달창을 이번에는 직접 구현해보았다. 까먹을 수 있으니 기록해두기.. 1. 모달을 띄울 backgroud wrap(StModalWrap)과 모달창(ModalContainer)을 만든다 모달창 backgroud wrap의 부모 요소(MainWrap)를 position relative로, 모달창 backgroud wrap(StModalWrap)을 fixed로 설정하고 모달창 컨테이너는 absolute로 설정한 후 가운데 정렬한다. return ( {isRendered && } {isRendered && } ); } const StModalWrap = styled.div` width: 100%; min-height: 100vh; position: fixed; background-color: r..

마이페이지에서 프로필 수정 구현하기 1. 수정사항 확인하기 const handleModifyCompleteButtonClick = async () => { // 닉네임과 프로필 이미지 모두 원본데이터와 같으면 수정X if (userInfo.nickname === modifiedNickname && userInfo.avatar === imageSrc) { alert('수정사항이 없습니다.'); return; } 우선 수정 사항이 없으면 수정이 완료되지 않게 return으로 실행을 끝내준다. 닉네임과 프로필사진 하나라도 변경값이 있으면 수정이 진행된다. 2. 수정 할 사용자 정보 작성하기 const updateUserInfo = {avatar: imageSrc, nickname: modifiedNicknam..

patch가 자꾸 안돼서 애먹었는데 튜터님한테 여쭤보면서 개발자도구에서 디버깅 하는 법을 배워왔다 예를 들어 위 사진에서는 401에러가 뜨고 있는데, 콘솔에 data: {message: '토큰 검증에 실패했습니다.'} 라고 서버에서 에러메세지가 나온다. 네트워크에서 해당 요청을 눌러보면 Authorization의 Bearer 다음의 토큰 키값이 null이기 때문임을 알 수 있다. 페이로드 탭을 보면 이런식으로 HTTP 요청에 뭘 담아 보냈는지도 확인할 수 있다.