[취업준비일지] - 52 - 스터디 프로젝트 13일차

임시로 데이터를 가져와보려고 했지만 자꾸 cors가 출력되었다.
배포해서 적용하면 혹시 달라지는 점이 있는지 궁금했기 때문에
간단하게 netlify로 임시배포를 하고 실행해보니
아래의 사진과 같은 Mixed Content 문제가 발생한다.
url 주소를 http로 해서 문제가 발생했는지 궁금했기 때문에 
https로 링크를 수정한 다음 재배포를 해봤지만 이번에는 CORS오류가 출력되었다.

이때까지도 왜 안되는지 고민했다..

임시 링크로 제공된 데이터였기 때문에 TTBKey는 없어도 될거라 생각했는데
생각해보니 이건 요청 URL이 아닌 결과 샘플이었다..

Mixed, cors를 떠나 결과샘플에 요청하는 헛짓을 열심히 했다는 것을 깨달은 다음

결국 임시 데이터 리스트를 구성한 다음 props로 넘겨주고
interface로 데이터를 받아 mapping하는 방식으로 완료했고
중간중간 interface와 임시데이터간의 키값 충돌로 인해 몇가지 텍스트가
출력되지 않는 가벼운 문제가 있는데 이부분은 내일 
api를 통해 받은 데이터의 key값에 매칭시켜 작업해야 할 것 같다.

진행 중 리코일로 상태를 관리하자는 말이 떠올랐지만
담당 페이지 자체가 '홈'이기 때문에 타 페이지들과 교류가 불필요하기 때문에
왜 사용해야 하는지에 대한 의문이 들었다.

리코일에 대해 알아보니 중요한 포인트는
atom, selector, hooks인데 기술 레퍼런스를 보면
atoms는 'useState()'의 '()'부분과 유사하고(상태저장)
selectos는 getter, setter로 useState의 state,setState와 유사하다.

Redux보다는 더 단순하고 비동기 문제 해결이 간편하며
Suspense로 구분된 컴포넌트들을 부드럽게 별로 렌더링한다는 장점이 있다.

또한 사용하지 않는 상태는 eslint에 경고가 나와서 불편했는데(useState)
(지금 예시를 떠올려보려고 하는데 어떻게 get/set을 사용하지 않는지 의아하다)
리코일은 하단처럼 getter, setter 구분사용이 가능하다는 장점도 있다.
const users = useRecoilValue(userStore);
const setUsers = useSetRecoilState(userStore);

다만 리렌더링 문제가 있기 때문에 setData({...data, newData:'data'}) 형식이 아닌
setData((data) => ({ ...data , newData:'data'}))형태로 만들어야 한다.

useState에서 recoil로 변환하는 것이 복잡한 것은 아니라고 생각되기 때문에
(useState로 작업한걸 구조적으로 뜯을 필요 없다는 의미)
익숙한 useState로 데이터들을 다 처리해본 다음 recoil로 변경하는 작업을 진행해야겠다.



1.이상현상(Anomaly)은 잘못된 테이블 설계로 발생하며 아래와 같은 Anomaly들이 존재한다.

삽입이상 - 기본키가 과다하게 존재해 기본키 중 일부가 없는 경우 추가가 안되는 현상
          해결하기 위해서 null값에 해당하는 지정 데이터를 설정 후 넣어줘야 한다.

갱신 이상 - 여러 테이블에 분산된 특정 정보를 변경하려다 하나 이상에서 누락된 경우 발생한다.

삭제 이상 - 테이블의 스키마에 데이터가 모여있는 경우
           특정 정보의 삭제시 같이 있는 데이터들도 삭제된다.
           (관계형으로 스키마를 쪼개서 방지해야 한다)

 

 

(1).백준 10162 전자레인지는 특정 시간을 최소 입력으로 조작하는 문제였다.
일반적 그리디 문제로 5분,1분,10초라 300,60,10초로 나머지 처리했다.

let input = 1889

let a = Math.floor(input/300)
let b = Math.floor((input%300)/60)
let c = Math.floor((input%60)/10)


if(input%10){
    console.log(-1)
}
else{
    console.log(a,b,c)
}