[Angular] TickTock 프로젝트 정리

[Angular] TickTock Project

TickTock 프로젝트

처음 앵귤러로 만들어본 프로젝트에서 기록해두면 좋을 것들, 한 번 더 공부하고 가면 좋을 것들을 기록해두고자 합니다.

먼저, 이 프로젝트를 간단하게 소개하자면 프로젝트라고 하기엔 거창하고 Angular(2+) Front에서 Back까지 - 앵귤러 기본이라는 강의를 보며 실습하고, 복습하면서 기능을 추가한 것입니다.

 

특징 정리

기능이라고 할 것은 없고, 이 프로젝트의 특징과 제가 한 것은 아래와 같습니다. 홈화면, 스톱워치, 시계로 구성되어 있는 웹페이지를 만들었으며, 관련된 코드는 제 Github에서 확인하실 수 있습니다.

• 스탑워치와 시계를 만드는 페이지를 만들며 앵귤러 강의 수강
• Bootstrap을 적용하여 화면 정리(다음에는 Angular material 활용예정)
• Home 화면을 만들어서 라우팅 복습
• 매초마다 시계의 색깔 변화를 주어 바인딩 복습

 

정리할 것들

7시간이라는 그렇게 길지 않은 강의였는데요, 생각보다 오랜 시간동안 수강했습니다. 은은한 삽질들이 많았기 때문이죠.
초기 세팅이 가장 힘들다고 하듯, 초기 패키지를 설치하는데도 오래 걸렸으며..(패키지를 설치하지 않으면 또 그로 인한 추가 작업들이 꽤 많은 시간을 소모하는 것 같았습니다.) 정말 무지에서 오는 것들.. 한 번 기록하고 나면 제 지식이 되는 기분이고, 여기서는 다 작성하면 길어질 것 같아 진행 리스트를 작성하는 게시글로 마무리하려고 합니다.

1. 컴포넌트와 모듈의 차이
2. 데이터 바인딩(스타일 바인딩 활용하여 클래스 변경)
3. @Injectable 프로바이더(providedIn: 'root')
4. 리다이렉트 연결 (Routes의 redirectTo)

 

나중에 하고 싶은 것들

이번에 나름 복습을 하며 디벨롭시키면서, 삽질 때문이었다는 것을 나중에 깨달아서 결국 하지 못한 angular material을 적용해서 디자인을 해보는 것과, navbar를 만들 때 다른 사람들이 어떻게 route를 시켜 연결하는지 공부하고 적용해보고 싶어졌습니다.

1. angular material 적용
2. navbar route 효율적 변경

 

마치면서

오랜만에 정말 작지만, 웹페이지를 만들어보고 bootstrap까지 적용하게 되었는데 왜 고민하면서 무언가를 사람들이 해내려고 하는지 다시끔 이해하게 되었습니다. 이제 시스템을 분석도 해내고 싶고, 구상중인 프로젝트도 혼자 힘으로 끝까지 해내고 싶습니다. 언젠가 무지로 인한 삽질이 없는 날이 오기를 바라면서!