210118_TIL

Start Think: 웹개발을 처음 접했을 때에는 백엔드 포지션은 뭔가 컴퓨터 전공자들이 해야할 것 만 같고, 어려운 벽이라는 느낌이 많았고, 프론트엔드가 그래도 비전공자가 경쟁할 수 있는 분야라고 생각했었다.
하지만 요즘은 js에 대한 공부와 데이터처리에 대한 실습들을 많이 해보면서 백엔드 포지션에 대한 편견이 사라진 것 같다. 그리고 오히려 더 재미있을 수도 있겠다라는 생각이든다. 그리고 반대로 프론트 부분은 발표할 때 능력자들이 하는 것을 보면서 '허허... 프론트가 오히려 능력을 더 타는 분야인가?' 라는 생각이 들기도 한다ㅎㅎ 

주니어도 아니고 입문자 레벨인 지금 프론트!! 백엔드!!! 나누는 것이 아직은 필요한 단계라고 생각하지는 않아서 여유있게 조금 더 맘에 드는 분야를 정해보고자 한다.! 

🎄오늘 한 일

---

✔️ 1.  Subclass dance party 스프린트에서 Disk 클래스와  자식 클래스인 slow Disk, fast Disk 클래스 작성하기

• js의 ES6의 class 키워드를 통해 Disk 클래스를 생성해보았다. Disk 클래스는 Dancer 클래스를 부모클래스로 하고 있어, step() 함수와 setPosition() 함수들을 상속받기도 하고, 클릭하면 사라질 수 있도록 handlelickDisk( ) 메소드를 고유하게 가지고 있기도 한다.
• slow Disk와 fast Disk 클래스는 기본적으로 Disk 클래스로 부터 상속받았지만, 각 클래스는 고유의 빠르기, 크기, 색등을 가지고 있는 클래스들이다. 

✔️ 2. Css를 통해 사격장 컨셉에 맞게 disk들의 색, 크기, 속도를 변경하고 백그라운드 이미지 추가하기

• imgbb 사이트에서 이미지를 호스팅하고 해당 주소 받아와서 백그라운드 url에 넣어주기
  기존 빈 회색 배경에서 background: no-repeat url('https://i.bbo.co/1) center;속성으로 지정해준다.
• animation 효과 사용 
  @keyframes 를 통해서 처음위치와 끝나는 위치를 설정해주고, transform 속성을 통해 처음에는 rotate(0)을 끝점에서는 rotate(360deg) 주어 원반이 처음에서 끝점으로 회전하면서 움직일수 있도록 해주었다.

 

🎄더 공부할 것

✔️1.  TIL은 간단하게 한 것만 정리하고, 자세한 Sprint는 따로 포스팅하기
✔️2. CSS에서 animation, transform, transition, onclick시 터지는 기능 들 굉장히 다양한 옵션들에 대해서 공부하기

마무리 Think:
Sprint 동안에는 워낙 계속해서 코드를 수정하다 보니, 중간 중간 실수했던 부분을 기록하기가 어려웠다. 앞으로는 페어에게 양해를 구하고, 천천히 기록하면서 스프린트를 진행하는 것이 좋을 것 같다. : )