본문으로 건너뛰기

TIL : 23-06-28

오늘 한 일

'내 나이가 어때서' 프로젝트

'내 나이가 어때서' 프로젝트

만 나이 통일 정책이 시행됨으로써, 만 나이 계산을 편리하게 하기 위한 서비스를 준비

Modal 라이브러리에 스타일을 하려고 하였으나,

className을 통해 styled-components 적용이 안 됨.

태그 안에 style = {} 을 적어주고 따로 선언해주어야 했음.

<Modal style={customStyles} className="modal-page" isOpen={modalIsOpen} onRequestClose={closeModal}>
    <button onClick={closeModal}>X</button>
    <br/><br/>
    <p>{modalMessage}</p>
</Modal>

const customStyles = {
  content: {
    width: '20rem',
    height: '10rem',
    position: 'fixed',
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    borderRadius: '0.286em',
    border: '2px solid #9de5d2',
    transform: 'translate(-50%, -50%)',
    padding: '3rem',
    textAlign: 'center',
    backgroundColor: 'white',
    fontSize: '0.8rem',
  },
};

참고자료 : https://www.npmjs.com/package/react-modal

"@babel/plugin-proposal-private-property-in-object"

One of your dependencies, babel-preset-react-app, is importing the
@babel/plugin-proposal-private-property-in-object package without
declaring it in its dependencies. This is currently working because
@babel/plugin-proposal-private-property-in-object is already in your
node_modules folder for unrelated reasons, but it may break at any time.
babel-preset-react-app is part of the create-react-app project, which
is not maintained anymore. It is thus unlikely that this bug will
ever be fixed. Add @babel/plugin-proposal-private-property-in-object to
your devDependencies to work around this error. This will make this message
go away.

프로젝트의 루트 디렉토리에 있는 package.json 파일을 엽니다.
devDependencies 섹션에 "@babel/plugin-proposal-private-property-in-object": "^7.15.0"와 같이 "@babel/plugin-proposal-private-property-in-object" 패키지를 추가합니다.

{
  "name": "your-project-name",
  "version": "1.0.0",
  "dependencies": {
    // dependencies 목록
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.15.0"
  },
  // 기타 설정 및 스크립트 등
}

터미널에서 프로젝트 루트 디렉토리로 이동한 다음 yarn install 명령을 실행하여 종속성을 다시 설치합니다.
변경 내용을 커밋하고 프로젝트를 다시 Netlify에 푸시하면 빌드 오류가 해결되어야 합니다.

fill-available → stretch

Warning
(25:3) autoprefixer: Replace fill-available to stretch, because spec had been changed
[eslint]
src/App.js
Line 169:7:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

chatGPT 답변 : 코드에서 사용되는 fill-available 속성을 stretch로 변경할 것을 권장하고 있습니다. 이는 CSS 스펙이 변경된 것을 반영한 것입니다. 이는 주로 스타일 관련 경고이므로, 빌드에 실패하는 주요 이유는 아닙니다.

하지만 아래와 같이 코드를 변경하니 배포를 성공함

body {
  min-height: 100vh;
  min-height: -webkit-stretch; // fill-available -> stretch
  min-height: -moz-available;
  min-height: stretch; // fill-available -> stretch
  display : flex;
  justify-content: center;
  background-color: azure;
}

오늘 한 일
'내 나이가 어때서' 프로젝트