ݺߣ

ݺߣShare a Scribd company logo

정해균 포트폴리오

•Download as PPTX, PDF•
•
H
Haegyun Jung

프로젝트 소개자료

1 of 21
Downloaded 11 times
PORTFOLIO 프로젝트 소개자료 작성자 정해균
1. 회사 프로젝트 ( 벙커서울 2014.07~2015.08 근무 ) 1-1. 의류 쇼핑몰 앱 개발 - 프로젝트 구조 - 상세 설명 1-2. 의류 쇼핑몰 백엔드 구축 2. 개인 프로젝트 2-1. 웹 테트리스 - 프로젝트 구조 - 상세 설명 - 블록 회전 기능 구현 과정 2-2. 카페 공유 웹 사이트 - 프로젝트 구조 - 구현 화면 - 사이트 최적화 경험 포트폴리오 목차
모바일 앱 동작 화면 1-1. 의류 쇼핑몰 앱 개발 프로젝트명 신진 의류 디자이너의 상품을 홍보, 디자이너의 제품을 판매하기 위한 플랫폼 개발 결과물 형태 모바일 앱 수행기간 2015.01 ~ 2015.04 주요 언어 HTML5, CSS3, JavaScript (ECMAScript 5) 프레임워크 AngularJS 1.3, Ionic Framework 1.0.0 beta 라이브러리 angular-ui-router 팀 구성 기획 1명 / 디자인 1명 / 개발 1명 개발 참여율 100% 결과물 - 소스코드 : GitHub - 시연영상 : YouTube 런칭 여부 X
1-1. 의류 쇼핑몰 앱 개발 - 프로젝트 구조 index.html template js css www 뷰(.html), 뷰의 컨트롤러(.js) 관리 services app.js 앱의 라우팅 담당 ($stateProvider) 서버와 http 통신하는 factory 모듈 File Directory shop.js brand.js cart.js ....
● 결제 모듈 연동 제외 ● 디자이너의 UI 가이드를 기반으로 모바일 화면 퍼블리싱 ● $http 서비스를 호출하는 코드는 여러개의 팩토리 모듈로 분리한 후 서버와 통신이 필요한 컨트롤러에서 모듈을 주입, 중복되는 코드 감 소시킴 ● 이벤트 처리는 ng-click, ng-submit, ng-change 등 지시자 사용 ● angular-ui-router의 $stateProvider를 사용하여 클라이언트 측 라우팅 구현 1-1. 의류 쇼핑몰 앱 개발 - 상세설명 app.js 클라이언트 라우팅 코드 일부
프로젝트명 “의류 쇼핑몰 앱 프로젝트”의 백엔드 구축 수행기간 2015.01 ~ 2015.04 주요 언어 Python 3 프레임워크 Django 1.7 데이터베이스 PostgreSQL 서버 호스팅 AWS EC2 ( Ubuntu OS ) 라이브러리 Django-REST-framework, django-rest-auth 팀 구성 기획 1명 / 디자인 1명 / 개발 1명 개발 참여율 100% 결과물 - 소스코드 : GitHub 1-2. 의류 쇼핑몰 백엔드 구축 상세 설명 ● 상품, 디자이너, 디자이너 브랜드 등 서비스에 필요한 데이 터를 전송하는 REST API 작성 ● PIP 패키지 관리자를 사용하여 개발 의존성 관리 ● 서버 호스팅은 AWS EC2를 이용했으며, Ubuntu OS에서 데 이터베이스 설치, 프로젝트 환경 구축 ● 서버 개발 중 막히는 부분은 Stack Overflow에 직접 질문하 면서 문제 해결 StackOverflow
2-1. 개인 프로젝트 - 웹 테트리스 프로젝트명 1인용 웹 테트리스 결과물 형태 정적 웹 페이지 수행기간 2017.02 , 2주 주요 언어 HTML5, CSS3, JavaScript (ECMAScript 5) 그래픽 DOM API 조작키 - 블록 이동 : 상, 하, 좌, 우 방향키 - 블록 드랍 : 스페이스 결과물 - 소스코드 : GitHub - 사이트 링크 : Play 테트리스 동작 화면
2-1. 웹 테트리스 - 프로젝트 구조 index.html script.js setting.js Tetris File Directory style.css 테트리스 게임의 메인 로직 게임 설정에 관한 객체 저장 행/열의 개수, 블록의 종류 등
2-1. 웹 테트리스 - 상세 설명 ● 자바스크립트 이해를 높이기 위해 라이브러리를 사용하지 않음 ● 그래픽 구현은 Canvas를 사용하지 않고 DOM API로 개발 ○ 10*20 크기의 매트릭스의 각 셀 요소에 ‘행-열'정보 담은 id 부여 ○ 셀 요소에 직접 접근하여 background-color를 제어하는 방식 ● 게임의 키 조작은 onkeydown 이벤트 리스너 사용 ● 메인 로직은 즉시실행함수(IIFE) 패턴으로 전역 스코프 보호 ● 게임 설정이 있는 객체는 setting.js로 분리 ● 블록에 대한 데이터는 배열을 중첩해서 저장 블록 데이터를 저장 한 소스코드 일부
블록 회전 구현 과정 - 블록을 시계 방향으로 회전할 때, 쌓여있는 블록과 충돌하거나 매트릭스의 범위를 벗어나는 경우 발생 블록 회전 충돌 매트릭스의 경계 블록 회전 매트릭스 범위 이탈 2-1. 웹 테트리스 - 블록 회전 구현
구현 과정 (1) 블락을 회전했을 때 충돌 혹은 범위 이탈이 일어날 경우, 문제가 되는 셀(블록을 이루는 사각형) 개수 확인 - nextRotBlock : 회전될 블락의 셀의 좌표값 2차원 배열 ex) nextRotBlock // [ [3, 5], [4, 5], [4, 6], [4, 7] ] - self.matrix : 10X20개의 셀 정보가 담긴 2차원 배열 ex) self.matrix[0][0] == 1 // 0행 0열의 셀은 이미 채워짐 - overCells : 충돌되는 셀이 담길 배열 7열4행 2-1. 웹 테트리스 - 블록 회전 구현
(2) 충돌되는 셀의 길이를 기준으로 for 루프 실행하면서 이동 가능한지 검사, 이동 ● 이동 가능 여부를 검사하는 방향은 “좌, 우, 상, 하”의 순서로 진행 ● 충돌되는 셀의 길이가 2이상이라도 1칸 이동해도 되는 경우가 있기 때문에 무조건 cnt는 1부터 시작 2-1. 웹 테트리스 - 블록 회전 구현 overCells.length == 2 1칸 이동하면 회전 가능
(3) 화면에서 기존의 블록을 삭제하고, 회전된 블록을 화면에 렌더링 - 회전이 불가능하면 return으로 함수 종료 2-1. 웹 테트리스 - 블록 회전 구현
2-2. 개인 프로젝트 - 카페 공유 사이트 프로젝트명 작업하기 좋은 카페를 공유하는 사이트 결과물 형태 웹 사이트 수행기간 2016.08 ~ 주요 언어 HTML5/CSS3, JavaScript (ECMAScript 5), Python 3 프레임워크 Django 1.9 라이브러리 jQuery 3.1, Bootstrap, font-awesome, Bower 결과물 - 소스코드 : GitHub - 사이트 링크 : Site Link 사이트 메인 화면
2-2. 카페 공유 사이트 - 프로젝트 구조 main authapp cafealone 데이터베이스 연결 정보, Timezone 등의 프로젝트 설정 파일 로그인, 회원가입 페이지 템플릿 관리 DB 테이블 User 정의models.py root directory settings.py templates ... templates static 카페 목록, 카페 상세 화면, 카페 등록 및 수정 템플릿 css, js, img 디렉토리 관리 정적 리소스가 있는 디렉토리
(1) 회원가입 및 로그인 페이지 2-2. 카페 공유 사이트 - 구현화면
(2) 추천 페이지 - 이미지 업로드 / 삭제 mouse over click image removed 2-2. 카페 공유 사이트 - 구현화면
(3) 추천 페이지 - 카페 위치 지정 ⓵ ⓶ 위치 지정 방법 2가지 ⓵ 문자열 주소를 입력하고 ‘검색’ 버튼 클릭 ⓶ 지도 상의 ‘마킹'를 Drag & Drop 하거나, 빈 공간을 클릭하여 ‘마킹’을 이동하면 ‘마킹'의 위치가 문자열 주소로 변환됨 2-2. 카페 공유 사이트 - 구현화면
(4) 카페 상세 Modal ⓵ ⓶ ⓵ 등록한 카페를 지우는 버튼 ⓶ 카페 정보 수정하는 버튼 카페를 수정 및 삭제하는 기능은 로그인한 사용자와 작성자가 같을 때만 활성화 ⓵ ⓶ 2-2. 카페 공유 사이트 - 구현화면
페이지 로딩 속도 개선 사례 - 기존에는 Django의 빌트인 서버를 통해 HTML, CSS, JavaScript, 이미지 파일을 서빙 - 페이지 로딩속도 개선을 위해 백엔드 구성 요소에 Nginx, Gunicorn을 추가 - 서로 다르게 구성한 두 개의 서버를 포트를 다르게 하여 동시에 실행시키고, 로딩 속도를 비교 (Pingdom.com) Nginx와 Gunicorn으로 서버를 구성했을 때 페이지 로딩 속도가 2초 가량 빨라진 것을 확 인 Django + Nginx + Gunicorn Django Built-in Server 2-2. 카페 공유 사이트 - 사이트 최적화 경험
감사합니다 :D

More Related Content

정해균 포트폴리오

  • 2. 1. 회사 프로젝트 ( 벙커서울 2014.07~2015.08 근무 ) 1-1. 의류 쇼핑몰 앱 개발 - 프로젝트 구조 - 상세 설명 1-2. 의류 쇼핑몰 백엔드 구축 2. 개인 프로젝트 2-1. 웹 테트리스 - 프로젝트 구조 - 상세 설명 - 블록 회전 기능 구현 과정 2-2. 카페 공유 웹 사이트 - 프로젝트 구조 - 구현 화면 - 사이트 최적화 경험 포트폴리오 목차
  • 3. 모바일 앱 동작 화면 1-1. 의류 쇼핑몰 앱 개발 프로젝트명 신진 의류 디자이너의 상품을 홍보, 디자이너의 제품을 판매하기 위한 플랫폼 개발 결과물 형태 모바일 앱 수행기간 2015.01 ~ 2015.04 주요 언어 HTML5, CSS3, JavaScript (ECMAScript 5) 프레임워크 AngularJS 1.3, Ionic Framework 1.0.0 beta 라이브러리 angular-ui-router 팀 구성 기획 1명 / 디자인 1명 / 개발 1명 개발 참여율 100% 결과물 - 소스코드 : GitHub - 시연영상 : YouTube 런칭 여부 X
  • 4. 1-1. 의류 쇼핑몰 앱 개발 - 프로젝트 구조 index.html template js css www 뷰(.html), 뷰의 컨트롤러(.js) 관리 services app.js 앱의 라우팅 담당 ($stateProvider) 서버와 http 통신하는 factory 모듈 File Directory shop.js brand.js cart.js ....
  • 5. ● 결제 모듈 연동 제외 ● 디자이너의 UI 가이드를 기반으로 모바일 화면 퍼블리싱 ● $http 서비스를 호출하는 코드는 여러개의 팩토리 모듈로 분리한 후 서버와 통신이 필요한 컨트롤러에서 모듈을 주입, 중복되는 코드 감 소시킴 ● 이벤트 처리는 ng-click, ng-submit, ng-change 등 지시자 사용 ● angular-ui-router의 $stateProvider를 사용하여 클라이언트 측 라우팅 구현 1-1. 의류 쇼핑몰 앱 개발 - 상세설명 app.js 클라이언트 라우팅 코드 일부
  • 6. 프로젝트명 “의류 쇼핑몰 앱 프로젝트”의 백엔드 구축 수행기간 2015.01 ~ 2015.04 주요 언어 Python 3 프레임워크 Django 1.7 데이터베이스 PostgreSQL 서버 호스팅 AWS EC2 ( Ubuntu OS ) 라이브러리 Django-REST-framework, django-rest-auth 팀 구성 기획 1명 / 디자인 1명 / 개발 1명 개발 참여율 100% 결과물 - 소스코드 : GitHub 1-2. 의류 쇼핑몰 백엔드 구축 상세 설명 ● 상품, 디자이너, 디자이너 브랜드 등 서비스에 필요한 데이 터를 전송하는 REST API 작성 ● PIP 패키지 관리자를 사용하여 개발 의존성 관리 ● 서버 호스팅은 AWS EC2를 이용했으며, Ubuntu OS에서 데 이터베이스 설치, 프로젝트 환경 구축 ● 서버 개발 중 막히는 부분은 Stack Overflow에 직접 질문하 면서 문제 해결 StackOverflow
  • 7. 2-1. 개인 프로젝트 - 웹 테트리스 프로젝트명 1인용 웹 테트리스 결과물 형태 정적 웹 페이지 수행기간 2017.02 , 2주 주요 언어 HTML5, CSS3, JavaScript (ECMAScript 5) 그래픽 DOM API 조작키 - 블록 이동 : 상, 하, 좌, 우 방향키 - 블록 드랍 : 스페이스 결과물 - 소스코드 : GitHub - 사이트 링크 : Play 테트리스 동작 화면
  • 8. 2-1. 웹 테트리스 - 프로젝트 구조 index.html script.js setting.js Tetris File Directory style.css 테트리스 게임의 메인 로직 게임 설정에 관한 객체 저장 행/열의 개수, 블록의 종류 등
  • 9. 2-1. 웹 테트리스 - 상세 설명 ● 자바스크립트 이해를 높이기 위해 라이브러리를 사용하지 않음 ● 그래픽 구현은 Canvas를 사용하지 않고 DOM API로 개발 ○ 10*20 크기의 매트릭스의 각 셀 요소에 ‘행-열'정보 담은 id 부여 ○ 셀 요소에 직접 접근하여 background-color를 제어하는 방식 ● 게임의 키 조작은 onkeydown 이벤트 리스너 사용 ● 메인 로직은 즉시실행함수(IIFE) 패턴으로 전역 스코프 보호 ● 게임 설정이 있는 객체는 setting.js로 분리 ● 블록에 대한 데이터는 배열을 중첩해서 저장 블록 데이터를 저장 한 소스코드 일부
  • 10. 블록 회전 구현 과정 - 블록을 시계 방향으로 회전할 때, 쌓여있는 블록과 충돌하거나 매트릭스의 범위를 벗어나는 경우 발생 블록 회전 충돌 매트릭스의 경계 블록 회전 매트릭스 범위 이탈 2-1. 웹 테트리스 - 블록 회전 구현
  • 11. 구현 과정 (1) 블락을 회전했을 때 충돌 혹은 범위 이탈이 일어날 경우, 문제가 되는 셀(블록을 이루는 사각형) 개수 확인 - nextRotBlock : 회전될 블락의 셀의 좌표값 2차원 배열 ex) nextRotBlock // [ [3, 5], [4, 5], [4, 6], [4, 7] ] - self.matrix : 10X20개의 셀 정보가 담긴 2차원 배열 ex) self.matrix[0][0] == 1 // 0행 0열의 셀은 이미 채워짐 - overCells : 충돌되는 셀이 담길 배열 7열4행 2-1. 웹 테트리스 - 블록 회전 구현
  • 12. (2) 충돌되는 셀의 길이를 기준으로 for 루프 실행하면서 이동 가능한지 검사, 이동 ● 이동 가능 여부를 검사하는 방향은 “좌, 우, 상, 하”의 순서로 진행 ● 충돌되는 셀의 길이가 2이상이라도 1칸 이동해도 되는 경우가 있기 때문에 무조건 cnt는 1부터 시작 2-1. 웹 테트리스 - 블록 회전 구현 overCells.length == 2 1칸 이동하면 회전 가능
  • 13. (3) 화면에서 기존의 블록을 삭제하고, 회전된 블록을 화면에 렌더링 - 회전이 불가능하면 return으로 함수 종료 2-1. 웹 테트리스 - 블록 회전 구현
  • 14. 2-2. 개인 프로젝트 - 카페 공유 사이트 프로젝트명 작업하기 좋은 카페를 공유하는 사이트 결과물 형태 웹 사이트 수행기간 2016.08 ~ 주요 언어 HTML5/CSS3, JavaScript (ECMAScript 5), Python 3 프레임워크 Django 1.9 라이브러리 jQuery 3.1, Bootstrap, font-awesome, Bower 결과물 - 소스코드 : GitHub - 사이트 링크 : Site Link 사이트 메인 화면
  • 15. 2-2. 카페 공유 사이트 - 프로젝트 구조 main authapp cafealone 데이터베이스 연결 정보, Timezone 등의 프로젝트 설정 파일 로그인, 회원가입 페이지 템플릿 관리 DB 테이블 User 정의models.py root directory settings.py templates ... templates static 카페 목록, 카페 상세 화면, 카페 등록 및 수정 템플릿 css, js, img 디렉토리 관리 정적 리소스가 있는 디렉토리
  • 16. (1) 회원가입 및 로그인 페이지 2-2. 카페 공유 사이트 - 구현화면
  • 17. (2) 추천 페이지 - 이미지 업로드 / 삭제 mouse over click image removed 2-2. 카페 공유 사이트 - 구현화면
  • 18. (3) 추천 페이지 - 카페 위치 지정 ⓵ ⓶ 위치 지정 방법 2가지 ⓵ 문자열 주소를 입력하고 ‘검색’ 버튼 클릭 ⓶ 지도 상의 ‘마킹'를 Drag & Drop 하거나, 빈 공간을 클릭하여 ‘마킹’을 이동하면 ‘마킹'의 위치가 문자열 주소로 변환됨 2-2. 카페 공유 사이트 - 구현화면
  • 19. (4) 카페 상세 Modal ⓵ ⓶ ⓵ 등록한 카페를 지우는 버튼 ⓶ 카페 정보 수정하는 버튼 카페를 수정 및 삭제하는 기능은 로그인한 사용자와 작성자가 같을 때만 활성화 ⓵ ⓶ 2-2. 카페 공유 사이트 - 구현화면
  • 20. 페이지 로딩 속도 개선 사례 - 기존에는 Django의 빌트인 서버를 통해 HTML, CSS, JavaScript, 이미지 파일을 서빙 - 페이지 로딩속도 개선을 위해 백엔드 구성 요소에 Nginx, Gunicorn을 추가 - 서로 다르게 구성한 두 개의 서버를 포트를 다르게 하여 동시에 실행시키고, 로딩 속도를 비교 (Pingdom.com) Nginx와 Gunicorn으로 서버를 구성했을 때 페이지 로딩 속도가 2초 가량 빨라진 것을 확 인 Django + Nginx + Gunicorn Django Built-in Server 2-2. 카페 공유 사이트 - 사이트 최적화 경험