오랜만에 쓰는 WIL,,
그 동안 내가 springboot 팀을 이끄느라 슬라이드를 만드느라고 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로 오타쳐서 고생한게 하나 있었죠..^^...
다음주 목표
메인 화면과 진로, 홍보 화면을 연결하고 쪽지를 조금 깨작거릴 생각입니다.
왜냐면 쪽지보내기 버튼을 과거의 제가 만들지 않았더라구요 ㅎㅎ
모두 화이팅!
