[#3day] 프론트엔드 공부 주저리

프로젝트 공부 2일 차, CSS의 늪에 빠졌다.

 

🎀수강 이전 강의에 대한 간단한 소개는 다음 글에 있어요!
https://coding7281.tistory.com/9

[#1day] 프론트엔드 공부 주저리

수업에서는 CSS를 처음부터 작성하지 않았다. UI Component를 사용하는 경우가 굉장히 많은데, 수업에서는 Chakra UI를 사용했다. 이전에 material UI를 사용해본 기억이 있어서 프로젝트에 추가 및 적용하는 법은 어렵지 않았다.

 

다만 수업을 듣는 중에 몇 가지 의문이 생겼는데 바로 CSS와 관련된 의문이었다.

강의에서는 maxW="md" 라는 값을 입력하게 되는데, 이때 maxW와 maxWidth가 뜨는 것을 확인했다.

 

어라, 그러면 maxW와 maxWidth의 차이는 무엇인가?

확인해보기 위해 먼저 nodemodule의 layout.ts라는 파일로 이동했다.

해당 파일에서 보기에 maxW와 maxWidth는 동일한 number 타입의 css property이며, 정의가 동일하다는 사실을 깨달을 수 있었다. 그렇다면 왜 동일한 것이 두 가지의 단어로 사용되는 것일까 하는 의문이 들었다.

해당 파일은 styled-system의 폴더 내에 있는 파일이었다. api 를 확인해 보기 위하여 구글링을 통해 하단을 찾을 수 있었다.

https://styled-system.com/api/

Styled System

결론적으로 말하면 두가지는 완전히 동일하다고 볼 수 있다. width의 경우에도 width와 w 두 개로 제공되고 있음을 확인할 수 있었다. 

 

💜두가지 단어로 제공되는 이유에 대한 매애우 개인적인 결론

아마도 두 가지의 단어로 제공되는 이유는 Styled System의 API가 버전업 됨에 따라, 리팩토링 등의 사유가 발생되게 되었고 이로 인해 레거시 코드가 발생된 것이 아닌가 하는 생각이 들었다. 어찌되었든 개발자의 입장에서는 이미 제공되고 있던 프로그램들을 망칠 수 없어 두가지 모두를 제공하게 된 것이 아닐까?

 

두 번째로 궁금했던 것은 mx= "auto"를 주었을 때 다음과 같이 왼쪽으로 치우친 모습을 발견할 수 있었다.

어라 auto를 주면 분명 가운데 정렬이 되어야 맞을 텐데 왜 해당과 같이 왼쪽으로 치우치지? 하는 생각이 들었다.

이는 굉장한 착각이었는데, 해당 문자가 단순한 문자열이 아니라 Box 안에 있는 Heading이라는 요소였기 때문이다. 결과적으로 F12를 눌러 개발자 모드에 진입한 뒤 div 별로 구분해서 보면 Box가 가운데의 영역에 위치한다는 사실을 깨달을 수 있었다. (역시 사람은 열심히 공부해야한ㄷ...)

 

세 번째로는 svg와 png의 차이였다. 

img에 파일을 넣을 때, png를 public 폴더에 넣는 것이 아닌 svg 파일을 이용한 로고를 만들어내었다.

svg와 png의 파일 크기의 차이 때문에 svg를 사용하는 것일까 하는 의문이 들어 인터넷을 서치 하게 되었다.

 

결과적으로 말하자면 svg 파일이 png 파일에 비해 가볍다고 볼 수 있었다. 프로그래밍에서 로딩은 굉장히 중요한 과정이라고 할 수 있는데, svg 파일은 xml 언어로 작성된 vector 파일 포맷이기에 조금 더 빠르게 읽어 들어올 수 있고 이는 로딩의 시간을 줄여주는 장점이 된다. 다만, svg 파일은 다량의 애니메이션이 들어갈 경우 png에 비해 크기가 커지거나 로딩 속도가 저하되는 단점이 발생될 수 있다.

 

때에 따라 중요 순위를 따져보고 결정해야 한다.

 

참고 블로그 : https://velog.io/@codns1223/svg%EC%99%80-png-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%8C%8C%EC%9D%BC%EC%9D%98-%EC%B0%A8%EC%9D%B4

svg와 png 이미지 파일의 차이

---

 

이후 강의 두세 개에 걸쳐 firebase에서 google을 통한 로그인 진행 시 db에 해당 사용자를 추가하고 사용할 수 있도록 하는 방법이 나온다. 보면 볼수록 firebase도 신기한 것 같다.😶🙄