분류 전체보기 (121) 썸네일형 리스트형 vscode localhost:8080 오류 / Crbug/1173575, non-JS module files deprecated 해결방법 갑자기 잘되던 vscode가 실행을 시키면 chrome에서 오류가 발생하면서 localhost에서 연결을 거부했습니다. 라고 뜨고 chrome을 재실행하여도 동일한 문제가 발생... 당황스럽지만 일단 오류도 나의 자산이라고 생각하고 침착하게 구글링을 통해서 다양한 방법을 시도해보았습니다. [ 1번째 방법 ] 8080 포트 충돌일 수 있으니 8080포트로 실행중인 프로세스를 죽이기로 했습니다. - cmd에서 netstat -ao 검색 - taskkill /f /pid [pic] (8080포트의 pid값을 입력) 만약 엑세스가 거부 된 경우 cmd창 검색시 관리자 권한으로 실행 후 프로세스 죽인다. => 위와 같은 방법이 가장 일반적인 방법이지만! 저는 위 방법으로도 오류가 해결이 안되었습니다...ㅠ^ㅠ 새.. [JavaScript] Eclipse에 jQuery 라이브러리 셋팅법 JQuery란? 보다 효율적이고 직관적이게 엘리먼트를 선택하고 제어할 수 있도록 해주는 JavaScript 라이브러리 Eclipse에 jQuery세팅법은 두가지 방법이 있는데 첫번째 방식 보다는 두번째 방식을 추천한다. 1. https://jquery.com/download/ 사이트 접속 후 설치하고자 하는 태그 복사하여 사용 노란색으로 표기된 부분 클릭 코드 전체 복사 jquery-3.6.0.js 파일을 만들어준 후 해당 파일에 코드 붙여넣기 js파일 생성 후 jquery-3.6.0.js 넣어주기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 jQuery 라이브러리 $(document).ready(function(){ console.log('jQuery 라이브러리 연결완료!'); }).. [JavaScript] 마우스, 키보드 이벤트 이벤트 이벤트 트리거 이벤트를 발생시키는 신호 ex) click,dblclick,mouseover,keydown,keypress,... 이벤트 핸들러 실제 발생되는 이벤트 내용 html에서 사용하는 요소에게 이름을 부여하는 방식 - id - class - name 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 27 28 29 30 마우스 이벤트 #box { width: 100px; height: 100px; cursor: pointer; background-color: coral; } function func1(obj){ obj.style.backgroundColor="lightblue"; } functio.. [JavaScript] 랜덤, Math함수를 사용하여 UpDown 게임 만들기 랜덤, Math함수를 사용하여 UpDown 게임 만들기 Math함수 정리 Math.min(x,y,z....) 가장 작은 값 반환 Math.max(x,y,z....) 가장 큰 값 반환 Math.random() 0보다 크거나 같고 1보다 작은 무작위 숫자 반환 Math.round(x) 소수점 첫 번째 자리에서 반올림 후 반환 Math.floor(x) 인수와 같거나 작은 수 중에서 가장 큰 정수 반환 Math.ceil(x) 인수와 같거나 큰 수 중에서 가장 작은 정수 반환 Math.abs(x) x의 절댓값 반환 Math.sqrt(x) x의 제곱근 반환 Math.cbrt(x) x의 세제곱근 반환 Math.exp(x) e의 x제곱근 값을 반환 Math.log(x) x의 자연로그 값을 반환.(ln x) Math.l.. [JavaScript] JavaScript 란? 변수 선언, 데이터타입, 제어문, 함수, 객체, 배열 JavaScript 개발자가 대화식 웹 페이지를 만들기 위해 사용하는 프로그래밍 언어 소셜 미디어 피드 새로 고침부터 애니메이션 및 대화형 지도 표시에 이르기까지, JavaScript 함수는 웹 사이트의 사용자 경험을 개선할 수 있음 script언어를 해석하는 번역가는 브라우저에 포함되어 있음 -> 각 브라우저마다 실행결과가 다를수있음에 유의 기준: 크롬 JS는 크게 두가지로 사용됨 1) 연산,기능 처리 ex) 비밀번호와 비밀번호 확인 2) 웹 페이지에서 요소(태그)의 기능 ex) 위젯의 움직임 변수선언 var num=10; var name='홍길동'; // 전역 변수 function func(){ var score=57; // 지역 변수 } 데이터타입(자료형) 숫자형(Number) Boo.. [ 동영상 시청 ] Flex Layout 참고 동영상 https://www.youtube.com/watch?v=JQ0jO3B43YQ Layout [ normal flow ] 기본적으로 HTML에 요소를 배치하는 방법은 normal flow를 따릅니다. normal flow 브라우저가 기본값으로 HTML 페이지를 배치하는 방법을 말합니다. - block 형태 -> 자신의 부모요소 너비를 전부 차지한다. -> 새로운 블록을 추가할 시, 다음 라인 개행되어 추가하는 형태 - inline 형태 -> 부모 너비 전부를 차지하지 않고 자신의 컨텐츠 영역만큼만 너비를 차지 -> 부모의 최대 너비를 넘지 않는 선에서 나란히 위치 Flex 요소들을 행, 열 단위로 정렬하기 위한 1차원 레이아웃 flex container -> flex 아이.. [ 동영상 시청 ] CSS 방법론 참고 동영상 https://www.youtube.com/watch?v=B70h37mpD74&t=555s CSS란? HTML 또는 XML로 쓰여진 문서의 스타일을 나타내기 위해 사용되는 언어 문서의 구조와 스타일(디자인)을 분리하여 HTML이나 XML의 각 요소를 꾸미는 것이 역할 CSS 등장 이전 / 이후의 스타일링 CSS 등장 이전 각 요소의 전용 속상이나 style 속성으로 스타일을 일일이 지정 문제점 -> 같은 스타일 요소를 여러 페이지마다 사용하면, 하나를 수정할 때마다 그만큼 반복하여 수정을 해야 한다. -> HTML은 본래 문서 구조를 의미하므로 HTML에 직접 스타일을 지정하는 것은 바람직하지 않는다. CSS 등장 이후 CSS 파일에는 스타일을 기재하고 HTML에는 문서의 구조를 작성 관심사.. [ 동영상 시청 ] 프론트엔드에서 Component란? 참고 동영상 https://www.youtube.com/watch?v=2C1tXVHu9XQ 컴포넌트의 의미 전체의 부분 프론트엔드의 컴포넌트란? 과거의 웹 - 비교적 단순하기 때문에 컴포넌트라는 개념이 중요하지 않았음. 오늘날 웹 - 90년대 후반에 AJAX가 등장하면서 웹의 대변화 가 시작 됨. 웹이 점점 동적으로 변해감. 복잡한 웹을 작게 나누게됨 컴포넌트 분리하는 법 Atomic Design : 화학적 개념을 이용하여 컴포넌트를 분리하는 방법론 중 하나 총 5단계 ATOMS(원자) : 인터페이스를 구성하는 최소단위의 블록 -> 검색창을 구성하는 form, input, button 태그와 같은 HTML tag들이 원자에 해당됨 MOLECULES(분자) : 원자들을 하나의 단위로 동작시키는 UI 컴포넌.. 이전 1 ··· 6 7 8 9 10 11 12 ··· 16 다음
