myPage 데이터 제대로 오는지?
생성 당시 path와 지울 때의 path가 일치해야지만 쿠키를 지울 수 있다.
⇒ 로컬스토리지로 변경
myPage
1.
server/dao/movies.js에 findMovieByUserEmail 함수 추가
2.
server/controllers/movies.js에 getMyScoredMovies 함수 추가
3.
server/routes/movies에 router.get('/:userEmail', movieCtrl.getMyScoredMovies); 추가
→ 서버 함수 완료
쿠키 삭제? 덮어씌우지말고 삭제하면 됨 < = 서버가 쿠키를 만들고 지워줘야 함
성공하면 쿠키를 만든다. 로그아웃해주세요 하면 서버가 쿠키를 지운다. 그럼 클라이언트에 있는 쿠키도 날라간다.
되돌아가면 안된다. 쿠키에 이런 문제가 있어서 로컬스토리지로 했다고 말할건가? 그럼 더 공격당하죠. 토큰 관리하는 방법 2가지가 있다. 쿠키가 낫다는 이유가 있음. 쿠키로 하려다가 안되서 로컬스토리지로 했다는 안된다.
로컬스토리지의 경우는 헤더에 담아서 계속 날려줘야 함. 그럼 서버와 클라의 구현자체가 달라진다.
쿠키를 왜 선택했는가? 보안에 안전하다는 이유가 뭔가? 그게 문제다.
문서를 보면 HTTPOnly 쓰고 등등 해야 한다.
쿠키 변수 선언할 필요도 없음 date, Cookie + let을 왜 썼느냐?
클라이언트는 쿠키를 봐도 안되고 업데이트해서도 안된다. 그게 보안에 안좋은 것이다.(서버만 봐야된다.)
⇒ 쿠키는 헤더에 매번 담아주지 않아도 된다.(장점) 세션이 이어져 있을 때 원래 사이트로 리퀘스트를 보내면 쿠키에 있는 게 그대로 간다. 알아서 헤더에 들어가 있으므로 알아서 간다. get(url) { return fetch(url).then();}
그럼 서버는 이 토큰이 유효한지 검사를 한다음 클라이언트에게 알려준다. 유효하다면 그 이후 동작을 진행하면 된다.
⇒ then 쓰면 안된다. catch도 안 쓰고 있어서 에러처리가 안되고 있다.
이 밖에서 try...catch안에서 호출하고 있는데?
여기도 처리가 불충분함
여기서 ok인지 확인하고 나서 추가 처리를 해줘야 한다.
status 400, 500이 있음
이에 대해 처리가 필요하다. catch에서 된다고 보고, 위에 10번에서는 왜 then을 썼는지? 다른데서는 try catch를 썼는데? 이런 게 코드의 일관성이 없는 짜집기한 코드임.
fetch ⇒ axios
cookie를 쓸 것인지 local을 쓸 것인지? 바꿀 수 있느냐라는 걱정. 쿠키 하나라도 만들면 값진 것이다.
matches에다가 *(all)을 준다. 너무 많이 잡힐 수 있다. selector에 all은 안쓰는 편
target에서 closest?
span, 아이콘에서 발생하는 이벤트를 막아주면 된다. ⇒ CSS로 할수 있다.
그럼 button 내부에 있는 요소들을 클릭하더라도 무조건 button에서 이벤트가 발생하게 된다.
awesome icon을 넣어본 사람들은 다 경험해본다. 이게 중요하다. 꼼수로 하면 반복된다.(TODO 나중에 안 고침, pr 또보내기 싫어서 한번 할 때 잘 보내야됨)
범위를 좁혀야 한다. 문제가 터지면 알고 넘어가야지가 아니라 되게 할까?가 된다. 너무 할 게 많기 때문이다.
matches 관련 하위 요소 이벤트는 어떻게 다 잡지?
초기화(null,,,)를 항상 꼭 해주어야 한다. 이 변수를 사용할 때 null인지 체크해주면 되니까
로그인 안 했을 때는 서버에 요청을 안 보내는 거죠? 로그인 했을 때만 myReview가 있는 거잖아요?
이 변수를 실제로 선언한 곳과 사용하는 곳이 너무 떨어져 있다. === 응집도가 낮다. 그래서 가장 좋은 것은 쓰기 직전에 만드는 것이다.
초기값이 없는 게 어떨 땐 없고 있으면 헷갈린다.
100라인일 때 10이면 10000라인이면 100제곱이된다.
html가 js가 종속되어 있다.
내가 이해 안 가면 다른 사람은 더 안 간다. 실력이 없으면 인간관계가 나빠질 가능성이 높다.
쿠키는 클라이언트의 접근을 막기 때문에 더 보안에 좋다., axios는 장점을 모른다. fetch는 axios처럼 함수화해놨는데 차이가 있는지 ?
클라이언트 myPage 데이터 렌더링 확인만 하면 됨
보고서는 목요일 점심까지 문제, 해결, 배운 점
!res.ok로 잡아주지 않으면 try로 진행되는 statusCode가 있어서 fetch는 parseToJson 함수가 필요함
한글 인코딩 %23243525#%
404페이지 App.js else에서 처리해줄 수 있음
debounce >> 라이브러리?
itemNumber - currentSlide * ITEMS_PER_PAGE < 1
currentSlide : 20 5개씩 보여준다고 하면4번으 ㅣcurrentSlide.
JavaScript
복사
isAuth는 movieDetailsPage에서는 그대로 사용
releaseDate가 빈 문자열인 경우 split에서 에러가 터짐
디스트럭쳐링해야할 것들 하고, 1개짜리는 해야할지?
문자열로 띄어쓰기 된 클래스를 받을 때
$movieCommentCarousel.className = 'detail-container_comment-list carousel-slides';
JavaScript
복사
export {} vs export default {}
export 할 경우에는 import { 함수명 } from * 으로 사용하는데, export default 하실 경우에는 import 함수명 from * 으로 사용하게 됩니다.
쿠키는 익스텐션들이 만들기 때문에 원래 없다고 가정해야 한다.
여러개의 쿠키가 있다면 서버에 자동으로 보내진다. 따라서 보내지 않았어야 한다. (ga,,,)
뭔가 만들어져 있다면? 보내지는가? 보내졌다. 왜 간거지? 긁어가지고 간거다.
쿠키는 서버가 만들어준 것만 간다. 원래는
httponly나 만료기한 등의 설정이 있어야만 한다. 그렇지 않으면 쿠키를 사용할 이유가 없다. 영구기한이 되기 때문에. 한번 로그인하면 영구적으로 가능하다.
토큰은 탈취될 수 있기 때문에... 유효기간을 일주일로 주고. HTTPOnly는 반드시 줘야 한다. 쿠키를 클라이언트에서 못 쓰게 하는 것이다. 탈취해서 조작할 수 있기 때문에 httponly express cookie
(24년도, httponly체크)
쿠키 만들때 키하고 내용인데, 그 키를 cookies에 넣어서 호출하면 accessToken에 값만 들어온다. ⇒ 이렇게 서버에서 받아주면 자를 필요가 없어진다.
여기 적은 문자열 ‘accessToken’을 다시 req.cookies(’accessToken’);과 같이 주면 된다.
쿠키는 대소문자 구별을 안해서 섞지말고 소문자로 적어야된다. access_token
cookieParser()를 했는데 왜 headers.cookie에 쿠키가 안들어온다.