분류 전체보기 (175) 썸네일형 리스트형 React에서 createElement 사용하기 1. React를 사용해서 페이지를 렌더링 하기 위해서는 React와 ReactDom을 가져온다. [index.html] 2. React.createElement 함수를 통해서 원하는 html 요소를 생성한다. [index.js] const span = React.createElement('h3', { onMouseEnter: () => console.log('mouse enter') }, 'TEST') const button = React.createElement('button', { onClick: () => {console.log('clicked')} }, 'Click me') createElement의 첫 번째 인자로는 html의 태그를 작성한다. createElement의 두 번째 인자로는 pr.. JS localStorage 사용하기 저번시간에는 html의 기본동작을 막을 수 있는 preventDefault 함수를 살펴봤다. 오늘은 localStorage에 데이터를 저장하고 가져오는 함수를 공부했다. 1. localStorage.setItem() localStorage에 원하는 값을 원하는 키와 매핑해서 저장할 수 있다. [index.js] const USERNAME_KEY = 'username'; function onLoginSubmit(info) { info.preventDefault(); const username = loginInput.value; loginForm.classList.add(HIDDEN_CLASSNAME) localStorage.setItem(USERNAME_KEY, username); greeting.inne.. JS에서 HTML 기본동작 막기 - preventDefault() 저번 시간에는 JS에서 css에 정의된 클래스들을 사용해서 HTML의 element들을 만져봤다. 오늘은 (새로고침)이나 (페이지 이동)태그들의 기본동작들을 막는 함수를 살펴봤다. 1. 해당하는 element들에게 addEventListenr를 추가해준다. [index.js] const loginForm = document.querySelector('#login-form') const loginInput = document.querySelector('#login-form input') const link = document.querySelector('a'); function onLoginSubmit(info) { info.preventDefault(); const username = loginInput... JS에서 HTML element style - className 변경하기 어제는 JS에서 HTML의 요소들을 가져오고 수정하는 기본적인 방법을 공부했다. 오늘은 JS에서 직접 스타일을 주지 않고, css에 정의된 클래스들을 사용해서 HTML의 element들을 만져봤다. 1. HTML에서 사용할 css파일을 명시해준다. [index.html] TEST 2. css에 사용할 클래스들을 정의해준다. [index.css] .title { color: blue; } .title.clicked { color: tomato; font-size: 20px; } 3. JS에서 변경하고자 하는 요소의 클래스 이름을 바꿔준다. [index.js] const title = document.querySelector('.title'); function handleTitleClick(){ const .. JS에서 HTML 가져오기 JS의 기본적인 문법들을 훑어봤다. 오늘은 JS에서 HTML의 요소들을 어떻게 가져오는지에 대해서 공부했다. 1. HTML에서 사용할 JS를 명시해준다. [index.html] Hello world 2. JS에서 document는 접근할수 있는 html을 가리키는 객체를 의미한다. 콘솔창에 document라고 치면 많은 필드와 값들이 나온다. 이 필드들을 통해서 JS로 HTML에 있는 내용들을 추가하거나 수정할 수 있게된다. 3. querySelecor , getElementById document객체에 기본적으로 있는 함수들이 있다. 그 중 querySelector와 getElementById를 통해서 원하는 HTML의 항목들에 접근할 수 있다. [index.js] const title = docume.. push한 commit message 수정하기 잘못 푸시한 커밋 메세지 현재 상황 : 커밋 메세지를 바꾸고 싶음 해결 방 1. git rebase HEAD~1 -i 2. i 를 눌러서 insert 모드로 들어가기 3. pick -> reword 로 수정하기 5. esc를 눌러서 빠져나온 후 :wq 로 저장 후 나오기 6. git push --force 변경 성공! JS 배열 관련 함수1 /** * Appends new elements to the end of an array, and returns the new length of the array. * @param items New elements to add to the array. */ 추가 - 제일 뒤에 (기존 배열 업데이트) push() : 배열 제일 뒤에 값 추가 후 길이를 반환 /** * Inserts new elements at the start of an array, and returns the new length of the array. * @param items Elements to insert at the start of the array. */ 추가 - 제일 앞에 (기존 배열 업데이트) unshift() : 배열 제.. 바코드 스캐너 프로그램 만들기 - JavaFX(MENIFEST.MF 읽지 못하는 에러 해결) 엑셀로 책 추가하다보니까 신규 책이 오면은 하나씩 엑셀에 기입을 하고있다. 그 과정에서 휴먼에러나 서식에러 등 문제점들이 있어서 아예 책 바코드를 인식해서 ISBN을 통해 책 정보를 가져오는 프로그램을 만들기로 생각했다. 마침 회사에 굴러다니는 바코드 스캐너가 있어서 만들기로 했다. 현재 MOBOOK1.1은 웹서비스인데 웹에 들어가지 않아도 책을 추가하는 프로그램을 만들고 싶었다. 거창한 프로그램은 필요없었고 간단하게 만들거라 어렵지 않은 GUI가 뭐가 있나 찾아봤다. 그리고 인텔리제이로 할 수 있는 GUI중에서 가장 최근에 나온 듯한 JavaFX를 사용하기로 했다. 일단 이름부터가 Java가 들어가서 마음에 들었다. 인텔리제이와 합이 잘 맞을것 같은 뇌피셜이 마구마구 들었다. 계획은 이렇다. 1. Ja.. 이전 1 2 3 4 5 ··· 22 다음
