기록하고 싶은 것들

오늘은 JS 객체에 대해서 공부한 뒤, 관련 문제를 풀었다. 기존에 프로젝트를 진행했을 때는, 객체를 선언하고 그 값을 사용만 해서 정확하게 사용법을 몰랐는데 오늘 기회를 통해 공부하게 되었다. 우선 객체의 값을 사용하는 방법인 Dot notation, Bracket notation을 알게 되었고, 객체값을 삭제 하는 delete 와 , 해당 키가 존재하는 지 확인 하는 in 연산자를 배웠다. 직관적인 부분이라 이해가 되었는데, 막상 문제를 풀 때 어려움을 느낀 것이 있었다. 바로 for of 와 for in을 사용시 배열을 사용해야할지 객체를 사용해야할지 헷갈렸다. Mdn 문서를 찾아보니, for in은 객체의 반복에서 사용하고, for of은 배열의 반복에서 사용한다고 한다. 또한, ES6 에서 객체..

오늘은 JS의 배열에 대해서 공부하며, 새롭게 알게된 내용들이 있었다. 배열과 null 값에 typeof 를 사용시 object를 반환한다는 것이다. 당연히 각각 array와 null로 반환 될 줄 알았는데, object로 반환이 된다. 그렇다면 배열을 구분하는 방법은 없는가 싶었는데, Array.isArray() 를 사용 시, 배열인 경우 true 값을 반환하여 구분이 가능하다는 것도 새로 알게되었다. 또한 배열 조작시 push,pop을 통해 배열의 맨뒤에 요소를 추가, 제거 할 수 있고, unshift, shift를 통해 앞의 요소를 추가, 제거 할 수 있다는 것을 알게되었다. 새로운 내용들을 알게되니, JS를 기존에 너무 얕게 알고 있다고 생각이 들었다. 공부를 마친 후, 페어 분과 함께 배열관련 ..

오늘은 [Linux/Git] 기초에 대해서 배웠다. 기존 학교수업과 생활코딩에서 linux를 배운적이 있고, 가상환경으로 linux를 사용해본 경험이 있어서 기본 개념을 공부하는데는 수월했다. 문제는 기존에 가상환경으로 받았던 linux가 작동이 되지 않아서, 처음부터 다시 진행했는데.... 제대로 설치가 되었어도 재부팅을 하면 화면이 나오지 않거나, 1시간 정도 기다려야 로그인 화면이 뜨는 등 작동을 시킬 수가 없었다. 문득 맥북을 사야하나..? 고민이 들기 시작했고, 몇 번을 시도해도 작동이 되지 않았다. 기존 linux 설치 때는 화면 해상도 때문에 한국어로 설치가 안되고, 설치하고 일일히 한국어팩을 깔아주면서 작동시켰는데, 지금은 그냥 작동이 안되니까, 너무 스트레스를 받았다. 일단 linux가 ..

오늘은 계산기를 작동하는 기능을 만들었다. 사실 js와 html을 연결하는 것을 수업적으로는 하지 않아서 공유해주신 파일을 통해서, 코드를 수정하는 방식으로 만들었다. bareminium, advanced, nightmare 단계로 나누어졌고, 세부적인 기능을 추가하는 식으로 진행되었다. advanced 문제까지는 쉽게 해결했는데, nightmare 단계부터는 머리가 터졌다ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 마치 우테코의 프리코스를 경험하는 느낌이었는데, 맞는데 왜 틀리지...? 가 반복이었다. 통과해야하는 조건의 수가 많았고, 헷갈리는 포인트가 많았다. 3,-,3,Enter,Enter,Enter,Enter를 연속으로 누르면 -9이(가) 화면에 표시되어야 합니다. 1,0,0,.,.,1,2,5,2,+,1,2,+,1,5,-,..

오늘은 계산기 목업을 완료하였다. 완성된 계산기의 크기를 조정하려고 했는데, 이상한 모양이 되버려서 뭐가 문제인지 고민하다가, 부모 div에 display: flex와 자식 div에 flex 속성을 주어 해결하였다. 계산기를 완성시키고 나서, 다른 동기들이 한 작품들을 보았는데 기울어진 상태로 3D같이 구현한 계산기, 라이언을 직접 그려넣은 카카오 계산기, 미니언즈 애니메이션 적용 계산기 등,,, 엄청난 노력을 해서 만든게 보였다. 나도 이만하면 됐다 싶었는데, 살짝 반성이 되면서 동기부여가 되었다. 뒤늦게 나마 기존에 만들었던 계산기에 노마드코더의 눈송이 효과를 넣어주어서 효과를 줘봤다! -끝-

수업시간에 목업 계산기를 제작하며 flex box를 익혔지만, 부족함을 느껴 복습겸, 계산기를 따로 제작해 보았다. 나름의 깔끔한 디자인을 원해서, 토스 홈페이지에서 색상 배치도 보고, 계산기 어플들의 디자인을 살펴보고 제작하였다. 계산기를 만들면서 부모 component와 자식 component에 flex의 어떤 요소를 넣을지 구분이 가게 되었고, 익숙해질 수 있었던 것 같다. 기본적인 틀을 제작 후, box-shadow를 통해 그림자를 주고, hover 를 통해 버튼이 마우스에 닿으면 색상을 바뀌게 제작했더니 그럴듯한 모습으로 나왔다. 간만에 직접 뭔가를 제작해보니, 간단한 결과물이지만 뿌듯한 느낌을 받았다. 오늘 연습한 내용을 통해서, 월요일에 목업 계산기를 마무리 지어야겠다.

오늘은 flex box에 대해서 배운 후 페어 프로그래밍을 통해서 계산기 목업을 만들었다. 기존 페어했던 분과 또 같이 페어를 하게되어서 신기하기도 했고 편했던 것 같다. 기존에는 기본적인 css 문법도 구글링을 하면서 찾아보았는데, 확실히 개념을 다지고 진행하니, 어떻게 box를 배치할지 감이 생겼다. 맥북에 있는 계산기를 똑같이 제작하기로 하였고, 디테일 한 요소(박스 둥글기, 버튼 간격)을 생각하면서 진행했다. 계산기 버튼을 제작하면서 줄이 맞지 않은 부분이 생겨, 페어분과 뭐 때문인지 계속 고민했다. 내린 결론은 border를 주면서 공간을 차지해, 약간의 오차가 생긴 것이다. 페어분이 outline 사용을 추천해 주셔서 outline으로 테두리를 주니, 공간 차지 없이 깔끔하게 표시되었다. 전체..

오늘은 css 기초를 공부했다. 웹 개발을 공부하면서 가장 자신이 없던 부분이기도 하고, 간단하게만 배워서 수박 겉핥기 식으로만 아는 부분이라 제대로 짚고 넘어가야겠다고 생각했다. 공부를 하면서 block, inline-block,inline의 특징과 차이를 알게되었고, 레이아웃 디자인을 쉽게도와주는 box-sizing 에 대해서도 알게 되었다. selector도 기존에 알고있던 종류를 넘어서, 자식과 손자 selector, n번째 위치한 요소를 선택하는 등 기존에 잘 몰랐던 개념에 대해서도 알게 되었다. 이해하기 쉬운 예시가 나타나있어서, 학습하는데 무리가 없었고, 지금까지 진행했던 수업과정 중에서 가장 만족스러웠던 파트였던것 같다. 내일은 추가적인 css 수업 이후 , 페어 프로그래밍으로 계산기를 만..

오늘부터 HTML에 대해서 배우기 시작했다. 태그의 사용법과 속성 등을 배웠고, 간단한 예제들을 직접 코딩하면서 실습을 하니, 이해가 더 잘되는 것 같았다. 웹 페이지 구조를 잡는 예시를 보면서, 사이트들을 볼 때 어떤 태그가 사용되었는지 관찰하는 것도 좋을 것 같다. 5시부터는 동기부여 세션을 들으면서 긍정적인 마인드 셋에 대하여 들었다. 항상 왜 남들보다 못하는지 좀 자괴감이 많이 들었었는데, 사로잡히지 말고 긍정적인 생각을 많이 해야겠다. 수업이 다 끝난 후 JS 스터디 사람들과 간단하게 규칙을 정하고, 자기소개를 했다. 나랑 비슷한 분도 있고, 전혀 다른 배경에서 참여하신 분들도 있어서 새로웠다. 이왕 공부하는거 더 열심히 하려고 들어간만큼, 민폐가 되진 않도록 해봐야겠다. 끝!

오늘은 페어프로그래밍을 통해 unit을 마무리 지었다. 문제는 대체적으로 쉬었지만, advanced 문제들은 조금씩 막히긴 하였다. 페어분과 풀이과정을 비교하면서 문제를 풀었는데 '2-3-5-7-11-13-17' 이런 식으로 리턴하는 문제들을 나는 빈 문자열에 더해나가는 식으로 하였고 페어분은 문자를 배열로 만든뒤 join('-')으로 합치는 식으로 풀었다. 다른 사람이 풀이를 보고 내 풀이와 비교해볼 수 있다는 점이 가장 큰 장점인 것 같았다. 나도 너무 기초적인 문제 풀이로 하기 보다는 페어 분처럼 정돈되고 가독성좋은 코드를 짜야겠다고 생각이 들었다. 사용하는 문법에만 치중하지 않고 잘 사용하지 않은 문법도 익숙해지도록 공부해야겠다! 끝!