CodeHoon

안녕하세요 상훈입니다.

React-Remix 프로젝트에서 개별 css 파일(스타일 적용)을 삽입하는 방법에 대해 포스팅하겠습니다.

app
ㄴcomponents
   ㄴNewNote.css
   ㄴNewNote.jsx
ㄴroutes
   ㄴindex.jsx
   ㄴnotes.jsx
ㄴstyles
   ㄴhome.css
   ㄴmain.css

파일 트리가 이렇게 되어져 있을 경우,

1. 기본 형태 
2. Surfacing Styles

두 가지를 작성하도록 하겠습니다.

1. 기본 형태 ✔

routes/index.jsx 의 경로에서 스타일(css)을 삽입해보도록 하겠습니다.

2가지만 적용해주시면 됩니다.

1️⃣ import
2️⃣ function declare

// 1
import homeStyles from '~/styles/home.css';

// 2
export function links() {
  return [{ rel: 'stylesheet', href: homeStyles }];
}

특별히 설정해줄 것?  - 없습니다.

links 라는 함수명을 remix <Links> 에서 감지하여 하위 요소로 끌고가줍니다.

root.jsx 파일에서 보시면,  @remix-run/react  에서 import 한 Link 컴포넌트가 있습니다.

그리고 이 컴포넌트는 html > head 태그 내에 들어가있습니다.

마치 html 에서 기본적으로 삽입하는 link, script 태그들 처럼요. (이해가 딱 되셨을겁니다😎)

그러면 곧바로 2번째 surfacing styles. 시작해보겠습니다.

2. Surfacing Styles - 개별 파일에서 import 하기 ✔

NewNote : 자식 컴포넌트
NotesPage : 부모 컴포넌트

자식 컴포넌트에서 선언한 스타일을 부모컴포넌트에서도 사용하려면 다음과 같습니다.

✔ 자식컴포넌트-NewNote 에서 export 한 links 를 부모에서 별칭으로 import 하여 links 함수 내에 넣습니다.

✔ 그리고 links 함수에서 spread연산자로 links를 return 시켜줍니다.

주절주절 이야기가 길어졌지만 내용은 생각보다 매우 간단했습니다. 흥미롭고 특이한 점(Surfacing😎)도 있었고요.

이상으로 포스팅을 마치도록 하겠습니다.

안녕하세요 상훈입니다.

Nuxt 3 (+Vue 3) 와 Tailwindcss, typeScript로 프로젝트 생성시 정상적으로 안되는 경우가 있어 정상구동을 확인한 간단한 기초 내용을 포스팅하려고 합니다.

1) Nuxt.js 3
2) Vue.js 3
3) TailwindCss
4) TypeScript
5) Vue Router
6) Vuex
7) gh-pages

를 기본적으로 사용하려고 합니다. ( *5,6,7 은 선택사항 입니다.)

1. 디렉터리 구조

2. nuxt.config.ts

//nuxt.config.ts

export default defineNuxtConfig({
  css: ["~/assets/css/tailwind.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

3. postcss.config.js

//postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

4. tailwind.config.js

// tailwind.config.js

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

5. tailwind.css (기호에 따라 파일명 설정 index.css, main.css 등)

// assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

이렇게 설정하고 구동시 정상출력을 확인하였습니다.

Tailwindcss 를 사용하던 와중 커스터마이징을 할 수 있다는 것을 알았다.

Vue.js 3 - tailwindcss3 를 사용하였습니다.

하는 방법 바로 가시죠.

우선 tailwind.config.js 파일이 /src 내에 있습니다.

이곳에다가 작성하는것인데요,

theme.extend. 내에 작성

module.exports = {
  purge: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        'hero-pattern': "url('pattern-bg.png')",
        'second-image-pattern': "url('sencond-bg.png')",
      })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

이렇게 작성하면 해당 내용을 전역으로 사용할 수 있게된다.

사용 사례

이상입니다.

유용하게 쓰십쇼

vue.js 3, vue-cli 4.5.x 버전에서 tailwind css 를 설치하려고하는데 에러가 발생하였다.

지난 포스팅에서는 아직 tailwindcss가 vue3에 맞춰서 나오지 않았기에 에러가 났지만, 지금은 출시가 되었다.

그런데 에러라니!?

그래서 해결책을 찾아왔다.

core-js, vue, vue-cli 의 버전이 최신이 아니었기에 오류가 발생하였다.

그래서 각각 버전을 모두 최신화 하였고, 정상적으로 설치가 되었다.

최신화: core-js, vue, vue-cli

npm install --save core-js@^3
npm install vue@next
vue upgrade --next

아무래도 얼마전에 tailwind.css 가 최신화가 된만큼, node, core-js, vue 등의 버전도 가장 최신으로 올려야  알맞게 설치가 된다.

그리고 다시 tailwindcss 설치

npm install -D tailwindcss postcss autoprefixer

■ 결과 확인

가장 중요한 결과 확인 작업이 남았다. 기본 default css 설정 후, class를 입력해보았다.

해당 웹사이트 공유

에러 해결은 역시 stackoverflow

Vue.js 에서 Bootstrap을 사용하고 싶을 때 cdn을 이용하는 방법 이외에 npm, yarn 등을 이용해서 직접설치를 한다.

그래서 나온 것이 BootstrapVue 이다.

# With npm
$ npm install vue bootstrap bootstrap-vue

# With yarn
$ yarn add vue bootstrap bootstrap-vue

이곳이 링크이다. 참고 바람

◆ Vue.js 3 에서는 아직 적용이 안되니 주의 바랍니다 ◆

Vue.js 에서 class에 변화를 주고 싶을 때 사용한다.
class태그의 변화는 data 객체에 있는 데이터의 변화로 인해 바뀌게 설정하는 것이 일반적이다.

<span 
  @click="changeStatus(index)" 
  class="pointer"
  :class="{'text-danger fw-bold': task.status ==='to-do',
  'text-warning': task.status === 'in-progress',
  'text-success': task.status === 'finished'
  }"
  >
  {{ firstCharUpper(task.status) }}
</span>

<script>
data () {
    return { 
      availableStatuses: ['to-do', 'in-peogress', 'finished'],
      tasks: [
        {
          name: 'Steal bananas from the stroe',
          status: 'to-do'
        }
    }
  },
  methods: {
  	changeStatus(index){	//메서드명
      let newIndex = this.availableStatuses.indexOf(this.tasks[index].status)	// status의 index 파악 후 newIndex 할당
      if(++newIndex > 2) newIndex = 0		// 만약 newIndex가 2초과시, newIndex = 0
      this.tasks[index].status = this.availableStatuses[newIndex]		// avaiableStatuses[] 배열의 내용 순차 입력
    },
  }
</script>

이렇게 span 태그를 클릭할 때마다 availableStatuses [] 내 내용이 순차적으로 span태그에 출력이 된다. 

이럴 때, 해당 문구(availableStatuses[ ]) 에 따라서 class를 바꾸고 싶을 때 사용한다.

해당 내용은 글로 보기에는 난해한 부분이 있으므로,
직접 손으로 작성해나가면서 이해하는것이 좋다.

이상

- 조금 더 쉬운 예제를 가지고 오는건 어떨까 싶기도하다.

부모 요소에 display: flex를 사용하고 자식 요소를 원하는 영역을 배치하던 와중,

이렇게 child2 에 특별히 지정하지 않은 남은 영역을 모두 할당하고 싶을 때 사용하면 된다.

child2 를 예시로 들어보면,

.child2 {
    flex: 1;
}

을 해주면 남은 영역이 모두 할당된다.

맨 위 사진의 코드 예시)

<style>
    .parent {
        width: 100%;
        height: 200px;
        background-color: chocolate;
        display: flex;
    }
    .child1 {
        background-color: darkcyan;
    }
    .child2 {
        background-color: thistle;
        flex:1;
    }
</style>
<body>
    <div class="parent">
        parent div
        <div class="child1">child1</div>
        <div class="child2">child2</div>
    </div>
</body>

이상

자바스크립트로 css 를 제어할 수 있습니다.

보고있는 화면의 크기에 따라 클래스를 추가하고, 제거할 수 있듯이 말이죠. 

대신 하나하나 클래스를 지정하거나 스타일을 지정해주어야합니다.

css 로는 @media ( width: 1000px ) { }  이런 식으로 작성합니다.

JavaScript 로는 matchMedia(`(max-width: 1000px)`) 메서드를 사용합니다.

■ 기본

<script>
	// 화면인식 992px 사이즈 조절
	const mediaViewContent = window.matchMedia(`(max-width: 992px)`)	// 1
	console.log(mediaViewContent)
    
    const viewChangeHandler = (mediaViewContent) => {  					// 3
    	//이곳에 원하는 이벤트 설정
    }
    
    mediaViewContent.addEventListener("change", viewChangeHandler)		// 2
</script>

이렇게 matchMedia( ) 메서드를 통해 화면이 변하는 것을 인지할 수 있는데, 해당 내용을 콘솔에 입력해보았습니다.

콘솔창에 출력된 내용을 확인, max-width:992px 기준으로 작성이 되어있는 것을 확인할 수 있습니다.

■ 응용

MediaQuery를 다루려면 MediaQuery 내 match라는 녀석을 활용하면 편하다.

992px 이상이 되면 false, 미만이 되면 true가 되는데, 이를 이용하도록 한다. 
[기준 이상: false, 기준 미만: true ]

<script>
	if(mediaViewContent.matches === true){
    	// 992px보다 작아질 때 
	} else {
    	// 992px 보다 커질 때 (원상복구)
	}
</script>

이런식으로 사용 하면 되는데,

각각의 내용 안에 id.style.any = '' 를 지정해주면 된다.

■ 응용 - 예시)

<script>
const mediaViewContent = window.matchMedia(`(max-width: 992px)`)

const viewChangeHandler = (mediaViewContent) => {
    const moveToQnA = document.querySelector('#moveToQnA')
    const flexControlPannel = document.querySelector('#flexControlPannel')
    const moveToStatisticsList = document.querySelector('#moveToStatisticsList')

    if(mediaViewContent.matches === true){
        console.log('shrink')
        moveToQnA.classList.remove("col-5")
        moveToQnA.classList.remove("ml-5")
        moveToQnA.classList.add("mb-5")
        moveToQnA.style.width="100%"
        flexControlPannel.classList.remove("d-flex")
        flexControlPannel.classList.remove("justify-content-between")
        flexControlPannel.style.height="100%"
        moveToStatisticsList.classList.remove("col-5")
        moveToStatisticsList.style.width="100%"

    } else {
        console.log('release')
        moveToQnA.classList.add("col-5")
        moveToQnA.classList.add("ml-5")
        moveToQnA.classList.remove("mb-5")
        moveToQnA.style.width="48%"
        flexControlPannel.classList.add("d-flex")
        flexControlPannel.classList.add("justify-content-between")
        flexControlPannel.style.height="400px"
        moveToStatisticsList.classList.add("col-5")

    }
    
}
mediaViewContent.addEventListener("change", viewChangeHandler)
</script>

이상입니다.