SEB_9_HTML,CSS,JavaScript 계산기(코드내용보다는 후기)

이번에는 배운 html과 css 로 계산기 목업을 만들고, js로 코드를 짜?(빈칸넣기) 계산기 구현을 하는 시간이었다. 이번 시간은 눈으로 확인할 수 있고, 무에서 유를 창조하는 느낌 + 서로 찾아보고 생각했던대로 진행이 잘돼서 유독 재밌었던 과제였다ㅋㅋㅋㅋ

 

1. 계산기 목업 (mock up) 목업이 영어인줄 몰랐다 나무목인줄,,,이렇게 알아갑니다.

html코드를 짜기 전 프로토타이핑 과정을 해보고자 피그마로 페어분 만나기 전 살짝 연습해보기도ㅋㅋ했는데(피그마 처음 접해봤다!! 수업 들으면서 좋은 웹 많이 알아갈 수 있어서 좋다), 페어분께서 피그마로 제안해 주신 디자인이 너무 예뻐서!! 바로 그걸로 진행했다.

일단 어떤 요소를 사용해야 하는지 나눠보고 css flexbox속성을 이용해 정렬을 하고, color,background-image,radius,box-shadow,...등 다양한 속성을 사용해서 처음에 계획했던 계산기목업을 완성했다.

근데 주어진 시간보다 빠르게 완성돼서 남은 시간동안 디자인적으로 수정해보고 싶은 부분이나 아니면 새로운 css속성, 사용해보고 싶은 속성을 논의 해보는 시간을 가졌는데 이 때 hover 이벤트를 적용해보면 좋을 것 같다고 제안해주셔서 이 부분에 초점을 맞춰 구현해보았다.

구글링 중 버튼에 적용할 수 있는 아주 화려하고 재밌는 속성들이 있어서 페어님께 레퍼런스 공유하고, 재밌는 버튼이 많네요ㅎㅎ만 했는데 페어님께서 코드를 바로 적용해보시더니 작동이 돼서 페어님도 나도 '세상에 이게,,,되네?? 넘 좋다 오 신기하다' 하고 버튼을 계속 눌러보고 커서 위에 올려보고ㅋㅋㅋㅋ 충분히 눌러본 뒤에 이 코드가 어떤식으로 작용이 되는지 또 어떤 속성이 이러한 효과를 주는지 분석하고 같이 찾아보고 서로 생각을 공유하면서 남은 시간을 보냈던 것 같다. 페어님과 코드 분석하면서 공부하는 재미가 있었다.

그라데이션 효과를 주는 css속성 linear-gradient는 전에 구글 클론 코딩 해볼 때 써본 기억이 있었는데 그 외에도 움직이는 효과(아직 잘 적용 시키려면 더 공부가 필요)와 이 그라데이션을 박스에 적용해두고 opacity라는 불투명도 조절 속성으로 투명하게 했다가 hover 발생시 불투명하게 해서 버튼 테두리에 나타나보이는 효과를 주는 신선한 접근법을 새롭게 알게됐다. > 이건 진짜 신박했다(코린이 기준) 

 

2.계산기구현

계산기 구현은 js로 진행하였고, 첨부터 끝까지 코드를 작성하는건 아니고, 계산기 화면과 사칙연산 결과값 부분 코딩을 지금까지 배운 js언어를 사용해서 작동시키고 테스트를 통과하는 방식이었다. 페어님과 같이 고민하고 여러번 시도해보면서 서로 공유하고 또 작동이 됐을 때 너무 뿌듯하고 행복했다ㅋㅋㅋㅋ 아 근데 뜬금없는 부분에서 막혔었는데 그것은 바로 다음 포스팅에도 나올 git hub!! git hub 혼자 코딩 할 때는 그냥 아무거나 누르고 commit하면 잔디 심어지고 대충 막 누르고 (무법자 시절) 터미널 열어서 아무거나 push 해버리고 그랬는데 막상 부트캠프의 remote repository 에서 파일 다운받는 부분에서 이해 못한 상태로 괜히 건들다 내가 그 원본을 건드는게 아닌가 싶어 그냥 vscode로 복붙했더니 테스트 파일이 작동이 안되는 문제가 바로 생겨버렸다. 그리고 어쩐지 계산기에 로고 찾을 수 없다고  콘솔에 자꾸 찍히는 게 이거 때문이기도 했다(계산기 구현 부분의 계산기 목업은 주신 파일을 이용했다) 왜냐면 js랑 css html만 복붙해서 파일명만 같게 했으니까 로고 이미지건 뭐건 구멍이 난 상태였던 것!! 지금 생각하면 사서 고생했다 볼 수 있다. 그냥 파일 다운받으라는 그 글자를 그냥 넘겨서는 안됐는데,,,,,결국 다시 파일 다운 받고 진행하니 잘 됐다. (지금 봤을때는 이 부분도 문제 있었음) -> 사실 fork하고 내 remote repository에서 받아야 됐는데ㅜ실시간 세션에서 강사님께서 알려주셔서 이 부분도 잘못됐음을 알게됐다.... 하튼 얼레벌레 pull requests 해서 과제 제출 할때까지 뭐지 하고 찾아보면서 git hub도 살짝씩 배웠던 것 같다. 

아 뭔가 실수로부터 스스로 알아가게 하는 큰 그림이셨을까??

그냥 글자를 잘 읽으면 될 일

주말에 계산기 nightmare 부분 더 해봐야 되지만 페어분이랑 즐겁게 작성한 것 같아서 재밌고 유익한 시간이었다.

 

3. 그룹회고

저녁에 새롭게 딥토크 그룹회고 시간을 가졌다. 회고라길래 기술회고인가 하면서 살짝 손에 땀났는데 (뇌속에 걱정 498492875가지) 그냥 편하게 서로 이야기 하고 긴장을 좀 푸는 시간이었다. 내 그룹번호 확인하고 줌 소회의실로 들어가면 되는데 뇌 오작동인지 줌을 나가버렸고, 그 순간부터 무엇인가 잘못됐음을 인지하고 빨리 다시 줌으로 접속했는데 사람들 다 소회의실 가고 약간 머쓱해진 상태로 그룹 찾고 소회의실 들어갔다. 막 들어갔을때 "아 이제 n명 됐네요 :)" 소리가 들렸고 맞게 찾아왔구나 싶어 안도의 마음 + 기다리시게 해서 죄송한 마음이 동시에 들었다. 실시간세션 끝나면 자동반사적으로 줌 나가는 손가락을 묶어놓든지 해야겠다^^