개발 일지

원본 배열을 변경하지 않고 참조만 하는 메서드 join() slice() concat() toString() 원본 배열을 변경하지 않고 반복적으로 참조만 하는 메서드 forEach() map() filter() every() some() reduce() reduceRight() entries() keys() values() 원본 배열을 변경하는 메서드 push() pop() shift() unshilft() fill() reverse() sort() splice() [참고] forEach와 map의 차이 - Array.prototype.forEach() 배열의 모든 요소가 한 번씩 순회하면서 제공된 함수를 한 번 실행한다. 각 배열의 요소에 특정한 작업을 수행할 때 사용된다. map과의 차이점은 배열을 ..

일반적으로 React에서 ref는 HTML 엘리먼트를 할당하는데 사용된다. DOM에 직접 접근하기 위해 ref를 사용하기도 한다. (Javascript에서 고유 id 부여하는 것처럼) 그런데, 함수형 컴포넌트에서 타입스크립트 사용시 무심코 useRef 훅을 사용하게 되면 typeError를 만나게 된다. 가장 좋은 방법은 ref를 null로 초기화하는 것이다. 또한 유형 인수를 사용하여 ref 속성으로 사용되는 요소에 대해 각각 HTMLInputElement 유형으로 ref를 캐스팅해야 합니다. import * as React from 'react'; const App = () => { const ref = React.useRef(null); React.useEffect(() => { if (ref.cu..

체크박스를 커스텀하는 과정에서, 체크박스의 상태에 따라 보여지는 스타일이 달라져야 하기 때문에, props로 체크박스의 상태를 넘겨줘야 했다. 필자는 CRA with Typescript Template에 Emotion을 적용해서 개발 중에 있었음. React + style-component 사용할 때 처럼 그냥 props로 넘겨주면 오류가 남 (변경 전) index.tsx const [checked] = useState(false) style.ts export const checkBoxStyle = css` background: ${(props) => props.checked ? `url(${active}) no-repeat 100%/contain` : "#ffff"}; `; (변경 후) 👉 방법 : s..

1. 함수의 타입 설정 파라미터도 일종의 변수, 타입 설정이 가능하다 return 되는 값 의 타입 지정도 가능하다, function multipleTwice(x:number) :number { return x*2; } 2. 함수의 특징 - void 타입 return이 없을 경우 void 타입 선언 가능 return 문이 없어야 하는데 return될 때, 이를 방지해준다. function multipleTwice(x:number) :void { } 3. 파라미터 옵션 파라미터를 지정해두고 함수 호출시 파라미터를 사용하지 않을 경우에는, 타입스크립트의 경우 에러를 뱉는다. (자바스크립트에서는 상관없다.) function multipleTwice(x?:number) :void { } multipleTwice..

🤔 미들웨어는 무엇인가? action에서 선언된 state를 변경하는 부분이 dispatch를 통해 실행되기 전에 동작한다. 즉, action 과 dispatch 사이에서 일어나는 동작을 제어하는 도구라고 이해하면 되겠다. 비동기를 구현할 때 용이하며, 리덕스에 비동기 관리 tool로는 redux-thunk, redux-saga 정도가 있다. [기본 템플릿] const middleware = store => next => action => { (1) next(action) //기본 기능 : action이 dispatch를 통해 실행된다. (2) } 함수가 중첩된 형태이다. 파라미터가 3개 이고 return 문이 2개인 고차함수 형태이다. 이를 function 으로 다시 작성해본다면, function mi..

👉 관심사의 분리 (Seperation of Concerns) : 특정한 관심사에 따라 기능을 구분하여, 각 기능들마다 개개의 관심사를 해결하기 위한 코드를 작성하는 패턴이다. 함수를 최대한 간결한 형태로 구현하여, 프로세스의 복잡도를 낮추고, 재사용성을 높이며, 유지보수를 원할하게 합니다. 리덕스도 이 "관심사의 분리"를 통해 폴더 구조를 나누어 볼 수 있는데, 크게 나뉠 수 있는 파트가 "리듀서(reducer)"와 "액션(action)" 이다. 예를 들어, 데이터를 기준으로 유저와 관련된 기능들은 user.js 에 다 넣어두고 사용, 마찬가지로 게시글과 관련된 기능들은 boards.js에서 관리한다. 리듀서 같은 경우는, 순수함수로 정의가 되어 있기 때문에 분리하기 굉장히 편리하다. const ini..

🤔 리덕스란 몰까..? 그리고 왜 사용하는 걸까? https://ko.redux.js.org/ Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. ko.redux.js.org 프로젝트의 depth 가 깊어지면서 컴포넌트간에 state를 주고 받고, 넘나드는 것이 점점 복잡해진다.. 이를 해결 하기 위해 최상위 컴포넌트에서 전역변수로 한꺼번에 선언해서 여러 곳에서 사용하기 위해 사용한다. 리덕스를 사용하게 되면, state로 일일히 선언하지 않아도 된다! 👉 리덕스의 장점 - action을 실행할 때 dispatch 의 히스토리를 확인할 수 있다.(에러 핸들링에 용이) - git reset 처럼 이전 action으로 되돌릴 ..