본문 바로가기

Tried. Failed. Logged.

728x90

🖥️프론트엔드67

리액트 네이티브 - Expo snack에서 패키지 추가 방법 import { Camera } from 'expo-camera'; 이런 식으로 새로운 패키지를 import 하면 프로젝트 페이지 맨 아래에 Add dependency메시지가 나오는데 이걸 누르면 자동으로 추가된다. dependencies에 패키지 명을 추가하는 방식이라, expo-로 시작하는 패키지만 지원이 가능한 것 같음. 출처: https://stackoverflow.com/questions/68931393/how-to-add-add-new-packages-in-expo-snack How to add add new packages in expo snack? I want to use expo-av package in expo snack. However I know that after importing.. 2022. 10. 10.

프론트엔드 - 한 줄로 정의된 json을 이쁘게 출력해주는 사이트(JsonFormatter) https://jsonformatter.curiousconcept.com/# JSON Formatter & Validator Format and validate JSON data so that it can easily be read by human beings. jsonformatter.curiousconcept.com 2022. 10. 4.

프론트엔드 - 로컬 네트워크 쉽게 인터넷으로 공유하기(ngrok) https://ngrok.com/ ngrok - Online in One Line Zero Trust Add SSO, Mutual TLS, IP Policy, and webhook signature verification. ngrok.com ngrok이란? ngrok is a globally distributed reverse proxy fronting your web services 포트포워딩이 필요 없이(리버스 프록시) 내 웹 서버를 인터넷 전역으로 호스팅 해주는 터널링 도구이다. ngrok 명령어를 사용하면 임의의 uri 주소를 생성해주는데 이곳을 접속하면 바로 내 웹 콘텐츠에 접근할 수 있다. 설령 방화벽이 있다고 해도 아웃바운드 방식으로 콘텐츠를 제공하기 때문에 따로 포트포워딩을 해줄 필요도 없.. 2022. 8. 23.

html - debugger(개발자 도구 방지) 비활성화 https://janger.tistory.com/222 html - 개발자 도구 막기(사용하기 힘들게) (function () { (function a() { try { (function b(i) { if (('' + (i / i)).length !== 1 || i % 20 === 0) { (function () { }).constructor('debugger')() } else { debugger } b(++i) } )(0) } catch (e) { s.. janger.tistory.com (function anonymous( ) { debugger }) 위 같은 개발자 도구를 막으려고 일부로 debugger로 브레이크 포인트를 주는 스크립트가 존재할 경우 개발자 도구에서 Sources 탭에 들어간 다.. 2022. 8. 16.

CSS - 인라인 코드 블럭 대충 이런것입니다. /* 인라인 코드 블럭 */ code { padding: 0.25rem; background-color: #F1F1F1; border-radius: 5px; box-shadow: 0.25px 0.25px 10px rgb(156, 156, 156); font-family: "Consolas", "Sans Mono", "Courier", "monospace"; font-size: 1.0rem; } 참고: https://wordbe.tistory.com/entry/%EC%9D%B8%EB%9D%BC%EC%9D%B8-%EC%BD%94%EB%93%9C%EB%B8%94%EB%9F%AD-%EC%BD%94%EB%93%9C-%EA%B0%95%EC%A1%B0-%EC%BD%94%EB%93%9C-%EB%B0.. 2022. 7. 30.

자바스크립트 - for in과 for of 차이점 생김새 var arr = [2, 5, 7, 9, 12]; // for in for(const item in arr){ console.log(item); } // for of for(const item of arr){ console.log(item) } 생김새는 이렇게 생겼습니다. 둘 다 너무 똑같이 생겨서 가끔 사용하려고 할 때마다 혼란이 생깁니다. 지금부터 이런 식으로 외우시면 됩니다. for in은 객체(키 값) 순환 for of은 배열 순환 참고로 상단 코드의 실행 결과는 이렇습니다. // for in 0 1 2 3 4 // for of 2 5 7 9 12 for of는 배열의 값을 순서대로 잘 출력하는 반면에 for in은 0, 1, 2, 3 같은 숫자의 순환을 반환합니다. 바로 눈치챈 사람도 있.. 2022. 7. 30.

자바스크립트 - map와 forEach의 차이점 Array.prototype.map() map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. 시도해보기 Array.prototype.forEach() forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다. 시도해보기 map 메서드와 forEach 메서드의 차이점 큰 차이점은 return 값을 반환하냐 안 하냐가 있습니다. const map1 = array1.map(x => x * 2); console.log(map1); // [2, 8, 18, 32] 우선 map 같은 경우는 콜백 함수의 실행 결과를 return을 그 결과들을 배열 형태로 변수에 저장합니다. array1.forEach(element => console.l.. 2022. 7. 30.

자바스크립트 - 사용자 고유의 프로필 사진(Identicon) 가끔 커뮤니티 사이트를 이용하다보면 위와 같은 형태의 사용자 프로필들을 확인할 수 있는데 이는 사용자의 고유한 번호로 만들어내는 사용자 식별 프로필 사진이다. 정확한 명칭은 Identicon임. 자바스크립트만을 사용해서 만들었다고 한다. 오픈소스이므로 직접 깃허브에서 다운해서 본인이 운영하는 사이트에다 적용해도된다. https://github.com/stewartlord/identicon.js GitHub - stewartlord/identicon.js: GitHub-style identicons as PNGs or SVGs in JS GitHub-style identicons as PNGs or SVGs in JS . Contribute to stewartlord/identicon.js developm.. 2022. 7. 21.

자바스크립트 - Web Notification API(윈도우 알람 기능) window.onload = function () { // 웹 페이지 로드 후에 알림 권한 확인 if (window.Notification) { Notification.requestPermission(); } } function notify() { if (Notification.permission !== 'granted') { alert('notification is disabled'); } else { var notification = new Notification('Notification title', { icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png', body: 'Notification text', }); notifica.. 2022. 6. 22.

자바스크립트 - alertBox function alertBox(msg, delay = 3000){ var container = document.createElement('div'); container.setAttribute('class', 'alertBox-container'); container.style.width = '100%'; container.style.height = '100px'; container.style.position = 'fixed'; container.style.bottom = '0'; container.style.display = 'flex'; container.style.justifyContent = 'center'; var box = document.createElement('div'); box.styl.. 2022. 4. 10.

React Native - 초기 설치 [컴퓨터에 개발 환경 설치하기] https://reactnative.dev/docs/environment-setup Setting up the development environment · React Native This page will help you install and build your first React Native app. reactnative.dev npx react-native init SampleApp cd SampleApp npm run android 출처: https://dev-yakuza.posstree.com/ko/react-native/install-on-windows/ 윈도우(Windows)에 react native 개발 환경 구축하기 react-native로 앱을 개발하기.. 2022. 4. 7.

Electron - loadURL로 문서 불러온 후에 자바스크립트 실행 win.loadURL('https://google.com'); win.webContents.executeJavaScript('document.body.innerHTML = "1234"'); 참고: https://javascript.hotexamples.com/examples/electron/remote.BrowserWindow/loadURL/javascript-remote.browserwindow-loadurl-method-examples.html JavaScript remote.BrowserWindow.loadURL Examples, electron.remote.BrowserWindow.loadURL JavaScript Examples - HotExamples javascript.hotexamples... 2022. 4. 1.

이전 1 2 3 4 5 6 다음

728x90

티스토리툴바