JSX 문법에 스타일링 하는 것은 기본 Javascript와 다르지 않습니다. 다만 약간의 차이점이 있을 뿐입니다. JSX 문법에 스타일링 하는 방법에 대해서 간단하게 알아보겠습니다. 기본 스타일링 index.html index.html 에는 React JSX 를 import 하고 있습니다. 여기서 일반 Javascript를 import 하는 것이라면 type을 "text/javascript" 라고 했겠지만, JSX 이기 때문에 type은 "text/JSX"입니다. index.js import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( My Favourite Foods Bacon Jamon Noodles , documen..

JSX란 Javascript를 확장한 문법입니다. React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 렌더링 예시 코드 index.html index.js // React 렌더링을 사용하기 위해 React, React Dom 디펜던시 import // import 방법 1 import React from "react"; import ReactDom from "react-dom"; // im..

React는 Angular, Vue를 비롯한 많은 프레임워크 중에서 가장 많이 사랑받는 프론트엔드 웹 프레임워크 입니다. js인 만큼 사용자 인터페이스 구축을 위한 JavaScript 라이브러리라고 정의가 되어있습니다. React 특징 1. 데이터 흐름 React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다. Augular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 합니다. 2. Component 기반 구조 Component는 독립적인 단위의 소프트웨어 모듈을 말합니다. 즉, 소..

레이아웃은 기본적으로 12개의 열로 이루어져 있습니다. 컨테이너를 생성하게 되면 해당 컨테이너 내부에도 기본적으로 보이진 않지만 12개의 열로 구분되어져있습니다. Bootstrap을 사용하게 되면 각 열 컨텐츠들을 col 이라고 칭합니다. 기본적으로 각 컨텐츠들에게 너비를 정해주지 않으면 전부 동일한 크기를 가지게 됩니다. Bootstrap Container Bootstrap을 사용하여 컨테이너를 만들게 될 때 컨테이너 클래스 속성 명과 값이 정해져있습니다. 각 container 클래스 속성명에 따라 부여된 반응형 크기가 존재합니다. - container : 가장 작은 컨테이너로서 가장 작은 화면에 한해서만 전체 크기를 가집니다. - container-sm : container와 유사합니다. 가장 작은 ..

https://appbrewery.github.io/bootstrap-layout/ Bootstrap Layout Exercises Exercise 1 50% desktop, 100% mobile 50% desktop, 100% mobile 50% desktop, 100% mobile 50% desktop, 100% mobile 50% desktop, 100% mobile 50% desktop, 100% mobile Apply Changes appbrewery.github.io

부트스트랩은 외부 CSS 레이아웃 시스템 중 하나입니다. 직접 레이아웃을 만들 필요없이 외부에서 만들어진 시스템을 가져와서 적용하기만 하면 자기가 원하는 레이아웃으로 구성할 수 있습니다. Bootstrap 사이트에 들어가면 다양한 예시 CSS 레이아웃들을 확인할 수 있고 적용할 수 있습니다. Bootstrap 장단점 장점 - 직접 만들 필요없이 빠르게 적용하여 만들 수 있습니다. - 고려해야 될 CSS 내용들을 머리 아프게 직접 생각할 필요가 없습니다. 단점 - 부트스트랩에 사용되는 대부분의 html 태그에는 class 속성이나 사용되는 css스타일에 너저분하게 많은 값들이 들어가 있을 수 있습니다. 이는 어떤 컨텐츠에 어떤 스타일이 적용되야 되는지 일일히 파악하기에 어려울 수 있다는 단점이 있습니다. ..