DDODI TIL 🚀

Union type | 연산자로 여러 개의 타입이 연결된 타입을 의미한다. 이때 | 연산자는 or의 의미를 가지고 있다. 이러한 Union type을 활용해 인터페이스를 정의하고자 했다. 문제 정의 interface Props { data: LectureRoomsPerBuilding | LectureRoomInfo; children?: LectureRoomInfo[]; } 다음과 같이 인터페이스를 작성했는데, 타입 추론에서 문제가 발생했다. export interface LectureRoomInfo { room_name: string; room_uid: RoomUID; } export interface LectureRoomsPerBuilding { building_name: string; building..

사이드바를 구현해보자. 명확한 요구사항 없이 단지 강의실 목록을 조회할 수 있는 사이드바를 구현해야 했다. 어떤 식으로 작동해야 할 지 감이 안와서, 레퍼런스를 참고했다. Ant Design Ant design 컴포넌트에서 다양한 사이드바를 제공하고 있다. 실제로 조작해볼 수 있고, 대략적인 코드도 제공한다. 그 중 위 이미지에 있는 사이드바 컴포넌트를 참고했다. Ant Design 코드의 일부분을 발췌해왔다. 이중 Menu 컴포넌트를 보면, props로 items를 받고 있다. items에 전달되는 예제 객체를 살펴봤더니, children이라는 프로퍼티를 확인할 수 있었다. 여기에는 서브 메뉴들의 정보가 담겨 있다. 즉, Menu 컴포넌트에 서브 메뉴가 포함된 정보를 전달하면 Menu 컴포넌트 내에서 ..

🧸 🚂 🎈 새로운 토이 프로젝트에서 사용할 css 방식을 결정하기 위해 직접 여러 가지 방식들을 조사하고 장단점을 비교해 봤다! 🙋🏻‍♂️ 🎈 고려한 선택지 css module css preprocessor(scss) css-in-js(styled-components) 컴포넌트를 직접 제작해보고 싶었기 때문에 Tailwind CSS, Bootstrap, Material UI 등의 CSS Framework는 고려하지 않았다. ❗️ 기존 css가 가지는 문제점 가장 큰 문제점은 바로 중복된 클래스명에 있다. css는 global scope를 가지기 때문에, 클래스명이 중복될 경우 원치않는 곳에 스타일이 적용되는 문제가 발생할 수 있다. 이를 해결하기 위해서는 결국 클래스명을 점점 더 구체적으로 지을 수 밖에..