오늘 공부한 것
REACT 기본 과제 - 3일차
내가 만든 중국어 단어장
(도메인을 잘못 샀다...🤦🏻♀️)
1. Firestore에서 date로 정렬하여 무한 스크롤하기
어제 구현한 무한 스크롤은 num이라는 아무 의미 없는 수를 무작위로 겹치지 않게 넣어준 후 정렬해서 데이터를 받아왔다.
하지만 새로 단어카드를 생성할 때마다 값을 넣어준다면 date를 사용하는 것이 가장 알맞다는 생각이 들었다.
그래서 데이터에 date라는 키를 주고 value로 Date.now()값을 저장해주었다.
Date.now()는 number라 다루기도 쉽고, 굉장히 작은 단위의 시간이므로 고유한 값이 될 수밖에 없다✨
다행히 별다른 오류 없이 num에서 date로 기준을 바꿀 수 있었다.
2. 빈 칸으로 제출하면 저장되지 않도록 설정
단어 입력 폼에서 입력 값이 없어도 데이터가 저장되고 카드가 생성되는 문제가 있었다.
처리를 안해줬기 때문에 당연히 발생한 문제...🙄
한 칸이라도 비워져있으면 alert로 안내 메세지를 보여주는 동시에 제출 함수를 return해서 스토어나 firestore에 저장되지 않도록 했다.
사실 처음에 alert만 보여줘놓고 다 했다고 커밋도 했었다.
3. 암기 완료, 수정, 삭제 기능
1) 암기 완료
기본 카드는 흰 배경에 초록색 border를 가지고 있지만 위에 체크 버튼을 누르면 '암기 완료' 상태가 되어서 아래 처럼 카드가 바뀌도록 설정했다.
'암기 중'과 '암기 완료' 로 필터링해서 보여주는 것도 해보고 싶은데, 내일 일어나서 고민해보려고 한다😅
2) 수정 · 삭제
수정과 삭제 기능은 미리 액션함수를 다 만들어놨기 때문에 firebase와 연결만 하면 되는 문제였다.
수정기능을 구현할 때 state에 있던 데이터를 불러와서 <input> 태그 안에 value로 넣어버리려다가 리액트에서는 그렇게 하면 안된다는 오류들과 잔뜩 마주쳤다ㅎㅎ
그래서 CustomInput 안에서 state로 관리하고 onChange로 변경을 확인할 수 있도록 바꿔주었더니 해결되었다!
프로그래머스 level 2
하.....................
계속 50점만 맞고 있다.
한 문제는 처음에 삽질하면서 풀다가 어느 순간 깨달아서 구현해놓으면 50점을 받는다. 하지만 그 때는 이미 남은 시간이 20분 정도밖에 되질 않고, 마음이 급해서 아무 생각도 들지 않는다.
결론은 잠시 level 2를 포기한다....
level2를 풀지 못하는 이유는 문제를 봤을 때 이 문제를 어떤 방식으로 풀어야 할 지 한 번에 감이 안온다는 점이라고 생각한다.
더 많은 문제를 풀어야 감도 생기겠지😣
잠시 내려두고 프로그래머스에 있는 다른 문제들을 먼저 풀어봐야겠다.
article
🍪 프론트에서 안전하게 로그인 처리하기 (ft. React)
조각조각 알던 내용들을 한 번에 정리한 느낌이다.
- 세션과 JWT
- 쿠키
- XSS, CSRF 공격
그 중에서 가장 잘 모르고 있던 secure, HTTPOnly 쿠키를 간단히 적어놓으려고 한다.
secure쿠키
: 쿠키 생성 시 secure라는 접미사를 붙여 생성한다.
HTTPS가 아닌 통신에서는 쿠키를 전달하지 않도록 만들 수 있다.
HTTPOnly쿠키
: 쿠키 생성 시 HttpOnly라는 접미사를 붙여 생성한다.
브라우저에서 해당 쿠키로 접근할 수 없도록 해 준다.
내일 할 일
article
algorithm
