본문 바로가기
[Github] Github Pages 이용하여 홈페이지 배포 ++ 단순하게 해당 레파지토리 깃허브 페이지에서 Github Page를 띄울 수 있다. 1. 해당 repository 페이지의 settings 탭으로 이동 > Branch 영역에 최초엔 None으로 셀렉 되어있는 것을 원하는 브랜치 명으로 바꾸고 측면 Save 버튼을 눌러 저장한다. 2. 그후 상단에 "GitHub Pages source saved."라는 문구가 뜨고, 3. 몇 분정도 기다리다가 새로고침을 하면 아래처럼 View site 버튼이 활성화 된다. 클릭해보면 Github Page가 퍼블리싱 된 것을 확인할 수 있다.
[React.js] style-component와 framer-motion 컴포넌트화 하기 페이지별 공통으로 사용하는 스크립트나 scss는 import를 시키면 코드를 효율적으로 줄일 수 있다. 이처럼 style-comonponent와 framer-motion 또한 공통 파일로 꾸려서 import 하면 효과적으로 코드를 작성할 수 있다. 예를 들어 270줄이였던 한 페이지를 94줄로 줄였었다. 방법은 간단하다.1. src 폴더 안에 js/styled.js 라는 임의의 js 파일을 생성2. 공통으로 사용하는 스타일 컴포넌트와 프레이머 모션을 다 가져와서 styled.js에 저장한다. 그후 사용하려는 페이지에 import 시킨다.  주의할 점은 styled.js 파일 안에 const 변수를 꼭 export 시켜야 외부에서도 사용이 가능하다. [src/js/styled.js]import styled..
[React.js] Cannot find module 'sass' node-sass 버전과 node 버전 맞추기 맥북으로 프로젝트를 개발할때 node-sass 버전에는 아무런 문제가 없었는데,윈도우로 프로젝트를 pull 하고, node-sass를 설치했을때 아래와 같은 에러가 발생하였다.npm ERR! gyp ERR! node -v v20.9.0 검색하여 찾아보니 현재 설치된 node버전이 지원하는 node-sass 버전이 아니여서 발생하는 문제였다.https://stackoverflow.com/questions/70281346/node-js-sass-version-7-0-0-is-incompatible-with-4-0-0-5-0-0-6-0-0  Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0I used Node.js v16.13..
[React.js] Cannot find module 'img/full.mp4' or its corresponding type declarations. : React.js video 사용하기 로컬 안에 있는 이미지를 import 하는 것처럼 mp4도 import하여 사용하려고 했으나 빨간 색으로 밑줄이 보였다. mp4를 사용하기 위해선 React.js에서 몇가지 설정이 필요하다. 1. 아래의 npm 명령을 이용하여 url-loader 설치npm i -D file-loader url-loader 2. src 폴더 내부에 @types/videos.d.ts 파일 생성 및 설정@types/videos.d.tsdeclare module '*.mp4'; 다시 img를 import 하는 것처럼 시도하면 빨간 줄이 안보이는 것을 확인 할 수 있다.아래와 같이 최종으로 mp4를 muted, autoplay, loop 옵션을 주어 코드를 짜보았다.import fullMp4 from 'img/full.mp4';..
[VScode] react styled component 색상 구별 React.js 로 개발을 하다보면 스타일을 입힐때 styled component 사용시 에디터 안에서 색상 구별이 되지 않아 불편함이 있다.이 떄 VScode Plugin "vscode-styled-components" 하나로 해결된다. 색상 뿐만 아니라 자동완성 기능까지 함께 추가된다!
[VScode] Next.js에서 Tailwind 사용시 주황색 에러 밑줄 제거 하기 next.js 프레임워크나 react.js 라이브러리를 사용하여 작업할 때 tailwind와 함께 사용을 선택했다면 아래 tailwind를 연결시 주황색 구불구불 밑줄을 발견한다. 그럴땐 VScode 플러그인 중에 PostCSS Language Support 를 설치하면 바로 주황 밑줄이 안 보일것이다.  심각한 오류는 아니나 작업 내내 보일 주황밑줄이라면 코드를 작성하면서 계속 거슬릴 것 같아서 이런 요소들은 시간을 내서 제거해 주는것이 한결 마음 편하게 작업할 수 있다. 여담으로 Next.js 를 지금 살펴보고 있는데 React.js를 베이스를 한 프레임워크라 그런지 익숙하면서도 재밌다.리액트 하나만으로는 CSR이라 보안에 상당히 취약한 것을 포트폴리오 작업 내내 피부를 느꼈었는데 SSG, SSR, ..
[Javascript] IOS 대응을 위한 webm <-> mp4 변환 스크립트 HTML// 비디오 디폴트 값은 webm이여야함. Javascriptvar utils = {checkOS: (os) => {return new RegExp(os, 'i').test(navigator.userAgent);},};$(function () {// 페이지 로드시 실행adjustVideoSources();// 비디오 태그 재생const videoElements = document.querySelectorAll('video');videoElements.forEach((videoElement) => {if (videoElement.paused) {videoElement.play();}});});// 아이폰,아이패드, 매킨토시로 접속 시 HTML안에 모든 비디오 태그 확장자 mp4 로 변경functio..
[VSCode] minimap에서 현재 위치 알리는 주석 만들기 VSCode 플러그인 중 주석을 기깔나게 만들어주는 Convert To ASCII Art 를 소개한다. 예시로는 그럼 미니 맵에서 이렇게 보인다. https://marketplace.visualstudio.com/items?itemName=BitBelt.converttoasciiart Convert To ASCII Art - Visual Studio MarketplaceExtension for Visual Studio Code - Utility extension to convert text to ASCII art.marketplace.visualstudio.com 설정1. VSCode ctrl + alt + P > settings(json) 선택2. "convertToAsciiArt.favoriteF..

티스토리툴바