'전체 글'에 해당되는 글 508건

2020.03.30 react InputSample
2020.03.30 React 사용하기(준비물)
2020.03.29 Vanilla JavaScript # 모달 만들기
2020.03.28 spread연산자
2020.03.28 Javascript #prototype
2020.03.28 JavaScript #ES6 Class
2020.03.28 JavaScript #내장함수 reduce
2020.03.28 JavaScript #내장함수 (shift, pop, unshift, push, concat, join)

react InputSample

2020/React 2020. 3. 30. 19:01

InputSample.js

import React, { useState } from "react";

function Counter() {
  const [number, setNumber] = useState(0);
  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  };
  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

app.js

import React from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";
function App() {
  return <InputSample></InputSample>;
}

export default App;

저작자표시

'2020 > React' 카테고리의 다른 글

Counter 만들기 useState (0)	2020.03.30
React 조건부 렌더링 (0)	2020.03.30
React Children (0)	2020.03.30
첫번째 컴포넌트 (0)	2020.03.30
React 사용하기(준비물) (0)	2020.03.30

블로그 이미지

꽃꽂이하는개발자

,

React 사용하기(준비물)

2020/React 2020. 3. 30. 13:56

node js: 브라우저 환경이 아닌 곳에서도 자바스크립트를 실행할 수 있도록 도와주는 런타임

yarn: 자바스크립트 도구를 매니징하는 도구 (npm 비슷한거.. npm보다 빠름)

VSCode

1. node js, yarn, VSCODE를 설치해주고 git bash 창을 열어 확인해 줍니다.

2. 자기가 원하는 폴더에 새로운 리액트 프로젝트를 만들어 봅시다. (저는 d: react-study폴더에 만들거에요)

cd d:

mkdir react-study

npx create-react-app begin-react

하면 begin-react 폴더가 만들어지고 생성이 됩니다.

그 후에 vscode로 열어 줍니다.

3. git bash 에서 우리가 생성한 프로젝트 begin-react 폴더로 들어가서 yarn start를 해줍니다

cd begin-react

yarn start

4. 그러면

이러한 브라우저창이 뜨게 됩니다^^

개발 서버를 끄고 싶으시면 git bash창에서 ctrl + c를 하시면 서버가 꺼집니다.

vscode 내에 terminal 에서 서버를 켜고 싶으신 분들은 terminal 창에서 yarn start 하시면 실행이 됩니다.

저작자표시

'2020 > React' 카테고리의 다른 글

Counter 만들기 useState (0)	2020.03.30
React 조건부 렌더링 (0)	2020.03.30
React Children (0)	2020.03.30
첫번째 컴포넌트 (0)	2020.03.30
react InputSample (0)	2020.03.30

블로그 이미지

꽃꽂이하는개발자

,

Vanilla JavaScript # 모달 만들기

2020/Vanilla JavaScript 2020. 3. 29. 18:31

html

<!DOCTYPE html>
<html>

<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
</head>

<body>
	<h1> 안녕하세요</h1>
	<p>환영합니다.</p>
	<button id="open"> 모달 열기</button>
	<div class="modal-wrapper" style="display: none">
		<div class="modal">
			<div class="modal-title">
				안녕하세요
			</div>
			<p> 모달 내용</p>
			<div class="close-wrapper">
				<button id="close"> 닫기</button>
		</div>

	</div>

	<script src="src/index.js">
	</script>
</body>

</html>

css

body {
  font-family: sans-serif;
}

.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: white;
  padding: 24px 16px;
  border-radius: 15px;
  width: 300px;
}

.modal-title {
  font-size: 24px;
  font-weight: bold;
}

.close-wrapper {
  text-align: right;
}

JS

import "./styles.css";

const open = document.getElementById("open");
const close = document.getElementById("close");
const modal = document.querySelector(".modal-wrapper");

open.onclick = () => {
  modal.style.display = "flex";
};

close.onclick = () => {
  modal.style.display = "none";
};

저작자표시

'2020 > Vanilla JavaScript' 카테고리의 다른 글

Javascript class, object (0)	2020.09.20
Javascript #prototype (0)	2020.03.28
JavaScript #ES6 Class (0)	2020.03.28
JavaScript #내장함수 reduce (0)	2020.03.28
JavaScript #내장함수 (shift, pop, unshift, push, concat, join) (0)	2020.03.28

블로그 이미지

꽃꽂이하는개발자

,

spread연산자

2020/JAVA SCRIPT 2020. 3. 28. 23:31

spread연산자

rest연산자

저작자표시

'2020 > JAVA SCRIPT' 카테고리의 다른 글

마우스로 글자 색 변경하기 (0)	2020.02.14
<noscript> (0)	2020.01.29
<script> (0)	2020.01.25

블로그 이미지

꽃꽂이하는개발자

,

Javascript #prototype

2020/Vanilla JavaScript 2020. 3. 28. 21:47

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
}

const dog = new Animal("개", "멍멍이", "멍멍");
const cat = new Animal("고양이", "야옹이", "야옹");

Animal.prototype.say = function() {
  console.log(this.sound);
};

dog.say();
cat.say();

저작자표시

'2020 > Vanilla JavaScript' 카테고리의 다른 글

Javascript class, object (0)	2020.09.20
Vanilla JavaScript # 모달 만들기 (0)	2020.03.29
JavaScript #ES6 Class (0)	2020.03.28
JavaScript #내장함수 reduce (0)	2020.03.28
JavaScript #내장함수 (shift, pop, unshift, push, concat, join) (0)	2020.03.28

블로그 이미지

꽃꽂이하는개발자

,

JavaScript #ES6 Class

2020/Vanilla JavaScript 2020. 3. 28. 21:45

class Animal {
  constructor(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
  }
  say() {
    console.log(this.sound);
  }
}
//상속
class Dog extends Animal {
  constructor(name, sound) {
    super("개", name, sound);
  }
}
class Cat extends Animal {
  constructor(name, sound) {
    super("고양이", name, sound);
  }
}
const dog = new Dog("멍멍이", "멍멍");
const cat = new Cat("야옹이", "야옹");
const cats = new Cat("고양이들", "야오오오오오옹");

dog.say();
cat.say();
cats.say();

class Food {
  constructor(name) {
    this.name = name;
    this.brands = [];
  }
  addBrand(brand) {
    this.brands.push(brand);
  }
  print() {
    console.log(`${this.name}을/를 파는 음식점들:`);
    console.log(this.brands.join(", "));
  }
}

const pizza = new Food("피자");
pizza.addBrand("피자헛");
pizza.addBrand("도미노피자");

const chicken = new Food("치킨");
chicken.addBrand("굽네치킨");
chicken.addBrand("동네앞치킨");

pizza.print();
chicken.print();

저작자표시

'2020 > Vanilla JavaScript' 카테고리의 다른 글

Vanilla JavaScript # 모달 만들기 (0)	2020.03.29
Javascript #prototype (0)	2020.03.28
JavaScript #내장함수 reduce (0)	2020.03.28
JavaScript #내장함수 (shift, pop, unshift, push, concat, join) (0)	2020.03.28
JavaScript splice vs slice (0)	2020.03.28

블로그 이미지

꽃꽂이하는개발자

,

JavaScript #내장함수 reduce

2020/Vanilla JavaScript 2020. 3. 28. 20:10

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

const numbers = [1, 2, 3, 4, 5];
//---------------------forEach
// let sum = 0;
// numbers.forEach(n =>{
//   sum += n;
// });
// console.log(sum);  // 15
//---------------------reduce 더하기
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum); //15

// --------------------reduce 평균
const avg = numbers.reduce((accumulator, current, index, array) => {
  if (index == array.length - 1) {
    return (accumulator + current) / array.length;
  }
  return accumulator + current;
}, 0);

console.log(avg);

// 알파벳 중복수

const alphabets = ["a", "d", "a", "b", "c", "d", "d", "e"];

const count = alphabets.reduce((acc, cur) => {
  if (acc[cur]) {
    acc[cur] += 1;
  } else {
    acc[cur] = 1;
  }
  return acc;
}, {});
console.log(count);

저작자표시

'2020 > Vanilla JavaScript' 카테고리의 다른 글

Javascript #prototype (0)	2020.03.28
JavaScript #ES6 Class (0)	2020.03.28
JavaScript #내장함수 (shift, pop, unshift, push, concat, join) (0)	2020.03.28
JavaScript splice vs slice (0)	2020.03.28
JavaScript #filter내장함수 (0)	2020.03.28

블로그 이미지

꽃꽂이하는개발자

,

JavaScript #내장함수 (shift, pop, unshift, push, concat, join)

2020/Vanilla JavaScript 2020. 3. 28. 19:41

shift() : 배열의 앞에서부터 shift()이 실행될때마다 하나씩 삭제

// shift(): 실행될때 마다 배열의 맨 앞에서 부터 잘라냄.
const numbers = [10, 20, 30, 40];
const num = numbers.shift();
console.log(num); // 10 을 삭제
console.log(numbers); // 20, 30, 40 출력

pop() : 배열의 뒤에서부터 pop이 실행될때마다 하나씩 삭제

const numbers = [10, 20, 30, 40];
const num = numbers.pop();
console.log(num);
console.log(numbers);

unshift(): 배열의 맨 앞쪽에 하나씩 추가

const numbers = [10, 20, 30, 40, 50];
const num = numbers.unshift(5);
console.log(num);
console.log(numbers);

push() : 배열의 맨 뒤쪽에 하나씩 추가

const numbers = [10, 20, 30, 40, 50];
const num = numbers.push(5);
console.log(num);
console.log(numbers);  // [10,20,30,40,50,5]

concat: 배열을 합쳐줌 (concat은 기존의 배열을 수정하지 않는다.)

const arr1 = [1,2,3,4,5];
const arr2 = [6,7,8,9,10];
const concated = arr1.concat(arr2);
console.log(concated); //[1,2,3,4,5,6,7,8,9,10]

join() : 배열의 수 사이에 넣어줌.

저작자표시

'2020 > Vanilla JavaScript' 카테고리의 다른 글

JavaScript #ES6 Class (0)	2020.03.28
JavaScript #내장함수 reduce (0)	2020.03.28
JavaScript splice vs slice (0)	2020.03.28
JavaScript #filter내장함수 (0)	2020.03.28
Javascript 내장함수 foreach, map, indexOf, findIndex, find (0)	2020.03.28

블로그 이미지

꽃꽂이하는개발자

,

달력

티스토리툴바