앞서서 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**
}
>> 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에 있어서 굉장히 엄격하기 때문이다.