[Day 64] 2022-0919: 기술면접 준비/ Tailwind css를 접하고 느낀점

🐈오늘 공부한 것

✔️기술면접 준비

https://galvanized-gecko-b10.notion.site/3-db767c2b8fd0486fbc256d3596abcb1e

부트캠프 프로그램 중 기술면접 준비 소그룹 세션이 있는 날이었다. 지난번 기술 면접 실습에서 많은 답변을 준비하지 못해서, 이번에는 주어진 모든 질문에 대해서는 답변을 준비하고 글로 작성한 답변을 다시 내 언어로 서술하면서 연습했다.

면접 질문 중에 문제를 해결했던 개인적인 경험이나 기술에 대한 실제 사례를 묻는 질문이 나올 수도 있는데, 평소 겪은 에러와 해결방법등은 발생 원인과 과정을 더 상세히 정리하는 습관이 필요하다고 느꼈다. 

✔️Tailwind CSS

group 선택자, peer 선택자

두 선택자 모두 group 혹은 peer 이라는 클래스명이 붙은 요소의 상태에 따라서 다른 요소에 영향을 줄 수 있는 tailwind 선택자이다. group은 부모 컴포넌트의 상태에 따라 자식 컴포넌트가 영향을 받도록 하는 것이고, peer 는 형제 컴포넌트의 상태로 부터 영향을 받도록 할 수 있다. 

<!-- group 사용 예시 -->
<div class="group bg-black p-10 text-center">
  <span class="text-white group-hover:text-red-500">Hello, World!</span>
</div>
</br>
<!-- peer 사용 예시 -->
<div class="px-5">
<input type="text" class="group border-black border-2 peer"/>
<label class="peer-focus:text-red-600">Input</label>
</div>

darkmode & 반응형 디자인

Tailwind css의 장점은 다크모드와 반응형 디자인을 복잡한 CSS 코드 없이 만들 수 있다는 점인 것 같다. 먼저 다크모드는 상위 컴포넌트에 dark 클래스명이 있을 때, 하위 컴포넌트에 dark:<style class> 로 지어진 클래스명이 있다면 해당 스타일 코드가 적용되는 방식이다. 다크모드를 적용할 컴포넌트에 dark: 선택자로 클래스 이름을 부여한 뒤에 수동으로 dark 클래스를 토글하거나, 혹은 브라우저 기본 설정을 따르도록 할 수 있다. 이 설정은 tailwind.config.js 파일 내에서 아래와 같이 추가해줌으로써 변경할 수 있다.

// class : 수동
// media : 시스템 설정을 따름.
darkMode: 'class', //or 'media'

반응형 디자인은 클래스 명 앞에 사이즈에 따라 sm, md, lg, xl 같은 사이즈에 해당하는 선택자를 추가해 구현할 수 있다. Tailwind 에서는 모든 클래스가 기본적으로 모바일 사이즈에 맞춰져 있기 때문에 작은 화면 -> 큰 화면으로 사이즈를 점진적으로 추가하면서 반응형을 구현하도록 되어있다. 먼저 모바일 기준으로 사이트를 제작한 뒤에 사이즈를 점진적으로 증가시키면서 필요한 부분을 수정하는 방식으로 반응형을 구현할 수 있다. 기존에 미디어쿼리를 사용할 때는 픽셀값을 지정해주는것이 번거롭게 느껴졌는데, Tailwind에서는 선택자 추가만으로도 간편하게 구현할 수 있어서 편리하다고 느꼈다. 

 

JIT

Tailwind 3.0 이전에는 하나의 거대한 CSS 파일이 존재해서 모든 클래스명을 담고있기 때문에 사이즈나 색상을 임의로 지정하는 것이 어려웠다고 한다. 현재 버전은 Just in time 컴파일러 덕분에 작성한 클래스명을 바로바로 생성할 수 있고 따라서 대괄호 안에 지정 값을 넣어주는 것만으로도 임의의 사이즈와 컬러를 지정할 수 있다. 이전에는 이런 설정이 어려웠기 때문에 inline-style이나 별도의 코드를 추가해서 사용해야 했는데 이런 단점이 완전히 사라진 이상 더 자유롭게 커스터마이징 할 수 있다는 장점이 있다고 함. 

 

복잡한 CSS 코드를 길게 작성하지 않고도 컴포넌트 스타일링을 할 수 있고, 거기에 커스터마이징까지 원하는대로 가능하다는 것은 큰 장점임에는 분명한 것 같다. 다만 클래스이름이 생소하고 또 CSS 를 100% 자유자재로 다룰 수 없는 현재 실력으로는 기존 CSS + Tailwind 클래스 이름까지 숙지해야 하기 때문에 초반 러닝커브가 더 가파르게 느껴지는 것 같다. html 코드와 함께 붙어있기 때문에 가독성이 극악무도 한 것 같고 ㅜ^ㅜ sass를 사용해서 해소하는 방법도 있다고 하는데 공식문서를 보니 Tailwind의 기본 컨셉 자체가 CSS코드 없이 스타일링을 하는 것이기 때문에 이런 CSS 전처리기를 사용하는 것 자체가 큰 이득이 있지는 않다고 한다. 계속 사용하다보면 나도 익숙해질 수 있는 것일런지... CSS가 점점 어렵게 느껴진다. ㅋㅋ

🐈더 공부할 것

1. 리액트 프로젝트 컴포넌트 설계

2. 시간복잡도, 공간 복잡도

3. Tailwind CSS

🐈오늘의 느낀 점

어떤 커뮤니티에서 읽었는데 내가 어떤 행동을 취하기 위해 눈치를 본다면, 내가 존재해도 되는지 눈치를 보는 것과 똑같은 것이라고 한다. 사실 지금까지 나의 생각이나 주관을 자유롭게 드러내기 보다는 심사숙고, 신중함에 더 가까웠다. 틀린 관점일까봐 혹은 누군가의 심기를 건드릴까봐(??) 이상하게도 조심 또 조심이었던 것 같은데 앞으로는 더 당당하게 내 주관을 드러내고, 혹 틀린 것일지라도 피드백을 받으면서 수용하겠다는 마인드를 가질것이다.