blackbearwow blackbearwow

- react에 tailwindcss적용하기더보기1. 프로젝트 생성2. tailwindcss vite버전 설치npm install tailwindcss @tailwindcss/vite3. vite.config.ts에 플러그인 추가import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})4. css파일(index.css나 App.css) 에 tailwindcss 가져오기@import "tailwindcss";5. cdn이나 빌드된 css파일 html로 첨부하기6. 자동완성기능은 vscode에 Tailwind C..

고민더보기css는 자유도가 너무 높다. 내가 원하는 대로 디자인이 가능한 것이다. 하지만 내가 디자인을 정하고 css코드를 치려고 하면 굉장히 어렵다. 내가 디자인을 정하는 것 부터가 문제이다.어떻게 디자인을 해야 접근성이 좋을지, 글자가 너무 크지도 않고 작지도 않을지, 모바일에서와 pc에서 사용경험이 다를지, 사용자 경험이 직관적일지, 일관성 있는 색상 요소들... 너무나 많은 생각을 해 시작부터 난관에 빠지는 것이다. 게다가 내가 생각한 디자인을 css코드로 만들 수 있는 디자인인지조차 생각해보면서 하면, 디자인을 하려고 시작할 때부터 스트레스를 엄청 받는 것이다. 아무 것도 모를 때 알면 좋은 것들더보기디자인 도구 활용(Figma 등): css코드로 구현할 수 있을지는 생각하지 말고 일단 시각화에..

- 사용 이유와 장점더보기대규모 프로젝트에서 사용할 때 좋다. 대규모 프로젝트에서의 장점은 수만줄의 코드를 수십명의 개발자가 함께 관리할 수 있는 구조이다. ui를 컴포넌트 단위로 개발해서 재사용성이 좋고 작업 영역이 분리되어 유지보수하기 쉽다. 규모가 커질수록 상태가 복잡해져 코드가 꼬이기 쉬운데, 상태에 따른 결과만 정의한다. 단순히 정보를 보여주는 페이지를 만드는데는 react가 불필요하다. 유지보수와 확장성을 생각한다면 괜찮은 선택이다.- 설치, 빌드더보기nodejs가 설치되어있지 않다면 설치한다.- vite버전(React 18버전이상부터 추천되는 방식)npm create vite@latest를 입력하고 프로젝트 이름을 정하고 react를 선택하면 된다.미리보기는 npm run dev를 하면 된다..

난독화는 프로그래밍 언어로 작성된 코드에 대해 읽기 어렵게 만드는 작업이다.온라인 js 난독화 사이트: https://obfuscator.io/1. 설치npm으로 설치npm install --save-dev javascript-obfuscatorCDN으로 불러오기2. 사용법const jsObfuscator = require('javascript-obfuscator');let obfuscationResult = jsObfuscator.obfuscate( `let i=0; for(;iobfuscate(sourceCode, options)다음 메소드를 가진 obfuscationResult객체를 반환한다.getObfuscatedCode() - 난독화된 코드를 string형태로 반환한다.메소드는 두 파..

HTML video 태그 플레이어를 꾸미는 프레임워크이다.1. CDN으로 설치 태그에 link를 삽입하고 태그가 끝나기 전에 script를 삽입한다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스2. 옵션data-setup='{}'에 다양한 옵션을 전달할 수 있다(반드시 작은 따옴표로 감싸준다). 각 옵션의 key는 반드시 큰따옴표(")로 감싸주어야 한다. 또한 js로 조종할 때, 사용되기도 한다.이름값설명autoplayboolean(true, false)자동으로 동영상이 재생될지말지controlsboolean유저가 상호작용할 수 있는 컨트롤을 플레이어가 가질지 말지heightstring|number비디오 플레이어 높이를 pixel단위..

css 문법Selector 중괄호 안에 Property:Value로 이루어져 있다. CSS selectorsSelector예시예시 설명.class.introclass="intro"인 모든 요소를 선택한다..class1.class2.name1.name2name1과 name2가 둘다 class속성에 있는 모든 요소를 선택한다..class1 .class2.name1 .name2name1을 class로 가진 요소의 자식으로 name2를 class로 가진 모든 요소들을 선택한다.#id#firstnameid="firstname"인 요소를 선택한다.**모든 요소를 선택한다.elementp모든 요소를 선택한다.element.classp.introclass="intro"인 요소를 모두 선택한다.element,elem..

1. localStorage브라우저에 따라서 10~20MB까지의 데이터를 저장할 수 있다.localStorage는 key-value형식으로 key와 value모두 UTF-16 문자열인 (탭을 닫아도 유지되는)영구적인 저장장치이다.localStorage는 유저가 브라우저에서 영구적인 데이터 저장을 막는 등 보안 설정에 위배되면 에러를 반환한다.domain이 다르면 데이터에 접근할 수 없다.메소드설명localStorage.setItem("myCat", "Tom");현재 도메인의 지역 저장 장치에 데이터 추가const cat = localStorage.getItem("myCat");해당 데이터 얻기localStorage.removeItem("myCat");해당 데이터 삭제localStorage.clear();..

canvas를 이용해 웹 게임을 만들다 보면, 해당 게임이 몇 프레임으로 화면에 주사되고있는지 궁금해진다.60fps모니터면 60fps를, 144fps 모니터면 144fps를 주사하여 부드러운 화면 주사율을 내보내고 싶다. 하지만 항상 canvas를 사용해 웹 게임을 만들 때마다 이상하게 60fps, 144fps에 못미치는 프레임인 것 같았다. 막연하게 뭔가 렉걸리는 듯하다는 느낌만 받았었지만, 측정 방법도 모르고 그냥 그려려니 했다. 그치만 sparebeat라는 웹 리듬게임을 해보니 굉장히 스무스하게 화면이 주사되는것이었다! 내가 만든 리듬게임은 뚝뚝 끊기는 느낌인데... 느낌으로 판단하지 말고 이제 정확한 측정방법을 통해 몇 프레임인지 알아내고, 어떻게 해야 프레임을 보장할 수 있는지 알아보자. 프레임..