본문 바로가기

Aaron[에런]85

[Trouble Shootings #5] CSS - list style 및 인덴트 HTML - CSS 를 이용하여 list style을 들여쓰기 방식의 리스트 아이템 형태로 만들고 싶을 때가 있습니다. 왜냐하면 그냥 디자인만 입히게 되면 indent가 올바르게 먹지 않고 다음 줄의 맨 앞에 붙어서 나오기 때문입니다. 이를 해결하기 위해서는 li 태그에 css로 text-indent를 적당히 -20px 정도 주고 padding-left를 20px 주면 됩니다. 그러면 올바르게 인덴트가 잘 됩니다. ex) - 안녕하세요 안녕하세요 (X) - 안녕하세요 안녕하세요 (O) 그리고 추가적으로 li 태그의 depth를 늘리고 싶을 때가 있습니다. 그럴 때는 list-style-position: inside; 로 처리하시면 됩니다. ex) - 안녕하세요 - 안녕하세요 2022. 9. 22.
[Trouble Shootings #4] React - label과 input 연동 HTML 에서 label - input 연동을 위해서는 2가지 방법이 있습니다. 형태로 표현하는 방식과 이와 같은 방식이 있습니다. 개인적으로는 label 태그 안에 input 태그를 넣어서 감싸는 것을 좋아합니다. 불필요하게 id 값이 과다하게 늘어나면 유지보수하기 힘들어진다고 생각합니다. React 에서는 중복되는 속성을 피하기 위해 label 태그에 htmlFor 속성과 input 태그의 id 속성을 이용해 연동을 시킵니다. 하지만 저는 의문점이 생겼습니다. React가 탄생하게 된 배경 자체가 직접 DOM을 핸들링 하는 것은 꽤 무겁기 때문에 가상 DOM 이라는 Map (자료구조) 객체를 두고 이전 상태와 비교하여 갱신하는 형태인데 id 값을 직접 조작하면 DOM을 핸들링하는 것이기 때문입니다. .. 2022. 9. 22.
[개발 일기] - 22.09.21.Wed 22.09.21.Wed 오전에 영어 쉐도잉 30분, 헬스 1시간을 하고 출근하였습니다. (영어, 운동도 개발을 위한 중요한 체력이 된다고 여겨서 함께 적었습니다. ㅎㅎ) 이후 회사에서는 동료분과 함께 간단히 코드에 대해서 리뷰를 하였습니다. 그리고 개발 관련 여러 가지 경험, 이슈, 생각 등을 공유했습니다. 이후 토스트 메시지 컴포넌트, 효과 등을 제작하고 전반적인 디테일을 수정하였습니다. 토스트 컴포넌트에 쓰로틀링을 적용하고 조금 시도했는데 생각보다 제가 원하는 바에 따라 동작하지 않아서 고민이 조금 됩니다. 퇴근 이후에는 JS 알고리즘 1문제를 풀었습니다. [생각해 볼 내용] - 코드 리뷰 - 페어 프로그래밍 2022. 9. 21.
[Trouble Shootings #3] React - module scss 이용 시 component prop으로 custom className을 넘겼을 때의 처리 회사에서 업무를 하다가 module scss 관련 트러블 이슈가 발생하였습니다. 자주 사용되는 재사용 가능한 컴포넌트를 하나 만들고 사용하고 있었는데 디자인 커스터 마이징이 필요하였습니다. 그래서 재사용 컴포넌트(자식 컴포넌트)를 사용하는 상위 컴포넌트에서 module scss를 import 한 styles를 이용하여 styles['module scss class 명'] 형태로 props을 넘겨서 하위 컴포넌트에서 styles[className(변수)] 형태로 처리하니 undefined로 class 명이 나오게 됩니다. 처음에는 module scss여서 해당 파일에만 scoped 되어 못 넘기는 건가 아니면 어디선가 중복되서 꼬인건가 고민이었습니다. 하지만 생각해보니 상위 컴포넌트에서 styles로 감싸.. 2022. 9. 21.
반응형

티스토리툴바