Frontend
-
[React] How to make custom image icon with .png files.Frontend/react 2020. 10. 16. 12:47
React로 KANA 어드민 웹 페이지 제작을 진행하면서, 최신 이벤트에 대한 리스트를 만들떄 우리에게 맞는 아이콘이 필요했다. material-ui를 적용 하고 있어서 아래 리스트를 기반으로 제작한다. material-ui.com/components/lists/ 리스트에 들어갈 텍스트는 그냥 바꾸면 되는데 아이콘의 경우 맞는게 없기 때문에 커스텀으로 만들어야 했다. 먼저 아이폰을 만들 이미지파일(32x32)을 아래처럼 가져와주자. // constants.js export const ICONS = { AAA: require("../assets/images/icon/AAA.png"), BBB: require("../assets/images/icon/BBB.png"), CCC: require("../asse..
-
[react] react-router 특정 URL로 바로 접근시 '404 페이지를 찾을 수 없습니다.' 에러 해결방법!Frontend/react 2020. 10. 5. 18:52
react-router의 경우 production으로 빌드 배포시 BASE URL이 index.html와 연결된다. 그래서 index.html을 통해 링크를 클릭하여 페이지(URL) 이동을 하면 문제 없이 잘 된다. 그런데 아래와 같이 브라우저에 BASE(/) 이외의 주소로 직접 접근 시 아래와 같이 HTTP 404 ERROR을 맞이하게 된다. http://127.0.0.1/signin 해결방법은 간단하다. nginx.conf를 아래와 같이 수정한다. ... # location / { # # First attempt to serve request as file, then # # as directory, then fall back to displaying a 404. # try_files $uri $uri..
-
How to start react-native with ignite boilerplate.Frontend/react-native 2020. 4. 29. 10:43
React Native 학습을 시작하기 앞서 관련된 boilerplate를 알아봤다. 현재 깃허브에서 인기순위 1위 ignite를 실행해보고자 한다. https://github.com/infinitered/ignite infinitered/ignite The hottest CLI for React Native, boilerplates, plugins, generators, and more! - infinitered/ignite github.com 설치 및 관련 설명은 깃허브 페이지에도 잘 나와 있지만, 그 과정을 기록하기 위해 글을 써내려 가고자 한다. 먼저 아래와 같이 ignite-cli를 설치하고 바로 기본 프로젝트를 생성해본다. $ yarn global add ignite-cli $ ignite n..
-
[chrome extension] github example source code tutorialsFrontend/chrome extension 2020. 3. 23. 15:06
https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples GoogleChrome/chrome-app-samples Chrome Apps. Contribute to GoogleChrome/chrome-app-samples development by creating an account on GitHub. github.com https://trustyoo86.github.io/javascript/2019/12/27/chrome-extension-overview.html kern의 FE-Note kern의 Front-end 개발 노트입니다. trustyoo86.github.io https://github.com/avm99963/translat..
-
[chrome extension] How to make image button on content scriptFrontend/chrome extension 2020. 3. 23. 15:03
chrome extension create button script const iconBtn = document.createElement('button'); const iconBtnUrl = URL; iconBtn.setAttribute('id', 'iconbtn'); iconBtn.style.backgroundColor = 'transparent !important;'; iconBtn.style.padding = '0px'; iconBtn.style.borderWidth = '0px'; iconBtn.style.border = 'none'; iconBtn.style.position = 'absolute'; iconBtn.style.color = '#FFFFFF'; iconBtn.addEventListe..
-
[chrome extension] How to send message content script to background.jsFrontend/chrome extension 2020. 3. 23. 14:56
chorme extension을 만들때 주요 개념이 있다. 간단히 정리하자면, - background.js : 말 그대로 백그라운드 작업을 처리한다. 작동 방식은 '항시동작/이벤트전달'로 목적에 맞춰 작성하면된다. - content script : 현재 웹 페이지에 커스텀 html을 injection 하여 인터렉트를 위해 사용된다. - popup : 브라우저 상단 url입력 오른쪽에 표시되는 ui이다. 그 밖에 permission 관련 등은 검색하면 많이 나온다. 크롬API content script to background.js 통신하는 방법을 소개하고자 한다. 현재 페이지에서 텍스트를 선택하면 content script가 동작하여 버튼이 생성되고, 클릭시 background.js에 그 값을 전달해 저..
-
[chrome extenstion] When I have selected text in page, how to pop up the text at down of mouse pointer.(글자 선택시 마우스 포인트 아래 띄우기)Frontend/chrome extension 2020. 3. 19. 17:30
Goal: 웹 페이지의 글자를 선택(클릭)을 할때 마우스 포인트 바로 아래 선택한 글자를 띄우고자한다. 이 기능은 내가 최종적으로 만들려는 기능이 아닌 과정일뿐이다. 사용한 보일러플레이트는 chrome-extension-boilerplate 에서 확인 할 수 있다. 크롬 확장 프로그램을 만들기에 앞서 개념 부분은 생략하겠다. 학습이 필요하다면 구글링.. 참조1 참조2 참조3 먼저 manifest.json에서 권한 부분을 아래와 같이 수정한다. "permissions": [ "https://*/*", "http://*/*", "activeTab" ], 그리고 본격적으로 content.ts에 삽입할 스크립트를 추가해주자. // content.js // Add bubble to the top of the pa..
-
[chrome extension] boilerplate 크롬에서 실행(적용) 해보기Frontend/chrome extension 2020. 3. 19. 02:38
이 글에서는 크롬 확장 프로그램 개발을 처음 시작하려고 할때 예제 소스를 크롬에 적용하여 실행해보는 방법을 소개한다. 원하는 chrome extension bilerplate를 깃허브나 기타 저장소에서 다운로드 한다. 나의 경우 react-chrome-extension-boilerplate 를 다운로드한 후 빌드를 했다. 빌드 과정 까지는 생략하겠다. 빌드를 완료하면 아래와 같은 파일이 구성된다. 이제 크롬 브라우저를 열어 옵션 > 도구 더보기 >확장프로그램 탭으로 이동한다. 우측 상단에 있는 개발자모드를 ON 한다. 그러면 아래와 같은 버튼이 생성된다. '압축해제된 확장 프로그램을 로드합니다.' 버튼을 클릭한 후 좀 전에 빌드해서 생긴 빌드 폴더를 선택한다. 별 문제가 없다면 아래와 같이 확장 프로그램..