짧은코딩

global style의 필요성 라이브러리를 사용해서 코딩을 하면 위 사진처럼 className이 이미 정해진 상태로 나온다. 이런 태그들의 스타일을 바꾸기 위해서 global style가 필요하다. 사용법 import styled, { createGlobalStyle } from "styled-components"; createGlobalStyle를 import 해줘야 global style을 사용할 수 있다. const Global = createGlobalStyle` .slick-slide { display: inline-block; } `; 위 사진에 있는 "slick-slide"의 이름을 바꾸기 위해서는 이런식으로 스타일링 해줄 수 있다. Global 컴포넌트는 아무 곳에나 넣어주면 global..

npm 사이트 https://www.npmjs.com/package/react-slick react-slick React port of slick carousel. Latest version: 0.29.0, last published: 8 months ago. Start using react-slick in your project by running `npm i react-slick`. There are 1771 other projects in the npm registry using react-slick. www.npmjs.com react-slick의 npm 주소이다. react-slick이란? 인스타 같은 곳에서 사진이 여러장 있으면 사진을 슬라이드 형태로 넘길 수 있게 해주는 라이브러리이다. 사용..

공유 자원(shared resource) 공유 자원은 프로세스, 스레드가 같이 접근할 수 있는 모니터, 프린터, 메모리, 파일, 데이터 같은 자원을 의미한다. 경쟁 상태(race condition)는 공유 자원을 두 개 이상의 프로세스가 동시에 읽거나 사용하는 상황을 말한다. ex) 공유 자원 item = 1이 있고 A 프로세스가 item에 2를 더하고 B 프로세스는 3을 더했다. 만약 여기서 A와 B가 같이 item을 읽고 A가 먼저 2를 더해주고 늦게 B가 3을 더하면 item은 4가된다. 옳바른 답은 6(1+2+3)이 나와야하는데 타이밍이 꼬여서 잘못된 값이 나온 것이다. 임계 영역(critical section) 임계 영역은 공유 자원에 접근하는 순서 같은 이유로 결과가 달라지는 영역을 말한다. ..

코드 function solution(n, r) { let answer = []; let dy = Array.from(Array(34), () => Array(34).fill(0)); function DFS(n, r) { if (dy[n][r] > 0) return dy[n][r]; if (n === r || r === 0) return 1; else return (dy[n][r] = DFS(n - 1, r - 1) + DFS(n - 1, r)); } answer = DFS(n, r); return answer; } 해결 방법 이 풀이는 n = 5, r = 3로 가정한 풀이이다. 조합은 n === r 이거나 r이 1이면 값이 1이라 1을 반환해주면 된다. n !== r이나 r !== 1이면 DFS(n-1..

필요한 변수 및 interface interface ItemInfo { id: number; name: string; values: string; } TypeScript라서 우선 데이터의 구조를 잡아줬다. const ItemId = useRef(1); const [itemInfos, setItemInfos] = useState([ { id: 0, name: "", values: "" }, ]); ItemId는 input이 동적으로 늘어감에 따라 각 Item에 부여할 ID이다. itemInfos는 각 아이템들을 저장하는 배열이다. 필요한 함수들 input 추가 함수 const addInput = useCallback(() => { const Item = { id: ItemId.current, name: "..

npm 설치 --save-prod npm i jquery --save-prod 우리는 보통 "--save-prod"는 생략하고 npm을 설치한다. 생략을 하고 설치해도 자동으로 "--save-prod"가 붙기 때문에 생략해도 된다. 이렇게 설치한 라이브러리, 패키지는 package.json의 "dependencies"에 저장이된다. --save-dev(-D) npm install jquery --save-dev npm i jquery -D 개발을 하다보면 가끔 "--save-dev"나 "-D"를 붙여서 설치하는 경우가 있었다. 하지만 이것이 어떠한 역할을 하는지는 잘 몰랐다. 우선 위에 있는 코드는 모두 같은 코드이다. "--save-dev" 대신 "-D"를 써도 되는 것이다. 이렇게 설치한 라이브러리,..

코드 function solution(m, arr) { let answer = []; let n = arr.length; let ch = Array.from({ length: n }, () => 0); let temp = Array.from({ length: m }, () => 0); function DFS(L) { if (L === m) { answer.push(temp.slice()); } else { for (let i = 0; i < n; i++) { if (ch[i] === 0) { ch[i] = 1; temp[L] = arr[i]; DFS(L + 1); ch[i] = 0; } } } } DFS(0); return answer; } 해결 방법 1. ch는 각 자연수가 중복되는지를 체크하는 배열이..

기존 input의 문제점

map 함수 리액트에서 map 함수를 써주게되면 key를 줘야한다. ary.map((item, index) => return {item} ); 나는 보통 이렇게 map 함수의 index를 key 값으로 줬다. 하지만 이는 anti-pattern 중 하나이다. 이렇게 index를 key 값으로 주면 안되는 경우는 ary 배열 중 한 값이 지워지거나, 순서가 달라질때, 중간에 값이 추가되는 경우가 대표적이다. 다만 배열의 값이 절대 바뀔 일이 없다면 key 값을 index로 줘도 상관없다. ary.map((item, index) => return {item} ); 따라서 이런 경우에는 위 코드처럼 고유 id를 만들어서 key 값으로 주는 것이 좋다.

코드 function solution(m, arr) { let answer = Number.MAX_SAFE_INTEGER; let n = arr.length; function DFS(L, sum) { if (sum > m) return; if (L >= answer) return; if (sum === m) { answer = Math.min(answer, L); } else { for (let i = 0; i < n; i++) { DFS(L + 1, sum + arr[i]); } } } DFS(0, 0); return answer; } 풀이 이 문제는 DFS(L, sum)으로 해서 풀어야한다. 여기서 L은 동전의 개수이고 sum은 값의 합이다. 위 사진처럼 가지를 뻗어 가면서 돌아가도록 해야한다. 그러..