Dev log

프로젝트를 진행하면서 느끼고 생각한 것을 기록합니다.

20201128

쉽게 친해지지 못하고 손이 가지 않았던 넷플릭스 스타일링을 강사님과 같이 실습해보는 첫 날이다.

  • 잘 못하고 자신이 없으니 2달이라는 시간이 지나는 동안 작업이 제대로 진행되지 않았다. 한마디로 방치. 이제는 물러날 곳이 없다. 뒤에는 절벽이고 한 발자국 멀어지면 떨어진다는 생각으로 하자. 나중에 힘든것 보다 지금 힘든게 100배 1000배는 낫다. (하지만 지금 이 순간에도 js의 객체 지향 프로그래밍 생각이 나는 구나...)

명령어 공부하기

  • 문법 검사를 위해 .htmlhint를 실행시키니 설치가 되지 않았다는 오류 메세지가 뜬다. 결국 npm 명령어를 등록하고 Z shell, 별칭 등록 , 파일 복사, 이동 등 시작 전에 VScode 명령어를 공부했다.

20201130

  • Git 명령어 배우기

    • 어제 내가 TIL에 작성한 명령어는 VScode 명령어가 아닌 Git 명령어였다. 내가 뭘 공부하고 있는지 알고 공부하도록! ㅎㅎ

    • 추가로 정리해주신 Git 명령어 문서를 보고 계속해서 명령어를 사용하는 연습을 해야겠다. 당분간 Git을 사용할 때는 GUI 보다 CLI에 익숙해 지도록 반복하기! 암기보다 반복하여 내 몸이 기억하도록 하기! 많이 경험해봐서 알지~?

    • 실무에서 어떤 방식으로 일을 할지 모르니 다방면으로 배우고 익숙할 수 있도록 연습하자 그때가서 후회하지 않도록!

  • 넷플릭스 실습

    • <input> 요소 스타일링을 강사님과 같이 했는데 생각보다 놓쳐서는 안되는 부분을 많이 놓치고 있었다. 어이없게도 제일 기본적인 인풋에 font-size를 지정해 주지 않은 것. 스타일에만 열중하다보니 사용자 경험을 아예 잊고 있었다. 내가 만드는 것은 전부 사용자가 보고 경험하는 것들이다. 나만의 것이 아닌 사용자에게 제공하는 UI를 만든다는 것을 잊지 말기!

    • JS와 CSS로 <label>에 인터렉션을 주었다. 확실히 손으로 해보니 재밋다. 막연해 보이는 것도 손으로 직접 해보고 눈으로 보니 더 기억에 남는 것 같다.

    • CSS는 정답이 없다. 하지만 그 정답이 없는게 매력이다. 계속 고민하고 방법을 찾아내고 의논해서 최적의 방법을 찾아내는 과정이 재밋다. "어떻게 해야할까?"라는 생각으로 축 쳐지지말고 CSS를 사랑할 매력 포인트를 찾자. 하지만 이미 찾은 것 같기도^^

20201201

  • 벌써 12월이다.

    • 공부를 시작한지 얼마 안된 것 같은데 시간이 정말 빠르다. 잠시라도 좋으니 시간이 멈췄으면 좋겠다. 이번 한 달의 목표는 CSS이다. 이제까지 차근차근 JS 배운 과정을 생각하며 CSS도 무서워말고 차근 차근 실력을 쌓아나가자!

  • CSS 파일을 독립적으로 사용하기

    • React에서 사용하는 방식으로 CSS 파일일을 쪼개서 관리하는 방법을 배웠다. Sass를 처음 배웠을 때 모듈화하는 작업을 했을 때가 생각났다. 그때는 독립적으로 파일을 나누는 것에 엄청 혼란스러워서 이해하기 힘들었다. 그래도 한 번 비슷한 경험을 한 적있다고 이런 구조가 낯설지 않는다. 구조만 조금 머릿속에 정리하면 사실 한 파일에 코드를 길게 쓰는 방법 보다는 코드를 나눠서 관리하는 방법이 훨씬 편리한 방법이다. 정리를 잘 해보자.

20201203

  • 스스로 다시 연습하기

    • 실습 후 혼자 연습을 해보았다. 오늘 하루 두 번 정도 연습해보면 딱이겠다 싶었다. 희망 사항이었을까? 와우! 한 번을 다 끝내지 못했다. 그래도 실습하면서 내가 놓쳤던 부분을 하나하나 이해하면서 하다보니 시간은 배로 들지만 이해하는 속도는 점차 빨라진다. 내일은 제발 두 번 반복하기를... 처음에 혼자 스타일링을 할 때도 input이 참 어려운 부분이었는데 이번에도 복습할 때 같은 부분에서 시간이 오래걸렸다. 쌓여가는 TIL과 함께 내 지식들도 쌓여가길.. 내 노력이 제발 배신하질 않기를 바랄 뿐이다.

  • css 선택자를 다시 보자. 기본 선택자 부터 그룹 선택자, 형제, 자식 선택자 등 다시 천천히 보고 적용하면서 익숙해 지자

  • 공간 설정이 약하다. em, rem, vw, vh 등 단위 설정 및 레이아웃의 정렬 방향을 아직도 헷갈린다. 하면서도 수시로 MDN을 찾아봤다. 이것도 방법은 없을 듯 하다. 계속 반복하는 것 뿐. 일부로 취약한 부분을 사용하려고 노력하기!

  • TIL 다시 보기 오타는 없는지 글의 내용이 문맥상 자연스럽게 흘러가는지 확인하자. 꼼꼼한 것도 실력!

20201208

  • CSS 코드 리뷰하기 (Refactoring)

    • 필요없는 코드를 최대한 적지 않도록 하자. 대표적으로 block요소에 height: auto를 주는 것. 필요한 속성을 잘 찾아내서 입력하는 것을 계속 연습해야겠다.

    • 코드 리뷰라는 것은 내 코드를 누군가에게 설명한다는 것이다. 내가 짠 코드를 왜 그렇게 작성했는지 설명할 줄 알아야한다. 내가 짠 코드에 자신이 있어야 한다.

    • 컴포넌트 방법으로 스타일을 하고 싶다면 공용 스타일 부분을 추출해 내는 능력이 필요하다. 또한 설계한 부분을 생각하면서 작업하자(예: 네이밍 컨벤션)

    • 마크업을 수정하는 것에 너무 죄책감을 갖지말자 이유가 있는 수정은 당당하게 내 의견을 어필하자. 그리고 수정한 뒤에 다른 스타일 요소에는 영양을 주지 않았는지 다시 한 번 확인하는 꼼꼼함을 갖자

    • 여러가지 방법을 찾는 것이 재밋다. 같이 코드를 리뷰하다 보면 내가 보지 못했던 것, 생각하지 못했던 것들을 알게 된다. 그 모든 것들을 내것으로 만들고 싶다. 공부한 내용을 소화할 수 있는 능력이 커지질 바란다.

20201216

Sass를 이용해서 넷플릭스를 구현 해본다. 이전에 한번 맛본적?은 있지만 제대로 프로젝트에 사용한 것은 처음이다.

모든 것은 설계가 제일 시간이 오래 걸리고 힘들다. 그래도 이전에 Pure CSS로 작업을 했을 때 컴포넌트 방식을 사용했어서 부품(component)을 어디에 조립하고 그 조립품(container)을 어디(page)에 끼워넣는 것에 대해 설계하는 것이 낯설지 않다.

자, 그래서 무엇이 힘들었는가? Mixin이다. 예상은 했지만 나는 또 이상한 곳에 꽂혀서 진도를 빼지 못했다. 도대체 아는 것부터 사용하면 되는 것을 굳이 어려운 것을 이해해 보겠다고 머리를 쥐어 뜯을까?

나중엔 Mixin을 잘 만들고, 잘 사용하는 수준이 되어서 오늘의 기록을 보고 그땐 그랬지 하며 웃을 수 있기를 바란다.

20201219

오늘 하루 온 종일 프로젝트를 하며 질문거리가 많았다. 구글링으로 찾다 결국 못찾았을 때, 강사님께 질문을 하려고 카톡창을 열면 고민을 한다. "물어볼까? 말까? 조금 더 검색해볼까?" 오늘 하루동안 10번은 넘게 이랬던 것 같다. 하지만 놀라운건 "조금만 더 찾아보자!" 하는 심정으로 열심히 찾다보면 해결책을 찾는다. 아 물론 시간은 오래 걸렸지만.

하지만 어느 정도 기준은 정해야겠다. 해결책을 1시간안에 못찾으면 물어보자. 성격상 하나 얻어 걸리면 물고 늘어지는 성격이다보니. 열심히 하려는 의지는 좋지만 시간을 비효율적으로 사용하게 된다. 즉, 일단 문제를 만나면 찾아보자 하지만 어느정도 시간이 지났을 때도 못찾으면 물어보자. 공부도 하면서 시간도 관리하는 법을 훈련하자!

20201223

CSS 코드 리팩도링을 하면서 나의 잘못된 스타일링 방법을 알게되었다. flex나 grid를 사용할 때, box를 정렬하는 속성(justify-content 등)을 먼저 사용하지 않고 margin 등 사용해서 box의 사이즈를 조정하려고 한다. 틀린 방법은 아니지만 그렇다고 해서 최선의 방법도 아니다. 다른 부분에서는 또 다른 방법을 찾아야 겠지만 flex나 grid를 사용할 때는 먼저 box를 정렬하는 속성을 적용해서 위치나 아이템의 크기를 조정하자.

하나의 방법이 아닌 여러 방법을 생각해보고 최선을 방법을 찾아내는 연습을 하자! 그리고 스스로 코드를 리팩토링 하면서 더 좋은 코드로 개선해 나가는 연습을 하자. 많이 해야겠다는 욕심, 그리고 조급함은 이해하지만 나는 더 나은 코드를 짜는 개발자가 되고 싶다. 그리고 해봐서 알지만 코드 리팩토링은 스스로에게 큰 도움이 된다.

20201227

로그인 페이지 마크업 시간을 많이 쏟았다. 가장 많이 고민을 했던 부분은 클래스 네이밍이다. BEM 표기법에 다시 한 번 고민해 볼 시간이 있어서 BEM 공식문서를 참고하여 작업을 했는데 여전히 어려운 부분이다.

Daum, Google, Netflix, Apple 등 여 사이트의 로그인 페이지 마크업도 살펴 보았다. 한 사이트는 나중에 그걸 개발한 개발자도 알아볼 수 있을까? 라는 의문이 들 정도로 외계어 같은 네이밍을 한 사이도 있었고, 상태 클래스로 인터랙션까지 고려하여 해당 부분을 석으로 설명한 사이트도 있었다. 좋은 마크업과 좋지 않은 마크업을 보며 보기 좋은 것이 나중에 유지보수도 좋겠구나 싶었다.

PreviousBetter netflix CSS&ScssNext방향성

Last updated