SimCoding

[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..

faker 오류, faker.js사태 - faker구버젼 사용하기 안녕하세요. 오늘은 fakerjs에 관한 이슈에 대해 포스팅 하려고 합니다.. ! 현재 faker최신 버젼을 설치할 경우, 오류가 나는 것은 faker라이브러리 자체의 문제입니다. 더미데이터를 생성하기 위해 faker.js 라이브러리를 설치했는데 !! 오류가 나서 알아보니 .. 엄청난 일이 있었더라구요 'Marak Squires'라는 개발자가, 자신이 만든 라이브러리인 faker.js 와 color.js를 고의로 손상시켰다고 하네요.. 이 분의 의도는 많은 사람들이 자신의 오픈소스를 공짜로 쓰는데, 아무런 보상이 없는것에 대한 불만으로 저지른 일이라고 합니다.😦 뭔가 안타까운일인 것 같네요... 그 동안 라이브러리 설치에 의심을 갖지 않았..

안녕하세요. 이번 포스팅에서는, 제가 VSC에서 자주 사용하는 단축키들을 알려드리려고 합니다. VSC 단축키를 활용하면, 이전보다 훨씨 높은 생산성을 가지실 수 있을거에요 ! 탭에 관련된 단축키 새탭열기 Ctrl + n 파일열기 Ctrl + o 현재탭 닫기 Ctrl + w 이전에 닫힌탭 다시 열어주기 Ctrl + shift + t 탭 분할 Ctrl + \ 함수 정의문으로 이동 F12 함수 정의문으로 미리보기 Alt + F12 탭 앞뒤로 이동하기 Ctrl+ PgUp/PgDn 내용 편집 관련된 단축키 들여쓰기, 내어쓰기 Tab, Shift + Tab 현재라인 위치이동(위,아래) Alt + ↑/↓ 현재라인 복사 후, 붙여넣기(위,아래) Alt + Shift + ↑/↓ 현재라인 잘라내기 Ctrl + x 현재라인..