1. 프로젝트(ToDoList)

1.1 HTML에 CSS 적용하기

와이어프레임 하고 안 하고가 중요하다는 걸 느꼈다. 그냥 상상만으로 사이트를 CSS로 세부적으로 꾸며나가기에는 시간도 오래걸리고 뭔가 어정쩡한 부분이 있는 것 같다.

웹사이트 구조와 색깔, 요소들의 위치, CSS만으로 처리할 수 있는 동작들(hover 같은..)도 미리 정해서 A4 용지에 미리 그려놓은 대로 따라서 만들어봤다.

기존에 HTML 태그에서부터 BEM 규칙을 적용해봤는데, 아직은 이게 사용하기 편한건지 잘 모르겠다. 그도 그럴게 코드의 길이가 그렇게 크지 않고 구현해야할 요소들이 많지 않기 때문에 클래스를 많이 정의할 일도 아직은 없다.

그래도 BEM은 클래스 만으로 해당 클래스의 부모는 누구일지 짐작해볼 수 있는 점은 장점인 것 같다.

그리고 font하고 color 정도에만 css 변수를 정의해서 사용해봤다. 이것도 잘 사용하면 편리할 것 같다.

1.2 깃허브에 Pull Request

이제 iterm2에서 ‘git push origin 브랜치명’ 하는 것과 깃허브 사이트에서 코멘트 남기면서 Pull Request 하는 것 까지는 수월하다.

HTML을 MarkUp 했던 MarkingUpHTML 브랜치에 있던 HTML 파일 중에 CSS와 관련이 직접적으로 없던 일부 코드부분을 수정하기 위해서 이미 Pull Request가 끝난 브랜치를 다시 checkout 해서 파일을 수정하고 다시 커밋하고 푸쉬한 다음에 Pull Request를 보내봤다.

2. 이론공부

2.1 HTTP

오늘은 URI와 웹 브라우저의 요청 흐름, 클라이언트와 서버 구조, 비 연결성, HTTP 메세지 등에 대한 강의를 들었다.

인프런 강의를 듣고 어제 회고 했던 대로 간단하게라도 정리하려고 했으나, 현재 왼쪽 다리의 근육이 파열되어 공부시간을 확보하는 게 더욱 어려워졌다.

3. 회고(Retrospective)

3.1 프로젝트 회고

KPT

• Keep (프로젝트에서 만족했고, 앞으로의 업무에서 지속하고 싶은 부분)
  • CSS- 프로젝트를 진행하는 시간 자체가 얼마 없어서 크게 만족했다고 할 만한 부분은 없지만 계속 머릿속에 있는 생각을 코드로 옮기면서 전보다는 조금씩 수월해지고 있다는 느낌을 받고 있다.
  • 깃허브 - 기존에 작성했던 파일 중에 일부를 변경할 때 현재 작업하는 브랜치와 관련이 없는 부분을 변경해야하는 상황에서 어떻게 예전 브랜치에 적용할 수 있을까? 하는 고민이 있었는데 오늘 해보고 제대로 커밋된 것 같아 나름 만족하고 있다.
• Problem (프로젝트에서 부정적인 요소로 작용했거나 아쉬웠던 점)
  • CSS - 160줄 가량의 CSS 코드를 작성하는데 2시간 가까이 걸린 것 같다;;
  • 깃허브 - Pull Request 후에 로컬에 있는 파일들이 삭제되는 현상
    • 일단 내가 Pull Request 했던 상황을 자세하게 기술해보자면, 깃허브에서 클론해온 리퍼지토리를 로컬에 있는 폴더 ToDoListPractice에 연결해놨다. 여기가 메인 브렌치다. 그리고 새로운 브랜치를 생성한 다음에 add하고 commit 한다음에 push origin하고 나서 Pull Request 날린다음 다시 로컬 파일을 VsCode에서 확인해보면 삭제되어 있는 것이다.
      여기서 push origin 을 한 다음에 삭제가 된 건지, Pull Request를 한 다음에 삭제되는 건지는 아직 파악을 하지 못했다.
      그리고 한 가지 더 특이점은 로컬 폴더를 Google Drive로 설정해놓았다. 가게에서 맥북으로 작업한 결과물을 집에 있는 데스크탑에서도 그대로 작업하려고 클라우드로 연결해 놓았다.
      이 부분이 문제가 되는 건지는 잘 모르겠으나, 그냥 직감으로는 아니라고 생각한다.
• Try (Problem에 대한 해결 방식으로 다음 프로젝트에서 시도해볼 점)
  • CSS - CSS에서 자주 막히는 부분에 대해서 노션이나 블로그에 글을 작성하면서 정리하는 습관을 들여보자.
  • 깃허브 - 문제 현상에 대해서 고민하되, 오래 붙잡고 있지 말고 주변 사람들에게도 물어보면서 해결하자.
    그리고 멘토님 깃허브의 ToDoList 리퍼지토리 메인에 풀리퀘스트를 날리는게 아니라 메인안에 있는 DataCodeLiteracy 브랜치에 보내야 하는 것 같다는 생각이 드는데.. 다음번에는 할때는 DataCodeLiteracy 브랜치에 보내보자.

3.2 이론공부 회고

4L

• Liked (좋았던 점)

  • HTTP - 초보자의 입장에서 강의가 이해하기 쉽게 잘 되어 있다.

• Lacked (아쉬웠던 점)

  • HTTP - 강의를 수동적으로 듣지 말고 강의 속에서 키워드를 찾아내려고 노력하자.

• Learned (배운 점)

  • HTTP - HTTP는 프론트엔드 개발자라면 반드시 제대로 이해하고 있어야 하는 개념이다.
    클라이언트와 서버의 통신을 원활하게 하는 것이 중요하고, 어떻게 프로그래밍 하느냐에 따라서 성능차이가 많이 날 수 있기 때문에 HTTP 메서드 등 관련 내용을 제대로 알고 사용하는 것이 중요하다.

• Longed for (앞으로 바라는 점)

  • HTTP - 너무 자세하게 까지는 아니여도 큰 틀에서부터 하나씩 정리해보자.

3.3 전체회고

5F

• Fact (사실: 무슨 일이 있었나?)
  • 개인적인 이슈로 공부시간을 충분히 확보하지 못했다.
• Feeling (느낌: 무슨 느낌이 들었나?)
  • 이미 일어난 일은 바꿀 수 없다. 내 상황에 맞춰 최대한 할 수 있는 만큼 열심히 하자.
• Finding (배운 점: 어떤 인사이트를 얻었나?)
  • 행동을 빨리 한다고 해서 목적지에 빨리 도착하는 것은 아니다. 적절한 타이밍에 적확한 방법으로 최선의 선택을 할 수 있도록 노력하자.
• Future action (향후 행동: 앞으로 무엇을 해야 할까?)
• Feedback (피드백: 앞서 정한 향후 행동을 실천해본 뒤, 이에 대해 어떤 피드백을 받았나?)