본문 바로가기

전체 글

 (90)
React state 리액트에선 변수말고 state를 만들어서 데이터를 저장할 수 있다. state의 용도는 변수랑 똑같다. 그럼에도 불구하고, 굳이 변수 말고 state 를 쓰는 이유는 state는 변동사항이 생기면 state쓰는 html도 자동으로 재렌더링 해준다. state 는 어떻게 사용하냐면 1. 맨 윗줄에 import {useState} from 'react' 하고 2. let [ 데이터명 , 데이터바꿀때함수명 ] = useState('저장하고싶은 데이터'); function App() { let [a, b] = useState(["a1", "a2", "a3", "a4"]); console.log(a); } //['a1', 'a2', 'a3', 'a4'] 위와같이 여러개의 데이터를 변수에 담아서 저장 할 수있다. ..
JSX문법 JSX란? JSX ( JavaScript XML) 라고하며 리액트에서 레이아웃을 만들때 쓰는 문법인데 JavaScript 를 확장한 문법이다. 쉽게 생각해서 JavaScript 에서 HTML 을 사용 할 수 있게 만들어주는 기능을 제공하고 function App() { return 안녕하세요; } 이렇게 입력하면 React.createElement('div',null,'안녕하세요') 로 알아서 변환해 준다. JSX문법 1. html에 class 를 넣을땐 className 으로 JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class라는 키워드를 막 사용하시면 문제가 될수 있음 그래서 class=" " 넣고 싶으면 className이라고 써야함 JSX 문법 2. 변수를 html에 넣을..
내일배움캠프 Week 5 다음주 부터 리액트 를 배운다. 그래서 이번주 까지 자바스크립트 심화학습을 진행했다. 한달 전의 나의 실력과 비교하면 많이 발전한 모습이다. 자바스크립트 심화학습을 하면서 지난번 프로젝트때 사용했던 문법들이 왜 쓰인건지 이제서야 알겠다.. 다음주도 화이팅 하자 !
forEach, for in 반복문 forEach 반복문 구조 var arr = [28, 30, 32]; arr.forEach(function(a, i){ console.log(a) }); 첫번째 파라미터는 반복문 돌 때 마다 array 안에 있던 하나하나의 데이터가 되고 두번째 파라미터는 반복문 돌 때 마다 0부터 1씩 증가하는 정수가 된다 (두번째 파라미터는 생략이 가능하다) for in 반복문 구조 var obj = { name : 'kim', age : 20 } for (var key in obj){ console.log(key) console.log(obj[key]) } object 자료 갯수만큼 반복문을 돌리고 싶으면 위와 같이 활용할 수 있다. 키값을 출력하고 싶을때는 key 키값의 value를 출력하고 싶을떄는 obj[key]
Ajax 기초 Ajax 쉽게 말해서 새로고침(페이지 이동) 없이 데이터를 주고 받는 것이 가능하여 즉각적으로 화면을 전환할 수 있다. 바닐라 자바스크립트 fetch('https://codingapple1.github.io/price.json') .then(res => res.json()) .then(function(data){ console.log(data) }) .catch(function(error){ console.log('실패함') }); 이런식으로 사용할 수 있는데 res => res.json() 요청된 응답을 제이슨형식으로 이쁘게 변환 data => 제이슨형식으로 받은 응답의 값을 data 라고 명명 제이쿼리 $.get('https://codingapple1.github.io/hello.txt') .done..
내일배움캠프 Day 23 모달 사용법 1.모달 화면을 만든다 HTML+CSS 2.모달 화면에 들어가는 CSS를 visibility:hidden or display:none 으로 지정해 놓는다. *visibility 와 display의 차이 visibility:hidden visible 보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨 display:none block 아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨 3.특정 이벤트가 발생하면 visibility:visible or disply:block 으로 설정해놓은 CSS 파일을 추가한다. 예를 들어 어떠한 버튼(class)을 클릭 했을때 모달창을 띄우려면 // css // .모달 화면 { z-index : ..
내일배움캠프 Day 22 버튼 토글 구현 Navbar An item A second item A third item A fourth item And a fifth one css파일에 ('navbar-toggler')[0] 클래스를 display:none 으로 하고 ('show') 라는 클래스에 display:block 을 작성한뒤 이벤트 리스너를 사용하여 ('navbar-toggler')[0]클래스를 클릭하면, ('show') 라는 클래스가 토글 기능을 수행함. 참고 document.getElementsByClassName('navbar-toggler')[0] 은 document.querySelectorAll('.navbar-toggler')[0]과 같읕 값을 보여줌 document.querySelector는 첫번째로 발견되는 ..
내일배움캠프 Day 21 프로젝트가 끝났다 시원섭섭하다 배운것도 많아서 이것저것 구현하였지만 내가 원한것을 구현하지 못한것도 많다. 그래도 구현한 것중 마음에 들었던 코드는 수정하기 기능

티스토리툴바