ModelMapper**의 설정 코드를 해석해 드리겠습니다. 이 코드는 객체 간의 매핑 규칙을 세밀하게 제어하기 위한 설정입니다.

1. setFieldAccessLevel(AccessLevel.PRIVATE)

이 설정은 ModelMapper가 필드에 직접 접근할 때 접근 레벨을 PRIVATE으로 설정하는 역할을 합니다. 일반적으로 ModelMapper는 getter/setter 메소드를 통해 필드에 접근하지만, 이 설정을 활성화하면 private 필드에도 직접 접근하여 값을 매핑할 수 있게 됩니다. 이는 getter/setter가 없는 클래스를 매핑할 때 유용합니다.

2. setFieldMatchingEnabled(true)

이 설정은 필드 매칭을 활성화하는 코드입니다. ModelMapper는 기본적으로 getter/setter를 사용한 메소드 매칭 전략을 따릅니다. 하지만 이 설정을 true로 설정하면 getter/setter 대신 필드 이름을 기반으로 소스 객체의 필드와 대상 객체의 필드를 매칭합니다.

3. setMatchingStrategy(MatchingStrategies.LOOSE)

이 설정은 매칭 전략을 LOOSE로 설정하는 코드입니다. ModelMapper는 세 가지 매칭 전략을 제공합니다.

  • STRICT: 모든 소스 필드와 대상 필드의 이름이 정확히 일치해야 합니다.
  • STANDARD: 소스 필드와 대상 필드의 이름이 비슷해야 합니다. (예: user.name과 userName)
  • LOOSE: 소스 필드와 대상 필드의 이름이 대소문자나 구분자 없이 매칭됩니다. (예: userId와 user_id 또는 user-id) 이 전략은 가장 유연하며, 필드 이름이 정확히 일치하지 않아도 매핑이 가능합니다.

종합 해석

위 코드를 전체적으로 해석하면 다음과 같습니다.

ModelMapper가 getter/setter 없이도 private 필드에 직접 접근하여, 필드 이름만으로도 대소문자나 구분자 등에 상관없이 가장 유연하게 객체를 매핑하도록 설정한다.


package com.mysite.backend.config;

import org.modelmapper.ModelMapper;
import org.modelmapper.convention.MatchingStrategies;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class RootConfig {
    @Bean
    public ModelMapper getMapper(){
        ModelMapper modelMapper = new ModelMapper();
        // 1. setFieldAccessLevel : private 필드에서도 직접 접근하여 값을 매핑 할 수 있게 함
        // 2. setFieldMatchingEnabled : getter/setter 대신 필드이름 기반으로 소스 객체 필드와 대상 객체 필드를 매칭함
        // 3. setMatchingStrategy : 소스 필드와 대상 필드간 매칭 설정
        modelMapper.getConfiguration().setFieldAccessLevel(org.modelmapper.config.Configuration.AccessLevel.PRIVATE)
                .setFieldMatchingEnabled(true)
                .setMatchingStrategy(MatchingStrategies.LOOSE);
        return modelMapper;
    }
}
  1. Vite 프로젝트 초기화
    npm create vite@latest my_project
    cd my_project

  2. tailwindcss 설치
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

  3. tialwindcss 설정 파일 변경
    => tailwind.config.js
    module.exports = {
    content: ["./index.html", "./src/*/.{js,ts,jsx,tsx}"],
    theme: {

     extend: {},

    },
    plugins: [],
    }

  4. src/index.css tailwind 지시어 추가
    @tailwindcss base;
    @tailwindcss components;
    @tailwindcss utilites;

'프로그래밍 > react' 카테고리의 다른 글

리엑트 tailwindcss 프로젝트 설정  (0) 2025.08.14
React 모듈 설치 여부 확  (0) 2025.06.29
리액트 프로젝트 생성  (35) 2025.04.06

react 프로젝트 생성 실행 순서

  1. npm create-react-app projectName --template typescript

  2. chance luxon @fontsource/material-icons 설치
    npm i chance luxon

  3. 개발 의존성
    npm i -D @types/chance @types/luxon

  4. tailwindcss 설치
    postcss, autoprefixer도 함꼐 설치 해 준다.
    npm i -D postcss autoprefixer tailwindcss@3

  5. tailwindcss 구성
    npx tailwindcss init -p

  6. daisyui 설치
    tailwindcss는 저수준 CSS 컴포넌트를 지원하지 않으므로, daisyui를 설치
    npm i -D daisyui@3

  7. @tailwindcss/line-clamp 설치
    npm i -D @tailwindcss/line-clamp

  8. tailwind.config.js 설정

    1) content 설정
    content:["./src/*/.{js.jsx,ts,tsx}"]

    2) safelist, plugins 설정
    /*
    line-clamp로 시작하는 클래스 이름을 동적으로 조합하더라도
    정상으로 동작하도록 트리 쉐이킹 대상에서 제거하는 코드
    */
    safelist : [{pattern:/^line-clamp-(\d+)$/}]
    3) line-clamp, daisyui 플러그인 등록
    plugins : [require('@tailwindcss/line-clamp'), require('daisyui')]

    /* @type {import('tailwindcss').Config} _/
    module.exports = {
    content: ["./src/*
    /_.{js.jsx,ts,tsx}"],
    theme: {
    extend: {},
    },
    safelist:[{pattern:/^line-clamp-(\d+)$/}]
    plugins: [require('@tailwindcss/line-clamp'), require('daisyui')],
    }

  9. index.css에 tailwindcss 기능 반영
    index.css 상단에 base, components, utilities 추가
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

  10. 타입 스크립트 코드 작성

'프로그래밍 > react' 카테고리의 다른 글

Vite에서 TailWindCss 설치하기  (0) 2025.08.20
React 모듈 설치 여부 확  (0) 2025.06.29
리액트 프로젝트 생성  (35) 2025.04.06
  1. 터미널 열기: 프로젝트 디렉토리에서 터미널을 열거나 VS Code와 같은 IDE에서 터미널을 사용합니다.
  2. npm list 명령어 실행: 터미널에 npm list를 입력하고 엔터 키를 누릅니다.
  3. 결과 확인: 명령어 실행 결과로 설치된 모듈 목록이 표시됩니다. 만약 특정 모듈이 목록에 없다면, 해당 모듈은 설치되지 않은 것입니다.

참고사항

  • npm list --depth=0: 최상위 레벨의 모듈만 표시합니다.
  • npm list --depth=1: 한 단계 아래의 모듈까지 표시합니다.
  • npm list --depth=2: 두 단계 아래의 모듈까지 표시합니다.

'프로그래밍 > react' 카테고리의 다른 글

Vite에서 TailWindCss 설치하기  (0) 2025.08.20
리엑트 tailwindcss 프로젝트 설정  (0) 2025.08.14
리액트 프로젝트 생성  (35) 2025.04.06
  1. ES6 코드를 ES5 코드로 변환 해 주는 사이트
    https://babeljs.io/repl
  2. ES6_TEST directory 생성
    npm init 실행
  3. babel 요소 설치
    npm install --save-dev @babel/core @babel/cli @babel/preset-env core-js
  4. npm 명령어
    1) npm init : 프로젝트 초기화
    2) npm install : package.json의 패키지 설치
    3) npm install --save [패키지명] : 패키지를 프로젝트 의존성으로 추가
    4) npm install --save-dev [패키지명] : 패키지를 프로젝트 개발 의존성 수준으로 추가
    5) npm install --global [패키지명] : 패키지를 전역 수준으로 추가
    6) npm update --save : 프로젝트 패키지 업데이트
    7) npm run [스크립트명] : package.json의 스크립트 명령 실행
    8) npm uninstall --save [패키지명] : 패키지 삭제
    9) npm cache clean : 캐시 삭제
  1. 호스트명 확인
    mycomputer:~$hostname
    mycomputer

  2. 호스트명 변경
    mycomputer:~$sudo hostnamectl set-hostname ubuntudev
    [sudo] mycomputer 암호 :

  3. 터미널 종료 혹은 시스템 재부팅 후

  4. 호스트명 확인
    호스트명이 변경 된 것을 확인 할 수 있다.
    ubuntudev:~$hostname
    ubuntudev

'프로그래밍 > 우분투' 카테고리의 다른 글

우분투 설치 후 root 비밀번호 변경  (0) 2025.05.31
mysql 백업 및 복원 방법  (0) 2022.07.13
jenkins 셋팅  (0) 2022.07.06

mycomputer:~바탕화면$sudo password root
[sudo]mycomputer 암호:
새 암호 :
새 암호 재입력 :

mycomputer:~바탕화면$su
암호 :
root@mycomputer:/home/mycomputer/바탕화면#

루트로 변경 되면 $ 표시가 #으로 변경 됨.

'프로그래밍 > 우분투' 카테고리의 다른 글

우분투 호스트명 변경  (0) 2025.05.31
mysql 백업 및 복원 방법  (0) 2022.07.13
jenkins 셋팅  (0) 2022.07.06
  1. 리액트 프로젝트 생성
    npx create-react-app [생성할 리액트명]

  2. VSCode 설치
    https://code.visualstudio.com/Download

  3. 프로젝트 내에서 vscode 실행
    d:\work\frontend\testapp>code .

  4. VSCode 터미널에서 리액트 프로젝트 실행
    npm start

  5. tailwind CSS 설치
    npm install -D tailwindcss@3.4.17 postcss autoprefixer

npx tailwindcss init -P

'프로그래밍 > react' 카테고리의 다른 글

Vite에서 TailWindCss 설치하기  (0) 2025.08.20
리엑트 tailwindcss 프로젝트 설정  (0) 2025.08.14
React 모듈 설치 여부 확  (0) 2025.06.29

+ Recent posts