728x90 반응형 React27 npm install vs npm ci: CI 환경에서 package-lock의 진짜 역할 안녕하세요. J4J입니다. 이번 포스팅은 npm install과 npm ci의 비교, package-lock의 역할에 대해 적어보는 시간을 가져보려고 합니다. npm install과 package.json node 기반의 프로젝트를 개발하는 곳에서 많이 입력하는 명령어 중 하나는 npm install입니다. 많은 사람들이 아는 것처럼 npm install은 새로운 패키지를 설치할 때 사용되기도 하고, 새로운 프로젝트를 내려받은 뒤 의존되어 있는 모듈들을 node_modules에 구성하기 위해 사용되기도 합니다. 그래서 어느 상황이든 의존되어 있는 모듈들을 설치해야 한다고 할 때 npm install 만을 사용하는 실수를 범할 수 있습니다. 의존성을 현명하게 설치하기 위해서는 npm install의.. 2026. 2. 19. 모노레포를 위한 Turborepo 기초 가이드 안녕하세요. J4J입니다. 이번 포스팅은 모노레포를 위한 turborepo 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 모노레포란 ? 모노레포는 하나의 저장소에 애플리케이션 서비스, 라이브러리 패키지 등을 서로 구분하지 않고 여러 개의 프로젝트를 함께 관리하는 방식을 말합니다. 보통 저장소를 관리할 때 가장 많이 접하는 구조는 멀티레포가 될 것입니다. 멀티레포는 1개의 프로젝트마다 1개의 저장소를 소유하고 있는 것으로, 말 그대로 서로 독립적인 방식으로 관리되며 각자의 프로젝트에 관여하지 않는 구조를 말합니다. 간단하게 예시를 들면 멀티레포는 다음과 같은 구조가 나올 수 있습니다. // design-system repo- design-system// application service.. 2026. 1. 27. Tailwind로 만드는 React 컴포넌트 라이브러리 배포 가이드, tsup + tsc 활용 안녕하세요. J4J입니다. 이번 포스팅은 tailwind로 react 컴포넌트 라이브러리 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 npm 패키지 배포, 처음부터 자동화까지 한 번에 정리 npm 패키지 배포, 처음부터 자동화까지 한 번에 정리안녕하세요. J4J입니다. 이번 포스팅은 npm 패키지 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. NPM 패키지 배포 npm 패키지 배포라고 하는 것은 한 번 만들어진 javascript 기반의 라이jforj.tistory.com React Typescript 컴포넌트 라이브러리 배포 가이드, tsup + tsc 활용 React Typescript 컴포넌트 라이브러리 배포 가이드, tsup + tsc 활용안녕하세요. J4J입니.. 2026. 1. 23. React Typescript 컴포넌트 라이브러리 배포 가이드, tsup + tsc 활용 안녕하세요. J4J입니다. 이번 포스팅은 react typescript 컴포넌트 라이브러리 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] Vite 사용하기 [React] Vite 사용하기안녕하세요. J4J입니다. 이번 포스팅은 vite 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Vite란? vite는 webpack, rollup 등과 같이 모듈 번들링을 수행할 때 사용되는 번들러 중 하나입니jforj.tistory.com npm 패키지 배포, 처음부터 자동화까지 한 번에 정리 npm 패키지 배포, 처음부터 자동화까지 한 번에 정리안녕하세요. J4J입니다. 이번 포스팅은 npm 패키지 배포하는 방법에 대해 적어보는 시간을 가져보려고 합니다. NPM 패키지.. 2026. 1. 10. [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. 이전 1 2 다음 728x90 반응형
