IT

이번 프로젝트에서 나는 수평 막대그래프를 담당했다. 이 막대 그래프 내용을 정리해보겠다. vue 버전은 3.2.13이다. 나는 뷰를 처음 써보는 사람이다. 틀린 부분이 있을지도 모른다는 점 명심해야 한다. 나는 vue-chart-3을 사용했다. 내가 원했던 그래프는 아래와 같이 1. 수평 막대그래프이고 2. 중앙을 기준으로 왼쪽 값이 5보다 크다면 왼쪽으로 그려지고 아니라면 오른쪽으로 그래프가 그려져야 한다. prop로 받아온 값이 5보다 크면 -1을 곱해 음수로 만들어 왼쪽으로 그려지도록 했다. 반대로 양수라면 오른쪽으로 그려진다. 위에 그래프 관련 코드는 아래와 같다. import { defineComponent, ref } from "vue"; import { BarChart } from "vue-..

slice 배열의 begin부터 end까지에(end는 미포함) 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본의 배열은 바뀌지 않는다. arr.slice([begin[, end]]) begin : 시작점 인덱스 end : 종료 지점 인덱스 (end 인덱스는 제외하고 추출) 리턴값 : 추출한 요소를 포함한 새로운 배열 const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // ["camel", "duck"] console.log(animals.slice(1, 5)); ..

일단 기본적으로 타입을 추가해줘야 한다! 이건 당연하다! 1. import 할 때 이미지 파일 관련 에러 Cannot find modules '../..' or its corresponding type declarations. ts(2307) 라고 수많은 에러가 발생했다. 그럼 해결해 보자! src파일 아래에 images.d.ts파일을 생성한다. (index.d.ts로 파일명을 하면 index.ts파일로 인식하기 때문에 다른 이름으로 해주기) 필요한 확장자를 아래와 같이 추가해준다. declare module "*.png"; declare module "*.jpg"; tsconfig.json에 compilerOptions:{} 안에 추가해준다. "typeRoots": ["./src/@types"] 저장을..

새로운 타입 스크립트를 이용한 리액트 프로젝트를 시작했다. 타입 스크립트를 복습할 겸 기존의 JavaScript로 만들었던 프로젝트를 TypeScript로 변경해보기로 했다. TypeScript를 설치한다. yarn add typescript @types/node @types/react @types/react-dom @types/jest // 또는 npm install typescript @types/node @types/react @types/react-dom @types/jest 그다음 yarn install // 또는 npm install tsconfig.json파일이 생성된다. (혹은 생성되지 않았다면 tsconfig.json을 최상단에 추가해준다.) 아래 소스를 tsconfig.json에 추가해..

나의 경우 answer의 길이가 2자 이하라면 마지막 문자를 answer의 길이가 3이 될 때까지 반복해서 끝에 붙이기를 하기 위해 아래와 같이 구현을 했다. while (answer.length

문법 정리 Groups and ranges | 또는 () 그룹 [] 문자셋, 괄호 안에 어떤 문자든 [^] 부정 문자셋, 괄호 안에 어떤 문자가 아닐 때 (?:) 찾지만 기억하지는 않음 Quantifiers ? 없거나 있거나 (zero or one) * 없거나 있거나 많거나 (zero or more) + 하나 또는 많이 (one or more) {n} n번 반복 {min,} 최소 {min,max} 최소, 최대 Boundary-type \b 단어의 경계 \B 단어의 경계가 아님 ^ 문자의 시작 $ 문장의 끝 Character classes \ 특수 문자가 아닌 문자 . 어떤 글자 \d digit 숫자 \D digit 숫자 아님 \w word 문자 \W word 문자 아님 \s space 공백 \S spac..

selectedIndex에는 선택된 index들의 값들이 들어있다. 선택된 index들은 arr배열에서 삭제하고 싶었다. const arr= [ {id:1, name:'AAA'}, // 0 {id:2, name:'BBB'}, // 1 {id:3, name:'CCC'}, // 2 {id:4, name:'DDD'}, // 3 {id:5, name:'EEE'}, // 4 ] const selectedIndex= [0,2,3] 1. Object의 key들의 값을 비교해주고 key값이 다른 아이들만 담아줬다. 2. reduce로 담아진 key들에 값을 넣어줬다. 3. 2번 과정을 거치면 중간에 삭제된 곳에는 빈 값이 들어가므로 null이 아닌 값들만 리턴해준다. const filteredData = Object...

배열 안에 내가 원하는 객체를 찾고 싶어 나는 filter를 사용해서 찾아줬다. 여기서 find로도 찾을 수 있지 않나? 하는 생각이 들어 둘이 뭐가 다른 건지 차이점이 궁금했다. 결론부터 말하자면 filter()는 만족하는 모든 요소들을 모아 새로운 배열로 반환한다. find()는 만족하는 첫 번째 요소의 값을 반환하고 그 요소가 없다면 undefined를 반환한다. filter() const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Arra..

마땅히 unique key를 줄 data가 없는 경우 Object.keys()를 이용해 key값으로 주면 된다! key값은 고유하기 때문에! {Object.keys(items).map((key) => ( ))}

이번 프로젝트는 Atomic Design Pattern으로 해보자고 하셔서 하기로 했다! 들어보긴 했지만 정확히 어떤 건지 몰라 블로그를 쓰면서 정리해보겠다. 그리고 이번 프로젝트는 깔끔하게 나올 거 같아서 기대된다! 🤩 Atomic Design Pattern 컴포넌트 관리 방법론 Atom(원자) 가장 작은 단위의 컴포넌트이다. 원자는 마진이나 위치값을 가지고 있지 않는다. Label, Text, Container, Button, Icon Molecule(분자) 원자들로 분자를 만든다. 분자가 원자의 위치 값을 지정한다. 입력 폼(Input forms), 내비게이션(Navigation), 카드(Card) Organism(유기체) 분자들로 유기체를 만든다. Template(템플릿) 여러 개의 유기체들로 페..