TIL

  • 5. 오늘 알게된 내용 (React & Django)
  • 4. 이번주에 본 개발관련 자료들 #3
  • 3. 이번주에 본 개발관련 자료들 #2
  • 2. 오늘 알게된 내용 (React Router)
  • 1. 이번주에 본 개발관련 자료들 #1

오늘 알게된 내용 (React & Django)

2주, 4일 전
@baealex

소비적인 일보단 생산적인 일을 좋아합니다.

요즘은 현재 이 사이트를 SPA로 변경하는 것에 온 신경을 집중하고 있다. 바꾸는 가장 큰 이유는 백엔드를 다른 언어로 전환하고 싶었는데 프론트가 장고에 너무 의존적이라 먼저 프론트엔드를 분리하고자 하였다. SPA를 이렇게 큰 규모로(?) 만져보는 건 처음이라 React를 이렇게 쓰는게 맞는건가 싶기도하고, 백엔드와 관련된 작업을 진행하면서 막히는 부분이 많아 장고에 너무 의존하고 있었으며 웹에 대한 저수준 지식이 많이 부족하다는 것을 느낀다.


Watchpack Error

Watchpack Error (watcher): Error: ENOSPC: System limit for number of file watchers reached

리액트는 핫리로딩을 지원하는데 리눅스의 경우 감시해야 할 파일의 갯수가 초과되면 위와같은 에러를 발생시킨다. 아래와 같이 설정하면 에러를 뜨지 않게 바꿀 수 있다.

sudo vi /etc/sysctl.conf

하단줄에 아래 옵션 추가

fs.inotify.max_user_watches=524288


sessionid와 document.cookie

axios로 로그인 요청시 장고에서 cooket-set으로 sessionid와 key를 설정하는데 key는 document.cookie에서 보여지지만 sessionid의 경우에는 어떻게 해도 볼 수 없었다. Next에서 Cookie를 가져오면 또 가져와져서 꼼수를 부려보려다 1시간 정도 날린 거 같다. 결론은

set-cookie시 HttpOnly로 설정한 경우 클라이언트에서 해당 쿠키에 접근할 방법이 없단다. 로그인 상태를 파악하기 위해 장고에서 해당 옵션을 바꿔주던지 다른 방법을 사용해야 했는데 어차피 컴포넌트 초기화시 한번만 파악하면 되므로 백엔드에서 엔드 포인트를 여는 것으로 합의봤다.


Django, CSRF Disable

처음에는 프론트엔드에서 CSRF 쿠키를 가져와서 처리하려고 하였으나 장고에서 템플릿을 렌더링하지 않는 이상 해당 기능을 사용할 수 없는 것으로 보인다. 여하지간 @csrf_exempt 데코레이터를 사용하면 뷰의 부분부분 CSRF 검사를 해제하는데 전역적으로 해제하기 위해선

from django.utils.deprecation import MiddlewareMixin

class DisableCSRF(MiddlewareMixin):
    def process_request(self, request):
        setattr(request, '_dont_enforce_csrf_checks', True)

위 클래스를 선언하고 settings에서 미들웨어에 해당 클래스를 추가하면 된다.


Axois, withCredentials

백엔드 서버에 쿠키를 전달해야 했는데 쿠키는 기본적으로 타 사이트간에 전송이 불가하단다 상식이려나...? Axios의 경우 옵션으로 withCredentials: true를 지정하면 쿠키를 전송할 수 있다.

import axios import 'axios'

axios({
    method: 'PUT',
    url: 'http://localhost:8000/api/apple'
    withCredentials: true
});

// 기본으로 설정
axios.defaults.withCredentials = true;

그래서 하라는대로 위와같이 PUT 요청을 보냈더니 OPTIONS로만 요청을 보낸 뒤 아무런 반응이 없었다. 이걸로도 한 1시간 날린 것 같은데 장고에서도 다음 설정을 settings에 추가해야 한다.

CORS_ALLOW_CREDENTIALS = True

진짜 눈물 흘릴뻔 했다.


React, componentDidUpdate

Link로 페이지 전환시 컴포넌트가 변경되지 않는 경우 해당 컴포넌트의 state를 그대로 유지하는 것 같다. state가 props에 의존적인 경우 componentDidUpdate에서 다음과 같이 작업하면 된다.

componentDidUpdate(prevProps, prevState) {
    if(prevProps.someItem !== this.props.someItem) {
        this.setState({
            ...this.state,
            item: this.preps.someItem
        });
    }
}
작성된 댓글이 없습니다!
로그인된 사용자만 댓글을 작성할 수 있습니다.