본문 바로가기

분류 전체보기89

[4주Project] 프로젝트 전체 회고 드디어 4주간의 긴 프로젝트가 마무리 되었다. 한달여간의 프로젝트 기간이었지만 잘 구현된 부분도 있고, 아쉽게 구현하지 못한 부분도 있고 시원섭섭하였다. 4주간 프로젝트를 진행 하면서 바빠지다 보니 블로그 작성이 밀리다 결국 마무리 회고로 작성하게 되었다. 이번 마무리 회고에서는 간략하게 어떤 서비스를 개발하였는지 작성하려고 한다. 프로젝트 명 : TOM(T-label Open Market) 더보기 화훼시장에는 수 많은 도소매 업자들이 있습니다. 도소매 업자들에게 판매채널을 하나더 열어 주고 소비자들도 하나의 꽃집에서 꽃을 주문하는게 아니라 여러 꽃집에서 다양한 화훼의 품종을 보며 살 수 있고, 그 화훼에 대한 설명도 자세히 알려주는 화훼를 전문적으로 다루는 오픈마켓 서비스입니다. 스택 아키텍쳐 Fron.. 2020. 8. 26.
[4주Project] 프로젝트 2주차 회고 어느덧 2주차가 지나갔다. 2주동안 가장 많이 한 일은 오류 수정하는 일이었던 거 같다. 리덕스에서 api관리가 좀 더 용이한 리덕스 사가를 이용하게 되면서 중간 중간 새로운 기술들을 이용하고 적용하면서 수많은 오류들이 발생 하였다. 말그대로 어디서 나오는 지 모르는 버그들이 등장해서 디버깅 하는 시간이 오래걸렸다. 간단한 문법 오류 부터 시작하여 환경설정 문제, 새로운 기술 사용 등으로 인해 계속해서 오류가 나서 stackoverflow를 참고하면서 고쳐 나갔다. 기본적으로 홈화면 / 로그인 / 회원가입 / 마이페이지 등 데이터를 주고 받는 방식에서 리덕스 사가를 이용하여 조금 더 액션을 나누어 편리하게 api를 관리할 수 있게 만들었다. 사실상 이번주는 오류 수정하는 시간이 대부분이였다. 어느정도의 .. 2020. 8. 19.
[4주Project] 1주차 회고 TIL 프로젝트 시작한지 1주일이 빠르게 지나갔다. 1주일의 시간동안 기본적인 페이지 및 컴포넌트 틀을 만들고 / 백엔드에서는 서버 세팅과 데이터를 만드는 작업을 진행 하였다. expo를 이용하여 진행하다 보니 기능을 추가하면 할 수 록 느려지는 듯한 느낌이 들고, 새로운 기술을 사용하자는 방향으로 바뀌어 expo를 사용하지 않는 방향으로 정하였다. 그래서 새롭게 안드로이드 스튜디오 환경설정을 진행하고 React Native CLI를 설정하고 공부하는 방향으로 전환하였다. 설정을 하는 데 꽤 오랜 시간이 걸렸다. Homebrew 를 설치한 이후 node와 watchman을 설치 해야 하고 JDK까지 설치를 한 이후 안드로이드 스튜디오 SDK에서 홈루트를 받아와 루트를 연결하는 환경설정을 진행해야 한다. ( Re.. 2020. 7. 22.
[React Native]expo-cli 시작하기 React Native는 모바일 앱을 만들기 위한 프레임워크이다. 기존 react는 웹 개발 전용이었다면, react native는 모바일 앱을 만들기 위해 변형된 것이다. 이런 모바일 앱을 개발하는 환경에서 조금 더 간단하게 개발을 도와줄 수 있는 것에 expo cli이다. 안드로이드 앱을 개발한다고 할 때 안드로이드 스튜디오 없어 expo 만으로 모바일 앱을 개발할 수 있다. Expo 장점 expo의 장점은 앞서 말했듯이 안드로이드 스튜디오 없이 모바일 앱을 개발할 수 있다는 점. 두번째 장점은 특별한 환경설정 없이 기본적으로 expo가 가지고 있는 설정을 이용하여 간편하게 개발 할 수 있다는 점. 즉, 처음 react native를 접할 때 시작하기에 배우기 편하다는 장점을 가지고 있다. 물론 단점.. 2020. 7. 18.
[4주 Project] 1일차 TIL 드디어 마지막 프로젝트를 시작하게 되었다. 이번 프로젝트는 4주간 진행되어서 조금더 완성도 높은 프로젝트를 완성하는 것을 목표로 했다. 이번에도 프론트엔드를 맡게 되어 프로젠트를 진행하게 되었다. 2주프로젝트때와 다르게 이번 4주 프로젝트에서는 웹이 아닌 안드로이드 앱 제작을 하는 것을 목표로 하였다. 어떤 프로젝트를 진행할지 아이디어 회의를 하였다. 기본적으로 오픈마켓이나 쇼핑몰 형태의 서비스를 제공하는 아이디어로 진행하게 되었고, 화훼 산업과 관련되어 판매자와 소비자가 오픈마켓 형태로 서비스를 제공하는 안드로이드 앱으로 만들기로 했다. 처음 , 기능에 대한 flow를 만들어서 어떤 페이지에서 어떻게 작동되어야 하는지에 대한 그림을 그려나갔다. Home 화면(Main page)를 기준으로 Header와.. 2020. 7. 15.
[2주project] 마무리 및 회고 TIL [AucZip] 사용한 기술 프론트엔드 - React / Redux / Bootstrap 백엔드 - node.js / express / JWT / MySQL 프론트 엔드에서 구현 한 기능 로그인 기능 구현/ 회원가입 / mypage1(기본정보 제공, 회원정보, 투자내역) / mypage2(orm 설정) 홈화면 구현 회원가입창 모달로 만들기(이메일 중복등, 소셜로그인) 마이페이지(화면, 비번등 수정, 보유금액 등) 건물정보 클릭햇을시 해당 건물 페이지 이동 2주간의 짧은 프로젝트가 마무리 되었다. 처음 부동산 경매 사이트를 만들어 보자는 팀장의 아이디어를 듣고 어떻게 시작해야 될지 감이 오지 않았다. 제일 처음 시작한 일은 팀원들의 각자 역할을 나누고, 진행 단계를 나누는 일이 었다. 3개의 Sprint로.. 2020. 7. 13.
[2주 Project] 8일차 TIL [목표로 한 기능들을 구현] 2주라는 시간이지만 사실상 8일차라고 볼 수 있는 프로젝트 마무리 기간이 다가왔다. 짧은 시간동안 원했던 기능을 구현하는 것은 쉽지 않았다. 그래도 기본적으로 프론트엔드 에서 구현하고자 했던 로그인, 로그아웃, 홈 데이터 불러오기, 해당 데이터 별 페이지 이동 등 어느 정도 구현할 수 있었다. 전체적으로는 bootstrap을 이용하여 사용 하였고, 회원가입과 로그인은 modal 기능을 사용하였다. 회원가입과 로그인은 데이터를 받기 위해서 React의 useState함수를 이용하였으며, const [userInfo, setUserInfo] = useState({ email: "", memberId: "", password: "", }); 데이터를 서버로 연결해주기 위해 axio.. 2020. 7. 8.
[Material-ui] 시작하기 Material-ui는 UI framwork로 디자인에 도움을 주는 기능을 가지고 있다. 이번 2주 프로젝트를 하는 데 있어서 디자인 적인 측면을 보강하기 위해 Material-ui를 사용하기로 하였다. 그로인해 이번 포스트에서는 간단한 Material-ui 사용법에 대해 적으려고 한다. 전반적인 내용은 material-ui.com/를 참조하였으며, 홈페이지에서 예제를 적용하여 사용할 수 있다. 설치 npm이나 yarn을 통해서 설치할 수 있다. // with npm npm install @material-ui/core // with yarn yarn add @material-ui/core SVG 아이콘 기능을 사용 하고 싶으면 다음과 같이 설치하면 된다. // with npm npm install @m.. 2020. 7. 6.
[2주 Project] 5일차 TIL 본격적으로 React를 이용한 프로젝트를 시작하게 되었다. 초기에 구성하였던 각 pages를 구성하기로 하였다. 내가 맡았던 Home 페이지, Mypage 를 구성하고 component로 Menu 를 구성하였다. 로그인/ 회원가입 버튼을 만들고 나서 페이지가 아닌 Modal로 구성하기로 하여 Metarial-ui를 사용하기로 정하였다. 백엔드에서 API 주소가 잘 맞는지 Postman을 통해 post요청이 잘 받는지 확인하고 회원가입 페이지에 입력창을 완성하였다. 회원가입 시 fetch로 api 주소를 받아와 post요청을 보내준 후 실제 데이터가 백엔드에 들어왔는지 확인하였다. 백엔드 담당 팀원들이 데이터가 들어왔다는 것을 확인 해주고 로그인 페이지에서 역시 회원가입과 마찬가지의 과정을 걸쳐 작동되도록.. 2020. 7. 4.

티스토리툴바