전체 글
[JAVASCRIPT] 백준 1181번 문제 풀이
❗ 조건 조건1. 문자열의 길이가 짧은 것부터 조건2. 문자열의 길이가 같으면 사전 순으로 ❗ 풀이 let input = require('fs').readFileSync('dev/stdin').toString().trim().split('\n'); let setarr = [...new Set(input)]; setarr.shift(); let result = setarr.sort().sort((a, b) => a.length - b.length).join("\n"); console.log(result) 1. Set()을 이용한 중복 제거 2. shift()를 이용한 단어의 개수 값 제거 3. let result => 중복과 단어의 개수 값을 제거한 배열을 사전순으로 정렬하고 단어순으로 정렬한 후 join..
[TypeScript] 타입을 파라미터로 입력하는 Generic
❓ Generic 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다 예시를 들어보자면 아무렇게나 생긴 array 자료를 입력하면 array의 첫 자료를 그대로 출력해주는 함수를 만들었다고 하자. function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]) console.log(a) 이러면 콘솔창에 4가 출력된다. 근데 마우스 올려서 a의 타입을 확인해보면 숫자는 아니고 unknown 타입이다. 왜냐면 지금 입력하는 array도 unknown 타입이라서 그렇다. 여기서 중요포인트는 "타입스크립트는 타입을 알아서 변경해주지 않는..
[React.js] 리액트에서 자주 쓰는 if문 작성 패턴 5개
1. 컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } 컴포넌트에서 JSX를 조건부로 보여주고 싶으면 그냥 이렇게 쓴다. 우리가 자주 쓰던 자바스크립트 if문은 return () 안의 JSX 내에서는 사용 불가능하다. if (어쩌구) {저쩌구} 이게 안된다는 소리다. 그래서 보통 return + JSX 전체를 return하는 if문을 작성해서 사용합니다. 근데 이렇게 쓰시려면 else 생략이 가능 function Component() { if ( true ) { return 참이면 보여줄 HTML; } return null; } else와 중괄호를 하나 없애도 아까 코드..
[React.js] 컴포넌트간 편리한 state 공유를 위한 Redux
❓ Redux Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리입니다. 이거 설치하면 js 파일 하나에 state들을 보관할 수 있는데 그걸 모든 컴포넌트가 직접 꺼내쓸 수 있다. 그래서 props 전송이 필요 없어지니 컴포넌트가 많아질 수록 좋을듯하다. ❗ Redux 설치 npm install @reduxjs/toolkit react-redux 터미널에 입력하면 된다다. redux toolkit이라는 라이브러리는 문법이 쉬워진 redux의 개선버전이다. ❗ Redux 셋팅 import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) 아무데나 store.js 파일을..
[JAVASCRIPT] 백준 1764번 문제 풀이
❗ 조건 조건 1. 듣도 못한 사람과 보도 못한 사람의 명단은 중복되는 이름이 없음 -> set() 활용 조건 2. 듣보잡의 수와 그 명단은 사전순으로 출력 -> sort() 활용 조건 3. 첫째 줄에 듣도 못한 사람의 수 N, 보도 못한 사람의 수 M이 주어짐 조건 4. 둘째 줄부터 N개의 줄에 걸쳐 듣도 못한 사람의 이름과, N+2째 줄부터 보도 못한 사람의 이름이 순서대로 주어진다. let input = require('fs').readFileSync('dev/stdin').toString().trim().split('\n'); const [N, M] = input.shift().split(' '); let n_set = new Set(); let m_set = new Set(); for(let i..
[JAVASCRIPT] 백준 1475번 문제 풀이
❗ 조건 1. 6은 9로 뒤집어 쓸 수 있고 9는 6으로 뒤집어서 쓸 수 있다 = 6,9는 동일한 숫자를 취급한다는 말이기 때문에 6의 누적 값과 9의 누적 값을 더한 후 2로 나눈 뒤 반올림 하면 6과 9를 동일한 숫자로 취급할 수 있음 2. 카드팩에서 가장 많이 쓰는 수를 기준으로 하면 카드팩을 몇 장 쓰는지 알 수 있음 let input = require('fs').readFileSync('dev/stdin').toString().trim().split(''); function objectFunc(arr) { let card = {6:0, 9:0} for(const el of arr) { card[el] = (card[el] || 0) + 1; } card[6] = Math.ceil((card[6]..
[React.js] 성능개선 3 : useTransition, useDeferredValue
리액트18버전 이후부터 렌더링 성능이 저하되는 컴포넌트에서 쓸 수 있는 혁신적인 기능이 하나 추가되었다고 한다. "useTransition" 이건데 이걸로 오래걸리는 부분을 감싸면 렌더링시 버벅이지 않게 해준다. 사실은 코드 실행시점만 조절해주는 것임... ❗ automatic batching Batching이란 React가 더 나은 성능을 위해 여러개의 state 업데이트를 한 번의 리렌더링으로 묶어서 진행하는 것을 말한다. setCount(1) setName(2) setValue(3) //여기서 1번만 재렌더링됨 state변경함수를 연달아서 3개 사용하면 재렌더링도 원래 3번 되어야하지만 리액트는 똑똑하게도 재렌더링을 마지막에 1회만 처리해준다. 일종의 쓸데없는 재렌더링 방지기능이고 batching이..
[React.js] 성능개선 2 : 재렌더링을 막는 memo, useMemo
❗ Memo useMemo와 memo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks 중 하나이다. Memo는 Memoization을 뜻한다. memoization이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다. 먼저 시작하기 전에 함수형 컴포넌트에 대해 꼭 알아야 한다. 아래 예제를 보면서 같이 살펴보겠다. 함수형 컴포넌트는 렌더링 ➡️ Component 함수 호출 ➡️ 모든 내부 변수 초기화의 순서를 거친다. Component가 렌더링이 될 때마다 value라는 변수가 초기화된다. 따라서 calculate 함수는 반복적으로 호출됩니다. calculate 함수가 무거운 일을 하는 함수라면 무거운 일을 반복적으로 하..