목록2022/07/30 (3)

이안의 평일코딩

Tailwind CSS란?

https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com CSS 프레임 워크 레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음이다. 종류로는 Material UI, React Bootstrap, Semantic UI, Ant Design, Materialize 등이 있다. TailWindCSS는 HTML 안에서 CSS 스타일을 만들 수 있게 해주는 CSS 프레임 ..
Front-end/CSS & SASS 2022. 7. 30. 21:58
[React] 리액트 SPA, JSX 그리고 map, filter 메서드

SPA(Single Page Application) public/index.html 템플릿 파일에서 div element의 id가 root로 되어있고, src/index.js 자바스크립트 시작점에서 root id를 가진 div element를 잡아준다. 그래서 element 안에서 화면을 꾸밀 수 있게 되는 것이다. index.html 템플릿이 하나면 한 개의 페이지 만들 때는 괜찮지만 두 개 이상의 페이지를 만들 때는? 원래 a 페이지를 만들면 a.html, b 페이지를 만들면 b.html 이런식으로 만들었다. 위와 같은 방식이 전통적인 웹 사이트를 만들 때 사용하는 Multi Page Application이다. 하지만 요즘에는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 ..
Front-end/React 2022. 7. 30. 17:52
[React] 리액트 기본적인 내용 총 정리

리액트는 프레임워크가 아닌 라이브러리 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용된다. 다른 Tool인 Vue나 Angular와 많이 비교하지만 가장 큰 차이점은 프레임워크인 두 언어와 달리 React는 라이브러리라는 점이다. 간단하게 보면 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것이고, 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것이다. 즉, 프레임워크는 라이브러리를 포함하고 또한 우리가 작성한 소스 코드를 호출한다. 그리고 소스 코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출하게 된다. 프레임워크는 앱을 만드는데 필요한 대부분의 라이브러리를 가지고 있고, 라이브러리들은 특정 기능을 위해 모듈화 되어 있다. 리액트가 라이브러리인 이유는 전적으로 U..
Front-end/React 2022. 7. 30. 13:45
Prev 1 Next