반응형 [React.js] 유튜브를 만들어 보자 리액트로 만든 BYTube 🧑🏻💻 👉 BYtube 사용한 기술들 🛠 React.js JavaScript HTML CSS Node.js Yarn PostCSS Postman Netlify BYTube 프로젝트는 💭 함수형 컴포넌트 사용 Hooks를 통해 렌더링 최적화, 동적인 페이지 구현 유튜브의 search, videos, channels API 사용 Postman을 통해 API 통신 테스트 및 fetch 코드 활용 API를 불러오는 통신(service)과 View 컴포넌트 분리 API Key를 숨기기 위해 .env 파일 사용 PostCSS로 CSS 스타일링 모듈화 링크 공유 시 지인을 안심 시키기 위한 썸네일 추가 검색 기능 PC 화면에 최적화 프로젝트를 진행하면서 배운 것들 💡 1. View 컴포넌.. 2021. 4. 30. PostCSS로 모듈화 사용하기 이젠 CSS도 모듈화를 한다..? 자바스크립트로 게임을 만들 때 js 파일을 모듈화 한 적이 있고 리액트도 컴포넌트별로 파일을 나눈다. 토이 프로젝트 수준인데도 불구하고 CSS를 작성할 때마다 조금만 스타일을 추가해도 코드 줄이 길어지고 주석을 추가하고, cmd+f로 클래스 이름을 찾는 나 자신을 보게 되었다. 그런 와중에 리액트를 배우면서 create-react-app으로 프로젝트를 하게 되었고 PostCSS가 기본 탑재 되어있단 것을 알게 되었다. 그럼 예제를 통해 이제 왜 CSS도 모듈화를 하는지 알아보자! 버튼은 두개로 하겠습니다. 근데 이제 서로 다른 스타일을 곁들인 import React from 'react'; import Button1 from './ components/button1'; .. 2021. 4. 4. [React.js] PostCSS 기초 PostCSS CSS 전처리기? 전처리기만의 고유한 문법을 통해 작성을 하면 순수 CSS로 변환을 해주는 프로그램이다. 순수 CSS에서 지원하지 않는 특징이 추가된다. 믹스인(mixin), 중첩 셀렉터(nesting selector), 상속 셀렉터(inheritance selector) 기타 등등 이러한 문법은 가독성을 좋게하고 유지보수가 쉬워진다. 대표적인 전처리기 프로그램은 다음과 같다. [PostCSS](https://postcss.org/) [Stylus](https://stylus-lang.com/) [SASS](https://sass-lang.com/) [LESS](http://lesscss.org/) 근데 그중에 왜 PostCSS를 쓸까? SASS나 LESS같은 경우 주어진 문법과 특징에 한.. 2021. 4. 4. 이전 1 다음 반응형
