1. CSS : 스타일링하는 가장 기본적인 방법 - CSS를 작성할 때 중요한 점은 CSS클래스를 중복되지 않게 만드는 것 - 이를 방지하는 방식 중 하나는 이름을 지을 때 특별한 규칙을 사용하여 짓는 것이고, 다른 하나는 CSS Selector를 활용하는 것 - CSS Selector를 사용하면 CSS클래스가 특정 클래스 내부에 있는 경우에만 스타일 적용할 수 있음 /* App안에 들어있는 클래스 스타일 적용할 때 (태그 자체에 스타일 적용할 때는 .을 생략) */ .App .logo{ height: 20px; } 2. Sass (Syntactically Awesome Style Sheets) 문법적으로 매우 멋진 스타일시트 - CSS 전처리기(pre-processor)중 하나로 확장된 CSS문법을 사..
컴포넌트의 라이프사이클(수명 주기) · 모든 리액트 컴포넌트에는 라이프사이클이 존재 · 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝남 · 라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행된다. (서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용) ex) 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하거나, 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 또 불필요한 업데이트를 방지해야 할 수도 있음 => 이때 컴포넌트의 라이프 사이클 메서드 사용 클래스형 컴포넌트에서만 사용할 수 있음 (함수형은X → Hooks기능을 사용하여 비슷한 작업 처리) - Will: 어떤 작업을 작동하기 전 실행되는 ..
리덕스란 무엇인가
Redux (리덕스) 상태를 관리하기 위한 오픈 소스 자바스크립트 라이브러리 => 코드의 복잡성을 낮춰주고, 어떤 결과를 가져올지 예측가능하게 만들어준다. 특징 Single Source of Truth 단 하나의 진실의 원천 - 하나의 상태(=객체) 모든 데이터를 넣는다. - 한 곳에 데이터를 집중적으로 관리하면 여러 곳에 흩어져있는 것보다 데이터를 더 관리하기 쉬워짐 - 단 하나의 state를 유지하는 걸 통해서 애플리케이션의 복잡성을 낮춘다. 어떻게 동작하는가? 1) store : 정보가 저장되는 곳(은행같은 역할) ex) 글에 대한 정보, 글 목록에 대한 정보 2) state : store 안에 state라는 실제 정보가 저장된다. 단, 직접 접속 불가(누군가를 통해서만 접속 가능) 3) reduc..
# What React? : 유저 인터페이스를 만들 수 있는 라이브러리 (A lobrary for creating user interfaces) -> 사용자에게 UI를 보여주고, 이벤트를 처리하는 일들을 할 수 있음 - 사용자에게 보여지는 UI를 만들고, 그 위에서 사용자가 클릭을 하거나 다양한 이벤트가 발생을 하게 되면, 그 이벤트에 맞게 반응하도록 만들어진 라이브러리 - 페이스북에서 만든 자바스크립트 라이브러리 중 하나 (2013년도에 등장 ex) 페이스북, 에어비앤비, 우버, 넷플릭스, 인스타그램 등에서 사용 React 장점 - 단순하며, 배우는 시간이 앵귤러에 비해 상대적으로 짧음 - 버전이 업데이트 되어도 이전 버전과 호환이 잘 되도록 안정성있게 업데이트 됨 (= 앵귤러와 달리 Breaking ..
리액트 등장 배경 웹 애플리케이션이 발전하면서, 규모가 커지고 복잡한 애플리케이션을 개발하며 많은 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 프론트앤드 프레임워크가 등장 (그 이전의 것으로는 어려움..?) - JavaScript로 규모가 크고 빠른 웹 애플리케이션을 만드는 가장 좋은 방법 - React의 가장 멋진 점 중 하나는 앱을 설계하는 방식 *Frontend Framework(Library) 1) Angular - 2010년 Google에서 개발한 Framework - TypeScript 기반으로 매우 안정적이고 탄탄한 Frontend App 개발이 가능 - Framework답게 다양한 기능이 내장되어 있음, but 무겁고 배우기 어려움 2) Vue - 2014년 Evan Y..