[취업준비일지] - 48 - 원티드 온보딩 인턴쉽 사전과제

https://ryujichang-wanted-pre-onboarding.netlify.app/todo

오늘도 프로젝트가 아닌 원티드 온보딩 인턴쉽 사전과제를 진행중이다.

회원가입/로그인 두개의 페이지를 만드는 것은 이상하고 
요구하는 것도 Email, Password로 동일했기 때문에
네이버 같은 곳에서 로그인 할 때 form 상단이 변하듯 css를 만들었다.

props를 styled-components에 넣는 방식이 ${}인걸 깜빡하고 {}로 넣었다가 당황한 다음 삼항연산자로 처리할 수 있었다.

disabled 설정 또한 input에서 값을 입력받을 때 상태값 하나를 추가했었는데
한턴정도 느리게 반영되기 때문에 즉각적으로 해제 또는 disable가 되지 않았다.
이 문제를 해결하기 위해 disable 상태값을 만든 로직이었던 
오류메세지 길이 비교를 바로 넣어서 실시간으로 비교되게 진행했다.
일반적 값이라면 문제가 있을 수 있지만 
두 오류메세지 모두 useState로 관리받고 있기 때문에 문제없었다.

그럼에도 불구하고 제대로 동작하지 않아서 원인을 찾다가
!aa === bb로 비교를 넣었는데 !aa와 bb가 비교되어버렸다.
!(aa === bb)로 변경하니 다시 잘 돌아갔다.

요구사항과 관련된 내용들을 처리한 다음 기능으로 들어갔는데 
역시 기능구현이 훨씬 쉽고 빠르게 처리됐다.

처리라고 해봐야 유효성검사 때문에 미리 값들은 다 가지고 있기 때문에
axios로 post하는 것이 거의 다였는데
재사용성을 고려해 axios url부분에 삼항연산자를 줬다.

Assignment1은 완료했고
Assignment2의 /todo 이동 및 localStorage 저장을 처리해야겠다.
둘 다 간단한 기능이기때문에 빠르게 마무리할 수 있었다.

Assignment3 또한 2번의 확장과 비슷했기 때문에 간단하게 해결했지만
Assignment4는 투두리스트 페이지 레이아웃을 잡는 것 부터 다시 시작이다.

작업 도중 useStateSnippet라는 기능이 
useState를 편하게 생성하게 한다는 사실을 알게 되었다.
state와 setState의 형태도 자연스럽게 set뒤에 한글자가 대문자로 바뀌고
tab 키를 통해 작성 후 전환이 가능하다.

레이아웃 작성 완료 후 update, dlete를 구현했다.
도중 checkBox의 checked의 값을 관리하는 것이 어려웠는데
useState의 한발 느린 반영 때문에 저장시 데이터가 반대로 들어가는 문제였다.

문제를 해결하기 위해 추가적 정보를 el이라는 매개변수로 넣었는데 다 터져버렸다.
당연히 지금은 쉽게 알겠지만 props로 가져온 값의 데이터도 el이라고 지정했고 지역매개변수로도 el을 사용해 id값을 가져올 수 없게 된 것이었다.

스코프 문제도 있기 때문에 변수명은 주의해서 사용해야 할 것 같다.
특히 알고리즘 등에서는 (el => xxx)같은 형태를 많이 사용해 실수해버렸다.
이번에도 좋은 경험들을 많이 하는 것 같다.

이제 꼬여있기 때문에 한번에 처리해야 헀던
list쪽의 Update, Delete, checkUpdate 부분이 끝나고
Create 하나만 남은 상황이다.

생각해보니 check 상태에서는 수정이 불가능하며 
checkBox 외에 색 변화도 필요하다고 생각하는데
이건 Create가 끝나고 해봐야겠다.

Create를 마무리하고 전반적인 기능 테스트 후
로그아웃 기능이 필요하다고 생각되는데
단순히 Home으로 이동시키고 LocalStorage를 지우면 끝나지만
로그아웃 버튼 추가를 위해 헤더를 만들어야 하는 이상한 일이 생겨버렸다.

하지만 Assignment3의 토큰이 없는 상태로 접속한다는 이야기가 있는데
application에서 직접 지워서 할 수 있긴 하지만
상식적으로 로그아웃은 필요하다고 생각되기 때문에
어쩔 수 없이 헤더도 진행한다.

이번주 수면시간이 10시간이 안되는 것 같은데
시간의 제한이 있어서 그런건지 더 흥미진진하게 했던 것 같다.
헤더 마무리 후 배포를 한 다음
쓸대없는 네이버 블로그에서 티스토리로 숏에세이도 옮기고
제출 서류도 스캔해서 마무리해야겠다.

배포를 마무리하고 모든 기능이 정상 작동하는 것을 확인했지만
새로고침을 할 경우 터져버리는 현상이 발견되어
이전에 해결했던 방법인 배포 폴더에 _redirects파일 생성 후
/* /index.html 200 기입으로 해결했다.

한자리에 앉아서 해결하긴 했지만 
새로 배운 방식들을 적용하느라 생각보다 긴 시간이 걸렸다.
다음에 유사한 기능을 만든다면 8시간 안에 할 수 있을 것 같다.

 

단기간 특훈같은 느낌이었다.

 

 

 

1.Key는 Tuple을 구분할 수 있는 기준이 되는 속성이다.
후보키, 기본키, 대체키, 슈퍼키, 외래키라는 5가지 속성이 있으며
아래와 같은 특징이 있다.
후보키 - 유일성과 최소성의 조건을 만족한다.
기본키 - 동일한 값의 중복이 없어야 한다.
대체키 - 후보 및 기본키가 아닌 나머지 키를 칭한다.
슈퍼키 - 유일성은 만족하지만 최소성이 없어 후보키가 되지 못한 키
외래키 - 다른 릴레이션의 기본키를 그대로 참조하는 키

 

 

 

 

 

(1).백준 5086 배수와 약수는 각 숫자가 배수/약수의 관계인지를 판별하는 문제로 각 관계에 따라 문자열을 출력하는 문제였다.
a%b === 0을 통해 나머지가 없으면 배수임을 확인했다.

let input = `8 16
32 4
17 5
0 0`.split('\n')

let result = []
for(let i = 0 ; i < input.length-1 ; i++){
    let [a,b] = input[i].split(' ').map(Number)
    if(a%b === 0){
        result.push("multiple")
    }
    else if(b%a === 0){
        result.push("factor")
    }
    else{
        result.push("neither")
    }
}

console.log(result.join('\n'))