본문 바로가기
반응형

개발자의 삶110

javascript로 encode된 URL을 간단하게 decodeURIComponent 사용해서 변환(전환)하는 방법 제일 쉬운 방법은 그냥 개발자도구 켜서 콘솔에 decodeURIComponent(url) 찍어주는 게 가장 쉬운데, 그냥 즐겨찾기나 원클릭으로 잡아놓고 쓰기도 좋다. 예시 변환(전환)하기See the Pen DecodeURICompnent by 서대석(Key) (@seodaeya) on CodePen.참고 decodeURIComponent() - JavaScript | MDNThe decodeURIComponent() function decodes a Uniform Resource Identifier (URI) component previously created by encodeURIComponent() or by a similar routine.developer.mozilla.org 2023. 2. 6.
chrome inspect 안드로이드 웹 개발자도구 사용, 웹 디버깅 하기 준비물크롬 브라우저usb 케이블당연히 스마트폰 방법1. 스마트폰 개발자모드 설정 1.1. 설정 > "휴대전화 정보"에 들어간다. 1.2. 설정 > 휴대전화 정보 > "소프트웨어 정보"에 들어간다. 1.3. "빌드버전"을 개발자 모드단계까지 가도록 터치 for문을 돌린다. 4 > 3 > 2 > 1 > 개발자모드로 지금 만나러 갑니다...? ... . . .1.4. 설정 > "개발자 옵션"에 들어가서 { "사용 중", "USB 디버깅" } 선택 2. 스마트폰을 pc와 연결한다. 3. PC에서 디바이스 "신뢰" 4. 폰에서 디바이스 디버깅 "허용" 5. 브라우저 url 입력창에 chrome://inspect 를 입력한다.chrome://inspect 6. 폰에 크롬 브라우저 앱을 실행한다. 그러면 아래와 같이.. 2023. 1. 28.
크롬 개발자도구 팁 - 돔 이벤트 보기 들어가기 전에...사이트 분석을 하면서 돔에 걸려 있는 이벤트를 쉽게 찾기 위한 방법이 뭐가 있을까? 예전에는 웹사이트 하면 php, jsp, ...를 많이 생각했었는데, 요즘에는 react, vue, angular, ... 등등 여러 언어로 개발을 하고 있다. jsp, jquery로 되어 있는 웹에서 이벤트 찾을 때는$._data(element, 'events');위와 같이 찾았는데, 요즘에는 확장프로그램도 충분히 좋아진 건지 이제 본 건지... 개발자 도구를 좀 눌러보니 아니 이벤트 리스너(event listeners)가 있네?? 사용해보자예를 들어, 11번가에서 상품상세 화면에 "쿠폰보기"가 있다. 한번 개발자도구로 까보자.2개의 이벤트가 걸려 있는 걸 확인할 수 있다. 아! 여기서 디폴트로 상위가.. 2023. 1. 1.
Vue 3.x 프로젝트 생성 및 설정 프로젝트 생성하기 전... nuxt 설정하는데, 불편해서 vue 3으로 넘어왔다. vue 4 얘기도 나오는 것 같고, 안정화 버전이 vue 2.x 기반으로 되어 있는 nuxt로 굳이 프로젝트를 구성할 필요가 없으니 vue 3.x 로 가보자. 앞으로는 vuex 에서 pinia 로 넘어갈 예정인 것 같다. 기본적으로 vite 설정으로 되어 있는 듯하다. 버전 정보 vue: 3.2.41 pinia: 2.0.23 프로젝트 생성 > npm init vue@latest 모듈 추가 및 설치 > npm i axios > npm i vue-router github 공유 https://github.com/seodaeya/vue-pinia-vite.git GitHub - seodaeya/vue-pinia-vite: vue .. 2022. 11. 22.
Nuxt 프로젝트 생성 및 설정 프로젝트 생성하기 전... 아직 Nuxt 3이 Beta 버전이다. RC라 확정이겠지만, nuxt 2로 진행하기로 한다. 버전 정보 nuxt: 2.15.8 vue: 2.7.10 @nuxtjs/composition-api: 0.33.1 @nuxtjs/composition-api 버전이 아직 1 이하인 걸 봐선 정식 버전은 아닌 것 같다. nuxt 3 정식 버전 발표 후론 굳이 설정해주지 않아도 되지만, ... (이게 최선인가?) 프로젝트 생성 > npm init nuxt-app nuxtProject 모듈 추가 및 설치 > npm i @nuxtjs/composition-api composition-api 설정 nuxt 2에서 vue composition-api를 사용하기 위해서 설정이 필요하다. buildMo.. 2022. 11. 11.
오픈스택 속성 입문 정리 버전 목록 릴리즈 일자 코드명 2010-10-21 Austin 2011-02-03 Bexar 2011-04-15 Cactus 2011-09-22 Diablo 2012-04-05 Essex 2012-09-27 Folsom 2013-04-04 Grizzly 2013-10-17 Havana 2014-04-17 Icehouse 2014-10-16 Juno 2015-04-30 Kilo 2015-10-16 Liberty 2016-04-07 Mitaka 2016-10-06 Newton 2017-02-22 Ocata 2017-08-30 Pike 2018-02-28 Queens 2018-08-30 Rocky 2019-04-10 Stein 2019-10-16 Train 볼륨 #필요 yum install lvm2 pvcre.. 2021. 4. 22.
[VSCode] 한글 재적용, 한글이 갑자기 적용이 풀렸을 때... #1. 명령 팔레트 열기Ctrl + Shift + p #2. 표시 언어 구성> configure display language※ 짧게 "con dis lang"만 입력해도 찾아준다. #3. 언어 설정ko #4. 재시작 2021. 3. 8.
단기 속성 입문 현업 사용 VSCode 단축키 정리 들어가기 전왠만하면 해당 툴에서 제공하는 단축키를 이용하려고 한다. 예전엔 새로운 툴을 접하면 원하는 단축키로 커스터마이징 해서 사용하려고 잠깐 생각했으나, 일부 툴끼리 단축키가 쫑나는 경우도 많고, SI 인생이라 프로젝트별 새로 설치하거나 여러 디바이스에서 환경 세팅을 하는 경우가 빈번하여 커스터마이징 하지 않고, 사용하는 것을 선호하는 방향으로 바뀌었다. 하지만, 일부 '이건 굳이? 왜?'라는 생각이 드는 단축키는 일부 취소선으로 처리하여 변경하였다. (작은 변화로 큰 효과를 얻어내기 위함) #보기/검색/명령#파일로 이동 ctrl + p #탭닫기 ctrl + F4 #구현으로 이동 - 확인 필요 ctrl + F12 #찾기 ctrl + f #파일에서 찾기 ctrl + shift + f #다음 강조 기호로.. 2021. 1. 11.
[VSCode+PowerShell] ng : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\사용자\AppData\Roaming\n 들어가기 전지난 번엔 vscode로 vuejs 공부하다가 막혔는데, 노트북 포맷하니 머리도 포맷되서 이번엔 angular 시작하려니 다시 막혀서 남겨놓게 되었다. 문제의 시작PS C:\Development\workspace\angular-study> ng ng : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\SeoDaeYA\AppData\Roaming\npm\ng.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + ng + ~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException .. 2021. 1. 2.
단기 속성으로 배우는 우분투 mysql 설치부터 외부(원격) 접속 설정까지 우선 읽고 갑시다.mysql version 5.7.32 기준으로 작성되었다. 사용자가 입력해야 되는 부분을 {내용}으로 표기했다. mysql 설치apt-get mysql-server mysql 삭제apt-get purge mysql-server mysql 접속/usr/bin/mysql -u root -p root 비밀번호 변경SET PASSWORD FOR 'root'@'localhost' = PASSWORD('{비밀번호}');※ root는 외부에서 접근하지 않는 것이 보안상 좋기 때문에 비밀번호만 변경해준다.비밀번호 : root 계정에 사용 할 비밀번호를 입력한다. 데이터베이스 생성CREATE DATABASE {데이터베이스 명};데이터베이스 명 : 생성할 데이터베이스명을 입력한다. 사용자 계정 및 비밀번.. 2020. 11. 11.
반응형