210802 TIL

Feeling

- 따라가고 싶은데 계속 뒤에서 헤매고 있으니 스스로 답답하고 짜증이 난다.
- 매번 목표치를 못끝낸다... 욕심인가?

절차지향적 사고 로깅

- 목표치에 있는 짜잘한 요구사항 비교하면서 코드 수정해주기
- 미드웨어 구상시도
    1. 일단 로그인한지점부터 서버와 클라이언트가 token을 패스패스패스한다. 그런데 기억하기로는 토큰을 돌려줄때 매번 지운다고 했나 뭐였지.... 매번 생성해서 인증한것 같은데 구현 시도전에 일단 생각대로 적자
    2. 미드웨어 파일에 jwt와 유저스키마를 import 해준다.
    3. 미드웨어로 들어올 req에서 토큰을 받아준다.
    4. jsonwebtoken의 verification으로 받은 토큰의 원래 값(비밀번호와 닉네임 보다는 고유의 값인 userId를 토큰으로 설정 해두었어야 함)으로 돌려준다.
    5. 강의를 보면서 할때 Bearer가 왜 나온건지는 모르겠지만 일단 token을 복호화 시켜서 해당 값이 데이터베이스에 있는지 체크를 해준다. 없으면 요구사항에 맞춰서 에러처리
    6. 해당 토큰이 맞으면 다른 api에서 접근을 할 수 있게 res.locals로 시작하던 어떤함수가 있었는데 여튼 그걸 써준다.. 생각해보니 이걸 쓰려면 ajax방식으로 써야 되는건가? 어차피 댓글 기능을 추가로 하려면 ajax방식을 써야 같은 페이지에 두개이상의 api가 사용 될것 같으니 이번에 체화 시키자. 파일을 만들어서 짜잘한 ajax 통신 방식 test 후 사용하는게 더 빠를듯?
    7.  어쨌든 userId를 해당 res.locals에서 구조분해 할당을 한다음 로그인 한 유저의 고유값으로 데이터베이스에 접근을 해 알아서 잘쓰면 된다.
    8. console.log로 해당 유저의 데이터가 잘 들어 오는지 확인을 하면 끝

- 궁금한게 서버쪽에서 req send로 보내면 음... 로그인 성공시 나오는 토큰만 프론트에서 휘발성으로 사용하지 않고 req할때 마다 보내는 식으로 저장을 해둔건가? 다른 api의 req는 받은데로 페이지에서 나타내고 그다음은 쓰지 않으니까? header에 저장되는게 수동적으로 처리 하는 거겠지? ajax에 data를 담아서 보낼때 header에 변수에 담아서 보내겠지?
- ajax 사용설명서 다시보기
- ajax 사용법 테스트해서 알아내는중
    - 1주차때 배웠던 기억과 요리조리 테스트해서 어떻게 사용하는지 알아내었다! 기분이 좋다!
    - 받은 값을 끼워 넣는 법도 알게 되었는데 나만 이제 안것 같아 자괴감이 들기도 하네 이거 좋아해야 되는 건가?
- form 대신 ajax 사용하는 법은 대강 알았는데 토큰을 매번 서버에서 받아서 어디다 저장을 하는 거지? 저장을 계속 해두어야 되는것 아닌가? ajax header라는 곳에 받으면 계속 저장이 되어 있는 건가? 왜 header라는 곳에 담아 두는 거지?
- 웹개발 플러스 로그인 부분에 프론트다루는거 보기, 페이지 이동할때마다 토큰을 파괴하고 요청할때마다 토큰을 보내는 걸로 알고 있는데 다시 한번 찾아보기
    - 심화주차 2-4 로그인 구현하기 6분9초
- 프론트는 스스로 작동을 하지 않는 거라고 이해를 해서 그런가 서버쪽에서 res.locals에 값을 담을 수 없다고 이해를 했음... 그래서 매번 토큰을 따로 저장을 해야되는데 저장하는 과정이 안보였는데 localStorage.setItem과 localStorage.getItem으로 브라우져에 전역에 저장을 할 수 있다.
- 프론트에서 localStorage 사용해서 다른 페이지에서 해당 변수에 접근가능하는지 테스트중
    - token이 다른 페이지에서 undefined라고 뜨던데 이유가 사전에 내가 잘못 테스트한 부분을 사실로 인지 하고 있어서이다. 어쩔땐 프론트 파일만 세이브하고 브라우져에서 세로고침 안해도 작동하던데 항상 test하는 경우는 브라우져도 새로고침 해주어야 겠다. 이해를 완벽히 하기 전까지는
- 인증기능 미드웨어 만들고 토큰이 필요한곳에 전부 인증미드웨어 추가하기
- ㅋㅋㅋ 아니 인증 미드웨어 쓰려면 req.headers에 담아서 보내줘야 되는데 form은 서버에 쿼리 형식이나 body에 담아서 밖에 못보내지 않나? 그럼 ajax로 전부다 바꿔주어야지 되는것 아닌가?  아하 조회에서 수정넘어갈때 인증 필요하니까 조회페이지에서 ajax를 추가하면 되는군.... 아 머리 복잡하네 원래 이런식으로 사고하면서 다들 코드 짜나 싶네
- ajax에서 query 가져오기

    > let searchParams = new URLSearchParams(window.location.search)
    let postId = searchParams.get('쿼리이름')

- ajax에서  params 가져오기

    > let searchPath = window.location.**pathname**

    - ex)

        url = [http://localhost:3000/posts/reading?id=2](http://localhost:3000/posts/reading?id=2)

        console.log(searchPath)는 /posts/reading이다 split 함수 써서 원하는 부위를 잘 가져가면 되겠다.

- form베이스로 작성된 값들을 ajax와 번갈아 가면서 쓰는게 말이 되나? 되는건가? 아니 한번만 전환 하면 문제 없을 것 같기도 번갈아 쓰니까 정신 나가겠네
- 그냥 처음부터만들어....

금일목표에서 추가적으로 한일

- ajax 사용법 체화 시키기
    - 1주차에 물론 배웠지만 기본주차때 ajax를 사용하지 않고 form형식으로 해서 한달반전에 배운걸 다시 쓰려니 체화 시키고 쓰는 법을 찾는데 시간이 오래 걸렸음

금일목표

- [ ]  회원 가입 페이지
    - **회원가입 버튼을 클릭하기**
    - ❓닉네임, 비밀번호, 비밀번호 **확인을 입력**하기
    - 닉네임은 `최소 3자 이상, 알파벳 대소문자(a~z, A~Z), 숫자(0~9)`로 구성하기
    - 비밀번호는 `최소 4자 이상이며, 닉네임과 같은 값이 포함된 경우 회원가입에 실패`로 만들기
    - **비밀번호 확인은 비밀번호와 정확하게 일치하기**
    - **데이터베이스에 존재하는 닉네임을 입력한 채 회원가입 버튼을 누른 경우 "중복된 닉네임입니다." 라는 에러메세지를 프론트엔드에서 보여주기**
    - **회원가입 버튼을 누르고 에러메세지가 발생하지 않는다면 `로그인 페이지`로 이동시키기**
- [x]  로그인 페이지
    - **로그인, 회원가입 버튼을 만들기**
    - **닉네임, 비밀번호 입력란 만들기**
    - **로그인 버튼을 누른 경우 닉네임과 비밀번호가 데이터베이스에 등록됐는지 확인한 뒤, 하나라도 맞지 않는 정보가 있다면 "닉네임 또는 패스워드를 확인해주세요"라는 메세지를 프론트엔드에서 보여주기**
    - **로그인 버튼을 눌러서 에러 메세지가 발생하지 않는다면 `전체 게시글 목록 조회 페이지`로 이동시키기**
- [ ]  로그인 검사
    - `아래 페이지를 제외하고` 모두 로그인 한 경우만 볼 수 있도록 하기
        - 회원가입 페이지
        - 로그인 페이지
        - 게시글 목록 조회 페이지
        - 게시글 조회 페이지
    - 로그인을 하지 않거나 올바르지 않은 경로로 접속한 사용자가 로그인이 필요한 경로에 접속한 경우 "로그인이 필요합니다." 라는 메세지를 프론트엔드에서 띄워주고 `로그인 페이지`로 이동시키기
    - 로그인 한 사용자가 로그인 페이지 또는 회원가입 페이지에 접속한 경우 "이미 로그인이 되어있습니다."라는 메세지를 띄우고 `전체 게시글 목록 조회 페이지`로 이동시키기
- [ ]  게시글 조회 페이지 > 댓글 목록 조회
    - 로그인 하지 않은 사용자도 댓글 목록 조회가 가능하도록 하기
    - 현재 조회중인 게시글에 작성된 모든 댓글을 목록 형식으로 볼 수 있도록 하기
    - 댓글 목록 위에 댓글 작성란 만들기
        - 댓글 작성에 관한 기능은 5번 요구사항으로 연결하기
    - 댓글 목록 중, 내가 작성한 댓글인 경우 댓글 수정, 댓글 삭제 버튼 만들기
        - 댓글 수정 버튼을 누르면 6번 요구사항으로 연결하기
        - 댓글 삭제 버튼을 누르면 7번 요구사항으로 연결하기
    - 제일 최근 작성된 댓글을 맨 위에 띄우기
- [ ]  게시글 조회 페이지 > 댓글 작성
    - 로그인 한 사용자만 댓글 작성이 가능하도록 하기
    - 게시글 조회 페이지 하단에 댓글 내용을 입력할 수 있는 댓글 작성 버튼 만들기
    - 로그인 하지 않은 사용자가 댓글 작성란을 누르면 "로그인이 필요한 기능입니다." 라는 메세지를 띄우고 `로그인 페이지`로 이동시키기
    - 댓글 내용란을 비워둔 채 댓글 작성 버튼을 누르면 "댓글 내용을 입력해주세요" 라는 메세지를 띄우기
    - 댓글 내용을 입력하고 댓글 작성 버튼을 누른 경우 작성한 댓글을 추가하기
- [ ]  게시글 조회 페이지 > 댓글 수정
    - 내가 작성한 댓글만 수정 가능하도록 하기
    - 댓글 본문이 사라지고, 댓글 내용, 저장 버튼 생성하기
    - 댓글 내용에는 이전에 입력했던 댓글 내용을 기본 값으로 채우기
    - 수정할 댓글 내용은 비어 있지 않도록 하기
    - 저장 버튼을 누른 경우 기존 댓글의 내용을 새로 입력한 댓글 내용으로 바꾸기
- [ ]  게시글 조회 페이지 > 댓글 삭제
    - 내가 작성한 댓글만 삭제 가능하도록 하기
    - "정말로 삭제하시겠습니까?" 메세지를 띄우고, 확인/취소 버튼 중 "확인" 버튼을 누른 경우 목록에서 해당 댓글을 삭제하기
    - 취소를 누른 경우 삭제되지 않고 그대로 유지하기

TimeTracking

- 3:00 - 오전
    - 침대 누워도 잠이 안올 것 같아서 집에 갈지 안갈지 고민중...
        - 오늘 하루는 버텨야 되나?
        - 최소 퇴근 시간
            - 오후 7시이후 && (오후 3시+ 낮잠시간)
- 3:02
    - 금일 목표치 세팅중
- 3:10
    - 코딩중
- 3:50
    - BR
    - 불필요 시간 줄이기
        - 우선순위 인지!
    - 크루원 TIL 훔쳐봄 - 휴식에 포함 다음에 인지할것
- 4:05
    - 코딩중
    - 졸림
- 5:23
    - BR
- 5:30
    - 숙면 - 3시간 30분
        - 4-5번깸
- 9:00
    - BR
    - coffee
- 9:30
    - 코딩중
- 11:50
    - 질의 응답
        - 질문시 옹알이 금지
            - 오래 걸려도 좋으니까 정리해서 오기
            - 정리가 잘안되면 글로 써서 어떤 부분을 말할지 적어보기
- 12:10 - 오후
    - BR
- 12:18
    - 코딩중
    - 졸림, 멍..
- 12:30
    - rest
        - 숙면 -1시간15분
    - 준비
- 1:54
    - 코딩중
    - 집중력이 분산됨
        - 졸림과 연관성?
            - 있음
- 2:52
    - 점심
- 3:00
    - 코딩중
    - 졸음이 쏟아진다
- 4:00
    - 낮잠- 1시간40분
- 5:44
    - 코딩중
    - 6:23
        - 질의응답
            - 명확하게 질문을 전달해야 답에 더 가까워 질 수 있다. 개떡같이 말하지 말고 찰떡같이 말하려고 노력할것
                - 별거 아닌 것 같은 질문이어도 되도록이면 질문전에 스스로 검증을 하기
- 6:50
    - BR
- 6:55
    - 코딩중
- 8:44
    - BR
- 8:57
    - 미팅
    - 질의응답
- 9:24
    - 코딩중
- 10:56
    - 질의응답
- 11:06
    - 코딩중
- 11:35
    - 편의점
    - 11:52
    - 저녁
- 12:39
    - 코딩중
- 1:10
    - 질의응답
        - 혼자 고민을 오랫동안 할때는  나오지 않는 해결책이 왜 질문 하러오면 갑자기 떠오르지?
- 1:26
    - 코딩중
- 1:45
    - 질의 응답
- 2:10
    - 같은 고민을 했을 것 같은 크루원에게 물어보러왔다가 조언받고감
- 3:00
    - TIL 작성
 - 3:10 
 - 퇴근