1 .결과물 URL + 캡쳐 이미지 2~3장

URL : jijeong.github.io

결과물 1. Default

결과물 2. 이름 입력

결과물 3. TO DO LIST 입력

2. 자기소개

안녕하세요! 오래도록 개발자의 꿈을 생각해왔으나 (대략 3년 쯤), 선뜻 도전하기가 무서워 그동안 발가락만 담그고 있던 비전공자 학생입니다. 올해 들어 새해 다짐 겸, '올해는 꼭 미뤄왔던 개발을 시작해야지' 하고 여기저기서 많이들 추천하시는 노마드 코더로 개발에 제대로 발 담그게 되었어요.

3. 서비스 소개

서비스는 매우 간단해요. 수업 때 진행했던 TO DO LIST의 기능은 그대로 가져가면서 style만 조금 손 본 정도입니다. style을 손보면서 CSS 뿐 아니라 Vanilla JS도 조금 활용했는데요, 스타일 구축에 들어간 기능은 아래와 같습니다.

- 새로고침 할 때마다 랜덤으로 변경되는 배경색상

- 배경 색상의 RGB 값을 가져와 색상에 맞춰 Body Element 의 색상 Black - White로 변경

기존에 수업에서 진행한 TODOs와 가장 크게 달라진점은 디자인인데요!

1. CSS 설정을 grid로 하여 3열을 만들어

2. 각 열마다 시간 / 분 / 초 를 좌측정렬시켜 통일감을 주었구요

3. 이름과 날씨, TODOS도 열마다 하나씩 , 좌측정렬로 위치시켜주었습니다.

하지만 아직 수정이 다 끝나지 않아서.. (폰트스타일이나 사이즈, 반응형 웹 등..) 완벽하게 만족스러운 상태는 아닙니다. 원래 이름, 날씨 TODO도 열마다 따로 위치시킬 생각은 아니였고 임의로 저렇게 놓은 상태예요. 너무 변화가 없는 것 같아서 심심해보이는 디자인.. 수정을 거치면서 2열에 이름과 날씨를 배치하고, TODOs의 위치는 그대로 가지 않을까 합니다.

완벽하지 않음에도 그냥 올린 이유는, 그럼에도 불구하고 TODO 콘테스트에 참여하고 싶었기 때문이랍니다. 호호.. 콘테스트 결과가 어떻든 간에 스스로 만족할 때 까지 수정해 나갈 예정이에요.

4. 개발 과정 (어려웠던 점과 해결방법)

기능은 수업에서 진행한것과 동일하게 가져왔기 때문에 어려운 점은 크게 없었습니다! 니꼬쌤이 잘 가르쳐주신 덕분에요.

저는 기능보다는 CSS 스타일 구축에서 좀 시간이 걸렸는데요! 1.새로고침 시 마다 배경색상을 변경하는 함수와, 2. 배경 색상에 맞춰 폰트 색상을 변경하는 함수에서 특히 공을 들였습니다.

1에서는 처음에 RANDOM NUMBER를 썼다가 너무 비슷비슷한 색상만 자꾸 돌아가며 나오는 경향이 있어서, 배열에 hex code에 들어가는 요소들 (a~f / 0~9)를 넣어주고 shuffle 함수를 활용해 수정하였습니다.

2는 1에서 만들어진 랜덤 백그라운드 컬러를 다시 불러와 rgb값을 분석하고, rgb값을 모두 더해 나눈 값이 128보다 크면 black을, 작으면 white를 폰트색상으로 적용하도록 해주었습니다.

5. 앞으로 계획

TODO를 만들며 JS 챌린지도 병행했는데요! 초심자에게는 어려운 문제도 많았지만 우여곡절 끝에 어떻게 졸업을 하긴 해서 굉장히 만족스럽습니다 :D 이 열정 그대로 가지고 앞으로도 열심히 공부하고, 난관을 이겨내서 멋지게 성장하고 싶어요. 최종 목표는.. 개발로 저 하나 먹여살릴 정도가 되는 것이고, 바로 앞의 작은 목표는 인스타그램 클론을 무사히 완주하는 것입니다. 저는 지금 TODOS에 이어 인스타그램 클론을 해보기 위해 노마드 코더 무료 강의들을 듣고 있답니다. 현재 프론트앤드 개발자를 생각하고 있지만, 제가 직접 서버를 만들고 배포까지 해본다면 그건 그것대로 정말 좋은 경험이 될 것 같거든요. 어쩌면 적성이 잘 맞아서 풀스택 개발자가 될 수 있을지도 모르는 일이니까요!

노마드코더분들, 앞으로도 함께 화이팅합시다 :)