seopport.log

터미널에 다음과 같은 명령어를 입력해서 프로젝트를 main에 머지하기 전에 dev에서 배포를 테스트해볼 수 있다. 1. yarn build 여기서 뭔가 에러가 뜨면 배포했을 때 오류가 날 것이라는 뜻이다. yarn build 성공시 🔽 2. yarn global add serve 3. serve -s build (안되면 npx serve -s build ) 여기까지 에러 없이 완료되면 Serving! - Local: http://localhost:51396 - Network: http://xxx.xxx.xx.xx:51396 (xxx는 ip 주소) 이렇게 접속 가능한 주소를 주고 여기서 배포가 됐을 때의 사이트를 볼 수 있다. Local은 내 로컬에서 접속 가능한 사이트 network는 같은 와이파이를 쓰..

배포테스트를 위해 dev에서 main으로 PR을 날려 머지하려고 했는데, there isn’t anything to compare.amain and dev are entirely different commit histories. 서로 커밋 히스토리가 다르다면서 PR이 생성되지 않았다. 깃 그래프를 살펴보니 master 브랜치에서 각 기능 브랜치가 분기되고 있었고, origin/main과는 연결이 끊겨 있었다. 그 이유는 create-react-app을 하면 기본 브랜치로 'master'가 지정되어있기 때문이다. cra를 하고 main원격 브랜치를 가져와서 commit, push하지 않고 내 로컬의 master 브랜치에서 작업을 시작했기 때문에 history 연결이 안된 것이다. 그래서 리액트 프로젝트를 ..

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 등 많은 세팅을 시작에 잡아놓고 하니까 중간에 뭘 더 추가하거나 하지 않아 혼란이 오는 경우가 적었다. 그리고 프로젝트를 할 때 마다 느끼는 것이지만 작은 기능 하나하나에도 많은 고민과 노력이 들어간다는 것을 느꼈다. 리덕스와 데이터베이스를 활용한 리액트 프..