일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- MySQL
- SQL
- working directory
- ec2
- NGINX
- php
- imagemagick
- ubuntu
- Python
- docker-compose
- laravel
- vue
- Git
- props
- pagination
- dockerfile
- Wordpress
- Ruby On Rails
- javascript
- linux
- ruby
- AWS
- centOS7
- staging area
- Selenium
- react
- docker
- codeigniter4
- cron
- controller
- Today
- Total
목록분류 전체보기 (317)
내가 한 노력들
블로그나 웹사이트에는 사진을 클릭하게 되면, 해당 사진이 확대되고 회전시킬 수 있다는 등 다양한 조작이 가능한 경우를 볼 수 있습니다. 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..
cURL이란? 커멘드 라인이나 소스코드를 이용해 손 쉽게 브라우저처럼 사용할 수 있게 해주는 툴 URL로 할 수 있는 모든 것을 커멘드라인을 이용하여 사용할 수 있도록 해주는 커맨드 명령어 툴
아이콘에 마우스를 가져다대면, tip 말풍선을 보여주는 UI를 자주 볼 수 있습니다. 위의 사진과같은 기능은 CSS만으로도 구현이 가능합니다. HTML 원하는 tip 메세지 CSS .container { position: relative; } .tip{ position: absolute; top: 8px; left: 55px; font-size: 14px; line-height: 26px; text-align: center; background-color: #b3dfe6; border-radius: 50%; width: 24px; height: 24px; cursor: default; } .tip:before{ content:'?'; font-weight: bold; color:#fff; } .tip:h..
PHP의 ImageMagick을 이용하면, 이미지 관련된 여러 작업을 쉽게 할 수 있습니다. 예를 들어서, 이미지의 확장자, 사이즈, 회전, 색상, 여백등등 다양한 작업을 할 수 있습니다. PDF 파일을 Image 파일로 변경 convert target.pdf image.png 위의 명령어만으로도 변경가능합니다. 여기서 여러가지 옵션을 추가할 수 있는데, 제가 사용했던 옵션들은 아래에 정리해뒀습니다. Image 파일을 PDF파일로 저장 convert target.png pdf.pdf 그 반대의 경우도 마찬가지로 위의 간단한 명령어로 변경이 가능합니다. 여기서도 마찬가지로 여러가지 옵션을 사용할 수 있고, 만약에 여러 사진을 하나의 PDF파일로 변경하고 싶은 경우에는 -adjoin 옵션을 사용할 수 있습니..