SimCoding

[Jest] mocking을 위한 jest.spyOn, mockImplementation 에 대해 알아보기 1. spyOn - spyOn은 메소드를 가로채서 모킹할 수 있도록 도와준다. 2. mockImplementation - mockImplementation은 기본적으로 아무런 동작도 하지 않으며, 인자로 콜백함수를 넣어주면 콜백함수가 작동한다. 즉, mocking된 함수를 원하는대로 조작할 수 있게 해준다. @예시코드 // spyOn -> service.sendEmail() 메소드를 mocking 한다. // mockImplementation -> mocking된 함수를 아무런 동작도 하지 않게 해준다. jest.spyOn(service, 'sendEmail').mockImplementation(a..

[Nextjs] nextjs middleware활용해서 redirect구현하기 안녕하세요. 이번 포스팅에서는 nextjs 에서 middleware를 활용해서 redirect를 구현하는 방법에 대해 알아보겠습니다. middleware에 작성된 코드는, request가 완료되기 전에 작동합니다. 이를 활용해, response를 중간에 가로채 수정할 수 있습니다. response를 중간에 가로채서 url을 변경해주면 redirect기능을 구현할 수 있겠죠? 자주 사용되는 예시를 통해, redirect 기능을 구현하는 방법에 대해 알아보겠습니다. 아래 예시코드는 로그인이 되어있지 않은 유저가 페이지에 접근하려고 할 때, root페이지로 redirect를 시키는 코드입니다. // middleware.ts impo..

[Error] AWS S3 NEXTJS 배포 후, index외 페이지에서 새로고침 할 때 에러가 뜨는 문제 해결. 안녕하세요. 오늘은 AWS S3에 NEXTJS를 배포하면서 생긴문제와 해결방법에 대해 포스팅 하려고 합니다. > 문제 Index페이지 이외의 페이지에서 새로고침, 또는 url로 직접 접근하려고 할 때 에러가 발생했습니다.. SPA 을 S3에 배포할 때, 종종 발생하는 문제 인 것 같더라구요.. ! > 문제 파악 Router경로가 위의 이미지에서 보이는 것처럼 '/post/washingMachine' 으로 설정되어 있는데요, 빌드하는 과정에서 /post/washingMachine/index.html 파일로 build가 되는 것을 발견했습니다. 그런데 S3에서는, 이걸 자동으로 찾아주지 못하는 ..

[React] fakerjs, shortid 를 이용해서 현실적인 DummyData 만들기. 안녕하세요. 이번 포스팅에서는 fakerjs와 shortid를 이용해 , 그럴싸한 DummyData를 만드는 방법을 알아보겠습니다. 프론트엔드 개발을 하면서, 백엔드가 완성되지 않았을 경우 원활한 작업 진행을 위해 DummyData가 필요한 일이 분명 있을 거에요 ! fakerjs 와 shortid를 활용하면 쉽게 DummyData를 만들어서 이용 할 수 있습니다. 예시 코드와 함께 어떤식으로 DummyData를 만들 수 있는지 확인해 봅시다. > generateDummyPost : 더미데이터를 생성해주는 함수. import shortId from 'shortid'; import faker from 'faker'..

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

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

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

[React] 전역 스타일링 - createGlobalStyle 안녕하세요. 이번 포스팅에서는 Styled-Components에서 제공하는 함수인 createGlobalStyle 함수에 대해 알아보겠습니다. 리액트에서, - 전역적으로 CSS를 사용하고 싶을 경우, - 기존 CSS를 덮어쓰고 싶을 경우 ( 컴포넌트 자식Class의 CSS 변경할 때 등 ) createGlobalStyle을 사용해서 전역적 스타일링, CSS덮어씌우기 등의 작업을 할 수 있습니다. 예시 코드를 통해 사용방법을 알아봅시다. 예시 코드에서는 createGlobalStyle을 사용해서, Slick컴포넌트의 자식Class인 slick-slide의 CSS를 덮어 씌어주고 있습니다. import Slick from "react-slick..