JSX소개 - JSX는 자바스크립트 XML를 의미한다. - 자바스크립트 안에 HTML을 가지고 있다. - 백그라운드에서 변환 과정을 가지고 있다. - 개발자 도구의 Source 탭에서 static/js 폴더에서 같은 자바스크립트 파일을 볼 수 있는데 리액트가 지원하는 많은 기능의 소스 코드를 포함한다. - 전체 리액트 패키지 코드를 bundle.js, main.chunk.js에서 확인할 수 있다. - 브라우저에서 사용할 수 있도록 우리의 코드를 변환해서 보여준다. - 우리는 JSX 구문을 사용하고 (브라우저에서는 지원되지 않는) 자동적으로 변환된다. - 기본적인 자바스크립트를 알고 있어야 한다. - 리액트 작동방식 - 자체 HTML요소인 컴포넌트를 구축한다. - 리액트로 목표 상태를 정의하고 리액트는 화..

섹션 3 : 리액트 기초 및 실습 컴포넌트 모듈 소개 - 컴포넌트 중심의 사용자 인터페이스 구축하는 방법 - 리액트를 구성하는 기능과 문법, 구성, JSX - 컴포넌트를 구축하는 방법과 사용 방법 - 데이터를 이용하기 컴포넌트란 무엇인가? 왜 리액트는 컴포넌트가 전부라고 하는가 - 사용자 인터페이스를 구축하는 자바스크립트 라이브러리 - 리액트 - 좀 더 간단히 사용자 인터페이스를 만들 수 있다. - 핵심 비즈니스 로직에 집중 - 컴포넌트라는 개념 - 리액트는 컴포넌트가 전부 - 모든 사용자 인터페이스는 컴포넌트로 구성된다. - 재사용성 Reusablilty - 우려 상황의 분리 Separation of Concerns - 프로그래밍에서 중요하다. - 코드를 여러 단위로 분해하고 유지 관리하기 쉽도록 코드..

섹션 2 : 자바스크립트 새로고침 모듈 소개 - 리액트 앱은 자바스크립트 ES6와 차세대 기능을 사용 - 좀 이상해 보일 수 있음 - 자바스크립트는 아주 빠르게 진화 중 변수 let과 const 이해하기 - 변수를 생성하는 방식 - 변하지 않은 변수를 상수라고 함 - var 대신 let, const 권장 - let 수정할 수 있는 변수 - const 수정할 수 없는 (절대 변하지 않는 상수) 변수 - const에는 새로운 값을 할당할 수 없음 constant variable 화살표 함수 - 생성자 함수 - 자바스크립트를 생성하는 또다른 구문 - const 선언 - const myFunction = () => { } - this로 인해 생성된 문제를 해결 - this는 항상 원하는 객체를 보지 않지만 화살..

빠르게 요점만 리액트는 무엇일까? - 자바스크립트 라이브러리 - 컴포넌트 기반의 UI 라이브러리 - 사용자 인터페이스를 만드는데 사용 - 자바스크립트는 사용자에게 뭔가 다른 것들을 보여주기 위해 새로운 HTML 페이지를 요청하지 않아도 되게 한다. - 클라이언트 자바스크립트를 작성하는데 도움 - 웹사이트를 위한 최신의 반응형 사용자 인터페이스를 구축 - 복잡한 사용자 인터페이스를 쉽게 구축 - 응용 프로그램을 작은 블록과 작은 컴포넌트들로 분할 - 유지보수가 쉽도록 만듦 - 복잡한 사용자 인터페이스를 더 쉽게 구축 - 화면에 표시되는 내용을 제어하는 싱글 페이지 애플리케이션 리액트 대신 - 앵귤러 - 컴포넌트 기반의 UI 프레임워크 - 리액트보다 많은 내장 기능 - 타입스크립트 내장 - 뷰 - 컴포넌트 ..

Normal Flow 일반적인 위에서 아래로 쌓이거나, 텍스트가 텍스트처럼 쌓이는 구조 Flex Flex Container, Flex flow Flow를 바꾸는 것들, display 속성 중에 하나. (display는 이 요소를 화면에 어떻게 나타낼지 결정하는 것, flex-box는 옛날 문법) flex를 적용해주면 normal flow가 아닌 flex-flow로 적용되게 된다. *자손까지 제어하는 display는 현재 없다. flex도 자식에게까지만 적용된다. Flex Container를 생성하고, 자식요소들을 Flex box로 만드는 display 속성 Flex Flow란? - 내부에 있는 요소들이 어떤 방향으로 쌓이게 만들 것인가? - Flex는 기본적으로 1차원이며 축이 1개이다. 한 방향을 고려..

CSS 흑마법사가 되어봅시다. CSS 레이아웃 - 레이아웃은 뭘까? 어떠한 것들을 어떠한 위치에 배치 (Layout) - 어떤 요소가 어떤 위치에 있을 것인지 - Flex & Grid Layout - 이 두 개만 가지고도 대부분의 레이아웃 구성 가능 - 전통적인 방식 (IE를 기준으로)에서는 Float 레이아웃 사용 - 특수한 레이아웃 (table, ruby) CSS Box Model - 하나의 요소가 박스를 이루는 모델 - 모든 요소는 박스 형태를 취하고 있는데, 그 박스가 어떻게 생겼는지를 나타내는것 - Model은 여러가지 속성들이 합쳐진 개념을 말하는 것 - 박스 - 콘텐츠 박스contents-box (사각형) - 특정한 요소가 본인의 콘텐츠를 담고 있는 영역, 전체 박스(+border, marg..