본문 바로가기

전체 글155

[JavaScript] DOM이란 무엇인가? JavaScript를 공부하다보면 브라우저 기반의 여러 객체들에 대해서 듣게 됩니다. 처음부터 이 객체들이 구체적으로 파악하기는 쉽지 않습니다. 하지만 JavaScript는 이런 웹 브라우저 기반의 객체 위에서 동작하니 잘 알아야겠죠. 이번 포스팅에서는 DOM에 대해서 알아보겠습니다. BOM이란 무엇인가? 웹 서비스 개발은 브라우저와 밀접한 관련이 있습니다. 모든 서비스는 사실 웹 브라우저를 바탕으로 실행이 되니까요. 이 브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM: Browser Object Model)이라고 부릅니다. 이 브라우저 객체 모델(BOM)을 이용해서 Browser와 관련된 기능들을 구성합니다. DOM은 이 BOM 중의 하나입니다. 브라우저 객체 모델(BOM)의 최상위 객체는.. 2020. 7. 29.
3-3 리액트 반복분(key) 리액트에서 반복문을 사용하는 방법은 배열과 객체를 이용하는 방법이 있다. 먼저, 배열을 이용하는 방법은 배열의 인덱스를 사용하여 값을 전달하는 방법 render(){ return( {this.state.result} {/* value랑 onChange는 세트이다 */} 시도: {this.state.tries.length} {/* {['like', 'like', 'like', 'like', 'like'].map((v) =>{ return ( {v} ); })} */} {[ ['사과', '맛있다'], ['바나나', '달다'], ['사과', '맛있다'], ['사과', '맛있다'], ['사과', '맛있다'], ['사과', '맛있다'], ['사과', '맛있다'], ].map((v) => { return ( {v[.. 2020. 7. 27.
webpack 설정하기 해당 폴더 만들기 npm init으로 설정하기 npm i react react-dom npm i -D webpack webpack-cli npm i babel-loader npm i @babel/core npm i -D @babel/preset-env npm i -D @babel/preset-react 을 콘솔창에 입력해준다음 webpack.config.js를 파일명으로 파일을 만들어준다. webpack.config.js webpack.config.js 들어갈 설정에는 위와같이 해주면 된다. const path = require('path'); module.exports = { mode: 'development', devtool: 'eval', // hidden-source-map resolve: { e.. 2020. 7. 26.
여러개의 input 상태 관리하기 import React, { useState } from 'react'; function InputSample(){ //여러개의 객체를 관리해줘야 한다. const [inputs, setInputs] = useState({ name:'', nickname:'', }); const { name, nickname } = inputs; //비구조화할당을 통해 추출 const onChange = (e) => { const { name, value } = e.target; setInputs({ //객체를 업데이트할 때는 기존 객체를 복사해야한다. ...inputs, //spread 연산자 [name]: value, // 실제 []안에 무엇을 가르키고있는지에 따라 다른 key값이 변경된다 }); } const on.. 2020. 7. 19.

티스토리툴바