[새싹 x 코딩온] 웹 풀스택 영등포 5기 13주차 회고

용가리🐉·2023년 11월 20일

리액트 부트캠프 웹 코딩교육 코딩온

[새싹 x 코딩온] 웹 풀스택 영등포 5기

목록 보기

12/22

📌 React Style

📣 React 컴포넌트 스타일링 방식

일반 CSS
- 소규모 프로젝트에 적합
Sass(Syntactically Awesome Style sheets)
- 문법적으로 멋진 스타일시트
- CSS 전처리기를 이용해 복잡한 작업을 보다 쉽게 가능!
Styled Components
- JavaScript 안에서 CSS를 작성하도록 도와주는 CSS-in-JS 라이브러리
- 컴포넌트 기반의 설계 방식

CSS 전처리기란?

자신만의 특별한 문법을 가지고 CSS를 생성하는 프로그램

변수, 함수 개념을 사용하여 재활용성과 가독성을 높임

표준 CSS로 컴파일됨 (브라우저가 이해하는 CSS 문법으로 전환하는 작업 필요)

📣 CSS

기존 CSS 클래스를 이용할 경우, 컴포넌트별 클래스가 중복되지 않도록 클래스명을 지정해야 함

방법 1) 이름 규칙 정하기

이름 - 클래스 형태로 이름 만들기 → App-logo
BEM 네이밍 → app_title-primary

BEM 네이밍

어떤 요소의 CSS인지 명확히 알 수 있지만, 이름이 너무 길어질 수 있음

Id를 사용하지 않고, Class 만을 사용함

'어떻게 보이는가'가 아니라 '어떤 목적인가'에 따라 이름을 지음
BEM 네이밍 더 알아보기

방법 2) CSS Selector

/* App 컴포넌트 내부의 header 태그만을 의미 */
.App header { ... }

CSS Moudle 형식을 사용 시, 자동으로 클래스명 생성
- css 파일명을 컴포넌트명.module.css로 생성
- js파일에서 import해서 객체형태로 사용

import styled from "./App.module.css";

export default function App() {
  return <div className={styled.main}>Hello World</div>;
}

/* App.module.css */
.main {
	font-weight: 900;
}

📌 SASS

CSS 전처리기 종류 중 하나 (Sass/SCSS, PostCSS, Stylus, ...)
복잡한 작업을 쉽게 할 수 있도록 도와주고, 스타일 코드의 재활용성과 코드의 가독성을 높여 유지보수를 더욱 쉽게 해줌
확장자 : .scss, .sass

/* .scss */
$font-stack: Helvetica, sans-serif;
$primary-color : #333;

body {
	font: 100% $font-stack;
    color: $primary-color;
}

/* .sass */
$font-stack: Helvetica, sans-serif
$primary-color : #333

body
	font: 100% $font-stack
    color: $primary-color

.sass VS .scss

.sass는 세미콜론과 중괄호를 사용하지 않고 탭을 이용해 스타일을 정의함

.scss는 기존의 .css 파일과 비슷한 문법을 이용함 (scss가 css가 거의 같은 문법으로 SASS 기능을 지원함) → 더 넓은 범용성 + CSS와의 호환성

.sass와 .scss 모두 변수 선언 시, $를 앞에 붙여줘야 함

📣 사용방법 및 활용

npm install node-sass

변수 사용

$primary-color: #ff6347;
body {
	background-color: $primary-color;
}

연산

.container {
	width: 100% - 20px;
}

믹스인
- 미리 CSS 코드 블록정의하여 재사용

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
    border-radius: $radius;
}
.button{
	@include border-radius(10px);
}

중첩
- 선택자를 중첩시켜 코드의 중복을 줄이고, 가독성 높임

div {
	ul {
    	margine: 0;
        li {
        	displat: inline-block;
        }
    }
    &:hover{
    	background-color: brown;
    }
}

확장
- 기존의 선택자 스타일을 다른 선택자에게 상속

.btn {
	padding: 10px;
    margin: 10px;
    border: 1px solid black;
}
.btn-primary {
	@extend .btn;
    background-color: blue;
}

📌 styled-components

CSS-in-JS 라이브러리 중 하나
별도의 CSS 파일을 만들지 않는 것이 장점이자 단점

📣 사용방법

npm install sytled-components

VSCODE 사용 시, vscode-styled-components 확장팩 설치

import styled from 'styled-components';

// HTML 태그 + 백틱
const StyledButton = styled.button`
	background-color: blue;
	color: white;
	padding: 10px 15px;
	border-radius: 4px;
`;

export default function App(){
	return (
      <div>
      	<StyledButton>클릭</StyledButton>
      </div>
    );
}

📌 CORS

교차 출처 리소스 공유, Cross-Origin Resource Sharing
처음 리소스를 제공한 도메인(Origin)이 현재 요청하려는 도메인과 다르더라도 요청을 허락해주는 웹 보안 방침
- 서로 다른 origin 간에 리소스를 전달하는 방식을 제어하는 메커니즘 중 하나

다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 함
- 시스템 수준에서 타 도메인 간 자원 호출을 승인하거나 차단하는 것을 결정하는 것
웹페이지 상에서 JS를 이용하여 XHR(XMLHttpRequest)을 다른 도메인으로 발생시킬 수 있도록 해주는 기능을 가지고 있고, XHR 기반 cross-origin HTTP 요청을 이용하여 자원을 공유해야 하는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원함

SOP(Same-Origin Policy, 동일 출처 정책)

JS 엔진 표준 스펙의 보안 규칙

하나의 출처(Origin)에서 로드된 자원(문서, 스크립트)이 호스트나 프로토콜, 포트번호가 일치하지 않는 자원과 상호작용 하지 못하도록 요청 발생을 제한하고 동일 출처(Same Origin)에서만 접근이 가능한 정책

📣 SOP & CORS

브라우저의 정책 → 다른 출처의 리소스 사용을 제한하는 것은 서버가 아니라 브라우저!
- CORS 정책을 위반한 요청을 날렸을 때 이를 차단하는 것은 서버가 아니라 응답을 받은 브라우저!
- 즉, 브라우저에서는 CORS 정책으로 차단되는 요청도 Postman과 같이 브라우저가 아닌 환경에서는 통신이 원활하게 이뤄질 수 있음