코딩 프로그래밍/Javascript 자바스크립트47 Visual Studio Code 에서 React 개발환경에 필요한 확장 프로그램 Visual Studio Code 를 이용하여 React 개발하면서 필요한 확장 프로그램 메모합니다 왼쪽 아이콘 중에서 Extensions 라는 아이콘을 눌러서 확장 프로그램 설치 화면으로 이동하세요 검색 창에서 eslint 를 검색해서 install 버튼을 눌러서 설치하세요 path 라고 검색해서 Path Intellisense 설치하세요 reactjs code 를 검색해서 Reactjs code snippets 을 설치하세요 prettier 을 검색해서 Prettier - Code formatter 을 설치하세요 prettier 은 설정을 해야 합니다 설치하고 나서 설정으로 이동하세요 eslint 에서 오류 나지 않도록 Single Quote 체크해주세요 원하는 분은 tab width 수정하세요 검색.. 2020. 11. 4. 자바스크립트 Javascript 스크롤바 제거하기 스크롤바가 예쁘지 않아서 잠시 제거하고 싶을 때 사용할 수 있어요 물론 css 파일을 이용하는 것도 좋습니다 // 전체 document.body.style.overflow = "hidden"; // 특정 영역 document.getElementsByClassName("검색")[i].style.overflow = "hidden"; 2020. 10. 21. 자바스크립트 Javascript 에서 ajax fetch 로 파일 다운로드 받기 웹 화면에서 자바스크립트 기반으로 파일을 다운로드하기 구현을 위해서 유용한 스크립트가 있어요 파일을 url 에 접속해서 다운로드하게 하려고 할 때 좋은데요 danml.com/download.html#Download 접속해보시면 참고 할 수 있어요 다운로드한 소스를 download.js 파일 이름으로 저장해서 사용했어요 download 함수를 사용 할 수 있어요 샘플 코드 입니다 function downloadFile(url) { if (!url) { alert("No Notion Page"); return false; } else { return fetch(url, { method: 'GET' }).then(function(resp) { if (!resp|| !resp.ok) { alert("Error".. 2020. 10. 20. 자바스크립트 폼 Form 전송 버튼 막기 - 페이지 전환 방지 form 태그에서 input을 사용하는 상황에서 버튼을 누르면 페이지가 이동하는데요 원하지 않는 경우가 있을 수 있어요 action 을 지정하지 않거나 #으로만 했는데도 페이지가 깜박거리는데요 이것을 방지하기 위한 방법입니다 일단 버튼 type을 submit 가 아니라 button 으로 하기만 해도 효과가 있습니다 추가 안전하게 추가해해줘야 할 작업이 event.preventDefault 를 넣는 것입니다 이렇게 하면 버튼을 눌렀을 때 페이지가 깜박거리며 원하지 않는 동작을 방지할 수 있어요 2020. 10. 14. Javascript 자바스크립트 버튼 클릭 못하게 막기 자바스크립트 버튼 사용 시 어떤 처리가 진행되는 동안 클릭이 안되게 하고 싶어서요 일단 아주 간단하게 하기 위해 버튼 동작을 아예 막는 코드입니다 // 어떤 처리 중 downloadbutton.disabled = true; // 처리 완료 후 downloadbutton.disabled = false; 이렇게 하면 버튼을 비활성화 했다가 활성화했다가 조절할 수 있어요 2020. 10. 13. 자바스크립트 ajax fetch 오류 처리 샘플 자바스크립트에서 외부 api랑 처리할 때 fetch를 사용할 수 있어요 프레임워크나 라이브러리를 사용 할 수도 있는데요 이번에는 완전 순수한 자바스크립트에서 제공하는 기능으로만 간단하게 사용하고 싶은 경우에 쓸 수 있어요 fetch("http://httpstat.us/500") .then(function(response) { if (!response.ok) { throw Error(response.statusText); } return response; }).then(function(response) { console.log("ok"); }).catch(function(error) { console.log(error); }); 마지막에 catch 를 사용해서 api에 오류가 있는 경우 잘 잡힐 줄 알았는.. 2020. 10. 10. 자바스크립트에서 상위 부모 노드 가져오기 parentElement 이미지가 있는 부모 노드 가져오는 방법입니다 엘리먼트에서 parentElement 사용하면 됩니다 document.getElementById("ID").parentElement 2020. 10. 10. 자바스크립트로 스타일 모두 제거하기 - 배열과 for 활용 스타일을 모두 제거하고 싶은 경우가 있어요 예제로 span 태그에 걸려 있는 모든 스타일을 제거하는 방법입니다 const span = document.getElementsByTagName("span"); 일단 이렇게 하면 배열로 span 태그를 모두 가져와요 그럼 여기서 for 문을 이용할 수 있어요 span.length 로 배열 개수를 알 수 있어요 for (var i = 0; i < 배열이름.length; i++) { document.write(배열이름[i] + " "); } 기본 구조를 이렇게 활용 할 수 있는데요 스타일을 제거 하는 방법은 removeAttribute를 이용하면 됩니다 그래서 완성해보면 아래처럼 하면 스타일을 모두 제거할 수 있어요 const span = document.getEl.. 2020. 9. 4. 이전 1 2 3 4 5 6 다음 반응형
