본문 바로가기

전체 글

(62)
create-react-app 으로 firebase setup create-react-app으로 설치한 후 리액트에서 환경변수를 사용할 때 REACT_APP 을 앞에 붙여서 사용하는 규칙이 있다. 왜 사용할까? REACT_APP으로 시작하는 환경변수를 찾도록 자동으로 설정이 되어 있다. 예) REACT_APP_API_KEY = s4adsad5Sa6da 환경변수를 사용할 때 process.env.REACT_APP_API_KEY 이런식으로 사용 가능하다. .gitignore에 .env를 포함하는 이유는 뭘까? create-react-app으로부터 빌드를 하고 react.js 코드를 받고 이것을 예전 JavaScript로 변환을 하고 이 과정을 거칠때 firebaseConfig 값이 노출이된다. 그래서 .env를 .gitignore에 추가한 이유가 보안에 대한게 아니다...
webpack에서 vite로 마이그레이션하기 GIS 기반 데이터를 가지고 있는 프로젝트여서 로컬에서 개발서버를 띄우면 느린 속도에 답답함을 느꼈습니다. 개발 생산성을 높이고자 기존에 사용중이였던 webpack에서 vite로 마이그레이션을 시도했습니다. Vite란? 기존 webpack, rollup, parcel과 같은 번들러입니다. 다른 툴과는 다르게 더 빠르게 server를 실행하고 *hot-module-replacement가 빠르다고 합니다. *HMR(Hot Module Replacement) 전체 페이지를 로드하지 않고 애플리케이션의 변경사항을 추적하여 수정된 부분만 로드한다. HMR API는 수동으로 구성할 필요없이 애플리케이션 설치 중에 자동으로 추가된다. 다른 툴보다 빠른 이유는? 브라우저가 ES Modules를 지원함에 따라 일반적인 ..
check box with FormData 기능 요구사항 1. 하나의 form tag를 만든다. 2. form tag 안에 좋아하는 음식과 관심사를 여러개 선택할 수 있는 체크 박스를 만든다. 3. form을 제출하면 (type이 submit인 버튼을 누르면) 좋아하는 음식과 관심사가 각각 최소 하나씩 선택되었는지 검사한다. 4. 검사를 무사히 통과했으면 현재 form이 최종적으로 어떤 데이터를 보내려는지 form UI 하단에 보여준다. 구현 See the Pen check-box-with-FormData by seorim (@avocado12) on CodePen. form이 전제척으로 어떤 데이터를 다루는지(갯수, 종류 등) 알아내기 위해 이 정보를 formMap 변수에 객체를 만들었다. 핸들러 내부에서 form이 가진 데이터를 확인하기위해서..
Creating a Simple CKEditor4 Plugin 기능 요구사항 1. 글상자 영역의 배경과 윤곽선 색상을 변경할 수 있다. 2. 글상자 영역의 윤곽선 두께를 변경할 수 있다. 플러그인 파일 먼저 CKEditor4 설치 후 plugins 디렉토리안에 bgstyle폴더를 생성한다. ckeditor root/ plugins/ bgstyle/ icons/ bgstyle.png dialogs/ bgstyle.js plugin.js 플러그인 소스 코드 CKEDITOR.plugins.add('bgstyle', { icons: 'bgstyle', init: function( editor ) { CKEDITOR.dialog.add('bgstyleDialog', this.path + 'dialogs/bgstyle.js') editor.addCommand('bgstyle'..
CKEditor4를 이용한 html 메타데이터 캔버스 구현 구현 방향 글상자안에서 작성이 끝나면 캔버스 이미지를 만들어서 썸네일 역할을 하려고한다. 구현 // Drawing DOM Objects into a canvas function draw(target) { if (target.attributes[2] || target.attributes[3]) target.setAttribute("width", 0) target.setAttribute("height", 0) const canvas = target; const dpr = window.devicePixelRatio; let ctx = canvas.getContext('2d'); if (!ctx) return const htmlMeta = CKEDITOR.instances.introduction.getData(..
한글 웹 폰트 경량화해보기 ttf/eot/woff/woff2 각각의 브라우저들은 모두 폰트파일 지원범위가 다르기 때문에 4종류가 있다. 용량은 ttf > eot > woff > woff2 으로 ttf가 가장 크고 woff2가 가장 작다. 폰트 형식에 따른 브라우저 지원 범위는 다음과 같다. https://products.aspose.app/font/ko/applications 무료로 글꼴 변환해주는 사이트이다.
Prefix Sums_Codility Write a function: class Solution { public int solution(int A, int B, int K); } that, given three integers A, B and K, returns the number of integers within the range [A..B] that are divisible by K, i.e.: { i : A ≤ i ≤ B, i mod K = 0 } For example, for A = 6, B = 11 and K = 2, your function should return 3, because there are three numbers divisible by 2 within the range [6..11], namely 6, 8 and 1..
Context menu 기능 요구사항 1. 목록을 클릭하면 해당 아이템에 대한 컨텍스트메뉴가 나타나고 메뉴를 선택하거나 그 외의 부분을 클릭하면 사라지는 팝오버 컴포넌트를 구현하기 2. 팝오버는 한 번에 하나만 보이기 구현 JavaScript, jQuery를 사용하여 상위노드인 wrapper에 리스너를 등록했다. 상위 노드에 리스너를 등록하면 이벤트 감시 대상이 적어 메모리에 부담을 주지 않는다. 새로운 아이템이 추가될 때마다 그에 대한 리스너를 등록하지 않아도 된다. 반면 함수 내부에 등장할 수 밖에 없는 조건문에 대한 최적화 필요하다. 개별 등록/해제 가능한 리스너에 비해 관리가 어려울 수 있다. 또 다른 방법은 HTML5의 details 태그를 활용하면 팝오버 오픈을 위한 처리를 자바스크립트가 관여하지 않아도 되므로 코드..