부모가 min-height: 100%일 때 자식에게 height 상속이 일어나지 않는 현상

앞서서 footer를 바닥에 아예 붙이기 위해서 layouts의 구조를 정하는 과정에서 전체 레이아웃 요소의 min-height를 100%을 준 적이 있었다.

<template>
  <div class="layout-container">
    <HeaderComponent />
    <Nuxt :keyword="keyword"></Nuxt>
    <FooterComponent class="footer" />
  </div>
</template>

<style lang="scss" scoped>
.layout-container {
  **display: flex;
  flex-direction: column;**

  **min-height: 100%;**
  position: relative;
  padding-bottom: 9rem;
  @include tablet {
    padding-bottom: 14rem;
  }
}
</style>

이번에 효은님이 에러 페이지를 만드는 과정에서 에러 페이지의 이미지를 페이지 세로 중간으로 놓는 과정에서, height: 100%을 주어도 해당 이미지 높이까지만 높이가 먹는 문제가 있었다.

min-height: 100%인 부모 컴포넌트의 자식 컴포넌트는 height를 상속받지 못한다.

이 경우, 부모가 flex이고 flex-direction: column이라면 해당 자식 컴포넌트를 flex: 1로 만들어줌으로써, flexbox 안에서 높이의 비율을 100%로 가져감으로써 문제를 해결할 수 있다.

.child-wrap {
	...
	**flex: 1**
}

vue cli로 프로젝트 시작 시 peer dependency 에러 이슈

>> npm i

npm notice 
npm notice New minor version of npm available! 8.11.0 -> 8.16.0
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v8.16.0>
npm notice Run npm install -g [email protected] to update!
npm notice 
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @vue/[email protected]
npm ERR! Found: **[email protected]**
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   dev eslint-plugin-vue@"^8.7.1" from the root project
npm ERR! 
npm ERR! **Could not resolve dependency:**
npm ERR! peer **eslint-plugin-vue@"^7.0.0"** from **@vue/[email protected]**
npm ERR! node_modules/@vue/eslint-config-standard
npm ERR!   dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/eslint-plugin-vue
npm ERR!   peer eslint-plugin-vue@"^7.0.0" from @vue/[email protected]
npm ERR!   node_modules/@vue/eslint-config-standard
npm ERR!     dev @vue/eslint-config-standard@"^6.1.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/dokyungkim/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dokyungkim/.npm/_logs/2022-08-05T08_23_08_799Z-debug-0.log

npm으로 어떤 dependency라도 설치하려 하면 계속해서 오류가 난다.

지금 위에서 일어나는 상황은 다음과 같다.

@vue/[email protected]를 설치하는 상황에서 이 친구가 eslint-plugin-vue 7.0.0 버전을 원하고 있는 상황이다. 하지만 지금 eslint-plugin-vue는 8.7.1로 루트 프로젝트에 설치가 되어 있기 때문에 @vue/eslint-config-standard의 요구 버전과 충돌이 나 오류가 발생한 상황이다.

실제로 package-lock.json에 들어가보면

"node_modules/@vue/eslint-config-standard": {
      "version": "6.1.0",
      "resolved": "<https://registry.npmjs.org/@vue/eslint-config-standard/-/eslint-config-standard-6.1.0.tgz>",
      "integrity": "sha512-9+hrEyflDzsGdlBDl9jPV5DIYUx1TOU5OSQqRDKCrNumrxRj5HRWKuk+ocXWnha6uoNRtLC24mY7d/MwqvBCNw==",
      "dev": true,
      "dependencies": {
        "eslint-config-standard": "^16.0.3",
        "eslint-import-resolver-node": "^0.3.4",
        "eslint-import-resolver-webpack": "^0.13.1"
      },
      "peerDependencies": {
        "@vue/cli-service": "^3.0.0 || ^4.0.0 || ^5.0.0-0",
        "eslint": "^7.12.1",
        "eslint-plugin-import": "^2.22.1",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-promise": "^4.2.1 || ^5.0.0",
        **"eslint-plugin-vue": "^7.0.0"**
      },
      "peerDependenciesMeta": {
        "@vue/cli-service": {
          "optional": true
        }
      }
    },

이렇게 7.0.0 버전을 요구하고 있다는 것을 알 수 있다.

이는 npm 8 버전이 dependency에 있어서 굉장히 엄격하기 때문이다.