Challenges 시작
지난번 그림 앱만들기를 강의를 듣고 챌린지라는 제도를 알게 되어서 바닐라 JS 챌린지라는 JS, HTML, CSS를 통해 간단한 웹페이지 한페이지를 만드는 강의가 있어 챌린지 신청을 했다. 2주 동안 퀴즈, 코드 챌린지, 마지막으로 졸업 작품을 만드는 형식이다.
일정은 이렇게 보통 진행된다.
코드 챌린지
코드 챌린지는 강의를 듣고 복습하는 의미로 배운 코드를 사용하여 강의에 목표에 맞게 코드를 사용하여 과제를 수행하는 형식이다. 처음으로 코드 챌린지를 해보니 내가 배웠던 코드를 직접 사용하여 고민하면서 또 모르는 부분이 있으면 고민하다 도저히 안되면 친절한 슬랙에 같이 공부를 하던 동료들한테 물어보면 알려주는 친절한 사람도 많았다. 그래서 내가 몰랐던 부분도 알아가면서 직접 학습을 하니 좋았던 것같다.
전체적인 강의 내용
코드 챌린지 후기를 남기면 다른 기수분들한테 방해가 되는 행동 같으므로 코드를 남기자 않고 어떤 기능을 구현했는지에 대해서만 설명하겠습니다.
전체적인 강의 내용은 투드리스트를 만들고 제거하는 방식, 배경을 새로고침하면 랜덤으로 변경되는 부분, 시간을 알려주는 방식, 이름을 입력하면 이름을 저장해서 확인하는 방법, API를 통해 위치를 동의해서 알아내고 위치를 기준으로 날씨를 가져오는 기능까지 구현해서 간단한 나의 투드리스트 웹페이지를 만드는게 전체적인 강의에 내용이였습니다.
코드 챌린지 소개
코드 챌린지가 이 강의에 핵심이라고 할 수 있다. 코드 챌린지을 함으로써 코드를 직접 작성해서 어떤 기능이 가능한지 그리고 목표에 맞게 코드을 작성해서 그 기능들이 구현되는지 확인하는 작업이다. 5가지의 코드 챌린지를 만들었는데 코드를 공유하면 다음에 수강하는 분들한테 불리하기 떄문에 기능에 대해서만 설명하겠습니다.
첫번째 기능
마우스를 활용하여 이벤트를 만들어 마우스가 글자를 클릭하거나 나가거나 올라가거나 화면이 변경되면 글자의 색깔이 변경되는 기능을 구현했습니다.
두번째 기능
크리스마스의 일정을 기다리는 사람한테는 좋은 기능입니다. 다음 크리스마스가 얼마나 남았는지에 대해 알려주는 기능을 구현했습니다.
세번째 기능
화면의 크기에 따라 배경화면이 변경되는 기능을 구현했습니다. 크키별로 나눠서 이벤트를 만들어 구현했습니다.
네번쨰 기능
중앙에 있는 버튼을 클릭하면 랜덤으로 그라데이션 색깔이 나오는 기능을 만들었습니다. 색깔을 정하고 누를때마다 랜덤으로 색깔 변경을 해서 그라데이션 기능을 추가했습니다.
다섯번째 기능
마지막으로는 랜덤 숫자 맞추기 게임입니다. 숫자의 범위를 설정하고 내가 맟추고 싶은 숫자를 입력하여 랜덤으로 숫자가 나와 맞추며 승리를 하는 기능입니다.
마지막 졸업 작품
마지막 졸업 작품은 여태까지 배운 기능을 활용하여 나만의 투드리스트 웹페에지를 만드는 작업이다. 그리고 깃허브를 활용하여 업로드까지 완료해서 졸업작품을 제출하면 사이트에서 확인하여 졸업여부를 알려준다. 졸업에 성공하면 졸업인증서와 10% 강의할인권을 부여한다. 공짜지만 아주 좋은 챌린지라서 많은 사람들이 참석했다. 초보라도 사람들한테 물어보면서 따라오면 누구나 가능하다고 생각한다.
졸업인증
완료 졸업 인증사진으로 마무리하겠습니다.
