web study

VSCode에서 코드에 올리면 아래와 같이 아~주 친절한 MDN 팝업창이 뜨는데, 보지도 않고 잘못 눌려서 방해만 된다. MDN 팝업창을 해제해보자. MDN 해제 방법 1) cmd + shift + p (ctrl + shift + p)를 누른다. 2) 검색창에 'Settings'를 입력한 뒤, Preference: Open Settings (JSON)을 선택한다. 3) Setting.json 파일이 열리면 아래 값을 추가한다. "editor.hover.enabled": false, "editor.codeLens": false, "html.hover.documentation": false, "html.hover.references": false

깃허브 블로그 여러 가지 테마를 둘러볼 수 있는 사이트에 대해 소개하고, 활용하기 좋은 테마 TOP5를 추려보았다. 목차 깃허브 테마 사이트 추천 추천 테마 TOP5 1. 깃허브 테마 사이트 추천 아래 두 사이트가 가장 잘 정리되어 있다. Featured Themes | Jekyll Themes Check out the latest Jekyll Themes and templates. The best and the beautiful jekyll themes are available for free to download. Get the right template for your blog, documentation, portfolio or company site. Read articles on how to c..

npx create-react-app으로 리액트 설치 시 아래와 같은 오류가 발생했을 때의 해결 방법이다. You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app The latest instructions for creating a new app..

이벤트 버블링은 자식 요소를 클릭했을 때 상위 부모 요소까지 선택되는 현상이라 e.stopPropagation을 사용하면 간단하게 해결할 수 있다. 하지만 반대로 클릭했을 때 부모 요소를 출력하고 싶은데 자식 요소가 선택되는 경우가 있었다. 어떻게 해결해야 할까? e.target과 e.currentTarget의 차이점 e.currentTarget은 내가 click 이벤트를 걸어놓은 요소를 직접적으로 가리킨다. 반면 e.target은 부모 요소로부터 이벤트가 위임되어 실제 이벤트가 발생한 자식 요소(직접적으로 클릭한 요소)를 가리킨다. 구분 설명 e.target 실제 이벤트가 발생하는 요소를 가리킨다. e.currentTarget 이벤트 리스너가 적용된 요소를 가리킨다. 따라서 부모 요소에 이벤트가 걸려있..

VSCode에서 Git을 연결해 사용하다 보면 소스 제어 탭에 5k(5,000)+가 뜨면서, 너무 많은 변경이 감지되었다며 은근 신경 쓰이게 할 때가 있다. 이러한 현상은 상위 디렉터리(root repository)에 실수로 Git을 init 해두어서 발생한 것이다. 따라서 상위 디렉터리로 가서 설치된 git을 삭제하면 된다. 우선 VSCode를 종료하고, 터미널을 켠 다음 아래 순서대로 명령어를 입력해보자. ※ 무작정 git clean 명령어를 사용하면 파일, 폴더가 모두 날아갈 수 있으니 주의 해결방법 1. 내 컴퓨터에서 Git 상위 저장소 (root repository) 찾기 git rev-parse --show-toplevel 아마 '/Users/사용자이름' 이런 경로가 나올 것이다. 2. roo..

ES8에 소개된 async와 await를 사용하여 기존 Promise, then보다 더욱 깔끔하게 코드를 작성할 수 있게 되었다. 목차 기존 Promise() 방식 async, await 방식 1. 기존 Promise() 방식 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const $img = document.querySelector('#img'); const promise = new Promise((resolve, reject) => { $img.addEventListener('load', function() { resolve(); }); $img.addEventListener('error', function() { reject(); }); }) promise.then((res..

ajax를 사용해 여러 번 요청했을 때 성공 여부를 Promise()로 체크할 수 있다. 이때, then() 메서드를 요청 수에 맞게 여러 번 사용해보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 const promise = new Promise((resolve, reject) => { $.ajax({ type: 'GET', url: '첫번째 주소' }).done((result) => { resolve(result); }) }) promise.then((r) => { console.log(r); // 첫번째 결과 출력 const promise2 = new Promise((resolve, reject) => { $.ajax(..

Jquery로 ajax를 불러올 경우 done()이라는 함수가 Promise() 역할을 하지만, Promise를 사용해서 성공 여부를 한번 더 체크해보자. 1 2 3 4 5 6 7 8 9 10 11 12 const promise = new Promise((resolve, reject) => { $.ajax({ type: 'GET', url: '가져올 경로' }).done((result) => { resolve(result); }) }) promise.then((r) => { console.log(r) }) Colored by Color Scripter cs 더 간단한 ajax 표현 방식 1 2 3 4 5 6 7 8 const promise = new Promise((resolve, reject) => {..

자바스크립트의 replace 메서드를 사용하여 특정 문자열을 제거해보자. 목차 특정 문자열 하나만 제거 특정 문자열 모두 제거 1. 특정 문자열 하나만 제거 replace 메서드를 사용하면, 특정 문자열의 첫 번째로 발견된 것만 삭제된다. 1 2 3 4 5 6 let myStr = "Hello! World!" myStr = myStr.replace("!", ""); console.log(myStr); // Hello World! Colored by Color Scripter cs 2. 특정 문자열 모두 제거 특정 문자열을 모두 찾아서 모두 제거하고 싶다면 정규표현식을 사용하면 된다. 1 2 3 4 5 6 let myStr = "Hello! World!" myStr = myStr.replace(/\!/g,..