# CardLog

tnstjd120

이번 포스팅에서느 Django로 백엔드 서버를 배포해서 만드는 과정에 대해서 포스팅 하려고 한다. Django 백엔드 웹 서버는 AWS EC2 인스턴스를 하나 추가해서 프론트엔드와 분리 시켜줬다. EC2 배포 방법은 이전 포스팅의 내용을 참고하면 된다. AWS EC2 Django설정 1. Nginx 설정 먼저 nginx를 설치해주고 nginx 설정 화면으로 이동합니다! nginx 설정하는 화면으로 들어오게 되면 'i'를 눌러서 수정을 하면 된다. -

tnstjd120

프론트엔드 AWS EC2 배포 1. EC2 인스턴스 생성 AWS EC2에 인스턴스를 생성하려면 AWS에 로그인 후 EC2로 이동하면 된다. 좌측 상단에 서비스를 누르고 EC2 검색하면 맨 위에 바로 나오니까 얼른 이동하자! EC2로 들어온 후 좌측 메뉴에서 인스턴스를 선택하고 우측 상단에 인스턴스 시작을 선택해서 위와 같은 페이지로 들어와서 이름을 작성하고 Ubuntu를 선택해준다. ![](https://velog.velcdn.com/images/tnstjd120/post/1

tnstjd120

AWS S3에 버킷까지 다 만들고 이미지 업로드까지 제작이 끝나고나니 컴포넌트 제작과 기능은 원래 기획대로 순조롭게 제작이 완료되었다! Home Home 에서는 Emotion의 ThemeProvider를 사용해서 불을 켜고 끄는 방식의 light 테마와 dark 테마를 적용시켰고 해당 유저의 블로그 카드들과 카테고리 프로필 정보 등을 볼 수 있게 제작하였다. ThemeProvider 사용법은 추후에 좀 더 자세히 다루면서 포스팅할 예정이다. 카테고리 생성 및 게시글 작성 카테고리는

tnstjd120

이전의 포스팅에선 로그인과 회원가입 부분까지 구현을 했었는데, 처음 해보는 부분이기도 했고 백엔드까지 직접 처리를 해줘야 하다보니 고생을 좀 많이 했었던 것 같다. 하지만 그 부분을 해결하고 나서는 기획했던 대로 쭉쭉 컴포넌트들과 기능을 만들었다. 100% 완성은 아니고, 90%는 만든 것 같다. AWS S3 우선 게시글 썸네일과 프로필 사진 업데이트 부분을 구현하기 위해선 이미지 서버가 필요했다. 내가 직접 백엔드 부분을 구현해야 하다보니 참 골치가 아파졌다.. 이미지 서버는 이미 기획 단계에서 AWS의 S3를 사용하려고 했었다. 1. 버킷 생성 일단은 AWS 안의 S3 페이지로 가서 버킷 만들기를 통해 만들어 줄 수 있었다. 이 부분은 크게 어렵지 않다. 검색만 해도 너무 많은

tnstjd120

이전 포스팅 후 꽤 많은 시간이 흘렀다.. 오래 걸린 이유는 유효성 검증을 프론트와 백엔드에서 처리 후 회원가입을 진행하는 부분을 만들고, JWT(JsonWebToken)을 활용한 로그인 처리를 해주기 위해 자료조사와 로직을 이해하고 프론트단과 백엔드단을 만들다 보니 열심히 해도 오래 걸렸다 .. Validation(유효성) 회원가입 일단 먼저 유효성 검증을 통한 회원가입 로직을 제작하기 위해 프론트와 백엔드 부분에서 어디에서 유효성을 검증해줘야 할 지 정하기 위해 자료조사를 시작했었다. 결론부터 말하자면 프론트와 백엔드 둘 다 해줬다. 프론트 부분에서만 유효성을 검증하면 유효성 처리를 전부 클라이언트에서 진행해주기 때문에 퍼포먼스가 좋다는 장점이 있다. 하지만 javascript로 조작해서 서버로 데이터를 보낼 수 있다는 문제점이 있다. 그렇다고 백엔드에서만 유효성 검증을 하자니 매번 유효성 검증을 진행할 때 마다 데이터를 서버로 쏴준 후 검증 후

tnstjd120

이전 작업에서 디자인까지 마무리를 지었다. 지금은 프론트 부분의 전반적인 초기 세팅을 전부 해주고 있는데 이번 프로젝트에서는 전체적으로 재사용성이 높은 코드들로 제작을 해보려고 한다. 처음에는 많은 부분을 생각하고 코드를 짜고 모듈화가 잘 되었다고 생각했는데, 결국 예상치 못한 부분이 게속 생겼었다. 내가 이번에 가장 많이 시간을 뺏긴 React-Router-Dom의 Route 모듈화와 초기 세팅에 대해 글을 작성해보려고 한다. 일단 나는 완벽하게 잘 다룬다고 생각하지 않기 때문에 혹시 더 좋은 방법이 있다면 댓글 부탁드립니다! Route 모듈화 지금 현재 내가 작업하고 있는 프로젝트 이전에 작업했었던 팀 프로젝트 에서는 각 URL의 휴먼 에러를 방지하기 위해 path 들을 모아두는 파일을 하나 따로 생성해서 사용했었다. 위의 예시와 같은 방식으로 사용을 했기 때문에 다른 프로젝트에서는 URL을 항상 써주지 않고 Path import 해와서 항상 사용 했었

tnstjd120

나는 이전에 Django + React 를 사용해서 게시글과 게시글 상세페이지를 구현하는 과정을 3편에 걸쳐서 포스팅 했었다. 원래는 React + Typescript 기능을 최대한 중점으로 잡고 공부 겸 블로그 기능을 제대로 제작해 보려고 했었다. 근데 갑자기 욕심이 생겨버렸다. 지금부터 작성되는 제작기는 a부터 z까지 혼자서 제작해 보려고 한다. 기획 일단 일반적으로 사용되는 블로그 + 추가 기능으로 만드려고 한다. 그렇게 일단 목표를 잡고 아이디어를 얻기 위해 핀터레스트와 코드펜 등을 4시간은 넘게 둘러보고 샘솟는 아이디어를 정리하고 구현이 가능한건지에 대한 기술적 검토를 일일히 써치해가며 찾아봤다. 일단 전체적으로 구현이 전부 가능할 것 같다고 판단은 되지만, 일부 기능들은 구현하려면 시간이 오래 걸릴 것 같아서 제작 범위 자체를 분리 했다. 초기 제작에 들어갈 작업 범위와 초기 제작이 완료된 이후 **추가적으로 확장