[작성일: 2023. 05. 27]
React
- React는 라이브러리이며 자유도가 높다.
- 라이브러리는 사용자가 필요할 때 넣었다가 필요없을 때 제외 가능하다.
- React는 자체 문법이 있다기 보다는 javascript 문법을 대부분 따른다.
Vue.js
- 프레임워크이며 기능이 정해져있다.
- 프레임워크는 부분적 사용이 불가하며 제공된 문법에 따라 작성이 가능하다.
- 지정한 문법 방식으로만 개발이 가능하다.
Sample
- 조건에 따라 버튼이 보였다가 안보였다가 하는 기능을 구현
<!-- React -->
<div>
{isVisible? <button> 조건에 따라 사라질 버튼</button> : null}
</div>
<!-- Vue.js -->
<div>
<button v-if="isVisible"> 조건에 따라 사라질 버튼</button>
</div>
- 배열(집합객체)에서 데이터를 하나씩 꺼내와서 처리하는 방법
- React : map, forEach, for 중 개발자 스타일대로 구현
- Vue.js : only v-for로만 구현 가능
- 컴포넌트 재사용 측면에서는 React가 효율적이다.
- Vue는 문법이 고정되어 있어 개발자간 코딩 스타일을 통일할 수 있다. 또한 생산성이 좋고 여러 기능이 기본적으로 탑재되어 있으며 속도도 미세하게 빠르다.
- 규모가 작고 가벼운 프로젝트, 자바스크립트 문법을 잘 모르는 경우, 퍼블리셔가 본인이 아닐 경우는 Vue.js를 사용한다.
- 규모가 크고 앞으로 기능이 늘어날 예정, 자바스크립트 문법을 잘 아는 경우, 컴포넌트나 UI 재사용이 중요한 경우에는 React를 사용한다.
협업도구
- Confluence : 협업 툴
- JIRA : 협업 툴
- GitHub : 소스 관리 툴
웹 개발 프로젝트 단계
아이템 선정 및 팀 구성
- 무엇을 만들 것인가?
- 팀원들의 역할 분담
기술 선정
- 언어 및 프레임워크 선정
- 무엇으로 만들 것인가?
기능 정의
- 어떤 기능들이 들어가야 하는가?
페이지 기획 및 디자인
- 어떤 페이지들이 들어가며 무슨 역할을 수행하는가?
- 개발 결과물이 없는데 화면 구성은 이 단계에서 이미 작성
- ovenapp : https://ovenapp.io
- figma : https://www.figma.com/
- 초화면 디자인 : 2-3단계 화면도 디자인이 가능한 경우 포함
- 테이블 디자인
- ERD를 그릴 수 있으면 그림.
- 일반적으로 많이 활용된다는 8 ERD tool을 활용하거나 테이블 구성만 문서로 구성
설계(DB 설계 및 API 설계)
- 데이터 구조 및 상호 통신 방식
- 필요에 따라 외부 시스템과의 통신 방식
- 테이블 creation
- URL 설계 : 화면 설계, 테이블 설명 및 DDL
개발
- 실제 개발 단계
테스트
- 단위 테스트, 통합 테스트, 인수 테스트(Optional)
- 부가적으로 시스템 테스트(부하 등 - loadrunner)
배포
- 웹 서비스 구축
도메인 설정
- 도메인 연결
포트폴리오 작성
- 간단한 자기 소개
- 깃허브 / 기술 블로그 주소
- 기술 스택 : 프론트, 백, 데브 옵스 등
- 주요 프로젝트
- 학력 / 이력 등
- 기타 필요한 사항
페이지 기획
사이트 개요
- 우리 눈에 볼 수 있는 화면의 디자인이 나오는 단계
- 디자인 툴을 사용한 UI 기획이 대세
- 사이트 이름(Namaing) : 초반 단계에서는 이름은 Optional
- 사이트의 목적 : 꼭 상용을 목표로 하지 않아도 된다. 기존에 학습한 내용들을 다시 스스로 구축해보는 것이 목표가 될 수 있다.
- 사이트의 기능과 서비스
- 사이트의 특장점
디자인
- 웹 서비스를 페이지 단위로 화면 구성
- UI(User Interface) : 서비스에 표시되는 모든 요소(로고, 버튼, 메뉴, 링크 등)
- UX(User Experience) : 사용자 경험이라고 하며 사용하기 편리한 화면 구성(로그인 위치, 확인/취소 버튼 위치 등)
- CX(Customer Experience) : UX + 직원
- DX(Digital Experience) : 고객 중심 여정의 한 측면으로 모바일, 데스크탑 등 온라인 플랫폼 또는 앱, 소셜 미디어와 같은 디지털 공간을 매개로 한 경험. + 사물 인터넷, 음성 작동 장치
- 인터넷을 써서 우리의 브랜드를 사용하는 모든 경험
- 고객의 브랜드 충성도에 영향을 미친다고 알려져 있음.
- 고객들 중 65% 이상이 웹이나 앱에서의 경험으로 다른 사람에게 브랜드를 추천하는데 가장 중요한 요소
DB 및 API 설계
- DB 종류 선택
- 기획의 화면 설계가 되면 DB 구조가 그려지므로 DB 설계가 가능해짐.
- RESTful API를 이해한 후 API 설계 문서 작성
웹 개발 방법론
Waterfall(폭포)
- 직관적인 방법론
- 요구사항 정의 → 요구사항 분석/설계 → 개발 → 테스트 → 운영
- 각 단계의 작업을 완료해야 다음 작업 수행이 가능하다.
- 예측 가능하고 철저하게 짜여진 프로젝트 계획에 적합하다.
- 대규모 프로젝트에 적합하다.
Agile(애자일)
- 가장 많이 사용되는 프로젝트 관리 프로세스 중 하나
- 협업을 중시, 빠름, 효과적, 반복적, 데이터
- 프로세스 중심이 아닌 개인을 더 중요시 한다.
- 사상에 가까우며 이를 구현하기 위한 방법론을 병행하여 사용해야 한다.
- Marshemllow Challenge(Tom Wujec) Tedtalks 참고
Scrum(스크럼)
- 짧은 스프린트를 사용하여 프로젝트 주기 설정
- 스프린트 주기는 1~2주, 10명 이하의 팀원으로 구성
- 스크럼 매니저(프로젝트 매니저)가 스크럼 미팅을 진행하고 스프린트 종료 후 스프린트 회고(반성)
- 애자일 + 스크럼이 많이 사용 된다.
칸반
- 시각적 요소, 특히 보드(board)를 잘 사용한다.
- 애자일 + 칸반의 경우 병목 현상의 발생 가능성을 낮춘다.
- 프로세스가 정의되어 있지는 않다.
- 칸반을 사용하는 팀이 각자의 방침으로 활용하면 된다.
- 원격으로 운영되는 팀에서 사용하는 것이 가장 효율적이다.
스크럼반
- 스크럼 + 칸반
- 스프린트 주기로 관리되지만 개별 작업을 계획에 포함한다.
PRINCE2
- Projects in Controlled Environments
- 영국 정부가 IT 프로젝트 수행을 위해 고안된 개발방법론
- 7가지 핵심 원칙(시작, 주도, 착수, 통제, 산출물 인도, 단계경계관리, 종료)
6-sigma
- 품질관리에 주로 사용된다.
- 100만개당 6개의 오류가 나는 수준
- 6-sigma를 달성하는데 가장 큰 문제가 되는 부분을 찾고 해결하기 위한 목적
>> 6월 1주 추가
OAuth
- Open Authorization : 오픈된 인증 방식
- 인터넷 사용자들이 아이디/패스워드로 정보를 제공하지 않고 웹사이트 상의 자신들의 정보에 대해 웹사이트나 어플리케이션의 접근권한을 보유할 수 있는 공통적인 수단을 위한 표준
- 구글의 AuthSub, AOL의 OpenAuth, 야후의 BBAuth, 아마존의 웹서비스API 등 서로 다른 표준을 사용하거나 기본 아이디/패스워드 방식을 사용 ➡️보안상 취약한 구조
- OAuth를 이용하면 이 인증을 공유하는 애플리케이션끼리는 별도의 인증이 불필요하다.
- 여러 기업(아마존, 구글, 페이스북, 마이크로소프트, 트위터) 등이 사용 중이다.
WorkFlow
- 요청: 사용자가 로그인 버튼 클릭
- 선택: 클라이언트가 타사 권한 인증 자격 증명을 선택
- 로그인: 권한 인증 서버가 (엑세스) 토큰을 생성하여 전송
- 연결: 토큰 확인 후 액세스 허용