2부 React 아키택쳐

리액트 교과서 Chapter12(Webpack)

Webpack의 역할

자바스크립트를 작성을 하다보면 많은 js 파일을 생성하게 된다.
이러한 js 파일들을 적은 수의 js로 합쳐주며 이를 통해 js 요청의 횟수를 줄여준다.

또한 A.jsx와 B.jsx가 모두 Multiutil이라는 유틸리티 모듈을 사용 할 경우 중복하여 요청을 할 수 있다. 이러한 상황에서 Webpack의 도움을 받을 수 있다.

Webpack은 의존성을 분석하여 다음과 같은 작업을 진행한다.

  • 모든 의존 모듈을 올바른 순서로 불러오도록 한다.
  • 모든 의존 모듈을 한 번ㅆ기만 불러오도록 한다.
  • 자바스크립트 파일이 가능한 적은 파일로 묶여지도록 한다.(이를 정적자원이라고 부른다.)

그 외에도

  • JS, Jade, CoffeScript 파일을 js파일로 변환한다.
  • ES6 미지원 브라우저를 대응하기 위해 ES6+ 코드를 ES5 코드로 변환한다.
  • 스프라이트 이미지를 하나의 PNG 파일이나 JPG 파일 또는 인라인 데이터 URI 이미지로 최적화 한다.
  • npm 의존 모듈을 관리하고 번들링하여 일일이 인터넷에서 내려받거나 HTML의 script 태그를 추가하지 않아도 사용할 수 있도록 한다.
  • 핫 모듈 대체를 적용한다(?)
  • 개발용 웹 서버를 실행한다.

Webpack의 적용

  • Webpack: 번들로 도구
  • 로더: 스타일, CSS, 핫 모듈 대체, Babel, JSX 전처리기(style-loader, css-loader, react-hot-loader, babel-loader, babel-core, babel-preset-react)
  • Webpack 개발 서버: Express 기반의 서버로 HMR 기능을 사용할 수 있다.

$ npm init -y
$ npm i -D babel-loader css-loader react-hot-loader webpack webpack-dev-server html-webpack-plugin react-dom react babel/preset-react @babel/plugin-syntax-jsx babel/syntax-dynamic-import --force
$ npm install -D @webpack-cli/generators
$ npx webpack init --force

 

barbelrc

{
  "plugins": [],
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
  ]
}

 

 

js의 로드는 dom 이후에

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
</head>
<body>
  <div id="root"></div>
</body>
<script src="./main.js" crossorigin></script>
</html>

 

$ npm run serve

 

https://github.com/Kmmanki/react_note/tree/master/chapter12

 

react_note/chapter12 at master · Kmmanki/react_note

리액트 교과서 따라하기. Contribute to Kmmanki/react_note development by creating an account on GitHub.

github.com

 

 

저작자표시 (새창열림)

'웹 정리 > 리액트' 카테고리의 다른 글

리액트 교과서 Chapter11(타이머)  (0) 2024.04.30
리액트 교과서 Chapter10(Tooltip 컴포넌트)  (0) 2024.03.28
리액트 교과서 Chapter09(Menu 컴포넌트)  (0) 2024.03.28
리액트 교과서 Chapter08(확장성을 고려한 React 컴포넌트)  (0) 2024.03.12
리액트 교과서 Chapter07(React에서 폼 다루기)  (0) 2024.03.06

Spring Boot 프로젝트 생성

Spring Boot initializr 를 사용하여 스프링 부트 프로젝트를 생성 후 IDE에서 열어보기

https://start.spring.io/

 

 

java, Spring Boot 버전에 맞게 설정 후 사용할 디펜던시 추가

  • Lombok: Getter, Setter 등 어노테이션 사용을 위해 추가
  • Spring Web: Spring의 MVC 패턴을 사용하기 위해 추가
  • Spring Boot Dev Tools: 소스 변경시 재기동 등 다양한 개발 편의를 위해 추가

프로젝트 실행

생성한 프로젝트를 VSCode에서 open 후  실행 확인

 

 

Swagger 라이브러리 추가

https://mvnrepository.com/artifact/org.springdoc/springdoc-openapi-starter-webmvc-ui/2.5.0

 

Swagger를 사용하기위한 springdoc 라이브러리 추가

 ps. Spring Boot 3.x 이상부터는 openAPI Starter WebMVC UI로 적용해야한다.

 

maven repository에서 springdoc을 찾아서 gradle 클릭 후 카피

 

 

build.gradle에 추가

 

접속

테스트 컨트롤러 및 openAPI 설정 

SwaggerConfig.java

package com.portfolio.portfolio_was.config;

import org.springdoc.core.models.GroupedOpenApi;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * SwaggerConfig
 */
@Configuration
public class SwaggerConfig {

  
  @Bean
  public GroupedOpenApi api() {
    String[] paths = {"/**"};
    // String[] pakcagesToScan = {"com.portfolio.portfolio_was"};
    return GroupedOpenApi.builder().group("springdoc-openapi")
    .pathsToMatch(paths)
    // .packagesToScan(pakcagesToScan)
    .build();
  }
}

 

TestController.java

package com.portfolio.portfolio_was.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import io.swagger.v3.oas.annotations.Operation;
import io.swagger.v3.oas.annotations.tags.Tag;


@RequestMapping("/test")
@RestController
public class TestController {
 
  @GetMapping("/api1")
  @Tag(name = "test api")
  @Operation(summary = "test")
  public String test22() {
    return "test";
  }
}

 

 

https://github.com/Kmmanki/portfolio_was

 

GitHub - Kmmanki/portfolio_was: portfolio

portfolio. Contribute to Kmmanki/portfolio_was development by creating an account on GitHub.

github.com

 

저작자표시 (새창열림)

'웹 정리 > 웹 포트폴리오 만들기' 카테고리의 다른 글

WAS 5차 (JPA, Swagger 설정을 사용한 게시물 등록)  (0) 2024.07.26
WAS 4차 (ELK, Logback, Jenkins를 사용한 배치 컨트롤 및 로그수집)_긴급  (0) 2024.06.13
WAS 3차 (docker maria DB 세팅)  (0) 2024.06.01
WAS 2차 (멀티모듈 프로젝트 세팅)  (0) 2024.05.28
WAS 0차 (구성)  (0) 2024.05.07

포트폴리오를 작성하는 이유

최근 이직을 위해 이력서를 작성하는데 자꾸 서류에서 탈락하고 있다.

포트폴리오가 없기 때문일까? 라는 생각에 포트폴리오를 작성하고자 한다.

 

포트폴리오는 WAS와 WEB으로 구성할 예정이다.

면접관이 보았을 때 가독성이 좋도록 작성을 하고 JAVA Doc과 같은 주석을 자세히 달고자 노력이 필요할 듯 하다.

 

메인 포지션은 Backend 이기 때문에 WAS 부터 구성을 하며 sweager를 통해 ui를 대채하며 진행하고 WAS가 어느정도 틀이 잡히면 WEB을 작성할 예정

 

WAS 정보(중간 중간 추가 및 변경 가능)

  • Java 17
  • Spring Boot 3.2.5

WAS 기타 라이브러리

  • swagger
  • JPA

기타 

  • Mysql

 

WEB 정보 (미정

  • React ?, Vue?
저작자표시 (새창열림)

'웹 정리 > 웹 포트폴리오 만들기' 카테고리의 다른 글

WAS 5차 (JPA, Swagger 설정을 사용한 게시물 등록)  (0) 2024.07.26
WAS 4차 (ELK, Logback, Jenkins를 사용한 배치 컨트롤 및 로그수집)_긴급  (0) 2024.06.13
WAS 3차 (docker maria DB 세팅)  (0) 2024.06.01
WAS 2차 (멀티모듈 프로젝트 세팅)  (0) 2024.05.28
WAS 1차 (프로젝트 생성 및 라이브러리 추가)  (0) 2024.05.08

리액트 교과서 Chapter11(타이머)


// 시간 정보 timer 정보를 가지고 있는 wrapper 
class TimerWrapper extends React.Component {
  constructor(props) {
    super(props)
    this.state = {timeLeft : null, timer: null}
    this.startTimer = this.startTimer.bind(this)
  }

  // 타이머 시작, 타이머가 존재한다면 기존 타이머 제거
  // setInterval로 1초마다 시간이 줄어들도록
  startTimer(timeLeft){
    clearInterval(this.state.timer)
    let timer = setInterval(() => {
      var timeLeft = this.state.timeLeft - 1
      if (timeLeft <= 0) {
        clearInterval(this.state.timer)
      }
      this.setState({
        timeLeft :timeLeft
      })
      console.log("running")
    }, 1000);
    console.log("start")
    return this.setState({timeLeft: timeLeft , timer: timer})
  }

  // button에 startTimer와 각각 할당된 time 제공
  render() {
    return (
      <div>
        <h2>Timer</h2>
        <Button time="5" startTimer={this.startTimer}></Button>
        <Button time="10" startTimer={this.startTimer}></Button>
        <Button time="15" startTimer={this.startTimer}></Button>
        <Timer timeLeft={this.state.timeLeft}></Timer>
      </div>
    )
  }

}

// 제공된 time과 startTimer 사용
class Button extends React.Component {

  render() {
    return (
      <div>
        <button onClick={() => {this.props.startTimer(this.props.time)}}>{this.props.time}</button>
      </div>
    )
  }
}

// 상위로 wrapper로 부터 받은 시간을 표기 
class Timer extends React.Component {
  constructor(props) {
    super(props)
  }

  render(){
    return (
      <div>'
        <h2>{this.props.timeLeft}</h2>
      </div>
    )
  }
  
}


let timer = document.getElementById('timer')
let root = ReactDOM.createRoot(timer)

root.render(
  <TimerWrapper></TimerWrapper>
)

https://github.com/Kmmanki/react_note/tree/master/chapter11

 

GitHub - Kmmanki/react_note: 리액트 교과서 따라하기

리액트 교과서 따라하기. Contribute to Kmmanki/react_note development by creating an account on GitHub.

github.com

 

 

저작자표시 (새창열림)

'웹 정리 > 리액트' 카테고리의 다른 글

Chapter12 Webpack  (0) 2024.05.16
리액트 교과서 Chapter10(Tooltip 컴포넌트)  (0) 2024.03.28
리액트 교과서 Chapter09(Menu 컴포넌트)  (0) 2024.03.28
리액트 교과서 Chapter08(확장성을 고려한 React 컴포넌트)  (0) 2024.03.12
리액트 교과서 Chapter07(React에서 폼 다루기)  (0) 2024.03.06

+ Recent posts

티스토리툴바