javascript 에서 fetch를 이용해, PHP의 스크립트문을 실행시켜 결과를 받는 작업을 하고 있었는데, 경우에 따라서 504 gateway timeout에러가 발생하는 문제가 있었습니다. 시간을 재보니, 60초가 지나게 되면 504에러가 발생했고 여러가지를 검색해보니까 Apache의 설정과 PHP의 설정을 해줄 필요가 있었습니다. 우선 PHP는 php.ini의 max_execution_time을 설정해주면 됩니다. script실행완료까지 최대 시간을 지정하는 설정인데, 오래걸리는 작업을 실행하게 되어 설정값보다 시간이 초과되게되면 에러가 발생합니다. php.ini max_execution_time = 180 30이 디폴트값으로 되어있었지만 180(초)로 변경했습니다. httpd.conf Time..
분류 전체보기
블로그나 웹사이트에는 사진을 클릭하게 되면, 해당 사진이 확대되고 회전시킬 수 있다는 등 다양한 조작이 가능한 경우를 볼 수 있습니다. js에 다양한 사진 확대 라이브러리가 존재하는데, 그 중에서 lightbox을 설치 및 적용해보겠습니다. 위의 이미지 처럼, 이미지를 클릭하게 되면 확대된 이미지와 그 밑에는 툴바가 있어서 다양한 조작을 할 수 있습니다. npm 설치 npm i vue-easy-lightbox main.js 설정 import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import VueEasyLightbox from 'vue-easy-..
loading overlay란, 비동기 작업이나 실행완료까지 시간이 걸리는 작업을 하는 경우에 로딩중이라는 것을 표현해주는 것을 의미합니다. 위의 이미지와 같이 loading overlayd에는 동그란 이미지, 막대 이미지, 프로그레스 바 등등 다양한 종류가 있습니다. 또한 loading overlay의 중요한 역할중 하나는 어떠한 작업이 진행중에 유저가 다른 작업을 하는 것을 방지합니다. 예를 들어, 사진을 업데이트 하고 사진을 수정하는 웹사이트가 있는 경우에 사진 업데이트가 완료된 후에 수정할 수 있는건데 업데이트가 완료되기도 전에 수정을 하는 것은 문제가 발생할 수 있습니다. 그러한 경우를 막기위해서 업데이트 중에는 loading overlay를 통해서 다른 요소의 클릭등의 작업을 방지할 수 있습니..
반응형 웹에서 테이블 구조를 사용하는 경우에, 모바일 화면에서는 테이블의 구조가 무너지는 경험을 자주 했기 때문에 해결을 위해 브라우저의 폭이 줄어들었을 경우에는 좌우의 스크롤을 통해서 테이블을 확인할 수 있도록 구현할 수 있습니다. 구현 방법은, 테이블을 두 개를 만들어서 하나의 테이블은 고정된 컬럼을 보여주기 위함 하나의 테이블은 스크롤을 통해서 보여질 테이블로써 사용합니다. 실제동작 확인 See the Pen Untitled by JONGIN CHOI (@jongin1004) on CodePen. 간단히 코드 설명 JS const table_container = document.querySelector('#table-scroll'); const table = document.querySelector..
Vuex를 사용하여, 컴포넌트간의 통신을 쉽게 할 수 있습니다 vuex는 컴포넌트간 공통적인 상태관리 라이브러리입니다. 컴포넌트간에 데이터를 주고 받고, 통신하기 위해서는 props와 emit등을 사용하는데 컴포넌트의 관계가 복잡하게 되면 의미없는 props가 반복되거나 구현하기 힘든 경우가 있습니다. 그런 경우에 vuex를 이용하면, 쉽게 컴포넌트간 공통 데이터 관리를 할 수 있습니다. vuex파일 설정 import { createStore } from 'vuex' export default createStore({ state: { is_clicked: false, }, mutations: { changeClickedState(state) { state.is_clicked = true; }, }, ac..
환경은 codeigniter 4에서, excel 파일에대해 읽기 쓰기를 하기위한 코드입니다. public function import() { $file = $this->request->getFile('file'); $extension = $file->getClientExtension(); $randomName = $file->getRandomName(); $file->move($randomName); $reader = ''; switch ($extension) { case "xlsx": $reader = new \PhpOffice\PhpSpreadsheet\Reader\Xlsx(); break; case "xls": $reader = new \PhpOffice\PhpSpreadsheet\Reader\Xl..
