반응형 Tips/Front end7 [Typescript] Object를 URL 파라미터로 변환하기 Object를 URL 파라미터로 변환하기 아래와 같은 검색용 Interface를 만들었다고 가정하자. interface RoadmapSearch { client?: number; title?: string; official?: boolean; order?: TRoadmapOrder; page: number; } URLSearchParams를 사용하면 RoadmapSearch 타입의 Object를 URL 파라미터 문자열로 바꿀 수 있다. const query: RoadmapSearch = { client: 1, title: test, official: true, order: RoadmapOrder.LATEST, page: 1, }; const param = new URLSearchParams(query);.. 2022. 12. 22. [NPM] npm build 이후 serve 시 PSSecurityException 뜰 때 npm build 이후 serve 시 PSSecurityException 뜰 때 NodeJS 환경에서 프로젝트를 빌드하면 serve -s build로 배포할 수 있다는 안내가 나오는데, 이 명령어를 따라 치면 아래와 같은 에러를 볼 수 있다. PS D:\workspace\Projects\OpenRoadmaps\frontend> serve -s build serve : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\AJW\AppData\Roaming\npm\serve.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + ser.. 2022. 12. 2. [ESLint] Delete`CR` 에러 폭탄 해결하기 (End of Line 일괄 변경, 기본값 설정하기) Intro 멀쩡하던 프로젝트에 ESLint를 적용해봤더니 아래와 같이 에러 폭탄을 맞았다. 그냥 LF 에러를 안뜨게 할까 싶었지만, git add 할 때 뜨는 CRLF Warning도 없앨 수 있고, 파일 용량도 줄어들기에 수정하는것이 좋을 것 같아 찾아본 해결방법을 정리해보도록 하겠다. 현재 프로젝트 파일들의 End of Line 변경 물론 파일을 일일이 선택하고 LF로 변경해줘도 되긴 하지만, 프로젝트 초반이라 파일이 얼마 없을 때나 가능한 일이다. 몇십개나 되는 파일을 어느 세월에 다 바꿔주고 있을까. 아래의 git 명령어를 통해 git에서 관리하는 모든 파일들의 EoL을 일괄 변경할 수 있다. git config core.autocrlf input git rm --cached -r . # 명령 실.. 2022. 10. 30. [Front-End] Prettier 단축키 보호되어 있는 글 입니다. 2022. 1. 27. [CSS] 애니메이션이 떨릴 때 (will-changed) CSS 애니메이션이 떨릴 때 CSS에서 애니메이션을 적용시켰을 때 적용시킨 개체가 떨리는 경우가 가끔 있습니다. 주로 조그마한 개체에 애니메이션을 주었을 때 떨림 현상이 발생하는데, 이때 will-change에 애니메이션에서 변경하는 속성을 주어 실제 요소가 변화되기 전에 브라우저가 애니메이션을 최적화할 수 있게 해 주면 이런 떨림 현상을 방지할 수 있습니다. Ex) @keyframes heartBeat { 0% { transform: none; } 50% { transform: scale(1.2); } 100% { transform: none; } } h1 { animation: heartBeat 0.5s ease-in-out infinite; will-change: transform; } 실험 HTM.. 2022. 1. 12. [Javascript] 밤하늘의 별 이펙트 만들기 Intro 어느 날 포트폴리오 웹페이지를 만들다 문득 별이 빛나는 듯한 이펙트를 추가하고 싶다는 생각이 들었습니다. 그래서 인터넷을 찾아보다 좋은 튜토리얼을 발견하여 조금 수정해서 적용해봤습니다. 적용 후 결과가 상당히 마음에 들어서 이번 시간엔 밤하늘의 별 이펙트 를 추가하는 방법에 대해 포스팅하도록 하겠습니다. 코드는 아래의 링크를 참고하여 작성했습니다. http://timothypoon.com/blog/2011/01/19/html5-canvas-particle-animation/ HTML5 Canvas Particle Animation Learn how to make a beautiful HTML5 canvas particle animation system of glowing stars and a .. 2021. 6. 4. [HTML] Lottie Web Player를 사용하여 움직이는 이미지 출력 Intro 웹사이트를 개발하다 보면 이미지를 추가해야 할 일이 정말 많습니다. 하지만 막상 이미지를 추가하면 뭔가 허전하고, 이미지가 움직였으면 좋겠다 라는 생각이 들 때가 있습니다. 이럴 땐 Lottie Web Player를 사용하여 손쉽게 움직이는 이미지를 추가할 수 있습니다. 이번 시간엔 Lottie Web Player를 사용하는 방법에 대해 포스팅 하도록 하겠습니다. Lottie란? - 하단의 페이지를 참고하여 작성하였습니다. - https://lottiefiles.com/what-is-lottie What is a Lottie animation? - LottieFiles A Lottie is a JSON-based animation file format that enables designers .. 2021. 6. 2. 이전 1 다음 반응형
