[Day 63] 2022-0918: 알고리즘, Tailwind CSS

🐈오늘 공부한 것

✔️알고리즘 스터디 

담당 문제 풀이를 공유하는 스터디 모임을 시작했다. 풀이 코드에 대해서 내 나름대로 이해했지만 남들이 알아듣기 쉽게 설명하는 것은 어렵다. 다음 모임에서는 알고리즘 개념과 풀이 로직을 코드로 보기 전 예시를 들어서 쉽게 설명하고 넘어가는 것이 좋을 것 같다.

https://friedegg556.tistory.com/235

[알고리즘] 모든 아나그램 찾기

스택 자료구조를 사용한 2가지 기초 문제를 풀었다. 자바스크립트에서 스택은 배열과 push, pop을 사용해서 간단하게 구현할 수 있다. 연결 리스트라는 객체 형태 자료구조를 사용하는 방법도 있다고 한다. 스택도 배열이기 때문에 해당 배열 안의 요소를 검색하려면 O(n)의 시간 복잡도를 가지지만, 어떤 자료를 추가하고 빼는 것이 명확한 상황에서는 항상 O(1) 상수 시간 복잡도를 가진다. (값을 push 하고, 마지막 값을 pop 하면 되기 때문.) 

✔️Tailwind CSS

Tailwind CSS란 CSS 프레임워크의 한 종류이다.(like Bootstrap)  부트스트랩은 스타일이 정해져 있어서 개발자가 조작할 수 있는 부분이 많지 않다면, Tailwind 는 색상, 크기 등 내가 지정할 수 있는 자유도가 비교적 높다고 할 수 있다.

 

별도의 CSS 파일을 만드는 것이 아니고, Tailwind 에서 미리 정해진 클래스 이름을 요소에 부여하면 그대로 스타일링이 적용되는 방식이다. 클래스 이름이 워~낙 많기 때문에 처음에 배우기가 좀 어렵지만 자동 완성 익스텐션을 잘 활용하면 비교적 쉽게 쓸 수 있다. 

 

일단 클래스 이름이 미리 지정되어 있기 때문에 내가 직접 클래스 이름을 붙여서 스타일링을 할 필요가 없고, 한 가지 스타일링을 위해 컴포넌트와 클래스 이름을 새롭게 만드는 번거로움이 적다. 단점은 코드가 상당히... 어지럽고 지저분해서 더 어렵게 느껴진다는 점? 니꼬는 적응되면 편하다고 하는데 솔직히 아직 잘 모르겠다. 

 

양식은 inline style 과 다를 바가 없는데, 대신 inline 스타일에서는 적용할 수 없는 CSS 이벤트나 미디어 쿼리도 적용 가능하다는 점. 클래스 이름을 부여하는 것이기 때문에 100% 같은 방식이라고는 할 수 없다. 이번에 강의를 들으면서 배우게 되었지만, 아직까진 CSS 코드에 대한 연습을 충분히 하는 게 좋을 것 같아서 개인 프로젝트는 styled-components를 사용하는 게 좋을 것 같다.

🐈더 공부할 것

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

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

🐈오늘의 느낀 점

팀 프로젝트 시작까지 남은 1개월은 개인 공부와 개인 프로젝트에 몰입하려고 한다. 9월 중순을 넘어가는 시점에서 지나온 시간을 되돌아보니 새롭게 배운 것은 많지만(리액트, 리덕스, 약간의 백엔드 지식, + 약간의 얕은 지식들) 뭔가 이도 저도 아닌 것 같다. 기존의 지식을 더 깊게 판 것도 아니고 그렇다고 새로운 기술을 그렇게 적극적으로 사용해본 것 같지도 않다. 더 가파르게 성장하고 싶고 좀 몰아붙일 필요가 있는 듯.