분류 전체보기
-
MUI - TextFieldMUI 2022. 7. 16. 02:35
Mui의 TextField를 수정하는 방법을 알아보자. Mui의 거의 대부분 컴포넌트의 기존 색들은 Mui의 고유 색인 하늘색을 띤다. 하지만 사이트마다 사용해야 할 색상이 다르기 때문에 수정해야 할 일이 생긴다. 그럼 수정하면 된다 라고 생각할 수 있지만 Mui는 이미 우리가 사용하기 좋게 누군가가 코드를 작성해놓은 상태라 생각보다 style 값들을 변경하는 것이 쉽지 않다. Mui를 사용하는 중이라면 이미 알고 있을 것이다. 그중에 바꾸기 어려운 요소였던 TextField를 소개하고 내가 수정한 부분까지의 코드를 공개한다. 먼저 TextField 그 자체의 상태이다. 번거로움을 피하기 위해 css-in-js인 sx 만을 사용해서 커스텀하겠다. import { Box, TextField } from '..
-
MUI - BoxMUI 2022. 7. 16. 02:02
Mui에서 지원하는 css-in-js인 Box를 알아보자. Box는 곧 style이다. 실제로 하는 역할이 같다. import Box from '@mui/material/Box'; 기존 JSX 문법에 따라서 스타일을 적용하는 방법 또한 같다. 하지만 mui의 스타일 가이드를 따라서 사이트의 ui를 구축하는 것이니까 div 보다는 Box(component)를 사용하는 것이 좋겠다. import Box from '@mui/material/Box'; e.preventDefault()} label="배우 이름" />
-
MUI를 사용하는 방법MUI 2022. 7. 6. 00:52
한국말로는 MUI 사용하는 방법이 많이 나와있지는 않아 내가 사용한 코드와 커스텀하는 방법들에 대해서 글을 남기려 한다. MUI는 React의 UI 라이브러리이다. 사용방법은 생각보다 간단하다. 그걸 커스텀하는게 생각보다 쉽지 않을 뿐 사용방법 (컴포넌트 Autocomplete를 예시로 설명하겠다.) mui를 설치한다. mui는 emotion 과 styled-component 둘 다 사용가능하다. // npm npm install @mui/material @emotion/react @emotion/styled //yarn yarn add @mui/material @emotion/react @emotion/styled 2. 페이지의 좌측에 있는 메뉴 중에 components을 클릭하여 나의 웹 사이트에 적..
-
Agile카테고리 없음 2022. 6. 30. 23:43
Agile이란 무엇인지 알아보자. 애자일(Agile)이란 단어는 소프트웨어 개발 방식의 하나를 말하는 용어이다. 애자일을 설명하기 위해서는 워터폴(Waterfall)이라는 개발 방법을 알 필요가 있다. 애자일은 워터폴 방식에 반대되는 개념을 가진 개발 방식이기 때문이다. 워터폴 Waterfall 어떠한 물건을 만들기 위해 폭포가 떨어지는 것처럼 쉴세 없이 달려 나간다. 짜 놓은 계획대로 움직여야 하며, 처음부터 끝까지의 모든 걸 생각하며 개발을 진행한다. 이러한 방식은 많은 고민을 불러일으킨다. 지금이 점심을 먹을 시간이라고 생각해보자. 당장 점심에 먹을 메뉴만 생각하면 되는데 저녁에 먹을 것, 내일 아침에 먹을 것을 고려하면서까지 지금 먹을 메뉴를 생각하는 건 많은 고민과 시간을 낭비한다. 저녁과 내일..
-
Map 객체JavaScript 2022. 6. 25. 19:06
Map 객체는 키와 값의 쌍(Key : Value)으로 이루어진 컬렉션이다. 객체와 유사하지만 차이점이 존재한다. 객체를 포함한 모든 값을 키로 사용할 수 있다. 이터러블 요소 개수를 map.size로 확인한다. Map 객체를 생성해보자. Set 객체와 같은 방법으로 생성할 수 있으며, Map 생성자 함수로 생성하고 인수를 전달하지 않으면 빈 Map 객체가 생성된다. const map = new Map(); console.log(map); // Map(0) {} Map 생성자 함수는 이터러블을 인수로 전달받아 Map객체를 생성한다. 이때, 이터러블은 키와 값의 쌍으로 이루어져야 한다. const map1 = new Map([['key1', 'value1'], ['key2', 'value2']]); con..
-
Set 객체JavaScript 2022. 6. 25. 16:39
Set 객체란 중복되지 않는 유일한 값들의 집합이다. 배열과 비슷해 보이지만 다음과 같은 차이점이 존재한다. 동일한 값을 중복하여 포함하지 못한다. 요소 순서가 의미가 없다. 인덱스로 요소에 접근하지 못한다. Set은 수학적 집합을 구현하기 위한 자료구조로서, Set 객체를 통해 다양한 집합을 구현할 수 있다. 그럼 먼저 Set 객체를 생성하는 법을 알아보자. Set 객체 생성하기 Set 객체는 Set 생성자 함수로 생성한다. 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. const set = new Set(); console.log(set); // Set(0) {} Set 생성자 함수는 이터러블(반복 가능한)을 인수로 받아 객체를 생성한다. 이터러블의 중복된 값은 객체 요소로 저장되지 않는..
-
[프로그래머스 JS] H-Index자료구조와 알고리즘 2022. 6. 17. 18:02
[프로그래머스 JS] 문제 설명 H-Index는 과학자의 생산성과 영향력을 나타내는 지표입니다. 어느 과학자의 H-Index를 나타내는 값인 h를 구하려고 합니다. 위키백과1에 따르면, H-Index는 다음과 같이 구합니다. 어떤 과학자가 발표한 논문 n편 중, h번 이상 인용된 논문이 h편 이상이고 나머지 논문이 h번 이하 인용되었다면 h의 최댓값이 이 과학자의 H-Index입니다. 어떤 과학자가 발표한 논문의 인용 횟수를 담은 배열 citations가 매개변수로 주어질 때, 이 과학자의 H-Index를 return 하도록 solution 함수를 작성해주세요. 제한 사항 과학자가 발표한 논문의 수는 1편 이상 1,000편 이하입니다.논문별 인용 횟수는 0회 이상 10,000회 이하입니다. 내가 작성한 ..
-
[프로그래머스 JS] 가장 큰 수자료구조와 알고리즘 2022. 6. 17. 17:06
문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. 제한 사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예 numbers = [6, 10, 2] re..