프로그래밍 잡동사니

보호되어 있는 글입니다.

카카오 소셜 로그인은 구현이 어렵지 않고 친숙한 소셜 로그인 중 하나이다. 최근 자체 회원가입 없이 소셜 로그인 만을 제공하는 서비스가 늘어나고 있으며 사용자 입장에서도 부담 없이 서비스를 이용할 수 있어 간단한 서비스는 대부분 소셜 로그인을 채택하는 추세이다 그 중에서도 가장 보편적인 React + REST API 환경에서 로컬스토리지와 JWT 토큰을 활용해 카카오 소셜 로그인을 구현한 경험을 블로그에 남겨보도록 하겠다 우선 kakao developers 사이트에서 몇 가지 설정을 해준 후 클라이언트단에서 인가 코드를 추출해 서버로 전달해줘야 한다. 해당 과정까지의 설명은 카카오 공식 문서와 아래 글에 상세하게 정리되어 있다 [React] 카카오 로그인 구현하기 - REST API🔽 [React] 카카..

Vite 환경에서 바로 SVG 파일을 ReactComponent로 사용하려 한다면 오류가 발생할 것이다 vite-plugin-svgr 패키지를 사용하면 된다🔽 vite-plugin-svgr Vite plugin to transform SVGs into React components. Latest version: 2.2.1, last published: 3 months ago. Start using vite-plugin-svgr in your project by running `npm i vite-plugin-svgr`. There are 35 other projects in the npm registry using vite-plugin-sv www.npmjs.com 터미널로 패키지를 설치해주자 yarn ..

1. 아래 글을 베이스로 초기 세팅을 진행해준다 [2021.03.28 수정] React + Typescript 기반의 Electron 윈도우 어플리케이션 만들기 안녕하세요! 최근까지도 포스트를 많이 봐주셔서 내용 중에 사용된 모듈 중 deprecated 된 내용이 있어 변경이 되었습니다. mainWindowUrl 에서 사용되던 url.format() 대신 url.pathToFileURL()을 대신 사용하라 dev-bolam.tistory.com 2. 다음 명령어를 입력했을 때, tsc 컴파일 과정에서 에러가 발생해도 electron.js 파일이 생성된다면 상관없다 ! npm run compile-main 3. 다음 명령어로 localhost 및 Electron을 실행해준다 npm run dev * loc..

react-animation-on-scroll 라이브러리를 활용해 React에서 간단한 스크롤 애니메이션을 구현해볼 것이다 GitHub - MetinArslanturk/react-animation-on-scroll: A react library to animate elements on scroll. It has integration with anima A react library to animate elements on scroll. It has integration with animate.css. Supports typescript and server side rendering - GitHub - MetinArslanturk/react-animation-on-scroll: A react libra.....

Comment를 마크다운으로 작성해 GitHub Issues로 저장할 수 있는 utterances 플러그인을 React에서 사용해보자 1. Comment를 저장할 repository를 생성하고 아래 링크에서 utterances를 연동해준다 GitHub: Where the world builds software GitHub is where over 73 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat... github.com 2. 생성한 repos..

1. 아래 글을 베이스로 초기 세팅을 진행해준다 [React] create-react-app & Typescript 초기 세팅 완벽 정리 최근에 타입스크립트를 배우고 타입스크립트로 create-react-app을 설정하는데 시간이 많이 걸렸다..그리고 새로 프로젝트를 시작할 때 초기세팅을 완벽하게 하자! 라고 생각을 해서 협업을 할 때 velog.io 2. EsLint와 Prettier 파일을 다음과 같이 수정해준다 [.eslintrc.js] module.exports = { parser: "@typescript-eslint/parser", plugins: ["@typescript-eslint", "prettier"], extends: [ "airbnb", "prettier", "plugin:react/..

Gatsby 템플릿을 활용해 빠르게 React 기반 정적 웹사이트를 만들고 배포해보자! * 템플릿에 따라 설치 및 실행 방식이 조금씩 다를 수 있다 마음에 드는 무료 Gatsby 템플릿의 GitHub 저장소를 찾아준다🔽 EASEOUT Coding tutorials about CSS, HTML, JavaScript, and articles about design creativity & modern web development technology. www.easeout.co 다음 명령어들을 차례대로 입력해 디렉토리를 생성하고, GitHub에 연동해준다 npm install -g gatsby-cli gatsby new (디렉토리 이름) (템플릿 GitHub 저장소 주소) # gatsby new my-app h..

웹에서 Progress Bar를 구현하는 방식은 아주 다양하다 순수 HTML / HTML5의 progress 태그 / SVG / 외부 라이브러리 등.. 이 중에 커스텀 제약이 없고 React에서 값 조절이 용이한 HTML5의 progress 태그를 사용해보자! 다양한 Progress Bar 예제🔽 progressbar by html, html5, svg ... codepen.io 위 예제에서 볼 수 있듯 태그에 JavaScript 함수로 애니메이션을 구현할 수 있다 [Compose.js] const [progress, setProgress] = useState(0); const Progress = () => { return ( ); }; 레이아웃을 만들고 진행률을 나타낼 progress를 선언해준다 [C..

특정 조건에서 잠깐 나타났다가 사라지는 토스트 메시지를 React로 구현해보자 [ToastMessage.js] import './ToastMessage.css'; export const ToastMessage = (props) => { return ( {props.text} ); }; [ToastMessage.css] .toast_container { position: fixed; z-index: 99; top: 75%; left: 50%; transform: translate(-50%, -50%); width: 24rem; height: 2.625rem; border-radius: 10px; box-shadow: 0 0 15px 0 var(--black-40); background-color: #323..