어제보다 더 나은 오늘

기술 과제를 진행하면서 styled-components를 사용해 공통 ui 컴포넌트를 만들던 중 input 입력란의 텍스트 정렬을 다르게 가져가야 할 필요가 생겼다. 아래의 화면 이미지와 같이 우편번호 input은 중앙정렬, 그 외에 input은 일반적인 좌측 정렬로 화면 디자인이 구성되어 있었다. 이를 위해 input ui 컴포넌트에서 prop으로 textAlign 값을 줘서 제어하려고 시도했다. // 공통 ui 컴포넌트 선언부 export const Input = styled.input` box-sizing: border-box; width: ${(props) => props.width || 'inherit'}; height: 40px; padding: 9px 13px; border: 1px soli..

Frontend Mentor | Expenses chart component coding challenge In this challenge, you'll create a bar chart component from scratch. We provide a local JSON file, so you can add the chart data dynamically if you choose. www.frontendmentor.io 💡 기능 구현 목표: - Bar 차트를 보고 개별 Bar 위로 마우스를 가져가면 일별 정확한 금액을 볼 수 있습니다. - 오늘 요일의 Bar는 다른 요일의 Bar와 색상이 다릅니다. - 기기의 화면 크기에 따라 콘텐츠에 대한 최적의 레이아웃을 작성합니다. (데스크탑/모바일) - hove..

css 코드를 작성할 때 styled-components의 최대 장점은 상태 변수를 그대로 활용할 수 있기 때문에 동적 스타일링이 쉽게 가능하다는 점이라고 생각한다. css 코드를 javascript로 작성하기 때문에 한 파일에 jsx 컴포넌트와 css 컴포넌트를 동시에 작성할 수도 있다는 게 '장점'이라고 하는데, 막상 코드를 작성하다보면 한 파일이 너무 길어지고, 특히 리액트 컴포넌트의 return 문을 볼 때 어느 게 스타일 컴포넌트고, 어느 게 리액트 컴포넌트인지 구분이 안 되어서 불편할 때가 많았다. 그래서 부트캠프에서 메인 프로젝트를 할 때에도 프론트 팀원 분들에게 css 파일 분리를 제안했는데 결론적으로 기각되었다. (하지만 프로젝트 후반에 styled-components 쓰는게 왜 불편한지..

프로젝트를 진행하면서 공통 UI 컴포넌트를 제작해서 사용했고, 그 중 대표적인 UI 컴포넌트가 버튼이었다. 먼저 프로젝트 진행 과정 중 버튼 컴포넌트의 변천사를 간단하게 정리한 다음, 프로젝트가 끝난 후 새로 알게 된 스타일 컴포넌트의 theming 기능을 적용해 보는 과정까지 기록하고자 한다. 1. styled-components로만 만든 버튼 프론트 팀원 중에서 한 분이 공통 ui 컴포넌트 제작을 맡아주셨다. 처음 만든 공통 ui 버튼 컴포넌트는 활성화/비활성화 느낌으로 두 종류의 다른 색상의 버튼을 컴포넌트명을 달리 해서 사용하는 방식이었다. 이후 다음의 두 가지 이유에서 해당 컴포넌트의 리팩토링 필요성을 느꼈다. 기본 파란색 버튼과 회색 버튼이 아닌 다른 색상의 버튼이 필요해졌다. (카카오톡 로그..

1편에 이어 간단하게 정리해 두려고 한다. 1. a tag 초기화 : css 초기화의 경우 일괄적으로 reset을 할 수 있는 코드 뭉치들이 있지만 일단 지금 단계에서는 user agent(브라우저)에서 어떤 세팅들이 있는지, 그게 내가 작성하고자 하는 레이아웃에 어떤 영향을 주는지 알고 싶어서 일괄 적용은 하지 않으면서 css를 작성해보고 있다. a { color: #292827; // theme color 등 원하는 색상 지정 text-decoration: none; outline: none } a:hover, a:active { color:#292827; text-decoration: none; } 2. div 태그 가운데 정렬 태그로 구분선(.divider)을 만들었다. 이제까지 가운데 정렬을 보..

props로 조건부 렌더링이 가능하다. 📍 검색 창 입력값 존재 여부에 따라 해당 요소의 border-radius 값을 다르게 주고 싶을 때: 1. 검색 창 입력값 존재 여부에 따라 ture, false를 가지는 hasText 라는 변수로 상태 관리를 해준다. 2. 컴포넌트에 hasText를 props로 내려보낸다. 3. 다음과 같이 border-radius 값을 조건부 렌더링으로 걸어준다. border-radius: ${(props) => props.hasText ? activeBorderRadius : inactiveBorderRadius}; 이렇게 하면 입력값이 있을 때, 즉 hasText가 true일 때 컴포넌트의 class명을 삼항연산자로 다르게 줘서 css 코드를 별도로 적어주는 것보다 더 간..