TIL (30) 썸네일형 리스트형 휴식..... 어제까지 백엔드와의 씨름과 프론트엔드 구성 작업으로 인한 스트레스가 너무 쌓여 오늘 노트북을 놓고 진행할려고하였지만 의지가 바닥났는지 아니면 뇌가 과부하가 걸렸는지 몇시간째 아무것도 진행이 되질 않아 노트북을 접고 집에서 휴식을 취하기로 하였다. 아마 주말동안은 아무것도 안하고 휴식을 취해야 월요일에 다시 제대로 진행할 수 있지 않을까......싶다. Trello 회원가입, 로그인, 로그아웃 오늘은 회원가입, 로그인, 로그아웃에 관해 공부하기 위해서 조사해보았다. 백엔드 쪽은 너무 예전에 공부했던 터라 무지하여 알아보고나서 코드를 작성하는게 더 나을 것 같아 시작하였다. express, squelize, mysql을 이용하려고 한다. express, mysql은 전에 공부할 때 써봤던 거라서 그 자료들을 참고하여 할려고 하고 그 squelize는 자료가 있지만 시도해보지 않아 이번에 공부하면서 시도해보려고 한다. 우선, 회원가입부터 만들고나서 로그인, 로그아웃을 만들어야 하는데 이 과정도 만만치가 않다. 코드를 짜고 실제 db에 반영을 하고.....하...... 오늘 하루 공부는 하였는데 내일 다시 해야할 듯하다. 솔직히 말하면 무슨 소리인지 잘 모르겠다. 오늘 배운 내용에 대해 적어야 하는.. Trello 서버구상 원래는 오늘 리스트 및 카드 수정과 삭제 기능을 할려고 했으나 서버와의 연동이 먼저 일 것 같아서 서버구상을 먼저하게 되었다. 백엔드 쪽은 너무 예전에 했던 터라 전에 배웠던 AWS의 EC2와 RDS를 다시 복습하고 mysql도 복습하였다. 프론트만으로도 충분히 구상할 수 있지만 서버와 연동을 해야 완벽한 프로젝트라 생각하여 서버를 구상을 하게 되었다. 먼저 AWS의 EC2와 RDS를 복습하였는데 RDS는 AWS에서 제공하는 데이터 베이스 관리시스템으로 내 컴퓨터에서 보관하던 것을 대신 보관할 수 있다. 그리고 EC2는 하나의 컴퓨터라고 보면 되는데 서버를 켜야하는데 내 컴퓨터를 하루종일 켜놓을 수 없으니 EC2에 배포하여 서버의 역할을 하도록 하는 것이다. 예전에 했을 때에는 수월하게 했던 거 같은데 .. Trello 기본기능(리스트 및 카드 추가) 오늘은 기본기능(추가, 수정, 삭제) 중 리스트와 카드를 추가할 수 있는 기능을 구현하였다. 지금의 기능은 백엔드의 서버와 연결되어있는 것이 아닌 오로지 react + redux만을 이용한 프론트적인 기능이다. 전반적인 ui는 materila ui를 사용하였다. material ui는 구글에서 만든 모바일과 데스크탑 그리고 그 외 다양한 디바이스들을 아우르는 하나의 일관된 디자인 가이드라인인데 코드를 짜는 중에 막히는 부분이 있으면 참고하던 유투버가 이 가이드라인을 가져다가 쓰는 것을 보고 나도 사용하게 되었다. 지금 쓰고 있는데 의외로 편하다. Icon, Button, Card 등 여러가지의 기능들을 가져다가 쓸 수 있으며 디자인적으로도 깔끔하게 되어있어 나중에도 종종 사용할 듯하다. 그리고 css적인.. Trello 기본구조(React + Redux) 전에 했던 프로젝트에서 Redux를 사용한 적이 있었는데 state관리도 편할 뿐더러 mapstatetoprops를 이용하면 state들을 언제든지 가져다가 쓸 수 있었기 때문에 이번 추가 프로젝트에서도 redux를 사용하기로 했다. 처음에는 db diagram을 통해 데이터베이스의 구조를 그려보았다. 각각의 user들이 있어야하며 그 user들은 각자 자신의 board를 가지고 있다. 그렇게 때문에 user와 board는 다대다 관계이므로 그 사이에 userboard 테이블을 추가하여 연결시켜 놓았다. 그리고 board는 list와 다대일 관계이고 list 또한 card와 다대일 관계이기 때문에 이 부분은 따로 테이블을 만들지 않았다. 기존에 있는 Trello의 전체적인 틀을 보면 아래와 같이 생겼다... Trello에 대해서 추가 프로젝트로 Trello를 Clonig하는 프로젝트를 하게 되었는데, 우선 이거에 대해서 조사를 해보면 좋겠다 생각하여(뭔지도 모르고 시작하는 것보단 나으니까???) 오늘 하루는 Trello가 뭔지에 대해 공부해보는 시간을 가져보았다. 우선, Trello가 무엇이냐하고 봤더니, 간단하게 작업관리를 할수 있는 툴이라고만 설명이 되어있었다. 작은 예시를 해보자면 화이트 보드나 학교 게시판 같은 곳에 포스트 잇으로 하나하나 붙여놓은 것과 같은 모습이라고 생각하면 된다. 전체적인 구조는 포스트 잇 역할의 Card, 게시판 역할의 Board, 포스트 잇들을 나열하는 List 이렇게 있다. 1. Card 간단히 설명하면 포스트 잇처럼 짧게 쓰는 용도로 사용하거나 편지처럼 길게 사용하거나, 또는 이미지를 삽입할 .. 이전 1 2 3 4 5 다음
