react

GitHub을 이용한 React 프로젝트 배포하기

들어가며 프론트엔드 개발을 막 시작했을 때, 연습 삼아서 몇번 HTML+CSS+Vanilla JS로 이루어진 페이지를 GitHub을 이용해 배포해 본 적이 있다. 이번에 모 회사에 지원하면서 포트폴리오를 꼭 제출해 달라고 해서, 미루고 미루던 포트폴리오를 급하게 제작해서 GitHub을 통해 배포해서 제출하고자 했다. 참고로 포트폴리오 제작을 미룬 이유는 처음에 했던 팀 프로젝트는 학교 상부에서 더이상 작업하지 말아달라 해서 프로젝트가 터져 버렸고, 개인 프로젝트는 진행 중이라서 포트폴리오에 올리기는 적합하지 않아 보였고, 회사에서 일하면서 진행했던 프로젝트들은 회사 내부 기밀이기 때문에 Git 링크를 첨부할 수 없기 때문에 포트폴리오에 들어갈 내용을 좀 더 채운 다음 포트폴리오를 만들고자 했었다. 어찌됐..

Django + React로 로그인 시스템 구현하기 / Pt. 3) 토큰 저장하기

Pt. 3) 토큰 저장하기 파트 2에서는 프론트엔드에서 로그인 성공 여부를 확인하고 토큰을 받아오는 데에 성공했다. 토큰은 서버가 저장하는 것이 아니라, 클라이언트가 저장했다가 서버에게 보내면 서버는 확인만 해 준다고 배웠다. 그러므로 이번에는 클라이언트가 토큰을 어떻게 저장하는지 알아보고, 그 중 하나를 선택해서 직접 실행해 보자. JWT는 어디에 저장해야 하는가? 토큰을 받으면 어디에 저장해야 할까? 먼저, JavaScript 내부 변수에 저장하면 어떻게 될지 생각해 보자. JavaScript가 저장하는 변수는 휘발성이기 때문에 웹 페이지를 새로고침하는 순간 사라지게 된다. 토큰을 가지고 있으면 액세스 정보를 저장할 수 있다는 것이 한 가지 장점인데, 새로고침할 때마다 또는 이동할 때마다 액세스 정보..

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

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

Django + React로 로그인 시스템 구현하기 / Pt. 1) Django JWT 설정하기

Pt. 1) Django JWT 설정하기 1인 프로젝트를 진행하는 데에 있어서 프론트엔드는 평소에 하고 있어서 문제가 없었지만 백엔드는 평소에 많이 만진 적이 없어서 로그인 기능을 구현하는 데부터 살짝 애를 먹었다. 일반적으로 개인이 진행하는 토이 프로젝트의 경우 그냥 DB에 username과 (암호화 된) password를 DB에 저장해서 lookup하는 정도로도 구현할 수 있지만, 로그인은 보안이 중시되는 작업인데 너무 허술해 보이기도 하고 회사에서 JWT로 인증 작업을 진행하던 걸 본 적이 있어서 JWT를 사용해서 본격적으로 해 보고자 했다. JWT가 무엇인지, 특히 인증 단계에서 JWT를 왜 쓰는지도 시간이 된다면 정리해 보고 싶다. 이하에서 진행하는 프로젝트는 이미 프로젝트를 위한 가상 환경 설..

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

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