L'etude36 매직넘버/매직리터럴 ⭐️ 매직넘버/매직리터럴이란? - 매직 넘버/매직 리터럴은 의미에 대한 설명 없이 코드에서 사용되는 숫자 리터럴이다. - 매직 넘버/매직 리터럴을 사용하면 프로그램의 가독성이 떨어지므로 유지 관리 및 업데이트가 더 어려워진다. ❓ 상수 사용시 이점 : 가독성이 좋다 -> 중요한 이름을 가진 상수의 식별자는 매직 넘버보다 훨씬 더 읽기 쉽다. : 프로그램의 수정 가능성 -> 프로그램에서 사용되는 상수의 값을 수정하려면 상수의 정의를 변경하면 된다. (매직넘버 사용하면 값의 모든 항목을 수정해야됨) 2022. 5. 18. Material UI Modal: BackdropProps Material UI Modal을 사용해서 모달 팝업을 만들었는데 저 모서리,, 회색; Modal 팝업 안에 루틴 만드는 기능들을 div로 묶어둬서 div를 styled component로 배경색이랑 모서리 둥글게 바꿨는데 Modal 에는 이 설정이 안먹었다. 당연함 서로 태그 다름 그래서 오전 내내 찾아보다가 발견,, Modal API 보니까 맨 아래에 있는 Props,, props 볼때마다 이해 잘 안돼서 안읽었는데 앞으로 잘 봐야겠다. 저 props를 보면 BackdropComponent랑 BackdropProps가 있다. BackdropComponent -> 배경 구성 요소로 사용자 정의 배경 렌더링을 활성화시켜준다. BackdropProps -> 위의 BackdropComponent의 요소에 적.. 2022. 5. 16. React: 조건부 렌더링 🧐 조건부 렌더링이란? -> javascript 에서 예외처리하는 방식과 유사한데, if나 조건부 연산자를 현재 상태를 나타내는 엘리먼트에 사용한다. 그러면 react 는 현재 상태에 맞게 UI를 업뎃한다. 맨처음에 if를 사용해서 예외처리를 하려고 했는데 잘 안됐던,,, 그래서 찾아보니 inline으로 처리하는 방법이 있어서 해봤다. {}중괄호를 이용해서 표현식을 넣고 html에 해당하는 부분은 ()괄호로 감싸줬다. routines의 길이가 0이면 (루틴 리스트가 없으면) Add your routine이라는 문구가 화면에 보여지고 루틴이 추가되면 저 문구는 사라지고 루틴 리스트가 하나씩 쌓이게 만들어줬다. 2022. 5. 16. CSS: 중앙 정렬 position, transform 원래 text-align: center랑 justify-content: center를 사용하려고 했는데 중앙 정렬이 안되길래,, 다른 방법으로 해봤다. 🕶 position, transform 사용 export const RoutineButton = styled(Button)` background-color: #D0C9C0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); `; position: absolute; 부모 엘리먼트의 위치를 기준으로 절대적인 위치 값을 설정 top: 50%; left: 50%; 이렇게 두개를 해주니까 버튼의 왼쪽 위 모서리를 기준으로 정렬하기 때문에 완전한 가운데 정렬은 아니었다,, 그래서 t.. 2022. 5. 10. 이전 1 2 3 4 5 6 7 8 9 다음
