↑ md파일 정리본
API
구현 API 체크 목록
인증(O)
회원가입
로그인
로그아웃
인증 확인 및 내 정보
유저(🔼)
유저 목록(X)
현재 접속 중인 유저 목록(X)
유저 정보(O)
프로필 이미지 변경
설정(O)
내 정보 변경
비밀번호 변경
채널(X)
채널 목록
채널 정보
포스트(O)
특정 채널의 글 목록
특정 유저의 글 목록
특정 채널에 글 작성하기
특정 글 자세히보기
내가 작성한 글 수정하기
내가 작성한 글 삭제하기
좋아요(O)
특정 포스트 좋아요
특정 포스트 좋아요 취소
댓글(O)
특정 포스트에 댓글 달기
특정 포스트에 작성한 내 댓글 지우기
알림(🔼)
나의 알림 목록
알림 확인 처리
실시간 알림 확인 (WebSocket)
팔로우(X)
특정 유저 팔로우
특정 유저 언팔
메시지(X)
나의 메시지함 (소통한 유저 목록)
특정 유저와 소통한 메시지 목록
특정 유저에게 메시지 전송
메시지 확인 처리
실시간 메시지 전송 확인 (WebSocket)
검색(🔼)
유저 검색
전체 검색 (포스트, 유저)
axios와 fetch
axios
- 써드파티 라이브러리로 설치 및 임포트가 필요
- 다양한 브라우저 호환성
- 사용하기 쉽고 개발자가 보기에도 간편한 code로 작성 가능
fetch
- 빌트인 API로 별도의 설치 불필요
- 모던 브라우저에서 사용 가능
- Promise 객체를 리턴
axios와 fetch의 차이
- axios는 다양한 브라우저에서 사용 가능.
fetch는 브라우저의 일정 버전 이상에서만 지원한다. ⇒ polyfill을 이용해 하위 호환성 지원이 가능하지만 불편하다.
- axios는 CSRF Protection 보안 기능을 제공한다.
fetch는 보안 기능이 없다.
CSRF(Cross Site Request Forgery)란?
⇒ 사이트 간 요청 위조
⇒ 웹 애플리케이션 취약점 중 하나로 사용자가 자신의 의지와 무관하게 공격자가 의도한 행동을 하여 특정 웹페이지를 보안에 취약하게 한다거나 수정, 삭제 등의 작업을 하게 만드는 공격방법
- axios는 결과값이 자동으로 json 데이터로 변환한다.
fetch는 then()을 통해 JSON 데이터 핸들링 필요.
axios와 fetch 중 아무거나 사용해도 무관하지만, react에서는 주로 axios를 사용한다고 합니다.
axios가 기능이 많아 통신하는데 활용도가 높다고 합니다.
또한, 둘 다 테스트해보니 API_KEY 같은 경우는 모두 .env 파일에 담아 숨겨야 하며 보안에 강하다는 뜻이 CSRF를 방지할 수 있기 때문이라고 하네요 😂
아래는 동일 동작하는 코드입니다 🙂
공통 스타일 변수 지정하기
- style폴더 안에 common.js / global-styles.js / mediaQuery.js만든다
- 각각 객체 만들어서 값 지정
- import해서 사용
global-styles.js
- reset css 코드 작성
common.js
- color
- font - 단축 속성 쓰는게 편할듯?
- sizing
