html은 head 태그안에 title과 meta 태그 등을 설정함으로써 페이지의 정보를 제공한다.next.js에서는 next/head 컴포넌트를 이용해 설정 할 수 있다. import Head from "next/head"; export default ({ children, title = "This is the default title" }) => ( {title}

공식문서에 보면 next js를 배포할 대 zeit이나 now를 사용하면 간편하게 할 수 있다고 나와있지만, 기존 서비스에 아파치가 이미 띄워져 있어 다른 방법을 찾아야 했다.next js의 서버를 실행 시키면 localhost:3000 으로 서버가 열리기 때문에 아파치의 virtual host와 proxy 설정을 통해 해당하는 도메인으로 접속시 next js를 보도록 만들었다. 그 후 서버의 관리를 위해 pm2를 사용해 next js서버를 열었다.아래의 명령어를 터미널에 입력하면 pm2를 사용해 next js를 띄울 수 있다. # for developmentpm2 start npm --name "next" -- run dev # for productionnpm run buildpm2 start npm ..

ec2에서 아파치를 설치 후 virtual hosting을 세팅하는 방법. cd /etc/apache2/sites-available vi 해당폴더안에 있는 conf파일 이름#버츄얼 호스팅을 통해 proxy설정을 해야 할 때#노드 등 띄워야 할 때 ServerName 도메인 이름 DocumentRoot /var/www/html/ -루트 폴더 설정 Options -Indexes +FollowSymLinks AllowOverride None Require all granted ProxyRequests Off ProxyPreserveHost On ProxyVia Full Require all granted ProxyPass 서버네임으로 접속시 접속시킬 서버 도메인 ProxyPassReverse 서버네임으로 접속..

개발자들은 aws 등을 사용하여 개인 서버를 올리는 분들이 많지만 사용법이 쉽지만은 않기 때문에 웹퍼블리셔 분들이나 디자이너 분들은 자신의 포트폴리오를 서버에 올리기 힘들어 합니다.그런 분들을 위해 무료로 간편하게 html 파일을 서버에 올릴 수 있는 방법을 하나 정리하려 합니다사용할 서비스는 닷홈이라는 호스팅 업체의 서비스 입니다. https://www.dothome.co.kr/ 서버 만들기닷홈에 들어가신 후 회원가입을 합니다. 그 후 웹호스팅 - 무료호스팅을 선택합니다 해당 창에 들어가서 스크롤을 밑으로 내리면 무료호스팅 신청하기가 있습니다 해당하는 서비스를 신청합니다. 입력하는 값들이 몇 있지만 회원가입 정도의 수준이므로 사진은 생략하겠습니다 신청이 완료 된 후에 웹호스팅-내웹호스팅 관리로 들어갑니..

프로젝트 후에 할 일 이번 프로젝트를 진행하면서 무엇을 배웠는가 이번 프로젝트에서 내가 한 실수들은 무엇이었는가 내가 이 프로젝트를 처음부터 다시 만든다면 ? 어떠한 라이브러리를 도입할 것이다 구조를 다른 방식으로 짤것이다 등등 개인 개발 시간 정하기 습관은 중요한 것. 취업 후에도 시간을 정해서 개인 미니 프로젝트 진행하기 블로그 정리하기 공부 할 때 정리하면서 하는 습관 잘 생각이 안날 때 많은 도움이 됨 영어공부 번역기 돌리기 보단 느려도 해석해 가면서 보기 최신 트렌트 파악 reddit twitter medium

모바일 기기에서 input 선택시 확대 될 때모바일 기기에서 웹페이지를 이용할 때 input 태그를 클릭하면 확대가 되는 효과가 있습니다.이 확대되는 효과를 없애고 포커스만 가도록 하는 방법은 viewport 메타 태그에 있습니다. 방법은 아주 단순한데 viewport 메타 태그에 user-scalable=no 속성을 추가해주시면 됩니다. 모바일 기기에서 media쿼리 적용이 안 될 때viewport는 화면에 나타나는 브라우저의 크기를 나타낸다.위의 문구를 입력하지 않으면 width값이 980px로 설정된다. 데스크탑의 브라우저는 창의 크기를 조절할 수 있어 미디어쿼리가 적용되지만 모바일의 브라우저는 창크기를 조정할 수 없어 980px 이하의 미디어 쿼리가 적용되지 않는다.width=device-widt..

//http://www.facebook.com/sharer.php?u={페이지 제목}&t={페이지링크} $(".facebook").click(function(e){ e.preventDefault(); window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL) +'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, height=300, width=600'); }); 메타테그를 입력 후 자바스크립트를 통해 이벤트를 붙여 페이스북 공유가 가능..

정규식 사용하여 영문과 숫자가 아닐 경우 입력되지 않게 한다 회원가입, 로그인 시에 영어와 숫자만을 받기 위해 여러가지 방법을 찾아 보았다. style에서 ime를 사용하는 방법은 크롬에서 지원하지 않고, key값을 이용하여 false를 리턴하는 방법 또한 크롬에서 먹히지 않았다. 작은 고집으로 정규식을 사용하고 싶지 않았는데 정규식이 제일 깔끔한 방법 인 것 같다. 주의할점 함수 안에서 this를 사용하는 것은 window에서의 onlyAlphabet함수를 실행시키는 것이므로 this는 window가 된다. 따라서 element에서 this를 사용하여야 element의 onkeydown 함수의 onlyAlphabet함수가 실행되는 것이므로 이 때 this는 해당 element가 된다 참고자료 https..

1. 책을 읽어라- 책을 읽는 것은 독해력이 필요하며, 독해력을 길러준다. 자만하지말고 쉬운것부터 읽어라- 관심 있는 분야로 시작해서 기억하고 싶은 부분을 접고, 괄호로 표시하고, 컴퓨터에 정리한다.- 하루 뒤에 다시 보고 5일 후에 다시 보고 3개월 후 다시 한번 보면 장기 기억으로 변환 되며 적용이 가능해 진다 2. '타이탄의 도구들' 리뷰- 평범한 사람이 타이탄을 이기는 방법1. 한가지 전문 지식을 상위 1%로 만들어라2. 많은 기술들이 있지만 그 중 3-4가지를 전국민 중 상위 20%로 끌어 올려라- 유튜브를 찍고 편집해서 올리는 것만으로도 전국민 중 1%는 되지 않을까?3. 공부를 한 후 실천하는 것이 중요하다 3. 아이디어 만드는 법- '생각이 돈이되는 순간' 리뷰- 사람은 끼리끼리 만난다. ..