[WIL] 7주차 회고

TIL

[WIL] 7주차 회고

lado 2021. 9. 20. 02:19

📝 이번 주에 하고자 했던 것

[강의] 7주차 강의 제때 제때 이해하기
[과제] 6주차 과제 잘 제출하기
[강의 복습] 6주차 강의 복습하면서 잘 이해하기
[코딩 테스트 스터디] 문제 제때 잘 풀면서 DFS/BFS 개념 이해하기
[CS 스터디] 발표 준비하기
[코드 리뷰] Todo app 과제, 노션 클론코딩 과제 코드, 미니 프로젝트 코드 리뷰하기
[TIL] 조금이라도 새로 배운 내용은 매일 매일 정리하기
[Javascript] 미니 프로젝트 스터디

🎯 이번 주에 완료한 것

칭찬은 모르겠고 어쨌든 한 것
- Vanilla JS 고양이 사진첩 강화 과제
- SCSS 강의 듣기
- CSS 특강
- 코딩 테스트 스터디에 참여하기 위해서 백준 node.js 입출력과 씨름하기
- DFS, BFS 이해하기 위해 강의 듣기
- CS 기초 스터디에서 객체지향 프로그래밍 발표
- 멘토링

아쉬웠던 것
- 아무래도 너무 테트리스에 몰두해버렸다...
- 강의 너무 밀린 것...
- 코드 리뷰 또 안 한 것...
- TIL 안 쓴 것...
- 사실 한 주간 뭐한지 잘 모르겠는 것...
- DFS, BFS를 결국 이해 못해서 한 문제도 못 푼 것...

📚 다음 주에 할 것

[과제] CSS 클론코딩(유튜브, 자유 선택) 과제
[Javascript] 미니 프로젝트 7번까지 완성 및 미니 프로젝트 배포
[프로젝트] 노션 클론코딩 프로젝트 리팩토링 후 배포
[알고리즘] 그래프, DFS & BFS 개념 강의 듣고 이해하기
[강의] Vue 강의 듣기
[번외 강의] 피그마 지식나눔 강의 듣기
[번외 강의] 도커 강의 듣기
[복습] 코딩테스트 실습 못한 거 하기
[복습] 그동안 못 들은 강의 듣기
[복습] 제대로 이해 못한 강의 복습하기
[JS 개념] 실행 컨텍스트 이해
[코드 리뷰] 다른 수강생 PR과 코드 리뷰 읽기
[코드 리뷰] Todo app 과제, 노션 클론코딩 과제 코드, 미니 프로젝트 코드 리뷰하기
[TIL] 조금이라도 새로 배운 내용은 매일 매일 정리하기

🎇 Reflection

고양이 사진첩 강화 과제
- 데이터 정합성 체크, 렌더링 최적화, 백스페이스 키로 뒤로 가기 기능 구현, 이렇게 3가지를 강화하는 과제였다. 과제를 사실 하루만에 했다. 강의도 당일날 듣고.. 그래서 좀 잘 알고 한 느낌이 아니라 급하게 후르륵퓹퍅 하는 느낌으로 처리해버려서 아쉬웠다. 이래도 되나 싶었지만 배열, 오브젝트, 그냥 JSON.stringify로 스트링화해서 비교하고;;;; 근데 다른 분들 PR 읽고 하면서 느낀 게 정합성 체크가 정말 중요한 부분이라는 것이다. 많이 부족한 코드인데 팀원분들이 코드 리뷰를 꼼꼼히 봐주셔서 많은 것을 배웠다. 정합성 체크 부분은 꼭 다시 리팩토링 해봐야 할 듯...
- 다른 분들 코드 리뷰를 보면서 배운 것
  - 한 줄로 된 코드라도 괄호 없이 적지 않기(린팅 규칙에서도 안티 패턴으로 보는 경우가 많음)
  - 함수명을 구체적으로
  - 새로고침 했을 때 해당 페이지의 depth를 그대로 유지하고 뒤로 가기 버튼을 눌렀을 때 새로고침 전처럼 이전 폴더로 이동할 수 있는 기능은 어떻게 구현할 수 있을지 고민해보기
  - 타입명 등을 상수로 만들어서 재사용하기
  - HTML 부분을 template 파일을 따로 만들어 관리할 수 있음 예시
  - URL 이 http:// 또는 https:// 로 시작하지 않으면 에러를 발생시킴
  - 현재 경로를 클릭한 경우에는 click event가 발생하지 않도록 예외처리할 수 있음

CSS 심화, SCSS 강의
- CSS 심화와 SCSS 강의 듣는 주간이었다. CSS는 그래도 수월하지 않을까 했는데 기본적인 것 건너뛰고, 그동안 '아, 이것까지는 안 해도 되지 않을까?'하고 남겨뒀던 심화 부분만 다뤄서 이번 강의도 쉽지 않았다. flex와 grid개념을 이번 기회에 제대로 잡을 수 있었다. 강사님 강의력이 진짜 대단하시다... 전에도 SCSS 강의 듣고 하면서 SCSS를 써보려고 노력했지만 잘 안됐다... 막 컴파일도 하고 이런 게 좀 장벽처럼 느껴졌다. 이번 기회에 SCSS를 잡고 갈 수 있어서 진짜 좋은듯!

코딩 테스트 스터디
- 그래프를 주제로 하루에 하나씩 풀기로 했는데 수요일이 추석맞이 게임 대회 열리는 날이었어서 화요일, 수요일은 안하고 3일만 진행했다. 근데 아직 BFS, DFS 개념을 제대로 이해 못해서 한 문제도 제대로 못 풀었다. 일단 문제를 봤을 때 왜 이걸 BFS, DFS로 풀어야 하는 지도 잘 모르겠고 그냥 이해 안하고 냅다 BFS 코드를 갖다 붙였는데 돼서 띠용?? 하는 상태가 됐다. 백준 기본 문제를 풀어보려고 했는데 node.js 입출력하는 방법부터 뭐라는지 잘 모르겠어서 삽질을 오래했다.... 이거 하느라 시간도 엄청 많이 써서 현타가 세게 왔다. 다른 스터디원들 얘기 들어보니 알고리즘 강의를 들으니까 감이 좀 잡히셨다고 하셔가지고 강의를 들어보려고 한다. 그래도 스터디원 분들이 문제 푼 것을 엄청 열정적으로 설명해주셔서 어떤 문제를 BFS, DFS로 푸는 건지, 어떤 의식의 흐름으로 풀이 방법을 구상할 수 있는지 배울 수 있었다.

CSS 특강
- 스타일 초기값을 reset.css로 초기화 하는 것과 BEM을 현업에서 많이 사용하는지 궁금했는데, reset.css은 cdn으로 연결하면 되고 BEM은 회사마다 다르지만 선택자만 봐도 element로 어떤 구조로 설계되어 있는지 파악할 수 있고 상태도 쉽게 파악할 수 있기 때문에 사용하는 걸 권장한다고 답변해주셨다. 그리고 바벨을 쓰면 크로스 브라우징을 해결할 수 있다는 말을 들어서 바벨 하나면 크로스 브라우징 신경 안써도 되나 궁금했는데, 바벨은 사실 크로스 브라우징과 관련이 없고, ES8을 ES5로 낮추는 것과 같이 하위 호환성을 맞춰주는 것뿐이라고 한다. 바벨을 사용해서 ES5로 바꾼 다음 필요한 것은 polyfill을 검색해서 쓰면 된다고 한다. 호환성과 관련해서는 browserslist, PostCSS autoprefixer과 같은 패키지를 찾아보라고 추천해주셨다. CSS에서 중요한 것은 속성의 역할, 기본값, 선택자 우선순위라고 짚어주시면서 CSS 성능 최적화를 위해서는 기본값을 외우는 게 중요하다고 강조하셨다.

멘토링
- 이번 주에 팀이 바뀌었다. 새로운 멘토님과 함께 멘토링을 진행했는데, 새 멘토님은 소크라테스 산파법을 즐겨 쓰시는 것 같다. 어쩌다보니 질문에 답하지 않으면 나갈 수 없는 방 같이 됐는데... 컴포넌트, 모듈, 도메인과 같이 애매하게 알고 있는 것들의 개념을 다시 잡고 가는 시간이 됐다.
- 컴포넌트는 재사용하기 위한 단위이고, 모듈은 구현 단위이다. 예를 들면, 글쓰기 기능이라는 1개의 모듈을 구현하기 위해 Container, Editor, API, storage와 같은 여러 개의 컴포넌트가 필요하다고 말할 수 있다.
- 컴포넌트는 비슷한 기능을 가지고 있는 것들은 응집되어 있는 게 좋고, 서로 다른 컴포넌트들은 의존하지 않는 것이 좋다는 특징을 가진다.
- validation의 목적은 이 데이터가 옳은 데이터인지 검증하는 것이다. 백엔드에서 오는 데이터는 일단 내부의 데이터이기 때문에 신뢰할 수 있는 데이터라고 믿고, 반면 사용자한테 들어오는 값은 믿으면 안 된다. validation은 정확하게 하면 할수록 좋지만 거기에 드는 비용을 고려해 범위, 우선 순위, 중요도를 정해야 한다. 치명적인 것, 치명적이지는 않더라도 사용자 경험에 큰 영향을 주는 것을 가장 우선 순위에 두고 유효성을 체크해야할 것. 소프트웨어를 테스팅할 때, validation과 verification을 고려하는데 validation은 우리가 원하는 형태로 제대로 된 제품을 만들고 있냐는 것이고, verification은 스펙, 명세서대로 잘 만들었냐는 것이다.
- 디렉토리 구조에 대해서도 말씀해주셨는데, 디렉토리 구조를 어떻게 구성할지는 정해진 게 없고 개발자 마음이지만 많이 쓰이는 디렉토리인 componets, layouts, templates, pages, utils 등은 보통 어떤 기준으로 구분되어 있는 것인지 설명해주셨다.
- 도메인은 상대적인 개념이라 사용하는 곳마다 의미가 조금씩 다를 수 있지만 우리가 개발해야 하는 영역이라고 말할 수 있다. 배달의 민족으로 예를 들면, 주문, 회원 인증, 배달 관리 등을 도메인이라 할 수 있다.

CS 기초 스터디
- 객체지향 프로그래밍에 대해 발표했다. 프로그래밍 패러다임 개념을 잘 이해 못해서 명령형과 절차적 프로그래밍은 다른 것인가? 객체 지향과 절차적 프로그래밍은 상충하는 것인가? 함수형과 선언형은 다른 것인가? 하고 혼란스러워 했는데 이번에 위키 백과를 보면서 개념을 잡고 갈 수 있었다. javascript으로 개발을 입문했기 때문에 객체 지향 프로그래밍을 공부할 기회가 별로 없었는데 그렙님 특강에서 개발자라면 객체 지향 프로그래밍은 꼭 공부해야한다는 얘기를 듣고 객체 지향을 공부하긴 해야겠다고 생각했다. TypeScript를 공부할 때도 객체 지향을 꼭 이해해야한다고 하고, 이번에 데이터 정합성 과제를 하면서 TypeScript의 필요성을 더 더욱 크게 느끼게 돼서 이번 CS 기초 스터디 발표 주제로 정하게 됐다. 객체 지향 프로그래밍의 4가지 특징을 외우는 것은 필요없고 그것을 어떻게 코드로 구현할 수 있는지가 중요하다고 해서 TypeScript에서 어떻게 캡슐화, 추상화, 상속, 다형성에 맞게 코드를 구현할 수 있는지에 초점을 두고 발표를 준비했다. 하지만 내가 강의를 완벽히 소화한 게 아니라 강의에 나오는 코드를 정제해서 발표에 첨부했어야 했는데 그냥 통째로 붙이게 돼서 아쉬웠다. 그 부분이 중요한 건데 완전 이해한 게 아니라 얼버무리게 되고 ㅠㅠ 여러모로 발표 능력이 너무 부족하다는 것을 뼈저리게 느꼈다. ㅠㅠ 연습 많이 해야지.
- 이번에 스터디원분들이 3/4 Way-Handshake와 MAC 주소를 발표해주셔서 네트워크의 중요한 개념들에 대해 짚고 넘어갈 수 있었다. 베스트 스피커로 선정된 수강생분이 OSI 7 계층에 대해 정말 잘 정리해주셔서 뭔가 네트워크 찍먹 제대로 한 느낌?! 물론 제가 더 공부해야죠... 물론 그럴 것입니다... 아무튼 나혼자 공부하면 네트워크를 공부할 엄두를 못 냈을 것 같은데 이렇게 네트워크를 체험해볼 수 있어서 좋았다.