오랜만에 쓰는 WIL,,

커리큘럼 복습

cors 정책

• cors: Cross-Origin Resource Sharing
• 한 출처(origin)에서 다른 출처(cross-origin)의 원하는 리소스에 접근할 수 이쓴 권한이 있는지 없는지를 알려주는 매커니즘
• origin: scheme(프로토콜), host(도메인), 포트
• 셋 중 하나만 달라도 cross-origin이라, 나의 경우 톰캣(8080), 리액트(3000)이라서 cross 였당

회피 방법

• 브라우저 실행 시 외부 요청 허용하는 옵션 사용
• 웹 브라우저에 외부 요청을 허용하도록 하는 플러그인 설치
• JSONP로 요청
• CORS로 요청 (W3C에서 내놓은 표준)

사실 나는 proxy 미들웨어를 사용해 우회?회피? 했는데, 어… 어떤 방식인거지? 알려주세요 아시는 분들… 너무 무지하네요

동기/비동기

• JavaScript는 동기식 언어
• 한 작업이 실행되는 동안 다른 작업은 멈춤 상태! 자신의 차례 기다림
• 단일 스레드(싱글 스레드)
• 자바스크립트가 stack 구조로 함수를 쌓기 때문에 LIFO (call stack)
• 좀 복잡한 것 같은데 web의 경우 webapis라는게 task queue에 넣는 것 같다….
• 그리고 event loop라는 녀석이 있어서 어떻게 비동기적으로 웹이 돌아가게 한다!

카드뉴스에 자바스크립트 비동기라고 썼는데ㅋㅋㅋㅋㅋㅋㅋㅋ

아무튼 자바스크립트는 웹을 비동기로 돌리기 때문에, async, await 등을 이용해서 정보가 받아 진 후, 웹 보여주기로 처리합니다!

얼만큼 했냐면,,

• 로그인
• 회원가입
• 게시글 리스트
• 게시글 상세 페이지
• 게시글 작성
• 댓글 작성
• 글/댓글 공감하기

onClick에 parameter 넘기기

댓글 공감을 구현할 때, 어느 댓글의 공감을 눌렀는지 알기 위해 공감 버튼의 onClick에 parameter를 넘겨주고 싶었는데요..

<button
className="comment-agree-btn"
onClick={onClickAgree(1)}>
공감
</button>

이렇게 작성하자, 버튼을 누르지 않아도 onClickAgree가 실행되는 멋진일이 발생했습니다^^
테스트를 위해 alert가 뜨게끔 했는데 진짜 미친듯이 alert가 뜨더라구요;;
아마도 제가 javascript의 함수를,,, 잘 이해하지 못해서 그런게 아닐까 싶습니다.
자바는 함수는 무조건 ()인디

<button
className="comment-agree-btn"
onClick={() => onClickCommentAgreeBtn({ id: comment.id })}>
공감
</button>

이렇게 () => onClick() 형식으로 바꿔주었습니다!
아무래도 이게 ()가 있으면 바로 실행되는 것 같은데,, 최종 코드는 (), 즉 눌리면 => 그때 호출해줘가 아닐까 싶어요 ㅎ 아님말구

페이지 전환, 새로고침

페이지 전환은 history를 사용했습니다!

import { useHistory } from "react-router";
//생략
    let history = useHistory();
    history.push(`/board/detail/${writeResult.data.data.id}`);

여기서 포인트는 주소를 ‘/board’ 로 주지 않고 ‘board’ 로 주면 현재 주소에 주소가 누적되더라구요!?
가끔 그런 이슈를 겪었지만, 멋지게 성장했습니다😊

새로고침은

window.location.reload();

을 이용해 댓글을 작성하거나, 공감을 했을 때 값이 바뀌도록 했습니다.
근데 부분적으로 reder가 가능할 것 같네요 ajax처럼 굳이 전체를 새로고침 안해도?
방법을 아신다면 알려주세요 인혁님 민선님,, 저는 리액트응애니까요,,,

이거말고 특별한 트러블슈팅은 없었습니다
다만 제가 success를 succuess로 오타쳐서 고생한게 하나 있었죠..^^…

다음주 목표

메인 화면과 진로, 홍보 화면을 연결하고 쪽지를 조금 깨작거릴 생각입니다.
왜냐면 쪽지보내기 버튼을 과거의 제가 만들지 않았더라구요 ㅎㅎ
모두 화이팅!