Frontend-Programming (3) 썸네일형 리스트형 React.js - nginx 배포하기 1. nginx란? Nginx는 웹 서버 소프트웨어로, 가벼움과 높은 성능을 목표로 한다. 웹 서버, 리버스 프록시 및 메일 프록시 기능을 가진다. 2. React project build 프로젝트 경로로 이동하여 build 명령어를 수행합니다. package.json ... "scripts": { ... "build": "react-scripts build", ... }, ... yarn build 빌드가 완료되면 nginx를 설치합니다. 3. nginx 설치 sudo apt install nginx 4. nginx 설정 설치가 완료되면 /etc/nginx로 이동합니다. cd /etc/nginx ll sites-available, sites-enabled 폴더 내부의 default 설정 파일들을 제거합.. 부트스트랩 Modal 닫힘 event 감지 부트스트랩 모달을 오픈할 때, Ajax로 데이터를 가져오고 값을 모달에 뿌리는 구조를 만들고 있는데, 하나의 모달을 오픈하고 다른 모달을 클릭하면 그 값이 그대로 박혀있는 현상을 개선하기 위해서 스크립트를 작성합니다. $('#product-modal').on('hidden.bs.modal', function () { $("#modal-title").text(''); $("#modal-price").text(''); $("#modal-state").text(''); $("#cardPreviewImage").attr('src',''); $('#cardPreviewImage').css("display", "none"); $('#modal-cart').css("display", "none"); $('#modal.. css - height 통일시키기 (반응형) 퍼블 html을 받고 서버에서 데이터를 받아서 화면에 뿌릴 때, 이미지의 경우 크기가 들쭉날쭉 하다면 다음과 같이 게시판 모양이 어그러집니다. 저의 경우, 게시판 이미지의 넓이는 고정되어 있었지만, 높이는 고정되어 있지 않기 때문에 문제가 발생하였습니다. 높이를 고정해보겠습니다. .card-img { height: 25rem; } card-img 클래스를 추가하였습니다. 하지만 결과는 바뀌지 않았습니다. 해당 클래스가 잘 적영되었나 개발자 도구를 확인하는데, 이미 height 속성이 정의되어 적용이 되지 않았습니다. !important 속성을 추가해줍니다. .card-img { height: 25rem !important; } !important 속성을 추가해줍니다. !important 규칙은 해당 속성.. 이전 1 다음
