본문 바로가기
반응형

프론트엔드66

3항연산자를 return문에 사용할때 Fragment(<></>)로 감싸기 3항연산자를 맨 바깥에 쓰면 에러가 난다. 2항, 3항을 중복으로 인식한다고 한다. Fragment로 한번 감싸주니까 에러 안남. 근데 에러 메시지가 무슨 소린지 이해가 안가서 찾는데 오래 걸렸다. 2023. 7. 11.
Material Design - The color system https://m2.material.io/design/color/the-color-system.html Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. m3.material.io 머티리얼 디자인의 컬러 시스템에 대해서 설명하고 있다. 어떤식으로 색상이 활용되는지 예시를 통해 설명하고 있고 관련된 도구를 제공한다.(Material palette generator) 머티리얼 디자인이 적용된 서비스들로 케이스 스터디 문서도 제공하는데 한번 .. 2023. 6. 17.
eslint-plugin-react-hooks 패키지 This ESLint plugin enforces the Rules of Hooks. It is a part of the Hooks API for React. ESLint가 리액트 Hooks 규칙을 강제하게 한다. TODO 리액트 개발환경 ESLint 세팅하는 방법을 한번 정리하자. https://www.npmjs.com/package/eslint-plugin-react-hooks eslint-plugin-react-hooks ESLint rules for React Hooks. Latest version: 4.6.0, last published: a year ago. Start using eslint-plugin-react-hooks in your project by running `npm i esli.. 2023. 6. 17.
색상 밝기 기준으로 상태 나타내기 이번에 리액트 네이티브 강의 들으면서 새로 배운 디자인 지식이 생겼다. 사실 알고는 있었지만 이러이러하게 하는게 좋다고 설명할 수 있지는 않았는데 이번에 정리가 됐다. 요하자면 컨트롤의 상태(선택, 비활성화, 일반 등)를 나타낼때 같은 색상 톤에서 밝기를 조절해서 상태를 나타내면 좋다는 점이다. 주로 일반(default) 상태는 500 비활성화(disable) 상태는 2-300 활성화(focus, click, selected) 상태는 7-800 으로 선택하면 된다고 한다. Customizing Colors - Tailwind CSS Customizing the default color palette for your project. tailwindcss.com 2023. 6. 17.
Material Theme Builder 도구로 메인 색상 확인해보기 이건 리액트 네이티브 랑 직접적으로 관련된 내용은 아니라서 나중에 다른 목차로 옮겨야 할 것 같다. Material Theme Builder라는 도구가 있다. 웹으로 접속할 수 있고 색상을 선택해서 어떤 느낌이 나는지 확인해 볼 수 있다. 웹 말고도 Figma로 된 도구도 제공해서 FIgma를 사용할 수 있으면 사용해보는것도 좋을 것 같다. https://m3.material.io/theme-builder Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital ex.. 2023. 6. 17.
canvas가 text-align 속성에 영향을 받는 이유 -상황- canvas가 왼쪽 오른쪽 마진이 엄청 들어가서 표시되는 문제 발생 보니까 뭔가 중앙에 표시되고 있는 것 같다. F12 누르고 이것저것 CSS를 막 넣었다 뺐다 해보다가 text-align:center라고 돼있는 부분을 빼니까 갑자기 제대로 나옴 왜지? 하고 찾아보니 canvas가 inline 요소이기 때문에 img, input 태그처럼 text-align에 영향을 받는다고 한다. https://stackoverflow.com/questions/45406873/why-does-text-align-have-an-effect-on-canvas Why does text-align have an effect on canvas? I have multiple canvases layered over each.. 2023. 6. 4.
반응형