web study

깃허브 블로그 여러 가지 테마를 둘러볼 수 있는 사이트에 대해 소개하고, 활용하기 좋은 테마 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,..

깃허브에 push 시 user name과 user password를 요구하는 경우가 있다. 깃허브 계정 아이디와 비번을 올바르게 입력했는데도 아래와 같은 권한 오류가 뜰 경우 해결방법에 대해 알아보도록 하겠다. fatal: Authentication failed 우선 문제가 발생할 수 있는 경우를 체크해보자. 1) user name(ID), user password를 제대로 작성했는가? - 오른쪽 상단 프로필 이미지를 클릭하면 아이디를 확인할 수 있다. 2) Personal Access Tokens(2차 인증 토큰) 발행 유무 config 초기화하는 방법은 소용없다. 아이디와 비밀번호를 정상적으로 입력했는데도 오류가 뜬다면, 2차 인증 토큰을 생성하지 않았을 가능성이 크다. 아래 페이지에 접속하여 토큰이..