프로젝트
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. 프로젝트 관리 ..
JS_리액트_TodoList
리액트를 사용해서 TodoList를 만드는 소규모 프로젝트를 진행해보겠다. 패스트캠퍼스의 강의를 참조하였습니다! 리액트 프로젝트를 하나 만든 후에 2개의 라이브러리를 설치할 것이다. yarn add styled-components react-icons 여러 컴포넌트를 만들고 관리할 것인데 간단한 역할을 먼저 알아보자. TodoTemplate Todolist의 레이아웃을 담당하고 하얀색 테두리를 담당한다. TodoHead 날짜시간, 할일의 개수를 가진다 TodoList 할일에 대한 정보를 map내장함수를 사용하여 랜더링할것이다. TodoItem 할일을 표시한다. TodoCreate 새로운 할일을 등록할 수 있게 한다. 1. 회색배경화면 만들기 //App.js import React from 'react' ..