nvm 설치하기
-
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
DOM (트리 구조)
- html 단위 하나하나를 객체로 생각하는 모델
- ex ) "div태그"라는 객체는 하위의 어떤 값을 가지고 있는다 → 트리 구조라고한다
React
- javascript 라이브러리
ES6
- ES6 → 자바스크립트 표준 문법 중 하나
클래스란?
-
특정 객체를 생성하기 위해 변수와 함수를 정의한다 (클래스 구성 → 객체를 정의하기 위한 상태와 함수로 구성)
사용하는 이유? → 객체 단위로 코드를 그룹화하고 쉽게 재사용하려고
-
클래스 상속 → 이미 만들어 둔 어떤 클래스를 가지고 자식 클래스를 만드는 것
class Dog extends Animal { // extends는 Animal 클래스를 상속 받아 온다는 뜻 }
let, const, Scope
스코프(Scope) → 변수에 접근할 수 있는 범위
- var: 함수 단위
- let: block 단위 (let으로 선언한 변수는 값이 변할 수 있다)
- const: block 단위 (상수 → 한 번 선언한 값을 바꿀 수 없다)
Spread 연산자 (Spread 문법)
- 어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내준다
let array = [1, 2, 3, 4, 5];
let new_array = [...array];
console.log(new_array) // [1, 2, 3, 4, 5]조건부 삼항 연산자
- if문의 단축 형태
- 사용법 → 조건 ? 참일 경우: 거짓일 경우
let info = {name: "mean0", id: 0};
let is_me = info.name === "mean0"? true : false;
console.log(is_me); // trueArray 내장 함수
map
- 배열에 속한 항목을 변환할 때 많이 사용
어떤 배열에 속한 항목을 원하는 대로 변환하고, 변환한 값을 새로운 배열로 만들어준다.
원본 배열은 값이 변하지 않는다.
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);filter
- 어떤 조건을 만족하는 항목들만 골라서 새 배열로 만들어주는 함수
- 원본 배열은 변하지 않고, 원하는 배열을 하나 더 만들 수 있다.
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]concat
- 배열과 배열을 합치거나 배열에 특정 값을 추가해주는 함수
- 원본 배열은 변하지 않는다.
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]- 다른 내장함수와 함께 사용해서 제거할 수 있다 → Set
const merge = [...new Set([...array_num01, ...array_num2])];
console.log(merge) // [0, 1, 2, 3, 4, 5, ]from
- 배열로 만들고자 할 때, 유사배열을 복사해서 새로운 배열로 만들 때 사용
- 새로운 배열을 초기화 만들 때(초기화)
유사배열 → [어떤 값들...] 이 모양으로 생겼지만 배열의 내장 함수를 사용하지 못한다. (DOM nodelist)
// 배열화 하기
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]CRA(Create React App)
- 웹사이트를 만들 때 필요한 것을 넣어 만든 패키지
React 폴더 구조
- node_modules → 설치할 패키지들이 담길 폴더
- public 폴더 아래에 있는 → 빈 html 파일 (리액트 html 파일은 딱 하나다)
- src → App.js → HTML in JS 방식
→ JSX (리액트에서 사용하는 문법)
→ JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 뷰를 그린다.
JSX 규칙
1. 태그는 꼭 닫아주기
<img/>
<p></p>
<input type="text"> → 에러
<input type="text"/>2. 무조건 1개의 엘리먼트를 반환하기
function App() {
return
<p>test<p>
<div className="App">
<input type="text"/>
</div> // → 에러
<div className="App">
<p>test<p>
<input type="text"/>
</div> // 정상 작동
}3. JSX에서 javascript 값을 가져올 때
const cat_name = "lucky";
// return 부분만 복사
return (
<div>
hello {cat_name}!
</div>
);→ map, 삼항연산자 등 자바스크립트 문법을 JSX 안에 쓸 때도 {}를 이용
4. class 대신 className
id는 그대로 id
5. 인라인으로 style 주기
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>
);
}