뽑는 메소드
pop() : 가장 마지막 요소를 뽑는다.
shift() : 가장 첫 요소를 뽑는다.
배열에 추가하는 메소드
push() : 가장 마지막에 추가한다.
unshift() : 가장 첫 번째에 추가한다.
조합을 해보자.
var a = [];
var b = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for (var i = 0; i < 3; i++) {
var randomNum = b.pop();
a.push(randomNum);
}
pop
pop으로 뒤에것부터 3개를 빼면 9 8 7
push로 마지막에 추가해서 집어넣으면 그대로 9 8 7
pop은 그대로 가고, push가 아니라 unshift였다면?
앞부터 채워 넣으니까 7 8 9
| [Java] 출력 시 공백 맞추기,..printf사용 (0) | 2015.12.24 |
|---|---|
| [Java] 약수 구하는 코드 (0) | 2015.12.24 |
데이터를 선언할 때, 객체인데 자꾸 선언을 잘못하여 발생한다.
data() {
return {
enteredGoalValue='',
goals: []
};
},
키 : 값
키 : 값
이렇게 콜론으로 적어야하는데, 자꾸 = 으로 적어서 에러가 발생하는 중이다. 적응하기 어렵다.
data() {
return {
enteredGoalValue : '',
goals: []
};
},
으로 변경하면 에러가 없어지게 된다.
| [Vue공부] Vue의 데이터 바인딩과 메소드를 이용한 구구단 게임 만들기 (0) | 2020.12.09 |
|---|---|
| [Vue공부] 가장 기초 - HTML에 {{ }}을 사용하기 : 선언적 렌더링 (0) | 2020.12.08 |
기능
1. 1~9까지의 숫자 중, 임의의 숫자를 2개 불러온다.
2. 입력창(Input)에 정답을 입력하면 정답/오답을 판독하여 알려준다.
3. 자동으로 다음 문제로 이동한다.
이 것은 HTML에서 Vue 인스턴스의 데이터를 사용하는 방법과 메소드를 호출하는 방법을 익히는 예제이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>이것은 테스트</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h1>{{first}} 곱하기 {{second}}는 얼마입니까?</h1>
<input type="number" v-model="value" />
<button @click="checkResult">제출</button>
<h2>{{result}}</h2>
</div>
<script>
const app = new Vue({
el: "#root",
data: {
first: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: "",
result: "",
},
methods: {
checkResult() {
if (this.first * this.second === parseInt(this.value)) {
this.result = "정답입니다! 다음 문제 갑니다";
this.value = "";
setTimeout(() => {
this.first = Math.ceil(Math.random() * 9);
this.second = Math.ceil(Math.random() * 9);
this.result = "";
}, 2000);
} else {
this.result = "틀렸습니다. 다시 입력하세요.";
this.value = "";
}
},
},
});
</script>
</body>
</html>
| Uncaught SyntaxError: Invalid shorthand property initializer 에러 (0) | 2020.12.11 |
|---|---|
| [Vue공부] 가장 기초 - HTML에 {{ }}을 사용하기 : 선언적 렌더링 (0) | 2020.12.08 |
HTML에 Vue를 연결하기....가장 기초부터...
1. index.html을 하나 만든 뒤, 아래 코드를 붙여넣는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>이렇게 하고 실행하면 어떻게 될까?
결과 : {{message}}
어떻게 Vue를 연결시킬까? 이것은 .js파일에서 해줘야한다.
<script src="./app.js"></script> 를 </body>위에 추가해준다.
그 다음에...
2. app.js를 생성한다.
var app = new Vue({
el: "#app",
data: {
message: "안녕하세요!",
},
});
를 입력하고, index.html을 다시 확인해보자.
{{message}}가 아니라, 안녕하세요! 로 바뀐 것을 볼 수 있다.
이것이 Vue를 연결시킨 것이다!
이제 데이터와 DOM이 연결되었으며 반응형이 되었다.
즉, 수정하면 변경된 그 부분만 바로바로 업데이트되어 고쳐지는 것을 의미한다.
| Uncaught SyntaxError: Invalid shorthand property initializer 에러 (0) | 2020.12.11 |
|---|---|
| [Vue공부] Vue의 데이터 바인딩과 메소드를 이용한 구구단 게임 만들기 (0) | 2020.12.09 |
리액트 설치 후, 프로젝트를 오픈했다.
그리고 파일을 열었는데... 한 화면에서 계속 바뀌면서 열렸다.
여러개 뜨는 걸 예상했기때문에 당황스러웠다.
뭐지?
a
b
c
d
파일이 있다고 하면, a b c d 선택을 하면 파일 4개가 열려야하는데...
a에서 b누르면, a있던 곳에서 b가 나오고,,,
b에서 c누르면, b있던 곳에서 c가 나오고,,,
c에서 d누르면, c있던 곳에서 d가 나오고,,,
결국하나만 나온다.
검색해봤다.
위 3개중에 중간 Workbench > Editor: Enable Preview를
체크 해제해주면 된다.
쉽다. 좋다. 해결. 끝.
| [React] 리액트 훅(Hook) 사용할 때 에러 : Hooks can only be called inside of the body of a function component. (1) | 2020.07.29 |
|---|---|
| [React] 저장하면 코드를 예쁘게 정렬해주는 Prettier가 작동이 안되요 (0) | 2020.07.22 |
| [React] vs code로 리액트 개발 시, 꼭 필요한 확장 패키지 (0) | 2020.07.22 |
| [React] 개발 시, HTML 태그가 적용되지 않을 때 해결 방법 (0) | 2020.07.19 |
| [React] 리액트 쓸때 기본적인 컴포넌트 코드 자동 완성 패키지 (0) | 2020.07.19 |
제목에서 이미 해결방법이 나왔다.
Hook을 사용할 때...
이렇게 작성을 해야 버튼을 눌렀을 때, 1씩 올라가는 예제가 정상적으로 만들어진다.
그런데,
const [count, setCount] = useState(0);
이 부분을 App() 컴포넌트 밖으로 선언하게 되면 에러가 발생한다.
영어를 좀 하면 해결할 수 있다.
훅(Hook)은 반드시 함수 컴포넌트 내부에 호출해야한다.
| [React] vs code에서 소스 파일이 한 개만 계속 덮어쓰면서(?) 열릴때... (0) | 2020.08.26 |
|---|---|
| [React] 저장하면 코드를 예쁘게 정렬해주는 Prettier가 작동이 안되요 (0) | 2020.07.22 |
| [React] vs code로 리액트 개발 시, 꼭 필요한 확장 패키지 (0) | 2020.07.22 |
| [React] 개발 시, HTML 태그가 적용되지 않을 때 해결 방법 (0) | 2020.07.19 |
| [React] 리액트 쓸때 기본적인 컴포넌트 코드 자동 완성 패키지 (0) | 2020.07.19 |
"12"는 문자일까 숫자일까?
String이므로 문자이다.
숫자로 사용하고 싶다면 어떻게 할까?
parseInt 함수 사용하는 방법도 있고, Number함수를 사용하는 방법도 있다.
이 둘 중에서는 Number함수를 사용하는 것이 좀 더 효율적이다. 빠르다고 해야할까?
static addZeros = numbers => numbers.map(number => {
return Number(`${number}0`);
});
이 경우는 좀 특별한 경우이다.
[1,2,3,4,5,6,7] 배열이 있다고 가정하면
[10,20,30,40,50,60,70] 배열로 만들고 싶을 때 위와같이 작성하면 된다.
물론 복잡하게 하지말고 *10을 해도 되지만... 곱하지말고 0을 붙이라는 조건이 있다면?
Number와 ` `를 혼합하여 사용하면 된다.
여기서 숫자를 문자열로 바꾸는 방법도 나왔다.
기존에는 ' ' 나 " "을 이용하여 문자열로 변환했다. 하지만 ES6가 나오면서 백틱이라 부르는
키보드 숫자 1 왼쪽에 있는 이 요상하게 생긴 것을 사용하면 된다.
이것이 정말 편한 이유는 이 안에 변수명 등을 문자열과 혼합하여 사용할 수 있기 때문이다.
문자열이 아닌 변수를 사용하고 싶다면 달러를 쓴 다음 $ 중괄호를 열고 닫는다
${}
그리고 중괄호안에다가 변수를 작성하면, 문자열이 아닌 자바스크립트 코드로 인식하게 된다.
const string = `나의 나이는 ${age}이고, 사는 곳은 ${address}입니다.`;
이렇게 사용할 수 있다. 옛날 방식을 이용하면... 아래와 같이 썼었다. 더 길어지면 더더욱 복잡하다.
const string = "나의 나이는 " + age + "이고, 사는 곳은 " + address + "입니다."
그러므로 백틱을 잘 활용하자.
배운 것
1. Number 함수 : 문자열을 숫자로 변환해주는 함수
2. Backtick : 문자열 내에서 자바스크립트 코드를 혼용할 수 있게 하는 것
| const와 let 그리고 고인물이 된 var까지 알아봅시다. (0) | 2021.04.10 |
|---|---|
| [자바스크립트] if 조건을 사용할 때, false가 나오는 경우는 언제일까요? (0) | 2021.03.26 |
| [자바스크립트] Object.freeze()를 통해 변경할 수 없는 객체를 만들어요 (0) | 2020.07.27 |
| [자바스크립트] 객체에서 키(key) 또는 값(value)만 따로 배열로 뽑기?! (0) | 2020.07.27 |
| [Javascript] 자바스크립트 화살표 함수에서 리턴 생략하기 (0) | 2019.02.17 |
객체를 쉽게 변경할 수 있다면 문제가 발생할 수 있다.
그래서, freeze()를 통해 얼려버려서. 추가, 수정,삭제를 일절 못 하게 막는다.
아무리 추가를 하고, 수정을 하고, delete로 삭제를 해도 변함없이 prop: 42만 살아있다 !!!!!!
| [자바스크립트] if 조건을 사용할 때, false가 나오는 경우는 언제일까요? (0) | 2021.03.26 |
|---|---|
| [자바스크립트] 문자로 된 숫자를 찐 숫자로 바꾸는 방법은 무엇일까? (0) | 2020.07.28 |
| [자바스크립트] 객체에서 키(key) 또는 값(value)만 따로 배열로 뽑기?! (0) | 2020.07.27 |
| [Javascript] 자바스크립트 화살표 함수에서 리턴 생략하기 (0) | 2019.02.17 |
| [Javascript] moment.js를 이용하여 특정 날짜로부터 몇 일 후 구하기 (0) | 2019.01.30 |
const objA = {
name: "JANG",
address: "Seoul",
nationality: "Korea",
age: 22
};
와 같은 객체가 있다고 한다.
키 또는 값만 따로 배열로 추출하고 싶다면 어떻게 할 수 있을까?
키의 경우
const { name, address, nationality, age} = objA;
이렇게 한 뒤에,
return [name, address, nationality, age];
이렇게 리턴해줄수도 있겠지만,
쉽게 Object객체를 통해 한방에 배열로 만드는 방법이 있다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
Object.keys()
The Object.keys() method returns an array of a given object's own enumerable property names, iterated in the same order that a normal loop would.
developer.mozilla.org
이것을 사용하면, 끝!!
.keys가 있으니까... values도 있지 않을까?
빙고!
이렇게 객체에서 키,.. 값을 추출할 수 있다.
| [자바스크립트] 문자로 된 숫자를 찐 숫자로 바꾸는 방법은 무엇일까? (0) | 2020.07.28 |
|---|---|
| [자바스크립트] Object.freeze()를 통해 변경할 수 없는 객체를 만들어요 (0) | 2020.07.27 |
| [Javascript] 자바스크립트 화살표 함수에서 리턴 생략하기 (0) | 2019.02.17 |
| [Javascript] moment.js를 이용하여 특정 날짜로부터 몇 일 후 구하기 (0) | 2019.01.30 |
| [자바스크립트] Date()객체로 날짜 구하기 & moment() 객체로 날짜 구하기 (0) | 2018.12.19 |
잘 쓰던 Prettier가 갑자기 동작을 안 한다.
정렬이 안 된다.
예쁜이가 왜 동작을 안 할까?
검색해봤다.
찾았다.
VS Code를 업데이트했었는데
Preference -> Settings에서
Format on save
을
체크가 해제되어 있는 것을 볼 수 있다.
어휴.
체크를 다시 해주면 해결!!
저장하는 순간 정렬해준다.
한번 맛들이면 너무 편해...없으면 허전해..
| [React] vs code에서 소스 파일이 한 개만 계속 덮어쓰면서(?) 열릴때... (0) | 2020.08.26 |
|---|---|
| [React] 리액트 훅(Hook) 사용할 때 에러 : Hooks can only be called inside of the body of a function component. (1) | 2020.07.29 |
| [React] vs code로 리액트 개발 시, 꼭 필요한 확장 패키지 (0) | 2020.07.22 |
| [React] 개발 시, HTML 태그가 적용되지 않을 때 해결 방법 (0) | 2020.07.19 |
| [React] 리액트 쓸때 기본적인 컴포넌트 코드 자동 완성 패키지 (0) | 2020.07.19 |
|
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
