분류 전체보기 19건
비트나미 캐시 비활성화
비트나미 캐시 비활성화 docs.bitnami.com/aws/apps/orocrm/administration/use-pagespeed/ Use PageSpeed with Apache docs.bitnami.com 비트나미는 캐싱이 기본적으로 활성화되어서 개발중 수정사항을 확인하기 불편하다. 위의 문서는 비트나미 캐시를 비활성화하는 방법이다.
유튜브 데이터 API (YouTube Data API) 시작하기
이 글에서는 유튜브 데이터 API에 대해 알아봅니다. (YouTube Data API) 자세한 내용은 아래 유튜브 API 공식 문서를 참고하세요. 시작하기 | YouTube Data API | Google Developers 소개 이 문서는 YouTube와 상호작용할 수 있는 애플리케이션을 개발하려는 개발자를 위해 작성되었습니다. 여기에서는 YouTube 및 API의 기본 개념에 대해 설명합니다. 또한 API가 지원하는 다양한 기 developers.google.com 준비물 1. 구글 계정 API키를 요청하기 위한 구글 계정을 준비합니다. (없다면 무료로 가입합니다) 2. 애플리케이션 등록하기 구글 콘솔에 새 프로젝트를 등록하고 YouTube Data API키를 발급 받습니다. Google Cloud ..
자바스크립트 number format (숫자에 콤마, 찍기) 함수
자바스크립트에서 정규식을 이용하여 숫자에 천 단위마다 콤마(,)를 찍는 함수입니다. 파이썬의 경우 내장 함수인 format 등을 쓰면 간단하지만 자바스크립트에는 그런 함수가 없으므로 직접 함수를 만들어서 넣어야 합니다. 자바스크립트 숫자에 콤마, 찍기 function numberWithCommas(x) { if(!x) return 0; return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }
구글 블록클리(Google Blockly)에 대해 알아보자
교육용 프로그래밍 언어로 대표적인 것이 스크래치나 엔트리 등의 블록 코딩이 있습니다. 블록 코딩은 블록을 레고를 조립하듯이 코드를 짜는 방식을 뜻하며, 특정 프로그래밍 언어를 몰라도 직관적으로 프로그램을 만들 수 있습니다. Blockly란? 구글 블록클리(Google Blockly)는 블록 코딩을 위한 에디터를 만들 수 있도록 도와주는 자바스크립트 라이브러리입니다. 유명한 구글 앱 인벤터(App Inventor)나 Code.org(코드오알지) 사이트에서도 구글 블록클리를 활용한 곳들입니다. 구글 블록클리에서는 코당에서 자주 사용하는 블록들을 제공하며, 이렇게 제공된 블록은 JavaScript, Python, PHP, Dart 등의 프로그래밍 언어로 변환될 수 있습니다. 또한 응용을 한다면 새로운 커스텀 ..
[Material UI] It looks like there are several instances of `@material-ui/styles` initialized in this application. 경고 메시지 없애기
Material UI 쓰고 있는데 콘솔 창에 다음과 같은 경고 메시지가 떴다. (갑자기 이런 거 뜨면 신경쓰인다고...) 경고 메시지 It looks like there are several instances of `@material-ui/styles` initialized in this application. This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason. See https://material-ui.com/r/styles-instance-warning for more info. 대략 @material-ui/..
React Router로 쿼리 스트링 값 가져오기
React Router로 쿼리 스트링 값 가져오기 예제 코드 import React from "react"; import { BrowserRouter as Router, Link, useLocation } from "react-router-dom"; // React Router does not have any opinions about // how you should parse URL query strings. // // If you use simple key=value query strings and // you do not need to support IE 11, you can use // the browser's built-in URLSearchParams API. // // If your quer..
리액트 DOM 안에 html 넣기 (dangerouslySetInnerHTML)
리액트에서 보안을 위해서 기본적으로 html 태그를 텍스트 형태로 출력해준다. 만약 리액트에서 html 코드를 DOM안에 출력하고 싶다면 innerHTML 대신 다음과 같이 dangerouslySetInnerHTML를 사용한다. 이때 출력하려는 html 코드는 __html 객체로 전달한다. (보안상 추천하는 방법은 아님. 가능하다면 가급적 다른 더 안전한 방식을 사용할 것.) function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } [출처] : 리액트 공식문서 ko.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml DOM 엘리먼트 ..
리액트 Component를 String 이름으로 동적 생성하기
입력받은 props에 따라 동적으로 리액트Component를 바꾸고 싶어서 알아보았습니다. 동일한 질문이 다행히 스택오버플로우에 있어서 답을 구할 수 있었습니다. 몇가지 방법이 있는데 @gmfvpereira의 답변이 아무래도 리액트 공식 문서에서 알려주는 방식이라서 제일 맘에 듭니다. 문자열로 React Component 생성하기 아래는 string에 따라서 그에 맞는 component로 변환하는 방법 예시입니다. 잘못된 방법 import React from 'react'; import { PhotoStory, VideoStory } from './stories'; const components = { photo: PhotoStory, video: VideoStory }; function Story(pr..
리액트 useLayoutEffect 훅으로 화면 깜빡임 없애기
리액트에서 useEffect 훅을 이용해서 특정 문자열을 컴포넌트로 대체하게끔 만들었더니 화면 깜빡임이 발생했습니다. 알고보니 이렇게 사용자에게 노출되는 DOM 변경하는 경우에는 useEffect 훅이 아니라 useLayoutEffect 훅을 써야 하더라구요. (변경전) useEffect : 화면 깜빡임 발생 const Page = props => { const { rawContent } = props; const [content, setContent] = useState(''); useLayoutEffect(() => { let str = rawContent; str = reactStringReplace(str, '@[Board]', (match, i) => ( )); str = reactStringR..
리액트 고유한 Key 값 생성하기 (uuid)
리액트에서 반복되는 컴포넌트를 만들 때 꼭 고유한 Key 값을 부여해야만 합니다. 물론 단순하게 index 값을 key로 간단하겠지만, 그럴 경우 key값이 중복 확률이 높기 때문에 좋은 방법은 아닙니다. 그렇다고 매번 수동으로 유니크한 key를 지정하는 것은 번거로운 일입니다. 따라서 uuid 라이브러리를 이용해서 고유한 키 값을 간편하게 생성해보겠습니다. 목차 UUID란? UUID 라이브러리 설치하기 UUID 사용하기 리액트에서 사용하기 일반 자바스크립트에서 사용하기 컴포넌트의 Key 값으로 사용하기 UUID란? uuid란 Universal Unique Identifier(범용 단일 식별자)의 약자입니다. uuid 함수를 호출하면 다음과 같이 랜덤으로 생성된 문자열이 만들어집니다. 이걸 컴포넌트의 k..