프로젝트/알바일기(알바스케쥴러)
05_데이터 구조, api
이제 프로젝트의 핵심 내용을 적어보려 했는데 이 부분을 알기전에 데이터 구조와 api에 대해 간략히 설명을 하고 가야 할 것 같다. 내 첫 프로젝트기도 하고 이것저것 구글에서 검색하면서 공부하고 또 같이한 동기와 머리를 맞대면서 짠 구조이기 때문에 효율적이진 않을 수 있지만 그래도 한번 서술해보겠다. 먼저 해당 웹 프로젝트에는 크게 2가지 데이터를 받아서 저장하게 사용했고, 이 과정에서 redux를 사용한 상태관리를 적용시켜 보았다. 첫번째는 유저정보이고 두번째는 달력정보인데 이 두개를 큰 길로 잡은데는 이유가 있다. 우선 유저는 유저마다 개인 정보가 있다. 회원정보나 가진 프로젝트의 id, 그 프로젝트의 관리자인지 알바생인지 등등의 정보가 있을것이다. 또한 프로젝트또한 그 정보가 있다. 날짜나 시간 ,..
04_일기만들기,참여,내 일기
내가 만든 프로젝트에는 밑의 3가지 기능이 존재한다! function App() { return ( ); } 이전에 해당 프로젝트는 위주소드롤 이루어져 있다고 했는데, 이중 3개를 소개할 것이다. 먼저 프로젝트를 만드는 만들기 버튼을 누르면 위 페이지로 이동하게 된다. 참고로 프로젝트에 참여하는 페이지도 똑같이 생겼다! 참고로 내 프로젝트는 프로젝트를 만들면 해당 프로젝트마다 고유의 참여코드가 생성된다. 이를 사용자가 입력하면 만들어진 프로젝트에 참여할 수 있는 것이다! (discord 를 써봤다면 채널에 들어가기위해서 코드를 입력하여 들어가는것과 유사하다) 그리고 내 알바일기 버튼을 누르면 아래와 같이 사용자가 만들었거나 참여된 프로젝트들을 볼 수 있다. 그럼 이제 코드를 한번 뜯어보자. 먼저 알바 만..
03_Index 첫페이지
http://54.180.70.202/ 먼저, 글을 작성하기 전에 아마존 서버를 이용해서 직접 올리는 과정까지 진행해봤다! 링크는 위에 올려두었으니 한번 둘러봐도 좋을 것 같다. Index 페이지의 컨테이너는 아래와 같다. import React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { getUserinfoApi } from "../api/UserApi"; import Header from "../components/Header"; import Introduce from "../components/Introduce"; import MkProject from "../componen..
02_프로젝트 구조
우선 이 리액트 프로젝트의 큰 구조부터 보도록 하자. 필자는 프로젝트를 리액트와 타입스크립트를 이용해서 만들었다. 우선 프로젝트의 큰 구조는 아래와 같다. src파일 안에 api,components,containers,css,img,module파일로 구분했다. ( 프로젝트 진행시 더 추가될진 모르겠다 ) api 백엔드와의 api담당 함수들이 들어있다. 로그인,회원가입 등의 정보 전송할때 api를 받아 객체 정보를 받는용도로 사용된다. 주 용도는 token검사를 해서 내가 로그인 상태인지 아닌지 확인하는것과 해당 유저 정보를 받아오는 것 components 리액트의 컴포넌트들을 관리하는 폴더 이번 프로젝트는 함수형 컴포넌트들로 관리를 했고 이때 들어가는 컴포넌트들을 관리하는 폴더이다. containers ..
01_프로젝트 소개
글을 조금 늦게 쓰는 감이 있지만 이번 방학때 친구와 웹 프로젝트를 하나 진행하게 되었다. 고민하다가 짜기로한 아이디어는 알바일기.. 친구와 나 둘다 알바를 한 경험이 꽤 많고 스케쥴을 관리자들이 일일이 수기나 카카오톡을 활용하여 적는것을 알고 있었기에 괜찮을 것 같아 만들게 되었다. 처음 설계할때 위와같은 구성을 간략히 가지고 소규모 매장에서 사용하기 좋게 시장을 공략해서 만들어보면 좋을것 같다라는 생각을 하게 되었다. 친구는 백엔드쪽 공부를 하고있고 나는 프론트엔드를 공부한지 한 3개월쯤 되었기 때문에 서로 공부하면서 해보자.. 라는 마음가짐으로 프로젝트를 시작하게 되었다. 리액트와 타입스크립트를 적용하여 프로젝트를 써보기로 했다. 프로젝트의 기능으로는 1. 로그인 등 사용자관리 2. 프로젝트 관리 ..