본문 바로가기
728x90
반응형

전체 글416

[React] 타입 스크립트(TypeScript) 환경에서 Jest를 이용하여 테스트하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트(TypeScript) 환경에서 Jest를 이용하여 테스트하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 테스트 (1) - JS 작성하여 테스트 가장 먼저 테스트 파일에 JS를 작성하여 테스트를 진행해보겠습니다. [ 1. 패키지 설치 ] $ npm install -D jest @types/jest [ 2. package.json에 jest 추가 ] { "scripts": { "test": "jest", }, } [ 3. 테스트 파일 생성 ] /src/test 경로를 생성한 뒤 테스트를 위한 js.test.ts 파일을 다음과 같이 생성하겠습니다. 그리고 테스트 코드를 다음과 같이 작성하겠습니다. describe('js test', () => { i.. 2022. 3. 24.
[React] 타입 스크립트 환경에서 ESLint / Prettier 설정하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트 환경에서 ESLint / Prettier 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 설정하는 방법 React를 이용해 개발할 때 코드 점검과 포맷팅을 위해 ESLint와 Prettier를 사용합니다. 또한 이 두 개를 연동하여 코드를 점검함과 동시에 올바른 코드 상태가 아닐 경우 자동으로 포맷팅을 해줄 수 있습니다. 이번 글에서는 ESLint와 Prettier를 함께 사용할 수 있도록 환경 설정을 해보도록 하겠습니다. [ 1. Extension 설치 ] 대부분 VSCode를 이용해 개발하실 것으로 생각됩니다. VSCode에서 ESLint와 Prettier를 사용하기 위해서는 Extension 설치를 해줘야 합니다. 다음과 같이 2개의 .. 2022. 3. 21.
[Next] 정적 이미지 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 정적 이미지 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 정적 이미지 사용하는 방법 [ 1. public 폴더 생성 ] root 경로에 다음과 같이 public 폴더를 생성해줍니다. [ 2. images 폴더 생성 ] 만들어진 public 폴더 하위 경로에 다음과 같이 images 폴더를 생성해줍니다. 여기서 만들어지는 images 폴더는 파일 이름을 달리 네이밍해도 무방합니다. 그리고 만들어진 폴더 내부에 이미지를 넣어놨습니다. [ 3. 이미지 사용 파일 ] img태그의 src에서는 public 폴더 내부에 있는 경로를 /를 통해 접근할 수 있습니다. 그러므로 위와 같이 폴더를 생성해뒀다면 img태그의 src에 "/images/friends.png".. 2022. 3. 20.
[Next] 환경 변수(.env) 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 환경 변수 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. .env 파일 활용 Next에서 환경 변수를 사용하는 방법은 첫 번째로 .env 파일이 있습니다. React를 이용해서도 주로 사용하는 방식이 .env 파일이 있는데 Next도 동일한 방법으로 환경 변수를 사용해줄 수 있습니다. 사용 방법은 다음과 같습니다. [ 1. .env 파일 생성 ] root경로에 .env 파일을 다음과 같이 생성해줍니다. [ 2. 변수 작성 ] 그리고 .env 파일에 변수를 사용할 때는 변수 앞에 "NEXT_PUBLIC_"을 입력해줘야 합니다. 변수 앞에 해당 문자열이 포함되지 않을 경우 Next에서는 환경 변수 값인지를 인지하지 못하기 때문에 정상적으로 사용되지 않습니다.. 2022. 3. 19.
[Spring] STS 이전 버전 설치하기 안녕하세요. J4J입니다. 이번 포스팅은 STS 이전 버전 설치하는 방법에 대해 적어보는 시간을 가져보려고 합니다. STS 4.x버전 설치 방법 [ 1. STS 사이트 접속 ] https://spring.io/tools [ 2. PROJECT WIKI 접속 ] 사이트에 접속하고 70% 정도 스크롤을 하면 다음과 같이 PROJECT WIKI 버튼을 확인할 수 있습니다. [ 3. Previous Releases Eclipse 접속 ] PROEJCT WIKI를 클릭하면 github에 접속이 됩니다. 그리고 우측을 확인하면 Previous Release Eclipse라는 링크를 확인할 수 있습니다. [ 4. 이전 버전 리스트 확인 ] 링크를 클릭하면 다음과 같이 이전 버전 리스트들을 확인할 수 있고 원하는 버전.. 2022. 3. 17.
[React] useInfiniteQuery를 이용하여 Infinite Scroll (무한 스크롤) 구현 안녕하세요. J4J입니다. 이번 포스팅은 useInfiniteQuery를 이용하여 Infinite Scroll 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 useInfiniteQuery에 대한 개념을 모르시는 분들은 [React] React Query의 useInfiniteQuery에 대해 알아보기를 참고해주세요. Infinite Scroll 구현 방법 [React] 무한 스크롤(Infinite Scroll) 사용하기를 확인해보시면 Infinite Scroll에 대한 개념과 react query를 이용하지 않고 Infinite Scroll을 구현한 것을 확인할 수 있습니다. IntersectionObsever와 hook을 이용하여 구현을 했었는데 이번에는 useInfinite.. 2022. 3. 14.
[React] React Query의 useInfiniteQuery에 대해 알아보기 안녕하세요. J4J입니다. 이번 포스팅은 React Query의 useInfiniteQuery에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 react query의 기능 업데이트가 주기적으로 이루어졌고 최근 v5로 넘어오면서 여러 가지 변경점들이 발생되었습니다. 최근 변경점에 대해서도 확인하고 싶으신 분들은 아래 글들을 참고 부탁드립니다. [React] react-query v5 변경점 알아보기 (1) - 공통 기능 변경 [React] react-query v5 변경점 알아보기 (2) - query 공통 기능 변경 [React] react-query v5 변경점 알아보기 (4) - useInfiniteQuery 기능 변경 useInfiniteQuery란? useInfiniteQuery는 파라.. 2022. 3. 13.
[React] React Query의 useQueries에 대해 알아보기 안녕하세요. J4J입니다. 이번 포스팅은 React Query의 useQueries에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 react query의 기능 업데이트가 주기적으로 이루어졌고 최근 v5로 넘어오면서 여러 가지 변경점들이 발생되었습니다. 최근 변경점에 대해서도 확인하고 싶으신 분들은 아래 글들을 참고 부탁드립니다. [React] react-query v5 변경점 알아보기 (1) - 공통 기능 변경 [React] react-query v5 변경점 알아보기 (2) - query 공통 기능 변경 [React] react-query v5 변경점 알아보기 (3) - useQueries 기능 변경 useQueries란? useQueries는 React Query에서 useQuery의 동적.. 2022. 3. 11.
[React] React Query의 useMutation에 대해 알아보기 안녕하세요. J4J입니다. 이번 포스팅은 React Query의 useMutation에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 react query의 기능 업데이트가 주기적으로 이루어졌고 최근 v5로 넘어오면서 여러 가지 변경점들이 발생되었습니다. 최근 변경점에 대해서도 확인하고 싶으신 분들은 아래 글들을 참고 부탁드립니다. [React] react-query v5 변경점 알아보기 (1) - 공통 기능 변경 [React] react-query v5 변경점 알아보기 (5) - useMutation 기능 변경 useMutation란? useMutation은 React Query를 이용해 서버에 데이터 변경 작업을 요청할 때 사용합니다. ※ 데이터 조회를 할 때는 useQuery를 사용합니다.. 2022. 3. 9.
[React] React Query의 useQuery에 대해 알아보기 안녕하세요. J4J입니다. 이번 포스팅은 React Query의 useQuery에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 react query의 기능 업데이트가 주기적으로 이루어졌고 최근 v5로 넘어오면서 여러 가지 변경점들이 발생되었습니다. 최근 변경점에 대해서도 확인하고 싶으신 분들은 아래 글들을 참고 부탁드립니다. [React] react-query v5 변경점 알아보기 (1) - 공통 기능 변경 [React] react-query v5 변경점 알아보기 (2) - query 공통 기능 변경 useQuery란? useQuery는 React Query를 이용해 서버로부터 데이터를 조회해올 때 사용합니다. ※ 데이터 조회가 아닌 데이터 변경 작업을 할 때는 useMutation을 사용합.. 2022. 3. 8.
[React] React Query에 대한 소개와 사용 환경 설정 안녕하세요. J4J입니다. 이번 포스팅은 React Query에 대한 소개와 사용 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. React Query란? React Query는 서버 상태 (server state)를 가져오며 동시에 캐싱 처리, 동기화 처리, 업데이트 처리를 할 수 있도록 도와주는 라이브러리입니다. 조금 더 쉽게 표현하자면 서버에 API 요청, 즉 비동기 요청을 할 때 보다 편리한 작업들을 추가 제공해준다고도 말씀드릴 수 있습니다. React를 이용해 개발하다 보면 서버 상태를 관리하기 위한 여러 가지 작업들을 수행하게 됩니다. 개인적으로 가장 많이 처리했던 반복 작업은 서버에 API 요청을 보낼 때 API 요청이 처리되고 있는지에 대한 확인을 하는 로딩 중 처리가 있습니.. 2022. 3. 7.
[React] React Router v5와 v6 비교하기 안녕하세요. J4J입니다. 이번 포스팅은 React Router v5와 v6 비교하는 시간을 가져보려고 합니다. 들어가기에 앞서 주로 사용된다고 생각하는 부분들만 비교 정리를 했기 때문에 추가적으로 더 많은 것을 알고 싶으신 분들은 reactrouter 공식 문서를 참고해주시길 바랍니다. BrowserRouter 등록 [ v5 ] import * as React from 'react'; import ReactDom from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; ReactDom.render( , document.querySelector('#root') ); [ v6 ] import * a.. 2022. 3. 6.
[React] Webpack Production모드에서 Console 출력 방지 안녕하세요. J4J입니다. 이번 포스팅은 Webpack Production모드에서 Console 출력 방지하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Console 출력 방지 설정 방법 [ 1. 패키지 설치 ] $ npm install -d terser-webpack-plugin [ 2. webpack 설정 파일 수정 ] 저는 webpack 설정을 위해 webpack.config.js 파일을 사용합니다. 해당 파일에 출력 방지를 설정하기 위해 다음과 같이 추가하겠습니다. const TerserPlugin = require('terser-webpack-plugin'); module.exports = (env) => { const mode = env.mode || 'development'; retu.. 2022. 3. 4.
[Next] 구글 로그인 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 구글 로그인 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 다른 로그인도 구현해보고 싶은 분들은 다음 글들을 참고하시면 좋을 것 같습니다. [Next] 카카오 로그인 구현하기 [Next] 네이버 로그인 구현하기 구글 로그인 설정 [ 1. 구글 클라우드 플랫폼 사이트 로그인 ] Google Cloud Platform에 접속하여 로그인해주시면 됩니다. [ 2. 프로젝트 생성하기 ] 사이트에 접속을 했다면 상단 바에 프로젝트 선택이라는 메뉴가 존재합니다. "프로젝트 선택 → 새 프로젝트" 순서대로 클릭을 하면 다음과 같이 프로젝트 정보들을 입력하여 만들어줄 수 있습니다. [ 3. 애플리케이션 등록 ] 프로젝트를 생성 완료했으면 좌측 메뉴바에서.. 2022. 3. 2.
[Next] 네이버 로그인 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 네이버 로그인 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 동일한 방식의 다른 로그인도 구현해보고 싶은 분들은 다음 글들을 참고하시면 좋을 것 같습니다. [Next] 카카오 로그인 구현하기 [Next] 구글 로그인 구현하기 spring과 함께 로그인을 구현하는 방법에 대해 궁금하신 분들은 다음 글을 참고하시면 좋을 것 같습니다. [Next] Naver 로그인 Spring을 활용하여 구현하기 네이버 로그인 구현 방법 [ 1. 네이버 디펠로퍼 사이트 로그인 ] Naver Developers에 접속하여 로그인해주시면 됩니다. [ 2. 내 애플리케이션 등록하기 ] 상단 메뉴에서 "Application → 애플리케이션 등록" 을 다음과 같이 확.. 2022. 3. 1.
[Next] 카카오 로그인 구현하기 안녕하세요. J4J입니다. 이번 포스팅은 카카오 로그인 구현하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 동일한 방식의 다른 로그인도 구현해보고 싶은 분들은 다음 글들을 참고하시면 좋을 것 같습니다. [Next] 네이버 로그인 구현하기 [Next] 구글 로그인 구현하기 spring과 함께 로그인을 구현하는 방법에 대해 궁금하신 분들은 다음 글을 참고하시면 좋을 것 같습니다. [Next] Kakao 로그인 Spring을 활용하여 구현하기 카카오 로그인 구현 방법 [ 1. 카카오 디벨로퍼 사이트 로그인 ] Kakao Developers에 접속한 뒤 로그인을 해주시면 됩니다. [ 2. 내 애플리케이션 등록하기 ] 로그인을 하면 우측 상단에 내 애플리케이션이라는 메뉴가 보일 것입니다. 클.. 2022. 2. 27.
[React] StyledComponents와 Emotion을 비교해보기 (2) - css 안녕하세요. J4J입니다. 이번 포스팅은 StyledComponents와 Emotion을 비교해보는 시간에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 styled를 이용한 비교를 원하시는 분들은 다음 링크를 참고해주시길 바랍니다. [React] StyledComponents와 Emotion을 비교해보기 (1) - styled 이번에는 Emotion을 사용할 때 styled가 아닌 css를 사용하여 구현하는 테스트 코드를 작성해보며 StyledComponents와 비교해보는 시간을 가져보겠습니다. StyledComponents 개발 환경 세팅 [ 1. 패키지 설치 ] $ npm install styled-components styled-reset $ npm install -D @types/s.. 2022. 2. 26.
[React] StyledComponents와 Emotion을 비교해보기 (1) - styled 안녕하세요. J4J입니다. 이번 포스팅은 StyledComponents와 Emotion을 비교해보는 시간을 가져보려고 합니다. 들어가기에 앞서 css를 이용한 비교를 원하시는 분들은 다음 글을 참고해주시길 바랍니다. [React] StyledComponents와 Emotion을 비교해보기 (2) - css 최근 스타일을 꾸미기 위해 CSS-in-JS를 많이 사용하고는 합니다. 그중 가장 대표적으로 자리매김을 하고 있던 것이 StyledComponents입니다. 또한 최근에 새롭게 등장하여 점점 사용성이 높아지고 있는 Emotion이 존재합니다. 이들 모두를 한번에 사용하는 것은 혼란만 높이기 때문에 하나를 선택하는 것이 좋다고 생각하고 그렇기 때문에 동일한 상황을 만들어보며 두 기술을 비교해보겠습니다. .. 2022. 2. 21.
728x90
반응형

티스토리툴바