728x90 반응형 SPA148 [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. [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] Styled Components 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 Styled Components 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Styled Components 사용 방법 [ 1. 패키지 설치 ] $ npm install styled-components $ npm install -D babel-plugin-styled-components // typescript 사용할 경우 추가 $ npm install -D @types/styled-components [ 2. babel 설정 ] root경로에 .babelrc 파일을 생성하여 다음과 같은 설정을 해주시면 됩니다. { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", .. 2022. 1. 11. [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. [React] Polyfill을 이용하여 IE에서도 동작되게 하기 안녕하세요. J4J입니다. 이번 포스팅은 Polyfill을 이용하여 IE에서 동작되지 않는 서비스를 동작되도록 하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Polyfill이란? Polyfill은 IE와 같은 구형 브라우저에서 동작되지 않는 최신 기능을 동작할 수 있도록 도와주는 기술입니다. Babel에 대해 아시는 분이 계시다면 Babel이 있는데 Polyfill을 왜 사용하지? 라는 생각이 드실겁니다. Babel은 트랜스파일러로써 최신 ES버전에서 나온 여러 기능들을 구형 브라우저가 읽을 수 있는 문법으로 변경시켜주는 역할을 담당합니다. 하지만 여기서 문제는 이전에 없던 기능들이 새로나온 경우입니다. 대표적인 케이스가 ES6에서 등장한 Promise, Map, Set 등이 있습니다. 해당 기술.. 2022. 1. 4. [React] Vendor Prefix (공급업체 접두사) 설정 안녕하세요. J4J입니다. 이번 포스팅은 공급업체 접두사 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Vendor Prefix (공급업체 접두사) 설정 방법 들어가기에 앞서 webpack과 관련된 패키지들은 최신 버전으로 설치해야 정상적으로 동작됩니다. 제가 설정하는 환경은 webpack 관련 패키지들이 다음과 같기 때문에 참고하시길 바랍니다. { "devDependencies": { "html-webpack-plugin": "^5.5.0", "webpack": "^5.65.0", "webpack-cli": "^4.9.1", "webpack-dev-server": "^4.7.2" } } [ 1. 패키지 설치 ] $ npm install -D postcss autoprefixer postcss.. 2022. 1. 2. [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] GraphQL에서 Fragment 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 GraphQL에서 Fragment 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Fragment란? Fragment는 여러 query에서 사용되는 필드들을 재사용할 수 있도록 도와줍니다. query를 작성하다 보면 중복적으로 사용되는 필드들이 존재하기 마련인데 중복되는 필드들을 각각 다 작성하는 것이 아니라 Fragment를 활용하여 중복을 줄이고 코드를 간결하게 만들어 줄 수 있습니다. Fragment와 관련된 간단한 코드를 작성해보도록 하겠습니다. Fragment 사용 예시 관련된 코드는 이전에 작성한 글을 기반으로 추가 변경해보도록 하겠습니다. 또한 해당 글의 스키마는 다음과 같이 구성되어 있습니다. # This directive allows re.. 2021. 12. 27. [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] 무한 스크롤(Infinite Scroll) 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 무한 스크롤(Infinite Scroll)을 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Infinite Scroll이란? Infinite Scroll은 화면에서 페이징 기법을 적용하기 위해 사용하는 방법 중 하나로 모든 데이터를 조회할 때까지 무한정 스크롤하는 기법을 의미합니다. Infinite Scroll과 비교되는 가장 대표적인 것은 페이지네이션이 있습니다. 페이지네이션은 우리가 정말 친근하게 많이 보던 화면으로 게시판 같은 곳에 접속을 하게 되면 하단에 페이지 번호가 존재하는 페이징 기법입니다. 하지만 Infinite Scroll은 페이지네이션과 달리 페이지 번호가 따로 존재하지 않고 페이지네이션에서 다음 번호를 클릭해야 되는 동작을 단순히 계.. 2021. 12. 19. [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. 이전 1 ··· 3 4 5 6 7 8 9 다음 728x90 반응형
