본문 바로가기
728x90
반응형

React23

[React] Vite 타입 스크립트 프로젝트에 Jest 사용 환경 설정 안녕하세요. J4J입니다. 이번 포스팅은 Vite 타입 스크립트 프로젝트에 Jest 사용 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] Vite 사용하기 Jest 사용 환경 설정 Jest를 이용하여 테스트 케이스를 작성하는 경우는 여러 가지 존재합니다. Jest 내부에서만 작성되어 테스트하는 경우, 정의해 둔 모듈을 로드하여 테스트하는 경우, HTML element까지 접근하여 테스트하는 경우 등이 있습니다. 내부에서만 작성하는 경우부터 HTML element까지 접근하는 경우까지 점점 갈수록 더 많은 설정들이 필요한데, 일반적으로 React에서 Jest를 활용하는 경우 HTML element까지 접근하여 사용하기 때문에 이번 글에서는 한 번에 모든 설정을 해보겠습.. 2023. 10. 6.
[React] Tailwind 사용하기 (2) - StyledComponents와 CSS 적용 비교하기 안녕하세요. J4J입니다. 이번 포스팅은 tailwind 사용하기 두 번째인 styledComponents와 CSS 적용 비교하기에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] Tailwind 사용하기 (1) - 개념 및 설정 들어가기에 앞서 이전 글에서도 간단하게 확인해 볼 수 있는 것처럼 tailwind에 css를 적용할 땐 tailwind에서 기본적으로 정의해 둔 class 명을 이용해야 합니다. 색상, 크기, 여백 등의 모든 css들이 기본적인 css 구조에서 스타일을 적용하기 위해 사용하던 방식과 모두 상이하기에 처음 tailwind를 사용하시는 분들이라면 tailwind 공식 문서를 당분간 필수적으로 참고하시는 것을 추천드립니다. 그리고 이번 글에서는 일반적으로 자주 사용되.. 2023. 5. 22.
[React] AES256 암호화 (with. Java) 안녕하세요. J4J입니다. 이번 포스팅은 AES256 암호화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. React에서 암호화 방법 [ 1. 패키지 설치 ] $ npm install crypto-js $ npm install -D @types/crypto-js // 타입 스크립트 사용 시 추가 설치 [ 2. 암복호화 코드 작성 ] import cryptoJs from 'crypto-js'; const secretKey = '12345678901234567890123456789012' // 32자리 비밀키 const iv = 'abcdefghijklmnop' // 16자리 iv // 암호화 export const encrypt = (text: string) => { const cipher = cry.. 2022. 7. 4.
[React] CRA 사용하지 않고 타입 스크립트 개발환경 세팅하기 안녕하세요. J4J입니다. 이번 포스팅은 CRA 사용하지 않고 타입 스크립트 개발환경 세팅하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 세팅 방법 [ 1. 작업할 폴더 생성 및 이동 ] VSCode 터미널을 이용하여 다음 명령어를 통해 작업 폴더를 생성해주시면 됩니다. $ mkdir { 폴더 명 } // ex) mkdir init_typescript $ cd { 폴더 명 } // ex) cd init_typescript [ 2. package.json 생성 ] $ npm init 명령어를 입력하면 부가 정보들을 추가적으로 작성해줘야 합니다. 필요한 내용들에 대해 입력해주시면 되고 괄호가 있는 곳은 아무것도 입력하지 않을 경우 괄호 안의 내용이 default로 입력이 됩니다. package.. 2022. 2. 16.
[React] CRA 사용하지 않고 개발환경 세팅하기 안녕하세요. J4J입니다. 이번 포스팅은 CRA 사용하지 않고 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 세팅 방법 [ 1. 작업할 폴더 생성 및 이동 ] 보통 React를 이용해 개발할 때는 대부분의 사용자들이 VSCode를 IDE로 선택합니다. VSCode를 사용하시는 분들은 터미널을 이용하여 다음과 같이 간단하게 폴더 생성 및 이동을 해주시면 됩니다. $ mkdir { 폴더 명 } // ex) mkdir init $ cd { 폴더 명 } // ex) cd init [ 2. package.json 생성 ] $ npm init 명령어를 입력할 경우 다음과 같이 추가 정보를 입력해야 되는데 필요한 부분만 입력해주시면 되고 또한 괄호가 있는 곳은 입력을 하지 않을 경우 괄호.. 2022. 2. 15.
[Next] Editor 사용하기 (3) - React Draft Wysiwyg 안녕하세요. J4J입니다. 이번 포스팅은 React Draft Wysiwyg Editor 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글도 참고해보시면 좋을 것 같습니다. [Next] Editor 사용하기 (1) - React Quill [Next] Editor 사용하기 (2) - Toast UI 앞선 글들에서 언급했듯이 Next에서 Editor를 사용해보기 위해 다음과 같은 총 3개의 패키지를 확인할 수 있었습니다. react-quill @toast-ui/react-editor react-draft-wysiwyg 이번엔 개인 순위로 3등으로 생각했던 react-draft-wysiwyg에 대해 소개를 해보겠습니다. 구현 방법과 간단한 특징들에 대해 적어보겠습니다. 이미지.. 2022. 1. 9.
[Next] Editor 사용하기 (2) - Toast UI 안녕하세요. J4J입니다. 이번 포스팅은 Toast UI Editor 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글도 참고해보시면 좋을 것 같습니다. [Next] Editor 사용하기 (1) - React Quill [Next] Editor 사용하기 (3) - React Draft Wysiwyg 앞선 글에서 언급했듯이 Editor를 사용해보기 위해 다음과 같이 총 3개의 패키지를 찾을 수 있었습니다. react-quill @toast-ui/react-editor react-draft-wysiwyg 이번에는 이들 중 현재 사용했을 때 두 번째로 괜찮다고 생각한 @toast-ui/react-editor에 대해 소개를 해보겠습니다. 간단한 사용 방법과 제가 경험할 수 있었던.. 2022. 1. 7.
[Next] Editor 사용하기 (1) - React Quill 안녕하세요. J4J입니다. 이번 포스팅은 React Quill Editor 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다음 글도 참고해보시면 좋을 것 같습니다. [Next] Editor 사용하기 (2) - Toast UI [Next] Editor 사용하기 (3) - React Draft Wysiwyg Next를 사용하면서 Editor를 구현해야 하는 상황이 생겨 사용할 수 있는 Editor를 찾고 테스트해본 결과 다음과 같이 3개의 패키지를 찾을 수 있었습니다. react-quill @toast-ui/react-editor react-draft-wysiwyg 3개를 전부 깊게 사용해보지 않았지만 테스트 코드만 구현해봤을 때 사용성에 있어서 괜찮다고 생각한 순으로 작성해봤습니.. 2022. 1. 6.
[Next] 타입 스크립트 개발환경 구축하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 Next에도 React의 CRA와 동일한 것이 존재합니다. 다음 명령어를 이용하면 Next에 타입 스크립트가 얹어있는 환경을 제공해주기는 합니다. $ npx create-next-app --ts {프로젝트 명} 하지만 저는 기본적으로 나만의 환경을 구축하는 것과 CRA 사용으로 몰랐던 여러 설정 방법을 경험하고 싶다는 이유 등으로 CRA를 사용하지 않고 프로젝트 개발 환경을 구축하고는 합니다. 저와 동일하거나 또는 다른 사유로 인해 CRA로 프로젝트를 생성하고 싶지 않으신 분들은 다음의 절차를 따라 환경을 세팅하시면 될 것 같습니다. [ 1. package.json.. 2021. 12. 30.
[React] Apollo에서 useLazyQuery를 이용하여 필요할 때 query 요청 보내기 안녕하세요. J4J입니다. 이번 포스팅은 Apollo에서 useLazyQuery를 이용하여 필요할 때 query 요청 보내는 방법에 대해 적어보는 시간을 가져보려고 합니다. useLazyQuery 사용 예시 관련된 코드는 이전에 작성한 글을 기반으로 추가 변경해보도록 하겠습니다. 링크를 확인해보면 다음과 같이 person query를 사용하는 getPerson이라는 함수를 확인할 수 있습니다. const getPerson = (id: number) => { const { loading, error, data } = useQuery(GET_PERSON, { variables: { id, } }) if(loading) return Loading... if(error) return (Error...) retu.. 2021. 12. 28.
[React] Apollo를 이용하여 GraphQL 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Apollo를 이용하여 GraphQL 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 GraphQL을 이용하여 데이터를 가져오는 서버 및 설명은 여기를 참고해주시면 됩니다. 또한 타입 스크립트를 이용하여 설정 및 구현해보도록 하겠습니다. Apollo 환경 설정 [ 1. 패키지 설치 ] $ npm install @apollo/client graphql [ 2. App.tsx에 Provider 등록 ] import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'; import * as React from 'react'; import Person from './pers.. 2021. 12. 26.
[React] 리액트에서 Smooth Scrollbar 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 리액트에서 smooth scrollbar 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Smooth Scrollbar 사용 방법 스크롤을 할 때 사용자들에게 보다 좋은 UI를 제공해주기 위해 smooth scrollbar을 사용하고는 합니다. 최근 리액트를 이용하여 개발하다가 smooth scrollbar를 적용했던 적이 있는 데 사용 방법에 대해 간단히 글을 남겨보고자 합니다. [ 1. 패키지 설치 ] $ npm install smooth-scrollbar [ 2. App.jsx 파일 수정 ] smooth scrollbar 적용을 위한 설정을 추가해보도록 하겠습니다. 또한 스크롤이 잘 되는지도 확인해봐야 되니 스크롤이 될 수 있도록 div들을 여러개 .. 2021. 11. 20.
[React] CRA로 만들지 않았을 때 dotenv 사용 방법 (index.html 포함) 안녕하세요. J4J입니다. 이번 포스팅은 cra로 만들지 않았을 때 dotenv 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. dotenv란? dotenv는 리액트에서 사용할 수 있는 환경변수 파일로 개발에 사용되는 여러 key값들과 같이 중요하면서 동시에 민감한 정보들을 저장해두는 파일입니다. 파일명은 .env로 일반적으로 폴더 최상단에 위치합니다. (package.json과 동일 위치) 중요 정보들을 해당 파일에 저장하는 이유는 수정된 파일들을 git과 같은 코드 관리 도구에 올릴 때 .gitignore 파일에 등록하여 서버에 업로드되지 않도록 하기 때문입니다. 그러므로 외부에 노출되지 않게 되고 그에 따라 보안성이 높아지게 됩니다. CRA로 만들지 않았을 때 dotenv 사용 방법 일반적.. 2021. 11. 16.
[Java] NodeJS와 매핑되는 AES 암호화 (Feat. React) 안녕하세요. J4J입니다. 이번 포스팅은 자바에서 노드와 매핑되는 aes암호화 방식에에 대해 적어보는 시간을 가져보려고 합니다. AES 암호화 회사에서 업무를 보던 도중 react에서 aes암호화 처리가 된 데이터를 spring에 넘겨주고 spring에서 복호화를 하여 데이터를 확인해야 하는 상황이 생겼었습니다. aes암호화를 하는 방법은 검색을 해봤을 때 정말 여러 가지 방법이 있는 것으로 확인되지만 react는 react에서만, spring은 spring에서만 서로 암복호화가 되었습니다. 문제를 해결하기 위해 여러가지 시도를 해봤고 그중 발견한 방법에 대해 글을 남겨놓으려고 합니다. 우선 aes 암호화 방식은 aes128, aes192, aes256 등의 방식들이 존재하는데 key의 길이가 길어질수록.. 2021. 11. 2.
[React] Router를 타입스크립트와 같이 사용하는 방법 안녕하세요. J4J입니다. 이번 포스팅은 Router를 타입 스크립트와 같이 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 우선 들어가기에 앞서 이전에 Router를 이용한 페이지 이동하는 방법에 대해 글을 올린적이 있습니다. 타입 스크립트를 사용한다고 하더라도 router를 사용하는 것에 있어서 크게 다를 것은 없지만 일부 기능들은 타입을 지정해줘야 사용할 수가 있습니다. 대표적으로 history, location, match가 있는데 이들을 제외한 나머지는 사용방법이 동일하기 때문에 이전 글을 참조하시길 바랍니다. ※ 추가 → 해당 글은 react router v6 업그레이드 이전에 작성된 글입니다. 현재 최신 버전을 설치할 경우 다른 점이 존재할 수 있으니 변경점에 대해 확인이 필요하신 .. 2021. 8. 11.
[React] 함수형 컴포넌트 + 타입스크립트 환경에서 Redux 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 함수형 컴포넌트 + 타입 스크립트 환경에서 redux 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 redux가 무엇인지에 대해 궁금하신 분은 여기를 참고해주시면 됩니다. Redux 사용 방법 이번에 redux를 설정하여 최종적으로 확인해볼 것은 다음과 같습니다. store에 num값을 저장 파라미터 값만큼 num의 값을 증가시키는 액션 함수 정의 파라미터 값만큼 num의 값을 감소시키는 액션 함수 정의 증가와 감소 버튼을 누를 경우 num의 값이 실시간으로 변화되는 것을 확인 [ 1. 패키지 설치 ] $ npm install redux react-redux @types/react-redux redux-devtools-extension .. 2021. 8. 9.
[React] CRA 없이 타입스크립트 개발환경 구축하기 (webpack 구 버전 사용) 안녕하세요. J4J입니다. 이번 포스팅은 CRA 없이 타입 스크립트 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 [ 1. package.json 생성 ] $ npm init npm init을 입력하게 되면 다음과 같은 정보들을 추가적으로 입력해줘야 합니다. package name: (init_typescript) react_typescripot_init version: (1.0.0) description: react typescript init description entry point: (index.js) index.tsx test command: git repository: keywords: author: J4J license: (ISC) 괄호 같은 경우는 아.. 2021. 8. 9.
[React] 함수형 컴포넌트에서 Mobx 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 함수형 컴포넌트에서 mobx 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Mobx란? mobx는 react에서 상태 관리를 위해 사용되는 라이브러리입니다. react에서 제일 많이 사용되는 상태 관리는 redux라는 것이 있는데 상태 관리와 redux에 대한 개념이 필요하신 분들은 여기를 참고해주시면 됩니다. mobx의 공식문서를 참고해보면 mobx는 다음과 같은 구조로 되어 있다고 합니다. Actions → Observable State에 저장되어 있는 데이터들을 변화시키는 액션 함수 Observable State → 관찰되고 있는 데이터 값들이 저장되어 있는 장소 Compute Values → Observable State에 저장되어 있는 데이터가.. 2021. 7. 24.
728x90
반응형