Javascript 썸네일형 리스트형 크롬에서 복사 및 드래그 방지 해제하기 (복붙방지해제) 복사붙여넣기 방지 코딩 초보자라면 구글링을 통해 다른 사람이 만들어 놓은 코드를 카피하게 되는 경우가 많다. 친절한 블로그는 복사붙여넣기 방지 기능을 사용하지 않아 누구나 코드를 참고할 수 있도록 해두었지만 대부분의 블로그들은 복사붙여넣기 방지 기능을 사용하고 있어서 드래그 및 마우스 우클릭이 되지 않는다. 남이 만들어둔 코드를 무단으로 카피하는 경우 논란의 여지가 있음으로 코드를 사용할 때는 허락을 받고 출처를 남기는 것이 가장 좋다. 하지만 불가피하게 코드를 복사 해야하는 급박한 경우라면 이 방법을 사용해 보자. 크롬에서 복사붙여넣기 방지 해제하기 크롬 기준의 해결방법이다. 아래 사진대로 따라 하면 된다. 1. F12를 누르고 톱니바퀴를 클릭한다. 2. 마우스 스크롤을 아래로 내리면 '디버거' 카테고.. 더보기 [React] create-react-app 설치하기 create-react-app : 리액트 개발을 편하게 해주는 도구 앞서 리액트 실습을 할 때 환경 설정을 일일이 해줘야 했다. 굉장히 번거롭다. 이를 해결하기 위해 create-react-app을 설치하면 리액트가 적용되어 있는 상태로 개발을 시작할 수 있다. 설치 과정 1. 사전준비물 : Node.js, npm, VS Code 설치가 되어있어야 한다. 2. 다음 명령어를 VS CODE 터미널에 입력한다. npx create-react-app 는 쓰지 않아도 된다. 그냥 만들고 싶은 이름만 입력하면 됨. 3. 명령어 실행시 to proceed ? (y) 가 나온다. 입력창에 y를 입력하고 엔터. 4. 설치가 끝나면 친절하게 명령어를 안내해준다. 5. cd tmdgh-web , npm start를 순서대.. 더보기 [React] 리액트의 정의. 웹사이트에 React.js 추가하기 리액트의 정의 리액트란 무엇일까? 리액트 공식 웹사이트에서 이렇게 정의하고 있다. A JavaScript library for building user interfaces. 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리다. 라이브러리(Library)는 영어로 도서관을 뜻한다. 프로그래밍 언어에서 라이브러리는 자주 사용되는 기능을 정리해 모아 놓은 것을 뜻한다. 도서관이랑 비슷한 개념이다. UI(User Interface)는 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해 주는 것이다. 지금 보는 화면도 UI다. 웹사이트의 경우 버튼, 텍스트 입력창 등이 모두 사용자 인터페이스다. 버튼 누르면 반응하고 특정 페이지가 나타난다. 이런 기능을 모아둔 곳이.. 더보기 모듈이란 무엇인가? 1. 프로그램은 작고 단순한 것에서 복잡한 것으로 진화. 2. 코드의 재활용성 높임. 유지보수를 쉽게 할 수 있는 기법 개발. 3. 자주 사용되는 코드는 별도의 파일로 만들어서 필요시 재활용함. 4. 자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지는 않음. 5. 하지만 자바스크립트가 구동되는 호스트 환경에 따라 모듈화 방법이 각각 존재함. 6. 예를 들어 node.js는 서버 측에서 실행되는 자바스크립트. 7. 모듈화 예시. greeting.js 파일을 head에 연결시키면 호출된다. 8. body에 있는 functiond을 greeting.js에 붙여 넣고 다시 실행해보면 위 예시는 간단한 함수였지만, 복잡한 함수가 있다면 html 코드를 줄일 수 있다. 코드 가독성이 좋아진다. 9. sub.ht.. 더보기 Javascript 코드를 크롬에 입력했을 때, undefined가 나오는 이유 간단하다.... 위 검색창 및 다른 함수, 변수가 위에 입력되어 있다면 다 clear 하고 다시 하면 된다. 창을 껐다 키면 직방이다. 오늘은 한 게 아무것도 없는 것 같다. 할게 너무 많은 것 같은데 따라가지는 못하고 속상한 하루다. 더보기 Javascript 무한스크롤 구현 여기저기 찾기 + chatGPT선생님의 답변으로 구현한 무한스크롤 코드 window.onscroll = function() { if((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { const toAdd = document.createElement("div"); const box = document.getElementsByClassName('container'); const clonedBox = box[0].cloneNode(true); // 첫 번째 card 엘리먼트를 클론합니다. toAdd.appendChild(clonedBox); // toAdd 내부에 클론된 card를 추가합니다. document.querySelector.. 더보기 Javascript BMI 계산하는 문제 1. 체질량 지수(BMI) 계산하는 공식은 몸무게를 키(m)의 제곱으로 나눈 값이다. 사용자에게 키(cm)와 몸무게(kg)에 해당하는 값을 전달받아 체질량 지수를 계산한다. 체질량 지수가 26점 이상이면 비만, 24~25점은 과체중, 18.5~23점은 정상, 18.5미만은 저체중을 반환하는 함수를 만들어보라. function getBMI(height, weight){ const h = height / 100; const bmi = weight / (h*h) if(bmi > 25) return "비만"; else if(24 < bmi 더보기 Javascript에서 객체 자바스크립트에서 객체는 객체지향과는 다른 개념이다. 인덱스로 문자를 설정하고 싶으면 객체를 만들어야한다. var grade = {'학생1': 50, '학생2':99}; grade 객체를 만들었다. 학생1은 key, 50은 value다. key를 호출하면 value값을 알 수 있다. 그런데 객체를 배열처럼 생각하고 grade [0]; 를 입력했더니 undefined가 나온다. 객체는 배열처럼 순서가 정해져있지 않다는 사실을 몰랐다. for (key in grades) 를 사용하면 객체(grades) 안에 key값과 value 값을 출력할 수 있다. 더보기 이전 1 2 다음
