쪼렙 as! 풀스택

javascript 로 새로운 창을 열때, '팝업'차단에 걸릴 수 있기 때문에, 사용자에게 팝업 차단을 해제해달라고 처리할 수 있다. const url = 'https://aaa.com'; const popup = window.open(url, '_blank'); if(!popup) { alert('팝업 차단을 해제해주세요') }else { popup.focus() } 테스트해보니, 아이폰에서는 이런식으로 할 수 없겠더라. 팝업차단을 해제해달라는 알림이 뜨기는 했지만, 실제로 팝업을 해제하려면, 사용자가 직접 설정 -> safari -> popupblock 뭐, 이런식으로 직접 차단을 해줘야 하니, 누가 그런일을 하겠는가! 그래서 구글링 해보니, 비동기방식으로 돌아가는 중에 팝업을 차단당하게 되있단다. ..

회시에서 새로 런칭하는 '알지넷' 에 대표가, '초대장' 시스템을 만들어달라 했다. - 기존 회원에겐 한정된 갯수의 초대장이 지급된다.- 이메일주소로 다른사람에게 초대장을 보낼 수 있다.- 초대장을 받은사람은, 초대장에 기입되어있는 링크 URL을 통해서만 가입할 수 있다.- 혹시 이메일을 못받은 사람들이 있거나, 잘못보낸 사람들을 위해, 초대장을 재발송 / 취소 할 수 있는 기능을 만든다. -------------- 작업을 해 보니, 이메일을 보낼 때 스타일이 가장 문제였다.일단 상단에 태그는 이메일 웹환경에서는 적용이 안되었다. 네이티브 메일 앱 같은데서는 되는데도 있고, 안되는데도 있더라. 그래서 결국, 모두 태그의 inline style 로 처리를 해야만 했다. 1. 사용자가 초대할 사람의 이메일 ..

CURL 로 외부에 있는 파일을 내부에 저장하기. $src = "https://aaa.com/aaa.zip"; $targetFile = "/aaa.zip"; $fp = fopen($targetFile, "w"); $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $src); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_FILE, $fp); curl_exec($ch); fclose($fp); curl_close($ch); 압축 풀기. $ $file = "/ZIP_FILE.zip" $zip = new ZipArchive; if..

회사에서 FANZEEL.COM 에 RSS 기능을 개발하라는 명령이 떨어졌다. fanzeel.com 의 API 서버는 PHP - CodeIgniter 로 되어있다. fanzeel.com/rss 이런주소로 되길 원했기 때문에, Rss 컨트롤러를 하나 만들었다. public class Rss extends CI_Controller - header("Content-Type: application/rss+xml"); header('Content-Type: text/xml'); echo ''; $datas = 'DATA FROM DATABASE' $now = date("D, d M Y H:i:s T"); // 시간 지정 (현재시간 단위~ ) $this->load->view('rss_v', array('now'=>$..

const sp = new URLSearchParams(window.location.search)const vlaue = sp.get('key')

사용자가 어떤 기기로 로그인을 하는지 분석해야 할 필요가 있다. 기기별로 로그인 제한을 두는 기능을 구현할 때도 필요하다.요새는 많은 서비스들이 어떤 기기에서 로그인을 했었는지 기록해두고, 새로운 곳에서 로그인을 체크하거나, 특정 기기의 로그인을 끊는다던가 하는 서비스를 제공하는 경우들이 많이 있다. PHP에서 $_SERVER["HTTP_USER_AGENT"] 를 분석하면 되는데, 나는 matomo-org/device-detector 라이브러리를 사용하기로 했다. 참고 https://github.com/matomo-org/device-detector 근데 이게 꽤나 무거운 작업인 듯 하다.그래서 나는 autoload 를 안쓰는 환경에서, 꼭 필요할 때만 로드해서 사용하기로 했다.

웹 개발할때, 모달 상태를 만들일이 꽤 있다. 그래서 당연히 라이브러리도 많이 존재한다.왠만해서는 라이브러리를 가져다 쓰기는 하는데, 어쩌다가 직접 모달상태를 만들어야 할일이 생겼다. 모달상태가 되면, 'position:fixed' 인 창을 맨 위로 올리고, 아래있는 body 부분의 'overflow:hidden' 으로해서 스크롤을 못하게 막아버리면 된다. 이때, 브라우저에 따라 '스크롤바'가 차지하고 있는 영역이 있을 수 있다. 사이즈도 브라우저마다 다를 수 있으므로, 그때그때 스크롤바의 넓이를 구해서, body의 'padding-right'를 설정해준다. const body = document.getElementsByTagName('body')[0] const scrollbarWidth = windo..

엘라스틱 빈스토크 - Node 서버로 설정하면, 기본적으로 Nginx 를 proxy 서버로 두게 되있다. 이번에 프록시서버를 사용해 보지 않고 Node 자체로 서버를 돌릴라고 했더니, 기존에 설정해 두었던 8081 포트가 먹히지 않아서 배포가 실패했다. 프록시 서버를 거치지 않으니, 바로 80포트로 받아봤는데, 실패. 그래서 구글링하다보니, 빈스토크 빌드할때, process.env.PORT 에 포트를 설정해 준다고 한다.그래서 server.js 에 포트 설정하는 부분을 아래와 같이 수정해서 해결했따. const PORT = process.env.PORT || 8081console.log('-->> PORT : ' + PORT) app.prepare().then(() => { const server = e..

헤더나 푸터와 같이, 프로젝트에 전체에서 공동으로 쓰이는 레이아웃들이 있을 것이다. 실제 프로젝트를 진행하다보면, 헤더, 푸터뿐 아니라, 여러가지 도구들 (전체를 감싸는 로딩 block 이라던지, Alert Modal 이라던지)을 공통으로 쓸 텐데, 이것들은 앱이 최초 한번만 로드되길 바란다. create-react-app 으로 프로젝트를 만들면, 당연히 App 컴포넌트에 한번 정의해놓으면 될것이고,Next.js 프로젝트를 한다면_app.js 를 사용하면 되겠다. 뿐만아니라, 전체 페이지의 getInitialProps 를 후킹할 수 도 있다. /pages/_app.js import React from 'react'import App, { Container } from 'next/app'import {He..

if(/Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent) ) { // 스마트폰이다. }