FRONT-END
-
[javaScript] 자바스크립트 라이브러리 익히기 -1FRONT-END/Javascript 2021. 3. 15. 09:55
숫자 관련 숫자를 문자열로 변환 toExponential() 정수 부분은 1자리, 소수 부분은 입력받은 수만큼 e 표기법을 사용하여 숫자를 문자열로 변환함. toFixed() 소수 부분을 입력받은 수만큼 사용하여 숫자를 문자열로 변환함. toPrecision() 입력받은 수만큼 유효 자릿수를 사용하여 숫자를 문자열로 변환함. 날짜 관련 날짜를 문자열이나 숫자로 변환 getDate() 날짜 중 일자를 숫자로 반환함. (1 ~ 31) getDay() 날짜 중 요일을 숫자로 반환함. (일요일 : 0 ~ 토요일 : 6) getFullYear() 날짜 중 연도를 4자리 숫자로 반환함. (yyyy년) getMonth() 날짜 중 월을 숫자로 반환함. (1월 : 0 ~ 12월 : 11) getTime() 1970년 ..
-
[React] CRUDFRONT-END/React 2020. 11. 5. 16:01
| App.js import React, { Component } from 'react'; import { BrowserRouter, Link, Route } from 'react-router-dom'; import Home from './components/Home.js' import Profile from './components/Profile.js' import About from './components/About.js' import './css/style.css' class App extends Component { render(){ return ( HomeA ProfileA AboutA ); }// render end } export default App; | Home.js import Rea..
-
[React] 펼치기FRONT-END/React 2020. 11. 5. 15:45
| 펼치기란 ? 펼치기는 map/reduce/filter 에 해당되지 않는 것인데, 코드가 굉장히 간결하다. let values = [3, 1, 3, 5, 2, 4, 4, 4]; let uniqueValues = [...new Set(values)]; // uniqueValues is [3, 1, 5, 2, 4] let nested = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; let flat = nested.reduce((acc, it) => [...acc, ...it], []); console.log(flat); // flat is [1, 2, 3, 4, 5, 6, 7, 8, 9]
-
[React] Filter 메소드 예제FRONT-END/React 2020. 11. 5. 14:28
| Filter Filter 메소드는 말그대로 필터링을 해주는 함수로, 함수에 주어진 조건에 참인 모든 요소들을 모아 새로운 배열로 반환한다. | Filter 예제 1 배열 arr 의 안에 있는 값들 중 10보다 큰 수만 모아 새로운 배열 arr_filter 을 생성한다. let arr = [1,2,3,4,5,6,7,8,9,123,222]; let arr_filter = arr.filter(v => v > 10) console.log(arr_filter) // 결과값 : [ 123, 222 ] | Filter 예제 2 filter() 함수는 인자로 제공되는 함수에 의해 test 를 통과한 모든 요소를 새로운 array 로 만든다. 따라서 filter 함수를 사용하려면 매개인자로 참과 거짓을 가릴 수 있는..
-
[React] 배열을 출력하기 위해 Map 메소드 사용하기FRONT-END/React 2020. 11. 5. 14:23
| Map 메소드 Map 메소드는 파라미터로 전달 된 함수를 통해 배열의 각 요소를 프로세싱하여 그 결과로 새로운 배열을 생성한다. let arr = [3,4,5,6,7,8,9,123]; let arr_map = arr.map(function(value){ return value*2 }) console.log(arr_map) // 결과값 : [ 6, 8, 10, 12, 14, 16, 18, 246 ] | map을 사용해서 사진을 배열로 출력하기 import React from "react" class MyPic extends React.Component { state = { pics:[ './images/sw01.png', './images/sw02.png', './images/sw03.png', './..
-
[React] Key 값으로 출력하기FRONT-END/React 2020. 11. 5. 12:16
import React from 'react' import './App.css' import Counter from './Counter.js' import MyName from './MyName' export default class App extends React.Component{ state = { idx:7700, nick:'kim', idols:['orange','red','pink','black'], } render(){ let arr = this.state.idols; let str = []; // arr를 담아줄 배열 추가 //key값 사용 for(let i=0; i
-
[React] React 에서 배열 사용하기FRONT-END/React 2020. 11. 5. 12:07
| App.js import React from 'react' import './App.css' import Counter from './Counter.js' import MyName from './MyName' export default class App extends React.Component{ state = { idx:7700, nick:'kim', idols:['orange','red','pink','black'], } render(){ return( App.js )//return end }//render end }//class end | 배열 펼치기 let values = [3,1,3,5,2,4,4,4]; let uniqueValues = [...new Set(values)]; | 배열 웹페이..
-
[React] React에서 생성자 사용하기FRONT-END/React 2020. 11. 5. 11:41
| MyName.js import React from "react" class MyName extends React.Component { static defaultProps = { first:'one', last:'LA', }//end /*생성자*/ constructor(){ super(); var msg='abc'; var msg='zxc'; } render(){ return( MyName.js 닉네임 : {this.props.first} {this.props.last} ); } } export default MyName; | 생성자내에서 super(); 을 사용하지 않으면 에러가 난다. | let 을 썼더니 에러가 난다. | var 를 썼더니 정상적으로 출력이 된다.