프로그래밍 잡동사니

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..

Next.js + TypeScript + styled-components 환경에서 위와 같은 텍스트 슬라이드업 캐러셀을 구현해보자! [components/Home/HomeAnimation.tsx] import { useState, useEffect, useRef } from 'react'; import { ... CarouselContainer, CarouselRotator, CarouselRotatorItem, } from './HomeAnimation.styled'; export default function HomeAnimation() { const [count, setCount] = useState(0); const intervalRef: { current: NodeJS.Timeout | null..

react-animated-cursor🔽 GitHub - stephenscaff/react-animated-cursor: An animated custom cursor React component. An animated custom cursor React component. Contribute to stephenscaff/react-animated-cursor development by creating an account on GitHub. github.com 사용 예시🔽 Animated Custon Cursor - React stephenscaff.github.io Next.js + TypeScript 환경에서 react-animated-cursor 라이브러리로 커서 디자인을 적용해보자! npm i r..

다음과 같은 .svg 파일을.. [assets/github.svg] React에서 하던 것처럼 import해 Next.js에서 컴포넌트로 사용하려고 하면.. 아래 패키지를 설치해주자 npm i -D @svgr/webpack next.config.js를 수정해준다 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, webpack: (config) => { config.module.rules.push({ test: /\.svg$/i, issuer: /\.[jt]sx?$/, use: ['@svgr/webpack'], }); return config; }, }; module.exports = nextConfig;..

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..

ESLint & Prettier🔽 Next.js 초기세팅 - eslint, prettier, typescript(tsconfig) - 짜구's WIKI 프로젝트 생성 2. eslint, prettier 라이브러리 설치(vscode extension 설치와 settings.json 설정은 필수) 3. eslint 설정 예시 (.eslintrc) 3. prettier 설정 예시 (.prettierrc) wiki.jjagu.com 터미널에 다음 항목들을 설치하고, 위 글을 참고해 ESLint와 Prettier 설정을 해준다 npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react esli..

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/..

Catch All catch-all url을 사용한다면 url로 데이터를 전달할 때 생겼던 문제들을 해결할 수 있다 [id].js의 파일 명을 [...params].js로 변경해준다 [pages/movies/index.js] onClick={() => router.push( `/movies/${movie.original_title}/${movie.poster_path}/${movie.id}` ) } 'movies/제목/포스터/아이디' 이런 식으로 다 url로 보내고 router를 콘솔로 찍어보면.. [pages/movies/[params].js] import Seo from "../../components/Seo"; import { useRouter } from "next/router"; export d..

Dynamic Routes '/movies/all' 이라는 url을 만들고 싶다면? 그냥 '/movies' 라는 url을 만들고 싶다면? * pages 폴더에 movies.js 파일을 생성해도 되지만 하위 url이 있을 경우 이게 더 깔끔 '/movies/123' 이런 식으로 url에 변수를 넣고 싶다면? [pages/movies/[id].js] import { useRouter } from "next/router"; export default function Detail() { const router = useRouter(); console.log(router); return detail; } 이렇게 작성하고 콘솔에 찍힌 router를 살펴보면.. router의 query가 변수명: "url에 입력한 ..