반응형

js 8

자바 스크립트에서 'console.log(변수명)' 단축키로 한번에 입력하기

자바 스크립트에서 'console.log(변수명)'을 단축키로 한 번에 입력하고 지우는 방법을 알아보자. 일반적으로 자바 스크립트에서 'console.log(변수명)'을 입력하려면 'console.log(변수명);'을 하나 하나 입력해야 한다. 추적해야 하는 변수가 많을 겨우 이것들을 일일이 입력하고 추적하는 것은 쉬운 일이 아니다. 이럴때 'turbo Console Log' 익스텐션을 사용해 보자. 그러면 자바 스크립트 console.log의 신기원을 볼 수 있을 것이다. VScode 익스텐션 항목에서 'turbo Console Log'을 입력하고 검색되는 익스텐션을 설치한다. 먼저 console.log로 값을 추적하고 싶은 모든 변수를 선택한다. 하나의 변수를 선택하고 또 다른 변수를 같이 선택할 때..

제이쿼리(jQuery)와 자바 스트립트(JS)의 코드 길이 비교

제이쿼리(jQuery)는 JS에서 자주 사용되는 기능을 함수나 객체로 모아 놓은 라이브러리 파일을 말한다. 제이쿼리를 이용하면 JS만으로 프로그래밍을 할 때 보다 훨씬 쉽고 빠르게 웹 프로그램을 제작할 수 있다. 이번 시간에는 제이쿼리가 무엇인지 간단한 예제를 통해 알아보고 JS만 사용할때와 제이쿼리를 같이 사용하면 코드가 얼마나 더 간결해 지는지 알아보자. 1.제이쿼리(jQuery)의 기능 1) DOM 요소들을 선택하는 제이쿼리 선택자 2) DOM 트리와 요소를 조작하는 제이쿼리 메소드 3) 웹 페이지에서 발생되는 이벤트를 처리하는 제이쿼리 이벤트 등으로 요약할 수 있다. DOM이라고 하면 어렵다고 생각할 수 있으나 Document Object Model이란 말로 웹에서 글자로 표현 하기 위한 모든 요..

SW 배움터 2022.09.27

replit에서 JS 파일 실행하기

replit에는 50개가 넘는 템플릿이 제공되지만 JS는 어떻게 실행할 수 있는지 알기가 어렵다. 한번 알기만 하면 쉽지만 처음 그 방법을 알기까지 꽤 많은 시행착오와 시간을 들여야 한다. 이번 포스트에서 그 시간을 아껴보자. https://replit.com/~에 접속해서 회원가입 하고 로그인 한다. 초기 화면이 열리면 '+' 표시가 있는 아이콘 중 아무것이나 클릭한다. 'Create a Repl' 창이 열리면 'HTML, CSS, JS' 부분을 클릭한다. Title부에 적당한 제목을 입력하고 엔터를 누르거나 '+ Create Repl' 버튼을 클릭한다. 'index.html, style.css, script.js' 파일이 있는데 'script.js' 파일이 JS 코드를 입력할 수 있는 파일이다. 'i..

리액트로 한걸음 더 나아가기 위한 JS 문법 4가지

이번 시간에는 JS에서 리액트로 더 나아가기 위한 JS 문법을 몇가지 알아보기로 하자. 리액트에서 많이 쓰이는 4가지 문법을 위주로 설명한다. 1.object shorthand assignment 우리말로 하면 '단축 할당'정도로 번역되는 말인데 반복되는 변수에 대해서 하나를 생략해서 간단히 표기하는 방법이다. 자바에서나 파이썬에서는 this를 사용하는데 JS에서는 아예 반복되는 변수 하나를 생략해 버린다. name 변수와 age 변수에 값을 입력하고 그 값들을 객체로 만든 후 변수를 하나씩 출력해 보는 코드를 작성해 보자. person 객체를 생성하고 name과 age에 변수를 대입한다. 이때 자신의 객체 name과 age에 위에서 선언된 이름과 나이를 대입하는 것인데 자바나 파이썬에서는 자신의 객체라..

리액트 초급 강좌1 - 텍스트 넣고 박스 그리기

리액트는 JS의 프레임 워크(FW) 중 가장 많이 쓰이는 FW인데 이번 시간에는 리액트로 웹페이지에 글자를 넣고 박스를 그리는 것을 연습해 보자. IDE로는 거의 대부분의 언어를 에디팅할 수 할 수 있는 리플릿(Replit) 이라는 것을 사용할 것이다. 리플릿(Replit)은 사용자들이 브라우저를 사용하여 코드를 작성하고 앱과 웹사이트를 만들 수 있게 해 주는 웹 IDE이다. https://replit.com/~ 에 접속해서 회원 가입을 한 후 사용 할 수 있다. 처음 replit을 실행 시키면 나타나는 화면이다. '+Create'을 버튼을 눌러보자. Create a Repl 이란 창이 뜨는데 Templates에는 50가지가 넘는 Template의 목록이 나타난다. 검색창에 react를 입력해 보자. 가..

JS 구구단 가로 형식에 맞혀 출력하기

JS로 구구단을 출력하는 프로그램을 작성해 보자. 구구단은 이중 for 문을 이용해서 출력해야 하기 때문에 안쪽 for문에는 각 단별로 2~9를 곱한 수를 출력하게 하고 바깥 for 문에는 2~9단의 타이틀이 나타나게 하면 된다. 일단 이중 for문의 코드를 작성해 보자. 그런데 단순히 코드만 작성하다 보면 출력이 1열 종대로만 나열되는 이상한 형식으로 출력된다. 즉 다음과 같이 출력된다는 말이다. 우리가 원하는 형식은 각 단이 가로로 출력되는 형식이지 세로로 출력되는 형식이 아니다. 각단이 가로로 나열되게 하려면 어떻게 해야 할까? 2가지의 방법을 생각해 볼 수 있을 것인데 하나는 html에서 테이블을 이용해 원하는 만큼의 칸을 만든 후 각 칸 안에다 숫자를 입력하는 방법이 있을 것이고 또 하나의 방법..

JS에서 웹 브라우저 화면에 변수나 데이터를 출력하는 4가지 방법

JS에서 웹 브라우저 화면에 변수나 데이터를 출력하는 데에는 4가지의 방법이 있다. 1) document.write() 2) window.alert() 3) console.log() 4) innerHtml 등을 이용하는 방법이 그것이다. 하나 하나 예제를 보면서 설명해 보겠다. 1. document.write()를 사용하는 방법 document.wirte()은 JS에서 가장 쉽게 변수나 문자열을 출력하게 해 주는 메서드이다. ()속에 출력하고 싶은 변수나 문자를 입력하면 된다. 태그 사이에는 무엇을 하는 것인지에 대한 주제를 입력해서 현재 어떤 작업을 하는지 알 수 있게 한다. 태그 사이에 JS 코드가 들어간다. document.wirte() 메서드의 ()속에 출력내용이 변수 일 경우에는 " " 없이 변..

자바 스크립트로 전구 불 켜고 끄기

프런트 엔드 개발의 3대장이라 하면 HTML, CSS, Java Script 세가지를 들 수 있는데 이중 Java Script는 HTML과 CSS로 만든 웹페이지에 동작을 주는 역할을 한다. 이번 시간에는 자바 스크립트의 역할을 간단하게 이해할 수 있도록 웹페이지에서 전구를 켜고 끄는 코드를 작성해 보자. 1. 먼저 인터넷에서 전구의 이미지를 다운받아 준비한다. 물론 켜진 것과 끄진 것 두개의 그림이 필요하다. 2. 컴퓨터에서 탐색기를 열고 빈 폴더에 다운받은 이미지 두개를 넣어둔다. 3. VS code를 열어서 준비해 둔 탐색기의 빈 폴더를 찾아간다. 폴더에 2개의 이미지만 들어있다. 4. '파일' 메뉴에서 '새 텍스트 파일'을 선택하고 코드를 입력한다. 코드를 입력했으면 ****.html로 저장한다...

반응형