ASAC 웹풀스택 공부범위 프로젝트의 기준, Bootstrap와 merterial UI, css @tailwinds @mertrial , 번들사이즈 측정법

ASAC 웹풀스택 공부범위 프로젝트의 기준, Bootstrap와 merterial UI, css @tailwinds @mertrial , 번들사이즈 측정법

 

[ASAC 웹풀스택]  프로젝트의 기준

 

spring + next.js 만으로 충분하다

 

 

 

 

 

[ASAC 웹풀스택]  <@Component  와 bean의 관계>

 

 

-애너테이션

@Validated 
빈 검증으로 속성값을 체크한다.


@ConfigurationProperties 느슨한 바인딩, 속성



@Component

 

설정한 패키지 경로 안에 bean클래스를 만들고 @Component 어노테이션을 붙여주면 해당 bean클래스는 자동으로 빈이 생성될 수 있게 된다.

아이디를 사용하지 않고 타입으로 빈을 지정해서 찾는거랑 비슷한 느낌이다... 이름이 없기 때문에 타입으로서 빈을 받아낼 수 있다.

 

 

<@Component  와 bean의 관계>

 

 

<bean>

<@Component  와 bean의 관계>

 

 

 

@ComponentScan(basePackages="패키지 경로") 

 

 

 

 

 

@Configuration

-debug 
XML 설정값

$ java -jar myproject-0.0.1-SNAPSHOT.jar --debug

-지연 초기화

웹 애플리케이션에서 지연 초기화를 활성화하면 HTTP 요청이 수신될 때까지 많은 웹 관련 Bean이 초기화되지 않습니다.


ApplicationContext

 

[ASAC 웹풀스택]  Bootstrap와 merterial UI의 차이점은?

 

upgrad무료강의

(3) New Messages! (upgrad.com)

Free Online Courses from upGrad

 

 

MaterialUIButton 

import React from 'react';
import { Button } from '@mui/material';

function MaterialUIButton() {
  return (
    <Button variant="contained" color="primary">
      Material UI Button
    </Button>
  );
}

export default MaterialUIButton;

 

<MaterialUIButton>  버튼만들기

 

 

 

[ASAC 웹풀스택] css @tailwinds @mertrial  <css 모듈화>

<css 모듈화>

---

 

css 상속

 

class-A

class-A
@extend

 

 

동적관리: 조건문

Swidth:

 

동적관리: 반복문

@for

 

<2개 css  컴포넌트>

 

 

Modern CSS

 

:globalcss .클래스 {

 

} 

 

 

clsx

 

 

 

 

 

 

 

[ASAC 웹풀스택]  clsx      tailwind

 

 clsx는 클래스 이름을 조건부로 결합하는데 사용되는 작은 유틸리티 라이브러리이고,

 tailwind는 유틸리티 퍼스트를 지향하는 CSS 프레임워크입니다

 

※ clsx      가 더나은것같다 삼항연상자로 조건문 가능

 

 

<styled 예제>

 

const Div = styled.div.attrs((props) => ({
  className: props.className
}))`
  background: ${(props) => (props.primary ? "red" : "green")};
  color: white;
  padding: 10px;
`;

const App = () => {
  return (
    <div>
      <Div className="foo">Foo</Div>
      <Div className="bar" primary>
        Bar
      </Div>
    </div>
  );
};

출력값

 

---

<styled와 tailwindscss 와 clsx 의 각각의 특징>

 

import styled from "styled-components";
styled는 CSS-in-JS 라이브러리 중 하나로, 스타일드 컴포넌트를 만들 수 있습니다. 스타일드 컴포넌트는 태그형 템플릿 리터럴과 CSS 문법을 사용하여 React 컴포넌트에 스타일을 적용할 수 있습니다. styled를 사용하는 이유는 CSS와 JS를 분리하지 않고, 컴포넌트 단위로 스타일을 관리하고, props나 state에 따라 동적으로 스타일을 변경할 수 있기 때문입니다12.

 

<className =ABC 의 재생산을 높일수있는 장점> 

 

---

tailwindscss는 유틸리티 퍼스트를 지향하는 CSS 프레임워크입니다. 유틸리티 퍼스트란 미리 정의된 클래스 이름을 조합하여 스타일을 적용하는 방식입니다. tailwindscss를 사용하는 이유는 자신만의 디자인 시스템을 쉽게 구축하고, 반응형 디자인을 간단하게 구현하고, CSS 파일 크기를 최적화할 수 있기 때문입니다3.

 

<내가 사용하는 css 부분이 바로 어떤 점을 인지 알수있는 직관성> 

---

clsx는 클래스 이름을 조건부로 결합하는데 사용되는 작은 유틸리티 라이브러리입니다. clsx를 사용하는 이유는 클래스 이름을 간결하고 읽기 쉽게 작성하고, 동적으로 생성할 수 있기 때문입니다.

 

<삼항연산자를 통하여 선택적 css 적용가능한점> 

 

[ASAC 웹풀스택]  번들사이즈 측정법

 

 

lodash.js 크기 측정

 

 

npm

unpacted size npm