Atomic Habits

https://styled-components.com/docs/basics#getting-started import "./styles.css"; import React from "react"; import StyledComponentsExample from "./components/StyledComponentsExample"; import styled from "styled-components"; const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))` color: blue; /* &는 자기 자신을 의미한다. */ &:hover { color: red; // when hovered } & ~ & { background: tomato; // ..

○ 리액트 공식문서 (https://ko.reactjs.org/docs/rendering-elements.html) ○ React element는 불변객체(immuterble) - element가 한번 만들어지고 ReactDOM.render로 주입 요청 -> 변경 판단 및 반영은 리액트가 알아서 한다. ○ 재조정 (Reconciliation) (https://ko.reactjs.org/docs/reconciliation.html) - 비교 알고리즘 (Diffing Algorithm) 두 개의 트리(변경 전, 변경 후)를 비교할 때, React는 두 엘리먼트의 루트(root) 엘리먼트부터 비교합니다. 이후의 동작은 루트 엘리먼트의 타입에 따라 달라집니다. 엘리먼트의 타입이 다른 경우( 변경 전 : 버튼 요..

○ 바닐라 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의 복잡한 연산을 적용할 수 있다. ○ 코드

○ 코드

○ 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 (크롬 확장프로그램) 특정 웹 페이지가 어떤 프레임워크, 라이브러리를 사용하고 있는지 알아볼 수 있다. - 기술의 트렌드는 빠르게 변한다. 새로운 기술을 빠르게 익히는 능력이 중요하다.