TIL 28일차

• 11:00 | Group Project Session

그룹 프로젝트의 목적

• 실제 웹서비스를 처음부터 끝까지 개발하는 것을 훈련하는 것이 목적이다.

눈에 보이는 요소가 완성도의 역할을 굉장히 크게 한다. 코드퀄리티도 중요하지만 3자가 보는 것은 프론트엔드단의 완성도다.

Project Process

Scrum

• Planning Meeting 한주동안 어떤 작업을 할 지 계획한다.
• Kanban Board - Trello 어떤 일을 할 것인지 테스크를 Trello를 사용해서 관리한다.
• Daily Standup Meeting 서서 하는 미팅. 매일 팀원들이 10~15분 정도 어제 했던 일, 오늘 할 일, 다른사람이 처리해서 진행해줘야 할 일에 대해 회의한다.
• Github - OR & Code Review 멘토들한테 PR을 날려서 코드리뷰를 하고 기준에 부합한 것만 Merge된다. Github에서 코드리뷰, 피드백을 줄 것이다.

2 weeks total - 2 sprint로 진행된다.

나무그네 이야기 - 의사소통이 중요하다.

Intro To Scrum

• 전체 개발 프로젝트의 68%가 실패한다.

• 실패의 정의

  • 목표기능 미달 및 불량
  • 일정 및 비용 초과
  • 개발 중도포기 (완전 실패)
• 소프트웨어 개발 프로젝트 운영은 굉장히 어렵다.

• Scrum의 기본 철학

  • 개발 업무는 소요 시간과 진행과정을 예상하기가 굉장히 어렵다. 한시간 걸린다고 생각하면 2~3시간이 기본이고 1달을 생각하면 2~3달이 기본이다.
• 스크럼에서는 모든 문제들을 부정하지 않고, 피할 수 없다고 가정한다.
• 스크럼은 이러한 문제들을 없애는 것이 목적이 아니라 이러한 문제들에서 나오는 피해를 최소화하는 것이 목표다.

• Sprint

  • 장기적인 계획이 아닌 단기적인 계획을 단계적으로 여러번 짜는 것이 중요하다. 이러한 단기 주기를 Sprint라고 한다.

• Sprint 진행 방법

  • 스프린트 시작 첫 날 planning 미팅을 갖고 스프린트 동안 할 일을 결정한다.
  • 스프린트를 진행하면서 각자 주어진 일을 완료한다.
  • 매일 standup 미팅을 통해 팀원끼리 서로 진행사항을 공유한다.
  • 다음 세가지를 한사람씩 돌아가면서 이야기한다.
  • 어제 했던 일, 오늘 할 일, 다른사람에 의해 막혀있는 것이나 다른사람이 해줘야 하는 것(blocker)
  • 이러한 주기를 프로젝트 끝날 때 까지 반복한다.
  • 계획을 단기적으로 짜면 현실적인 계획이 가능하다.
  • 프로젝트 진행사황 파악이 쉬워지므로 문제나 차질이 있을 때 미리미리 대처할 수 있다.

CSS | Transition

CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다.

CSS | Animation

HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다.
Transition으로도 어느 정도의 애니메이션을 표현할 수 있지만 Animation보다는 제한적이다.
Transition 프로퍼티는 단순히 요소 프로퍼티의 변화에 주안점이 있다면 Animation 프로퍼티는 애니메이션을 나타내는 CSS 스타일과 Sequence를 나타내는 복수의 @keyframes들로 이루어 진다.

@keyframes

CSS Animation과 Transition방식의 주된 차이는 @keyframes rule에 있다.
이 rule을 사용하면 애니메이션의 흐름(sequence)중의 여러 시점(breakpoint)에서 CSS 프로퍼티값을 지정할 수 있따.

SCSS

Sass(Syntactically Awesome StyleSheet)는 CSS-pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 extensiond이다.

CSS는 문법이 간결해서 배우기 쉽고 명확하여 프로젝트 초기에는 문제가 없지만 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해 지고 유지보수도 어려워지는 단점이 있다. Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

• 변수의 사용
• 조건문과 반복문
• Import
• Nesting
• Mixin
• Extend/Inheritance

Sass의 장점

• CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다.
• 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
• CSS에는 존재하지 않는 Mixin 등의 강력한 활용하여 CSS 유지보수의 편의성을 큰 폭으로 향상시킬 수 있다.

Group Project | BR-Sariwon 1일 차

• 베스킨라빈스 상단 메뉴 구현