Portfolio_ Project

서동찬·2020년 8월 9일
0

Project

목록 보기
1/4

1. 협업과 소통을 위한 회사업무 솔루션


기관 : 한국소프트웨어진흥협회

인원 : 7명

기간 : 2016. 11 ~ 2016. 12

프로젝트 목적 :

  • 딱딱한 그룹웨어가 아닌 사원의 과점의 소통과 협업을 이룰 수 있는 그룹웨어 구현

개발 환경 :

  • Java
  • JavaScript (Ajax, Jquery)
  • HTML
  • jsp
  • CSS
  • Spring Framework
  • Git
  • 라이브러리 : Google Chart, SMTP

담당업무 :

1) 사원 관리

  • 사원 로그인

  • 사원 가입

  • 사원 아이디 및 비밀번호 찾기

  • 비밀번호 찾기 : SMTP

  • 사원 / 문서 검색






2) 출근 관리

  • 출근 체크

  • 출근 데이터 그래프화

  • 출근 데이터 그래프 소스 (Google char 라이브러리)

느낀 점 :

첫 풀스택으로 한 웹 페이지 구현 프로젝트였습니다. 처음으로 DB 구축, UI개발, 서버 통신까지 간단한 기능들이지만 웹 개발자의 기본적인 작업을 할 수 있어 뿌듯했습니다.
아쉬운 점이 있다면 당시 교육 컬리큐럼을 따라가기 바빴고, 기술 하나하나 제대로 이해를 하지 못한 부분도 많았습니다. 하지만 이 프로젝트를 완성한 이후 웹에 대한 전체적인 구성과 흐름을 파악할 수 있었고, 왜 이런 기술들을 사용하는지, 왜 필요한지 알 수 있는 기반이 되었습니다.
이후 홀로 독학을 하면서 어려웠던 기술들의 개념들의 이해를 할 수 있었습니다. 또한 현재 프로그램이에 대한 자신감을 올려준 저한테는 뜻깊은 프로젝트였습니다.




2. 인스타그램 클론 프로젝트


기관 : Wecode

인원 : 2명 (개인 프로젝트)

  • 담당 업무 : 프론트 앤드

기간 : 2020. 07. 06 ~ 2020. 07 .17

프로젝트 목적 :

  • React 기술로 활용한 실제 인스타그램 구현 프로젝트
  • React의 기본인 LifeCycle과 state/props를 이해하기 위하여 Class형 컴포넌트 적용
  • 백앤드 (서버) 비동기 통신 이해를 위해 Javascript 내장객체 fetch 함수 활용

개발 환경 : 프론트 앤드 기준

  • React (Class Component)
  • javascript (fecth 함수)
  • HTML
  • CSS
  • Git

담당업무 :

1) 로그인

  • state를 활용하여 이메일, 비밀번호 입력 가능

  • 이벤트 함수와 state를 이용하여 입력 제한 기능과

  • css와 이벤트함수를 이용한 로그인 버튼 동적으로 변형 기능

  • fetch 함수를 이용한 서버와 api 통신




2) 게시글

전체적인 화면

  • 상단 네비게이션과 왼쪽 게시글 부분, 오른쪽 게시글 부분을 컴포넌트를 통해 분리




게시글 댓글

  • 댓글 게시 버튼을 클릭시 map함수를 통해 동적으로 댓글 추가

느낀 점 :

React를 독학을 한 후 처음으로 UI 구성, 서버 통신, CSS 적용 및 동적으로 활용을 하게 되었습니다.
UI 기준으로만 작업을 통해 화면에 대한 구성단계가 중요하다는 것을 느낄 수 있었습니다.
또한 React의 가장 중요한 LifeCycle과 state/props를 실제로 적용하여 React의 장점을 알 수 있었습니다.
특히 React는 컴포넌트로 분리하여 화면을 나눌 수 있으며 기존 웹 페이지 유지보수가 유용하다는것을 제대로 느낄 수 있는 좋은 경험이였습니다.

새로 배운 기술 및 기능

  • React의 페이지 이동을 위한 Route 라이브러리 활용을 배울 수 있었습니다.

아쉬운 점

  • IT 개발자의 기본인 CRUD를 제대로 하지 못해서 아쉬웠습니다. 댓글이 아닌 게시글을 통해 사진, 내용 ... 등을 추가하기 위해서 Modal 형태는 완성은 했지만 시간이 없어 완성하지 못하였습니다.
    Modal을 활용하여 실제 백 앤드와 서버통신으로 등록을 하고, 출력을 하는 등... 실제 인스타그램 처럼 표현하고 싶었으나 하지 못하여서 아쉬웠습니다.
    이후 홀로 node나 다른 서버를 활용하여 실제로 구현할 수 있도록 개선할 예정입니다.





3. 와이즐리 면도기 사이트 웹 클론 프로젝트


기관 : Wecode

인원 : 5명 (1차 팀 프로젝트)

  • 프론트 앤드 : 3명
  • 백 앤드 : 2명
  • 담당 업무 : 프론트 앤드

기간 : 2020. 07. 20 ~ 2020. 07. 30

프로젝트 목적 :

  • React 기술로 활용한 첫 팀 웹페이지 프로젝트
  • React의 기본인 LifeCycle과 state/props를 이해하기 위하여 Class형 컴포넌트 적용
  • 백앤드 (서버) 비동기 통신 이해를 위해 Javascript 내장객체 fetch 함수 활용
  • 배운 기술을 활용하여 실제 와이즐리 면도기 사이트를 재현

개발 환경 : 프론트 앤드 기준

  • React (Class Component)
  • javascript (fecth 함수)
  • HTML
  • SCSS
  • Git : 코드 협업 관리
  • slack / Trello : 프로젝트 진행 관리

프로젝트 관리 : Trello

  • 라벨 색 : 프론트 앤드, 백앤드 기능 구분

  • Trello 구성

프로젝트 구현 :

구현 영상 : https://www.youtube.com/watch?v=M0RFO9mMUyg

담당업무 :

0) 전체적인 UI 구축 및 관리

1) 상단 네비게이션

  • state와 scss [keyframe]을 활용하여 상단 네비게이션을 애니메이션 형태로 구현

2) 면도기 선택 및 장바구니 [오른쪽 사이드바]

  • 오른쪽 사이드바 컴포넌트 구분

느낀 점 :

배운 React와 관련된 모든 기술을 사용한 첫 팀프로젝트였습니다. 이번 프로젝트를 하면서 만족스러웠던 점보다 아쉬웠던 점이 더 많았습니다. 3명의 프론트 앤드가 완성한 UI를 합쳐보니 스타일이 깨지거나 기능이 작동하지 않는 등... 다양한 문제가 발생했습니다. 처음 UI 구성을 완벽히 했으면 됬겠지만, 실제로 작업을 하다보면 완벽 할 수가 없었습니다. 가장 큰 원인은 소통이라고 느꼈습니다. 팀 프로젝트 혼자하는 것이 아닌 다 같이 하는 것입니다. 다 같이 하나하나 확인하면서 구성을 했으면 보다 빠르고 깔끔한 구현이 되지 않을까 하는 아쉬운 점이 있습니다.

그리고 아쉬운 점보다는 제가 가장 힘든 부분은 Git활용이였습니다. git push와 branch관리를 제대로 하지 못하였고, 여러 실수가 있어서 프로젝트를 통째로 없애는 일도 일어났습니다. git에 대한 지식과 활용이 능숙하지 못하여 발생한 사건이였습니다. git은 여러 개발자들이 쉽게 소스를 관리할 수 있는 툴입니다. git에 대한 무지함을 알 수 있었고, 오히려 git의 사용방법을 공부할 수 있는 좋은 기회였다고 생각합니다.

새로 배운 기술 및 기능

  • SCSS과 keyframe을 통해 동적으로 애니메이션을 구성.
  • 매우 어려운 작업이였으며, UI 구성의 중요성을 알 수 있었던 경험




4. USA Data 클론 프로젝트


기관 : Wecode

인원 : 5명 (2차 팀 프로젝트)

  • 프론트 앤드 : 3명
  • 백 앤드 : 2명
  • 담당 업무 : 프론트 앤드

기간 : 2020. 08. 03 ~ 2020. 08. 14 (진행 중)

프로젝트 목적 :

  • React 기술로 활용한 첫 팀 웹페이지 프로젝트
  • 현재 가장 많이 사용하는 React의 Function Component 방식 활용.
  • Function Component의 Hook을 학습하면서 실제 프로젝트에 적용
  • 백앤드 (서버) 비동기 통신을 하기 위해 fetch함수가 아닌 axios 라이브러리 활용
  • 보다 유용하게 스타일 관리하고, 동적으로 css를 활용하기 위해 styledComponent 적용
  • UI 애니메이션을 극대화 한 USA Data 사이트 클론 프로젝트

개발 환경 : 프론트 앤드 기준

  • React (Class Component)
  • javascript (fecth 함수)
  • HTML
  • SCSS
  • Git : 코드 협업 관리
  • slack / Trello : 프로젝트 진행 관리

담당업무 :

1) 메인 페이지 구현

2) 미국 주의 지도와 데이터 구현 (개선 중)

  • HighChart 라이브러리를 활용하여 미국 주 지도와 데이터 구현

3) 페이북 로구인 구현 (현재 개발 중)

profile
개발자 매뉴얼

0개의 댓글