SimCoding

[React] shortid를 사용해 랜덤한 key값 만들기 안녕하세요. 이번 포스팅에서는 shortid 라이브러리를 사용해 랜덤한 key값을 만드는 방법에 대해 알아보겠습니다. React에서는 배열을 순환하며 중복된 컴포넌트를 만들때, 필수적으로 고유의 키값을 입력해주어야 합니다. 하지만 매번 고유한 키값을 만들기란 쉽지 않죠.. 그렇다면 ! Q .인덱스를 키값으로 사용하면 되지 않나요 ? 리액트 공식문서에서는, 항목의 순서가 바뀔 수 있는 경우 Key값으로 인덱스를 사용하지 않는 것을 권장하고 있습니다. 이에 대한 자세한 내용을 확인하고 싶으시다면, 공식문서를 참고해주세요 ! Q. 그렇다면 고유한 키 값을 만들기 위해서는 어떻게 해야 할까요 ? 백엔드 서버에서 데이터를 넘겨 받을 경우에는, 데이터의 ..

TypeScript & StyledComponents 에서 props타입 지정하기. 안녕하세요. 이번 포스팅에서는 TypeScript를 사용할때, StyledComponent에 props타입을 지정하는 방법에 대해 알아보겠습니다. TypeScript에서는 타입을 지정하지 않고, 임이의 props를 사용할 경우 오류를 뱉습니다.. 아래 사진처럼요.. 그렇다면 props에 대한 타입은 어떻게 지정하면 되는 걸까요 !? 예시코드를 통해 StyledComponent를 통해 props에 타입 지정하는 방법을 확인해 봅시다. > 타입 직접 지정. // const Container = styled.div` const Container = styled.div< { age : number ..

[React] pagination Component 만들기 [ App.jsx ] // state변수 설정 const [currPage, setCurrPage] = useState(0); [ Pagination.jsx ] - 페이지리스트 배열 만들기. const MAX_PAGE_COUNT = 10; // MAX_PAGE_COUNT -> 한번에 보여지는 페이지 수, let resultList = []; function getPaginationArray(currPage, pageCount) { // 1, 11, 21 ... 페이지가 선택될 때 , // 1~10, 11~20, 21~30 ... 리스트 생성 if ((currPage + 1) % MAX_PAGE_COUNT === 1) { let idx = 1; r..

자바스크립트 배열 초기화하는 방법 > new Array : 길이가 n인 배열 생성하기 /* new Array() */ const arr = new Array(5); console.log(arr); // => Array(5) [] console.log(arr[0]); // => undefined console.log(arr.length); // => 5 > Array.from : 콜백함수를 활용한 배열 생성하기 /* Array.from() 콜백의 두번째 매개변수는 배열의 index를 반환한다. */ const arr = Array.from({ length: 5 }, (v, i) => i); console.log(arr); // => Array(5) [0, 1, 2, 3, 4] console.log(arr[..

[TS] React TypeScript 에서 children에 대한 타입정의 예시 import React, { ReactChildren, ReactChild } from 'react'; interface AuxProps { children: ReactChild | ReactChildren; } const Aux = ({ children }: AuxProps) => ({children}); export default Aux;

Typescript 에서 DOM 조작하기 , HTML 조작하기. 안녕하세요. 오늘은 타입스크립트에서 DOM을 조작하기 위한 방법에 대해 포스팅 하려고 합니다. 간단한 예시를 통해 DOM조작 방법을 확인해 보겠습니다. html 예시 : 아래와 같은 html이 있을 때, 타입스크립트로 돔을 조작해보겠습니다. hello, gwang ! link button 타입스크립트에서 DOM 조작하기 : type narrowing을 이용한 DOM조작. let title = document.querySelector('#title'); // innerHTML속성을 제어하기 위한 2가지방법 // 아래 세가지 방법 모두 가능하지만 'instanceof'를 사용하는게 가장 일반적이라고 합니다. if(title !== null) 제..

[TS] 배열의 타입을 체크하는 방법 Array.isArray() 자바스크립트에서는 이상하게도 , 배열이라는 타입이 따로 존재하지 않습니다. 자바스크립트에서의 배열은 하나의 객체입니다 ! 그래서 배열의 타입을 콘솔로 찍어보면 아래와 같은 결과가 나오게 되죠.. console.log(typeof [1,2,3,4]) // 'object' 하지만 저희는 분명, 배열의 타입이 배열이라고 확인 받고 싶을 때가 있을거에요 ! 그래서 자바스크립트에서는 배열의 타입을 배열이라고 알려주기 위한 함수를 제공하고 있습니다. Array.isArray() 라는 함수인데요, 이 함수는 인자가 배열일 경우에만 true를 반환해 줍니다. 아래 예시코드를 참고해주세요. a = [1,2,3,4] console.log(Array.isAr..

[React] Redux-saga , react infinite scroll 구현하기 코드예시 안녕하세요. 이번포스팅에서는 리액트에서, 리덕스사가를 활용해 무한스크롤을 구현하는 방법에 대해 포스팅 하려고합니다. 예시코드를 통해, 이런식으로 구현할 수 있구나 정도로 원리만 파악하시고, 직접 구현하실 때는 , 본인의 코드 스타일에 맞게 구현 하시면 될 것 같아요 ! @ 컴포넌트 코드 // index.js const Home = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector((s..