homebrew 를 통해 nvm 설치하기
brew install nvm
~/.nvm 디렉토리 생성
mkdir ~/.nvm
설치 확인
nvm -v
nvm: not found ~~가 나오면 → 환경변수 설정하기 (터미널이 bash일 경우)
vi ~/.bash_profile
# i 키를 누르면 입력 모드로 전환
# 아래 코드 붙여넣기
환경 변수 추가 (기존에 있는 내용 지우면 안됨)
export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"
저장하고 나가기
esc 키를 누르고
:wq 입력 후 엔터
수정된 bash_profile 파일 적용
source ~/.bash_profile
설치 확인 → nvm -v
특정 객체를 생성하기 위해 변수와 함수를 정의한다 (클래스 구성 → 객체를 정의하기 위한 상태와 함수로 구성)
사용하는 이유? → 객체 단위로 코드를 그룹화하고 쉽게 재사용하려고
클래스 상속 → 이미 만들어 둔 어떤 클래스를 가지고 자식 클래스를 만드는 것
class Dog extends Animal {
// extends는 Animal 클래스를 상속 받아 온다는 뜻
}
스코프(Scope) → 변수에 접근할 수 있는 범위
let array = [1, 2, 3, 4, 5];
let new_array = [...array];
console.log(new_array) // [1, 2, 3, 4, 5]
let info = {name: "mean0", id: 0};
let is_me = info.name === "mean0"? true : false;
console.log(is_me); // true
const array_num = [0, 1, 2, 3, 4, 5];
const new_array = array_num.map((array_item) =>{
return array_item + 1;
});
// 새 배열의 값은 원본 배열 원소에 +1 한 값
console.log(new_array); // [1, 2, 3, 4 ,5 ,6]
// 원본 배열은 그대로
console.log(array_num);
const array_num = [0, 1, 2, 3, 4, 5];
const new_array = array_num.filter((array_item) => {
// 특정 조건을 만족할 때만 return 하면됨
// return에는 true 혹은 false가 들어가야 된다.
return array_item > 3;
});
console.log(new_array); // [4, 5]
const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];
const merge = array_num01.concat(array_num02);
// 중복 값 제거 안됨
console.log(merge); // [0, 1, 2, 3, 3, 4, 5]
const merge = [...new Set([...array_num01, ...array_num2])];
console.log(merge) // [0, 1, 2, 3, 4, 5, ]
// 배열화 하기
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array); // ["m", "e", "a", "n", "0",]
// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들기
const text_array = Array.from('hello', (item, idx) => {return idx});
console.log(text_array); // [0, 1, 2, 3, 4]
// 새 배열 만들기 → 빈 배열을 초기화하기
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열
const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});
console.log(new_array); // [0, 1, 2, 3]
<img/>
<p></p>
<input type="text"> → 에러
<input type="text"/>
function App() {
return
<p>test<p>
<div className="App">
<input type="text"/>
</div> // → 에러
<div className="App">
<p>test<p>
<input type="text"/>
</div> // 정상 작동
}
const cat_name = "lucky";
// return 부분만 복사
return (
<div>
hello {cat_name}!
</div>
);
→ map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용
id는 그대로 id
HTML
<p style="color: orange; font-size: 20px;">orage</p>
JSX
// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>
//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있다
function App() {
const styles = {
color: 'orange',
fontSize: '20px'
};
return (
<div className="App">
<p style={styles}>orange</p>
</div>
);
}