본문 바로가기

전체 글

 (224)
React에서 useState사용하기 1. 동적인 데이터를 useState함수를 사용해서 지정해준다. [react.js] const root = document.querySelector('#root') const App = () => { let [counter, setCounter] = React.useState(0); } ReactDOM.render(, root); 2. 어떤 동작을 실행할 때 데이터를 수정해주는 함수를 만들어준다. 일반적으로 데이터 접두어로 set을 붙여서 만드는 듯 하다. [react.js] const root = document.querySelector('#root') const App = () => { let [counter, setCounter] = React.useState(0); function countUp(..
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() : 배열 제..

티스토리툴바