Atomic Habits

○ 바닐라 JS -> 변경으로 인해 Element를 다시 그림 React -> 변경된 부분만 다시 그림

○ CDN 서비스 : 리액트를 샌드박스에서 static-HTML 환경에서 사용하기 위해서 CDN서비스를 활용해야 하는데, CDN 서비스 중에 한 종류인 unpkg ○ React-dom 으로 element 생성했고, appendChild와 같은 효과를 내는 ReactDOM.render()로 rootElement에 요소를 추가함 ○ JSX : React.crerateElement 표현식의 간편한 표기법( HTML도 JS도 아닌 리액트만의 표현법 ) ○ Babel : 브라우저에서 JSX를 JS처럼 이해할 수 있도록 하는 js compiler를 이용 ( CDN으로 불러옴 ) ※ 실제 웹서비스를 제공하는 단계에서는 Babel을 웹상에서 돌아가게 하지 말고 빌드한 파일을 제공해야 한다. ○ Fragment : JS..

○ Tip - 개발자 도구 > console 창 > "jimmy".charAt(2); > 바로 결과 확인 가능 ▷ "jimmy".charAt(0); [enter] -> 'j' ▷"jimmy".charAt(0) === "jimmy".charAt(0).toUpperCase(); [enter] -> false ▷const text = "Text"; [enter] text.charAt(0) === text.charAt(0).toUpperCase(); [enter] -> true ○ HTML tag 를 생성할 때, js의 복잡한 연산을 적용할 수 있다. ○ 코드

1. 기호와 영어 이름 ~ : Tilde ` : Grave accent ! : Exclamation mark, Exclamation point ? : Question mark @ : At sign # : Hash, Pound sign, Number sign, Sharp(샾) $ : Dollar sign % : Percent sign ^ : Caret, Circumflex ( 한국어로는 윗꺽쇠) & :Ampersand, And sign * : Asterisk, Star sign ( ) : Parenthesis, Round bracket, (한국어로는 소괄호) [ ] : Square bracket (한국어로는 대괄호) { } : Curly bracket (한국어로는 중괄호) - : Hyphen, Dash, ..

○ 코드

○ DOM Document Object Model 문서를 논리 트리로 표현한다. MDN - Web 개발에 필요한 표준 정의 (https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model) element는 보여지는 요소(출력된 글자, 버튼 등) DOM은 컴퓨터가 이해하는 element의 원형이다. ○ 순수 자바스크립트 ( = Vanilla Js) - 특정 플러그인, 라이브러리, 프레임워크를 사용하지 않은 그 자체의 자바스크립트 - (https://www.w3schools.com/) ○ 샌드박스 CodeSandBox.io - 코드를 실행해보고 테스트하는 사이트 (계정 만들자) static(HTML 기본 파일) 클릭 > 기본 자바스크립트 작업을 웹에..

○ React에 대한 이해 라이브러리 : 개발 편의를 위한 도구의 모음 (공구) 프레임워크 : 기반 구조가 잡혀있음 (공장) ○ React와 다른 Tool 간의 비교 React - 라이브러리 - 선택의 여지, 자유도를 많이 준다. 앵귤러 - 프레임워크 - 모던 웹 개발 플랫폼 Vue.js - 프레임워크 - 프로그래시브 프레임워크 ※ Wappalyzer (크롬 확장프로그램) 특정 웹 페이지가 어떤 프레임워크, 라이브러리를 사용하고 있는지 알아볼 수 있다. - 기술의 트렌드는 빠르게 변한다. 새로운 기술을 빠르게 익히는 능력이 중요하다.

JavaScript에서 변수 선언 방식인 var, let, const 의 차이점에 대해 알아보자. 1. 변수 선언 방식 우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다. 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선..

p.209