공부/React

Django + React로 로그인 시스템 구현하기 / Pt. 2) React에 Django 연동하기

Pt. 2) React에 Django 연동하기 파트 1에서는 Django로 JWT 토큰을 이용한 로그인이 동작함을 확인했다. 이제 이것을 프론트엔드와 연결해 보도록 하자. 원래 진행하고 있는 프로젝트에서는 TypeScript로 진행하고 있지만, 튜토리얼 프로젝트에서 굳이 거창하게 TypeScript를 사용할 이유도 없다고 판단했고, TypeScript를 사용할 수 있는 사람은 JavaScript 코드만 봐도 응용할 수 있을 것이라 생각하기 때문에 여기에는 JavaScript 코드로 진행하기로 했다. React 프론트엔드 프로젝트 설정하기 우리의 친구 CRA를 이용하여 프론트엔드 프로젝트를 설정해 주자. 프로젝트의 최상위 폴더인 auth-tutorial 폴더로 나와서 아래와 같이 입력해 주자. $ npx ..

React에서 map() 사용 시 key 값에 대하여

개발 중에 갑자기 생각난 이슈. 요즘 새로운 프로젝트를 시작하고 있는데, React에서 자주 찾게 되는 Array.prototype.map() 함수에 대하여 고민해 보게 되었다. map()이 어떤 역할을 하는 함수인지, 어떻게 사용하는지에 대한 설명은 생략하고자 한다. 그 내용을 정리하기 위해서 쓴 게시글이라기보다는, 그 내용을 알면서도 활용할 때마다 항상 고민되는 주제에 대해 다루고자 한다. React에서는 map() 사용 시 key props를 사용하는 것을 권장하고 있다. 사실, ESLint 등을 통하여 작업을 하다 보면 설정에 따라서는 map() 사용 시 key를 부여하지 않는 경우 컴파일 타임에서 에러가 나는 경우도 있다. 지금 진행 중인 프로젝트에서도 ESLint를 초기화만 하고 별다른 rul..