테서르

웹 서비스는 운영을 하던, 개발을 하던 웹 서버가 작동을 하고 있어야 사용이 가능하다. 그래서 테스트를 위해 웹 서버를 설치해야 하는데 개별적으로 설치하기는 귀찮다. 그래서 한번에 설치 및 관리를 할 수 있는 소프트웨어가 있다. 그게 바로 이번에 소개할 XAMPP다. XAMPP는 소규모 웹에서 자주 쓰이는 Apache 웹서버, MySql 데이터베이스(홈페이지는 MariaDB로 소개), PHP를 포함하고 있다. Perl도 포함하고 있지만 이 글에서는 다루지 않는다. XAMPP를 설치하기 위해 홈페이지(www.apachefriends.org/index.html)에 접속한다. 친절하게도 메인페이지에 다운로드 링크가 있다. 포함된 소프트웨어를 모두 최신 버전으로 사용하려면 XAMPP for Windows를 눌러..

새로운 프로젝트 제작을 위해 리액트 서적을 구매하여 공부를 하는 중에 sass-loader 설정을 커스터마이징 하는 챕터에서 계속 prependData 항목이 없다며 에러를 출력했다. 오타 없이 제대로 입력했고 구글에 prependData라고 검색을 하니 제대로 리액트를 설명하는 다른 블로그도 보였다. 그래서 조금 찾아보니 이전에는 prependData가 data에서 변경이 되었다는 글을 확인하였다. 위 에러 화면을 보면 마지막 줄에 object의 내용을 보면 option 항목에 사용되는 프로퍼티를 알려주고 있다. 그리고 세번째를 보면 'additionalData'라고 되어있다. 이름에 Data가 들어가서 저걸로 변경을 해 보니 에러 없이 적용이 되었다. { test: sassRegex, exclude:..

작년에 갑자기 캡쳐보드가 사고 싶은 마음이 생겼다. 그래서 이리저리 조사를 해 보았다. 여러 브랜드가 있었지만 무난하게 사용할 수 있는 것으로 찾아보니 에버미디어의 Live Gamer Extreme2와 엘가토의 HD60S+로 선택폭이 줄어들었다. 가격 면에서는 에버미디어 쪽이 좋았지만 엘가토의 디자인이 마음에 들어서 가격이 조금 비싸지만 엘가토를 구매하였다. USB로 데이터 전송과 전원 공급을 하기 때문에 별도의 전원이 필요하지 않다. 캡쳐보드의 IN 측면에 USB C타입과 녹화를 할 기기의 HDMI를 연결하면 끝이다. 그리고 USB는 반드시 3.0버전 이상을 사용해야 한다. 필자의 메인보드에 C type USB가 하나 있어서 거기에 연결하려고 C to C를 하나 샀는데 2.0은 작동을 하지 않는다며 오..

🔔 이 게시글은 HTML, JavaScript, PHP, React 관련 플러그인에 관해서만 정리되어 있습니다. Visual Studio Code(vs code)는 마이크로 소프트에서 개발한 문서 편집기로 웹 개발에 주로 사용된다. 초기에는 Atom이나 Sublime Text에 비하면 여러가지로 부족했지만 업데이트를 반복하면서 확장(extension) 플러그인 생태계가 커지면서 인기 있는 텍스트 에디터가 되었다. 덕분에 웹 프로젝트를 진행할 때 많이 사용되는 도구가 되었다. 설치 초기에는 기능이 너무나 담백해서 개발을 하는 데 많은 불편함이 느껴진다. 그래서 많은 사람들이 쓰고 있고 필자도 쓰면서 편리함을 느낀 확장 플러그인을 소개하고자 한다. 1. Auto Rename Tag html을 작성할 때 태그..

목차 세션 시작 세션 변수 사용 세션 변수 해제 세션 변수 등록 확인 세션 id 변경 세션 종료 추가 1. 세션 유지시간 추가 2. 추가 보안설정 세션(Session)은 모든 정보가 사용자 측의 컴퓨터에 저장되는 쿠키와는 달리 웹 서버에 정보를 저장하고 사용자 측에는 접근할 수 있는 키 값을 저장한다. 웹 서버에 데이터가 저장되고 필요할 때마다 브라우저에서 키 값으로 서버에 요청을 한다. 그리고 브라우저를 종료하는 시점에서 세션이 삭제가 되도록 설정이 가능해서 쿠키에만 데이터를 저장하는 것보다는 보안성이 높다. 사용하는 법도 쉽기 때문에 로그인과 같은 인증 처리에 많이 사용이 된다. 1. 세션 시작하기

현재 가지고 있는 자바스크립트 책들이 jquery를 사용하는 것을 기준으로 설명이 되어 있어서 $.ajax 함수만 설명이 되어 있다. 공부를 겸해서 바닐라 JS로만 프로젝트를 작성하는 연습을 하고 있기에 조금 찾아 보았다. 자바스크립트에는 XMLHttpRequest라는 API가 있다. XML이라는 이름 처럼 원래는 XML을 전송하는 목적이었지만 json이나 일반적인 텍스트는 물론 파일까지도 전송이 가능하다. ajax라는 이름도 비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)다. ajax를 통해 웹사이트와 서버간에 비동기적으로 통신이 가능하다. 페이지 새로고침이나 변경 없이 통신이 가능하다는 것이다. 몇년 전부터 계속 화두가 되고 있는 싱글 페이지 애플리케이션(Sin..

페이스북에서는 사용자들이 쉽게 자신이 올린 글이나 댓글, 또는 관리하고 있는 페이지와 관련된 정보를 얻을 수 있도록 그래프 API를 제공하고 있다. 그래프 API를 브라우저에서 쉽게 활용할 수 있도록 도와주는 것이 그래프 API 탐색기다. 직접 코드를 짜는 것보다 편리하며 결과물이 마음이 든다면 해당 코드를 받을 수도 있다. 서비스에 적용하기 전에 원하는 정보가 나오는지 확인하기 위해서는 그래프API 탐색기를 사용하는 것이 편하다. 그래프 API 탐색기를 사용하려면 페이스북 개발자 계정과 페이스북 앱이 필요하다. 개발자 계정은 https://developers.facebook.com에서 로그인을 하여 등록을 할 수 있다. 페이스북 앱을 만드는 방법은 https://teserre.tistory.com/2에..

webdav는 http를 확장하여 문서나 파일의 관리를 쉽게 하기 위해 만들어진 프로토콜이다. 그렇기에 http 포트로 서버에 접근을 한다. 물론 https도 가능하다. 필자가 사용하고 있는 개인 서버에도 webdav를 적용하기 위해 여러 글을 찾아봤는데 계속 적용이 되지 않아서 며칠동안 시도를 하다가 겨우 성공을 했다. 혹시 비슷한 상황이거나 새로 적용하려는 사람들에게 도움이 되고자 적용 방법을 정리해 보았다. 서버 환경 : Ubuntu 20.04 LTS, Apache2 (version 2.4.41) webdav를 사용하기 위해서는 apache2와 관련 모드가 포함되어 있는 apache2-utils를 설치해야 한다. sudo apt install apache2 apache2-utils 설치가 되었으면 ..

페이스북, 카카오 같이 소셜 서비스를 운영하는 업체들은 API를 제공하고 있다. 이 API를 사용하고자 하는 사이트가 HTTPS가 적용이 되어 있어야 기능을 제공한다. Let's Encrypt는 무료로 SSL 인증서를 발급하여 HTTPS를 사용할 수 있게 해주는 고마운 인증 기관이다. 적용을 하는 것도 매우 간단하다. 여러 방법이 있지만 이 글에서는 인증서를 발급하는 certbot 패키지를 활용하여 간편하게 등록하는 방법으로 진행하였다. 참고로 ubuntu 20.04, Apache 환경을 기준으로 한다. [사전 준비] https를 적용하기 위해서는 등록된 도메인이 필요하다. 사용하고 있는 도메인이 있으면 본문으로 넘어가면 되고, 없으면 도메인을 등록해야 한다. 도메인도 마찬가지로 유료와 무료 등록이 있다..

PHP 8.0 이상을 사용하시는 분들은 curl을 사용하셔야 합니다. 8.0은 사용이 가능하지만 최신 SDK를 사용할 수 없고, 8.1부터는 제외된 기능때문에 사용이 불가능합니다. 해당하시는 분들은 https://teserre.tistory.com/21를 참조해 주세요. 페이스북이 제공하는 다양한 API를 사용하기 위해서는 기본적으로 페이스북 로그인 API를 사용하여야 한다. Javascript로도 구현이 가능하지만 보안이나 세션 등의 이유로 PHP와 Facebook PHP SDK로 연동하는 방법을 정리를 해 보았다. 참고로 필자의 서버 환경은 ubuntu 18.04LTS, Apache를 사용하고 있다. ※ 연동 전 필수 작업 페이스북 뿐만이 아니라 다른 모든 SNS 로그인 API를 사용하기 위해서는 웹..