오늘 한 일
- flex 적용
- Routing 적용
- 코드리뷰
Github 에러 : 코드리뷰 pending 상태
Pull requests에서 코멘트가 Pending인 경우 다른사람에게 노출되지 않는다!!!
Pull requests 코드 리뷰할 때, 보통은 확인했다는 리뷰를 보내는데 이번엔 코드를 수정하는 것이 더 좋을 것 같아서 해당 부분에 코멘트만 달았다. 답변이 없이 merge가 되어서 확인해보니 나에게만 코멘트가 표시되었다. 그제서야 보이는 Pending...
Review changes 누르고 댓글 남기면 pending이 사라지고 공유가 가능한 댓글로 변경된다
CSS reset 트렌드
e.g. 2022 CSS reset
reset에도 트렌드가 있나보다. 위의 사진에서 코멘트 남겼던 부분에 관한 내용이다.
* {
box-sizing : border-box;
/* ... 생략 */
}처럼 margin 이나 padding 등을 전체 요소에 적용하는 경우가 많은데 혹시 다른게 적용하는게 더 좋은지 찾아보다가 최근에는 아래의 방식으로 적용하는 것이 더 좋다는 포스팅을 보았다.
*, *::before, *::after {
box-sizing : border-box;
}cf. :before , ::before 는 같은 의미로 CSS2에서는 :가 1개, CSS3에서는 2개로 변경되었다고 한다.(CSS3에서는 의사 클래스와 의사 요소를 분리하기위해 :(특별한 상태일때) , ::(특정 영역만) 구분한다.)
MDN : :before
::after,::before를 추가하는 이유:
box-sizing은 default로 상속되지 않기 때문에 의사 요소에도border-box를 적용하기 위함이다.
참고한 링크
이런 오류가 발생할 수도 있다. 해당 화면은 헤더 등 공용 컴포넌트를 pull 받아오고 다른 팀원과 CSS 렌더링이 달랐던 상황이다. 위에서 언급한 git Pull requests Pendding 관련 때문에 내 로컬에서 commit해두고 다른 작업중 pull을 받으니 이렇게 빈 공간이 생겼다. 다른 팀원은*{}로 되어있어 공백이 없고,*, *::before, *::after {}로 적용한 모습은 이렇게 차이가 났다.
하지만, 현재 CSS가 어느정도 수정되고 블로깅을 위해 비교 이미지를 만드려고 보니까 동일하게 렌더링 되었다... 결국 예상치 못한 오류가 발생할 수 있으므로 초기화 단계에서 3가지 경우를 다 사용하는 것이 좋을 것같다.
SPA 화면 전환은 <Link> 컴포넌트! no <a> 태그!!!
React SPA에서 스치듯 언급했던 부분을 거의 잊고있었는데 pull 받은 컴포넌트, 위에 CSS 오류 덕분에 상기시킬 수 있었다.
<a> 태그는 html 파일을 받아와서 새로고침 후 화면으로 변경해주는 방식이므로, Single Page Application을 위해서는 <Link> 컴포넌트를 사용해야한다..
오늘 총평
- 작업환경 최적화가 필요하다!
- 문제가 생기면 배울점이 많다!
- 프로젝트 환경 설정할 때, CSS 초기화도 먼저 적용하자!
- 타인에게 설명해 줄 수있을 정도로 알아야 비로소 아는 것이다.
팀작업을 하다보니 pull request 코드 리뷰도 해야하고, 내 작업도하고, 작업 중 pull 받아와서 충돌처리 하고, 합치다가 문제 생기면 오류 해결하고.. 정신없는하루였다. 알람이 울리면 즉각적으로 반응하는게 좋긴하지만 흐름이 끊긴달까? 게다가 제일 문제는 필요한 페이지를 찾기가 너무 어려웠다. 모니터가 많아지면 정신없어지는 타입이긴 한데, 모니터 하나로 하기엔 손목이 좋지 않다. 지금 파스도 붙이고 후끈과, 노트북 시원한 느낌이 공존해서 묘하다. 아무튼 다른분이 크롬 여러창 한번에 폴더화 하는 방법 알려주셔서 project 관련한 깃허브, 커밋 커벤션 등 자주 보는걸 아예 폴더로 만들어서 여러개 안띄우고 그때마다 키는게 더 좋을 것 같았다.
막상 오늘 쓸게 적기는 했지만 자잘하게 배운게 많다. 특히 깃허브 칸반이나 pull reqests 등이 좀 익숙해졌달까? 특히, 오늘 코드 리뷰하면서 소소하지만 중요한걸 배웠다. pre 때 최대한 많이 오류를 만나서 main에 더 잘 적용할 수 있으니 다행이다!
