Life Folio
포트폴리오 개인 명함화 서비스
Contact
workstation19961002@gmail.com
History & FeedBack
- ver.1.00 프로토 타입 : Art Folio
- ver.1.10 알파 타입 : Life Folio
- ver.1.20 대기 중
ver 1.00
설치한 모듈
- dotenv : 환경변수 사용
- node.js
- express : 익스프레스 프레임워크
- express-session : 익스프레스 세션 라이브러리
- morgan : logging 라이브러리
- multer : file upload 라이브러리
- mongoose : mongodb 연결 라이브러리
- mongodb : DB
- bcrypt : 비밀번호 암호화 라이브러리
기타 모듈 - nodemon
- babel-loader
- @babel/core @babel/node @babel/preset-env
- css-loader mini-css-extract-plugin sass-loader sass style-loader
- webpack webpack cli
- pug node-fetch regenerator-runtime
피드백
처음으로 설계, 기획 및 개발을 진행한 프로젝트이다.
당초에는 설계 및 기획은 괜찮았다고 생각했으나,
실제로는 우선순위 없이 무작정 추가 해놓은 기능(계획)으로 엎어질 수밖에 없는 프로젝트였다.
가장 큰 문제가 발생한 부분은 다음과 같다.
1. 설계 목적에 맞지 않는 화면 구성
2. 설계 및 기획 단계에서 우선 순위 없이 기능 추가 계획 수립
3. Exrpess 프레임워크에 과도한 Router 및 Controller 파일 생성
4. MongoDB 에 과도한 Schema 및 Model 생성
개인 포트폴리오 업로드 및 명함화 라는 명확한 목적을 가지고 다시 설계부터 시작해보기로 결심했다.
ver 1.10
설치한 모듈
상기 버전과 동일
피드백
두 번째로 설계, 기획 및 개발을 진행한 프로젝트이다.
프로토 타입에서 겪은 문제점을 기억해서 프로필 페이지부터 설계 및 기획을 시작했다.
이 과정이 종료된 후, 반응형 화면구성을 설계하게 되었다.
프로토 타입에서 알게된 문제점 1, 3 이 매우 개션되었다.
작업 생산성이 나름 괜찮았다고 생각하지만, 코드의 재 사용성이 너무 안좋았던 것 같다.
그리고 현실적으로 내가 구현할 수 없는 기능에 대한 욕심을 버리지 못하였다.
하지만 유저/포트폴리오/이미지에 대한 CRUD 를 기획 개발한 경험이 매우 값지었다.
그럼에도 개인 포트폴리오 업로드 서비스가 아닌, 표지가 달린 디자인 인스타그램 같은 느낌이었다.
기획서 3안은 구조가 바뀌는 관계로 별도 파일로 작성하였다.
ver 1.20 react
설치한 모듈
FRONTEND
1. npm create-reat-app
2. npm install --save react-router-dom
3. npm install --save react-helmet
4. npm install --save prop-types
5. npm i styled-components
6. npm i styled-reset
BACKEND
1. npm i mongodb
2. npm i mongoose
모듈 변경 이유
개인 포트폴리오 명함화 서비스의 취지는 어디까지나 "본인" 의 포트폴리오를 누군가에게 명함으로 줄 수 있다라는 점이었다. 그렇기 때문에 express 의 라우팅 처럼 많은 분기점을 만들 필요가 없다고 생각했다.
그렇다면 새로고침이 없이 상호작용을 컨트롤 할 수 있는 리액트가 더 효과적이라고 생각되어 모듈을 변경하고 설계부터 디자인까지 다시 시작하게 되었다.
Screen
ver 1.00 과 ver 1.10 을 진행하며 큰 문제점 하나를 알게 되었다.
스크린 구성 등의 디자인 요소를 제대로 짜지 않고 개발을 시작하면,
작업 생산성이 떨어지고 결과물의 퀄리티가 떨어진다는 점이다.
따라서 Figma 와 같은 웹 디자인 툴을 이용해서 프리뷰 페이지를 만들고 작업을 진행하였다.
.png)
하지만 디자이너가 아니므로 색상이나 애니메이션 같은 디테일 적인 요소는 배제하였다.
