seopport.log

타입스크립트 컴파일러 타입 검사를 해주는 것이 컴파일러 타입스크립트 컴파일러는 TS -> JS 코드 변환함(C언어는 C => 기계어) 컴파일러를 이해하면 디버깅 과정에 도움이 된다. 컴파일러는 코드를 최적화하여 앱 실행 시간을 단축시킨다. 튜플 튜플은 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열 const person: [string, number, boolean[ = ['spartan', 25, true]​ push로 데이터를 추가할 수 있으나 권장되지 않음 enum 열거형 데이터 타입 다양한 상수를 더 이해하기 쉬운 문자열로 접근하고 사용할 수 있게하는 타입 명확하게 관련된 상수 값들을 그룹화할 때 사용하는게 좋다. readonly 클래스의 속성이나 인터페이스의 속성을 변경..

터미널에 다음과 같은 명령어를 입력해서 프로젝트를 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 서버요청시에만 접근할 수 있기 때문에 보안처리를 할 수 있다.

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..