vanilla JS

node.js 등 설치

yarn ceate react-app hello-react

cd hello-react

yarn start(cf. npm init react-app)

창 안열리면 강제입력(http://localhost:3000)

 

import React from 'react'; // import: node_modules에서 리액트를 불러옴

webpack--> 합친(bundled) 자바스크립트 파일 --> 번들러

대표적인 번들러: 웹팩, Parcel, browserify

 

기본 시작파일: src/index.js

svg파일: 로고나 아이콘 만들 때 쓰는 이미지 파일

 

웹팩의 로더라는 기능이 SVG파일이나 CSS파일 등을 불러와서 사용할 수 있게 만든다.

 

babel-loader(자바스크립트 파일 불러와서 ES5 문법으로 변환해 줌)

 

function App(){

return (

<div className="App">

<header className="App-header">

<img src={logo} className="App-oglo" alt="logo"....

//위의 태그들의 집합은 HTML이 아니다. 'JSX'라고 한다.

 

import ReactDOM from 'react-dom';

 

ReactDOM.render(<App />, document.getElementById('root'));

첫번째 파라미터: 페이지에 렌더링할 내용을 JSX형태로 작성,

두번째 파라미터: 해당 JSX를 렌더링 할 document 내부 요소를 설정(id가 root임)

 

JSX의 규칙>

1. 감싸인 요소여야 한다.

return(<h1></h1>

<h2></h2> 이렇게 가면 안됨(div로 감싸주거나...)  --> 하나의 DOM 트리 구조로 이루어져야 하기 때문에..

 

JSX 내부에서 코드를 {}로 감싸면 자바스크립트 표현식을 작성할 수 있다.

ex) <h1>{name}안녕!</h1> 이렇게 말이다.

 

const: 변경 불가능한 상수 정의(블록단위 구분)

let: 동적인 값 담을 수 있는 변수 선언(블록단위 구분)

var: scope가 (함수 단위 구분) 그냥 변경값으로 바뀜

 

즉 var는 사용 안하고 const를 사용하며 값이 바뀔 땐 let을 사용(ES6에서..)

 

 

if문 대신 조건부 연산자(조건부 랜더링)

 

const name = '리액트';

return(

<div>

{name === '리액트' ? (

<h1> 리액트입니다.</h1>

) : (

<h2> 리액트가 아닙니다. </h2>   // 그냥 null로 두면 아무것도 안보임.

)}

</div> ); }

export default App;

 

--> <div>{name ==== '리액트' && <h1>리액트입니다.</h1>}</div>;

 

리액트 내에서의 스타일링(CSS)

1. 카멜 표기법 - background-color --> backgroundColor

2. class 대신 className

3. 꼭 닫아야 하는 태그(input태그 등) <input /> self-closing태그

 

주석: JSX 내부에서는 {/* --- */}, 시작태그가 길어질 땐 //로 가능

 

루트 디렉터리에서 .prettierrc 파일 생성한 후 내용입력(코드정리 자동화):

 

{

"singleQuote": true,

"semi": true,

"useTabs": false,

"tabWidth": 2

}

 

<변수정의시>

처음 변수 사용은 const로(let이 필요할때까지)

 

const what = "shwan";

console.log(what);

 

const what = true;   //boolean

`

변수 작성규칙: daysOfWeek 이렇게(camel case)

식별자 사용할 수 있는 문자는 알파벳, 숫자, 밑줄(_), 달러기호($)

첫 글자는 숫자로 사용할 수 없다.

예약어는 식별어로 사용할 수 없다.

하이픈 안된다!(-)

상수는 대문자로 표현

JS에서 미리 정의한 것: 전역 변수, 전역 함수(ex. isNaN, Number, JSON 등)

변수에 저장된 데이터 '타입'을 동적으로 바꿀수 있는 언어: 동적 타입 언어

 

 

배열: const shInfo = ["asdfae", 123, "123dsf"] - DB에서 가져온 리스트 데이터라면

객체: const shInfo = {name: "nico", gender: "femaile"} - 데이터를 합쳐서 만들어야 한다면

 

프로그램을 구성하는 최소 단위: 토큰(어휘, 즉 단어) --> 검사시 구문분석(파싱)

 

vscode 단축키"

컨트롤+p : 파일열기

컨트롤+시프트+p: 빠른 실행

■ 한줄 지우기

 

Shift + Ctrl + k : 한줄 지우기 

 

 

 ■ 한줄 복사

 

Ctrl + c : 커서의 위치에서 드래그 없시 그냥 ctrl +c 하면 한줄 복사가 됩니다.

 

 ■ 정렬하기 

 

 Ctrl + k + F : 코드 정렬 하기

 

 ■ 주석만들기

 

Ctrl + / : 코드 주석 만들기

 

 ■ 블록 주석만들기

 

Shift + Alt + a : 블록 코드 주석 만들기

 

 ■ 여러 줄 선택하기

 

Alt 누르고 , 마우스로 여러군데 누르면 여러군데 커서가 생깁니다.

 

 ■ 똑같은 텍스트 선택하기

 

<Button> button를 드래그 하고 ctrl + d 를 계속 눌러주면 , button 글자는 선택이 계속 된다.

 

 ■ 사이드바

 

ctrl + b 누르면 ,  사이드바의 생겼다 , 없어졌다 합니다.

 

 ■ 위 아래로 현재 텍스트 움직이기

 

Alt + 방향키 누르면 ,  위,아래로 현재 위치에 글이 올라갑니다.

 

■ 단어 전체 선택

 

     Ctrl + f2  : 단어들이 전체에 선택됨

 

■ 주석 열기 / 닫기

 

     Ctrl + shift + {   :  닫기 

Ctrl + shift + }   :  열기

 

shift +alt +Down : 위에 행 복사

shift  +  alt + up : 아래 행 복사

 

const title = document.querySelector("#title");

title.innerHTML = "Hi!From JS!";

title.style.color = "red";

document.title = "I own you now";

 

function sayHello(potato, age) {

  return `hello ${potato} you are ${age} years old`;

}

 

const greetSehwan = sayHello("Nicolas", 14);

 

// console 이거 객체(object)다, log는 객체안의 속성값

 

// 백틱 (``) 이 새로운 스트링 방식 괜찮

console.log(greetSehwan);

 

const calculator = {

  plus: function (a, b) {

    return a + b;

  },

  power: function (a, b) {

    return a * b;

  },

};

 

const plus = calculator.plus(5, 5);

const power = calculator.power(4, 10);

console.log(plus);

console.log(power);

 

// hello Nicolas you are 14 years old

// index.js:23 10

// index.js:24 40

 

// const Super = document.getElementById("title");

// console.dir(title);

// title.innerHTML = "hi! my react";

 

// 모든 HTML을 객체화 시킨다.

 

const title = document.querySelector("#title");

title.innerHTML = "Hi!From JS!";

title.style.color = "red";

document.title = "I own you now";

 

const age = prompt("How old are you");

console.log(age);

 

if (age >= 18 && age <= 21) {

  console.log("you can drink but you should not");

} else if (age > 21) {

  console.log("gogo");

} else {

  console.log("you cant");

}

 

const BASE_COLOR = "rgb(52, 73, 94)";

const OTHER_COLOR = "#7f8c8d";

 

function handleClick() {

  const currentColor = title.style.color;

  if (currentColor === BASE_COLOR) {

    title.style.color = OTHER_COLOR;

  } else {

    title.style.color = BASE_COLOR;

  }

}

 

function init() {

  title.style.color = BASE_COLOR;

  title.addEventListener("mouseenter", handleClick);

  //handleResize() 이렇게 괄호까지 넣으면 함수를 바로 실행하게 됨

}

init();

 

 

---

body {

  background-color: #ecf0f1;

}

 

h1 {

  color: #34495e;

  transition: color 0.5s ease-in-out;

}

 

.clicked {

  color: #7f8c8d;

}

 

---

 

const title = document.querySelector("#title");

 

const CLICKED_CLASS = "clicked";

 

function handleClick() {

  title.classList.toggle(CLICKED_CLASS);

 

  // const hasClass = title.classList.contains(CLICKED_CLASS);

  // if (!hasClass) {

  //   title.classList.add(CLICKED_CLASS);

  // } else {

  //   title.classList.remove(CLICKED_CLASS);

  // }

}

 

function init() {

  title.addEventListener("click", handleClick);

  //handleResize() 이렇게 괄호까지 넣으면 함수를 바로 실행하게 됨

}

init();