✍ 공부

[ JavaScript ] 배열 무작위로 섞기

방법은 몇 가지가 있는 것 같다 방법 1. const arr = [ "a", "b", "c", ]; // 배열 arr const randomValueFromArray = (array) => { const random = Math.floor(Math.random() * array.length); // 0~2 사이의 랜덤 숫자가 random에 들어간다 return array[random]; // 0~2 사이의 랜덤 정수가 들어가서 값을 구한다 // 만약 random 값이 2라면 'c'가 나온다 } console.log(randomValueFromArray(arr)); 하지만 이것은 배열을 무작위로 섞는 것이 아니라 배열을 무작위로 하나씩 가져오는 방법이다. 만약 무작위로 섞어서 다른 배열을 만들거라면 함수를..

[ React / Typescript ] typeScript에서 객체 key에 접근하는 방법ERROR! : Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 이 에러는 string literal 타입만이 허용되는 곳에 string 타입을 사용했기 때문이라고 하는데.. 이게 대체 무슨 말일까? const helloWorld1 = "Hello World" // 1. 'Hello World' 타입 => Hello World라는 타입만 허용 let helloWorld2 = "Hello World" // 2. string 타입 => string 타입만 허용 const helloWorld3: string = "Hello World" // 3. string 타입 => string 타입만 허용 ..

[ Javascript / React / typescript]객체 value값으로 key 값 찾기.

2022 대선 공약 자가진단 웹을 만들면서 value 값으로 key를 찾을 일이 있었다. const frequency: number[] = Object.values(obj); // 1. 원하는 객체의 '값'만 뽑아서 숫자형으로만 이루어진 frequency라는 배열을 만든다(값이 숫자였기 때문에 + typescript였기 때문에 숫자형이라고 표시함) const freCandidate = Object.keys(obj).filter((key: string) => { return obj[key] === Math.max(...frequency); }); // 2. 객체 안에서 가장 큰 key 값을 가진 value를 가져오길 원했기 때문에 이렇게 코드를 짰다 // obj에서 key만 뽑아서 filter을 쓴다(fi..

react로 setInterval을 사용할 때 겪을 수 있는 문제들

개인 프로젝트 agenda (이제는 pilzAgenda가 되어버린) 를 진행하면서 여러 문제에 맞닥뜨리게 되었다. 그 중 하나가 시간을 나타내는 문제. 시간? 그거 그냥 api받아오던가 현재 시간 받아와서 그려주면 되는거 아닌가? 하고 안일하게 생각했던 내 자신을 반성하게 된 어제 저녁을 계기로 react에서 setInterval을 어떻게 사용해야 하는지에 대해서 글을 작성해보기로 했다. 만약 내가 바닐라 자바스크립트를 이용해서 프로젝트를 만들고 있었다면 정말로 setInterval을 이용했을지도 모른다. 일단 원하는 결과는 화면에 그려지기에. 하지만 react는 누구나 알다시피 props나 state의 변화가 없으면 재렌더링되지 않는다. 또한 너무 많은 재렌더링은 react의 효율을 떨어뜨린다 => s..

🔧[ recoil ] recoil로 react 상태관리 하기

1. 등장 배경 & 이용 목적 2. 설치 / 사용 방법 3-1 설치 3-2 RecoilRoot 3-3 Atom 3. 사용 후기 4. 정리 참고 1. 등장 배경 & 이용 목적 react의 특징 중 하나는 데이터가 단방향으로 흐른다는 점이다 즉, 부모 component에서 자식 component로 props가 옮겨오는 식의 형태를 띄고 있다. 따라서 모든 component에서 쓰여야 하는 상태(ex 유저 정보)가 있다면 이 정보를 계속 부모에서 자식으로, 또 그 자식으로 전달해야 하는 어려움이 있다. 따라서 Redux를 통해 상태관리를 시행했지만 React에 최적화되어있지 않아서 사용에 불편함이 있었다고 한다 그 때 facebook에서 react에 최적화된 상태 관리 툴이라는 이름으로 recoil을 내보이게..

🥜 [ React ] react 학습내용 나름대로 정리하기 1

드림코딩, 노마드코더, 게임으로 배우는 react 강의 수강. React란? 웹 UI를 만들 수 있는 컴포넌트로 이루어진 UI 라이브러리이다. (그러나 프레임워크에 더 가깝다) 싱글페이지 어플리케이션에 최적화되어있으며 웹앱의 느낌을 내기 때문에 사용자 경험에 좋다 특징 - component - jsx - virtual dom - 단방향 데이터 바인딩 1. component -독립적 -고립됨 -재사용가능 헤더, 푸터, 버튼, 아티클 단위로 묶어서 한 가지 기능을 전문적으로 수행하는 컴포넌트 단위로 관리할 수 있다. 따라서 특정 부분에 오류가 발생했을 시, 그 컴포넌트만 수정하는 것으로 해결할 수 있어 유지보수에 좋다. 또한 한번 사용한 컴포넌트를 다시 사용할 수 있는 재사용성이 높다. React 설치 re..

🔧[ React Query ] 리엑트 쿼리 사용법

react query란? Fetch, cache and update data in your React and React Native applications all without touching any "global state". => react나 react native에서 전역상태를 건드리지 않고 데이터를 fetch, cache, update할 수 있게 하는 상태 관리 도구. 서버 상태를 관리하는 라이브러리이다. '서버와 클라이언트 사이 비동기 로직을 쉽게 다루게 해주는 도구.' 성능 복잡한 코드를 몇 줄의 코드로 교체할 수 있다. 새로운 데이터 소스를 연결하는 것이 편리해진다. 복잡하고 계속되는 데이터 소스의 re-road를 막을 수 있다. 메모리 성능을 높일 수 있다 설치 npm i react-que..

🔧[ React-router-dom ] react-router-dom v6 달라진 점

react 강의를 들으면서 react-router-dom의 버전이 맞지 않아 고생을 꽤 했다. 만약 엘리 드림코딩 [ 리액트 개념 정리 + 유튜브 클론 코딩 외 실전 프로젝트 완성 ] 이나 노마드 코더 [트위터 클론코딩] 을 들으면서 버전에 어려움을 겪는다면.. 댓글로 물어봐주시면 한번 들어본 초보자로서 제가 아는 정보 내에서 최대한 알려드릴게요👼🤍 react 버전차이를 설명해주는 좋은 글이 많았지만 어쨌든 나도 써보려고 한다 설치 npm $ npm install react-router-dom@6 Yarn $ yarn add react-router-dom@6 pnpm $ pnpm add react-router-dom@6 사용 방법 router을 만들고 싶은 곳에 import { BrowserRouter ..