프로젝트
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. 프로젝트 관리 ..
07_프로그램 구현 3단계 완성!!!
겨우 프로그램 완성을 했다... 블로그 글을 처음부터 읽어도 좋지만, 프로젝트에 대한 전반적인 내용을 알고싶으면 내가 작성했던 레포트를 참고해 보는것도 좋을 것 같다. 55장 정도 긴 분량이긴 하나.. 들어간 모든 기술들이 집약되어 있다. 우선 먼저 동작소스에 대해 간략하게 소개해보자면 아래와 같이 동작한다. 1. 초기 상태 2. 좌석을 선택한 경우 3. 번호 입력후 맞는지 확인 3-1. 2번을 누를 시 번호 다시입력 4. Yes입력시 문이 열림(5초동안) 5. 문이 닫힌 후 1번좌석 업데이트 6. 4+*로 out모드 진입 6-1. 빈 좌석을 선택했을 시 비어있는 좌석만 표시 빈좌석이라 표시 후 초기상태로 돌아감 7. 초기상태에서 사용중인 좌석 선택 시 6-2 1번 선택시 사용중이라 표시 후 초기상태로 ..
06_구현 2단계_퇴장 및 비밀번호 일치
저번에 입장 및 사용자 등록기능까지 구현했었다. 추가적으로 하드웨어도 절반정도 꾸며보았다. 막상 꾸며가면서 느낀점은 독서실을 계획하고 만들었는데 주차장이 되어 있었다는것 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그냥 스마트 주차장으로 주제를 잡을 껄 그랬다. 특히 문을 서브모터로 간단히 구현하려다 보니 더더욱 주차장 같아졌다. 나중에 시간이 되면 자동문 모듈도 한번 만들어보면 좋을 것 같다. 하드웨어는 그렇고 프로그램상으로는 퇴장을 할 때, 비밀번호가 일치하는지 확인을 하고 퇴장할 수 있게 되었다. 즉 기능을 서술하면 아래와 같다. 입력버튼은 *이다! 1. 1번 클릭 2. 핸드폰번호 입력 ( 만약 1번자리가 사용중이면 "Someone Used" 출력) 3. 입력한 번호가 맞는지 확인 (1.yes 2.No) 3-1. 만약 2번..