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 컴포넌트 내에서 ..

2022.05.14 velog에 작성했던 글입니다 러닝 어플인 만큼 정보가 실시간으로 바뀌어야 한다. 실시간이라기 보다는 초 단위로 바뀌어야 한다는 말이 더 적합하긴 하겠다. 아무튼 대표적인 실시간 정보는 '사용자가 달린 시간'이다. 시간을 기준으로 계산해주어야 하는 값들이 존재하기 때문에(ex 페이스, 칼로리) 이 값을 잘 관리해줘야 한다 😊 ... 구현 목표 ⏰ 아래 이미지의 타이머를 구현하고자 했다. 1초씩 증가해야 하고, 바뀐 값이 화면에도 바로 반영되어야 한다. 사용자가 일시정지 버튼을 누르면 시간 증가도 멈춰야 한다. 러닝을 재개하면 일시정지 버튼 누르기 전 시간에서 다시 1초씩 증가해야 한다. 기본 타이머 구현 useInterval이라는 custom Hook을 사용했다. 리액트의 기본 Hoo..

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