본문 바로가기

웹20

728x90

Visual Studio Code 기반 Vue.js 개발 환경 구성하기 Vue.js 를 개발하는 환경을 구축하는 방법은 여러가지가 있다. 본 글에서는 무료로 사용가능하고 충분히 높은 생산성을 낼 수 있는 Visual Studio Code 기반 Vue.js 개발 환경을 구축하는 방법을 소개한다. 1. Visual Studio Code 설치 Visual Studio Code 설치 파일을 아래의 주소로 이동하여 다운로드 받는다. Visual Studio Code 다운로드 주소: https://code.visualstudio.com/ 다운로드된 설치파일을 실행하여 아래의 사진처럼 설치한다. 본 글에서는 윈도우 11 64비트를 기준으로 설명한다. 라이센스에 동의하고 '다음' 버튼을 클릭한다. 설치 경로를 적절하게 설정하고 '다음' 버튼을 클릭한다. 시작 메뉴 폴더명을 적절하게 설정하.. 2023. 12. 28.

[RHEL 9] 아파치 웹 서버 설치 RHEL(Red Hat Enterprise Linux) 9에서 아파치 웹 서버(Apache HTTP Server, HTTPD)를 설치하는 방법은 아래와 같다. 아파치 웹 서버 설치 아래의 명령어를 입력하여 아파치 웹 서버를 설치한다. dnf install -y httpd wget 위의 사진에 나타난 것처럼 현재(2023년 7월 26일) 기준으로는 아파치 웹 서버 2.4.53이 설치된다. 방화벽 설정 아래의 명령어를 입력하여 HTTP(Hypertext Transfer Protocol)가 사용하는 포트를 개방한다. firewall-cmd --permanent --add-port=80/tcp 아래의 명령어를 입력하여 HTTPS(Hypertext Transfer Protocol Secure)가 사용하는 포트를 .. 2023. 7. 26.

PHP-Proxy - PHP 기반 웹 프록시 솔루션 PHP로 작성된 웹 프록시 오픈 소스 솔루션을 찾던 중에 'PHP-Proxy'를 발견했다. 사용해보니 'glypeproxy' 기반을 경량화 해서 만든 것이다보니 내가 원했던 기능도 마찬가지로 지원하지 못 했다. 동적으로 정보를 읽어오는 것이 되지 않아서 아쉽다. 공식 페이지: https://www.php-proxy.com/ GitHub 주소: https://github.com/Athlon1600/php-proxy-app 2023. 5. 25.

glypeproxy - PHP 기반 웹 프록시 솔루션 PHP 기반으로 작성된 웹 프록시(Web Proxy)가 오픈 소스로 되어 있는 것이 있나 싶어서 찾던 중에 'glypeproxy'를 찾았다. 구축하고 써봤는데 생각보다는 꽤 잘 되었지만 동적으로 읽어오는 웹 페이지에서 동작이 문제가 있어서 내가 사용하는 용도로 쓸 수는 없었다. 요즘처럼 동적으로 읽어오는 페이지가 많은 경우에 대응해서 'glypeproxy'의 기능 업데이트가 필요하다. GitHub 주소: https://github.com/vincentclee/glype 2023. 5. 24.

[IT 용어] 웹소켓(WebSocket) 정의 웹소켓(WebSocket)은 웹(HTTP) 클라이언트(브라우저)와 웹 서버 간 양방향 통신을 제공하는 기술이다. 등장배경 웹소켓이 등장한 시점에는 HTTP(Hypertext Transfer Protocol)의 버전이 1.1이었다. 이 때는 HTTP로 통신할 때마다 연결을 생성해야 했는데 이 경우 웹 서버와 웹 클라이언트의 실시간 양방향 통신을 구현하면 높은 지연 발생과 낮은 데이터 전송량이라는 한계가 발생했다. 이 한계점을 개선하기 위해 연결을 한 번 수립하면 계속 통신할 수 있는 웹소켓이 제안되었다. 참고문서 "The WebSocket Protocol", RFC 6455, IETF, 2020년 1월 21일. @원문보기 "Hypertext Transfer Protocol -- HTTP/1.1", R.. 2023. 4. 30.

[미디어위키] 세션 관련 오류 발생시 해결 방법 오류 개요 미디어위키(MediaWiki)에서 세션(Session) 관련 오류가 나타난다면 PHP 모듈에서 세션이 정상적으로 생성되는지를 확인해야 한다. 미디어위키에서 세션은 PHP 모듈의 세션을 활용하기 때문에 PHP 모듈로 가서 PHP 세션 설정을 확인해야 한다. 오류 메시지와 화면 오류 메시지와 화면은 아래의 사진처럼 나타난다. 세션 데이터가 없어져 편집을 저장하지 못했습니다. 로그아웃되었는지도 모릅니다. 아직 로그인 상태인지 확인하고 다시 시도해주세요. 다시 시도해도 되지 않으면 로그아웃한 다음 다시 로그인하세요. 그리고 브라우저 설정에서 쿠키 사용을 허용하는지 확인하세요. 오류 해결 방법 'php.ini' 파일을 텍스트 에디터로 열어서 PHP 세션 설정을 찾아 아래와 같이 설정한다. 본 글에서는 .. 2023. 4. 16.

라이믹스를 웹 호스팅에 설치하자 4강 - 라이믹스 설치 지난 강의에서 라이믹스 설치 파일을 할당 받은 서버 공간에 업로드 하였으면 이제 라이믹스를 설치하는 과정만이 남았다. 라이믹스를 설치하는 과정은 닷홈 무료 웹 호스팅이 아니라도 동일하다. 동영상 설명 라이믹스 설치 할당받은 도메인 주소를 웹 브라우저에 입력하여 설치 페이지로 이동한다. 사용권에 동의하고 '다음' 버튼을 클릭한다. 사용가능한 PHP 기능 목록이 나타나는데 'OK' 외에 다른 메시지가 나타난다면 해당 기능을 활성화 시킨다. 닷홈 웹 호스팅의 경우 이미 해당 기능들이 활성화되어 있기에 별다른 조치 없이 모든 기능이 'OK'로 나타날 것이다. '다음' 버튼을 눌러서 설치를 진행한다. 닷홈 웹 호스팅 서비스 신청 내역에 보면 DB 정보가 있다. 그 DB 정보를 여기에 입력한다. 관리자 계정의 정보.. 2023. 3. 11.

라이믹스를 웹 호스팅에 설치하자 3강 - 라이믹스 파일 업로드 닷홈 FTP 연결까지 완료되었다면 이제 라이믹스 설치 파일을 할당된 서버 공간에 업로드한다. 동영상 설명 라이믹스 다운로드 아래의 주소로 가서 라이믹스 파일을 다운로드 받는다. 라이믹스 다운로드 페이지 주소: https://rhymix.org/ 라이믹스 업로드 다운로드한 라이믹스 압축 파일을 해제하여 '/html' 디렉토리에 업로드한다. 라이믹스 설치 페이지 확인 닷홈에게서 할당 받은 도메인 주소로 이동하여 설치 페이지가 아래의 사진처럼 나타나는지 확인한다. '라이믹스를 웹 호스팅에 설치하자' 강의 목록 "라이믹스를 웹 호스팅에 설치하자 1강 - 닷홈 무료 호스팅 신청", 공학코드, 2023년 3월 9일. @강의보기 "라이믹스를 웹 호스팅에 설치하자 2강 - 파일질라 FTP 클라이언트 설치와 닷홈 FTP.. 2023. 3. 11.

라이믹스를 웹 호스팅에 설치하자 2강 - 파일질라 FTP 클라이언트 설치와 닷홈 FTP 서버 접속 지난 강의에서 닷홈 무료 웹 호스팅을 신청했고 서버 공간을 할당 받았다면 닷홈 FTP(File Transfer Protocol) 서버로 접속하여 라이믹스(Rhymix)를 업로드할 준비를 해야 한다. 본 글에서는 파일질라 FTP 클라이언트(Client)를 이용하여 닷홈 FTP 서버로 접속하는 방법을 설명한다. 동영상 설명 2강. 파일질라 설치와 닷홈 FTP 접속 파일질라 FTP 클라이언트 설치 파일 다운로드 아래의 주소로 접속하여 파일질라 FTP 클라이언트 설치 파일을 다운로드 한다. 설치 파일 다운로드 주소: https://filezilla-project.org/download.php 파일질라 FTP 클라이언트 설치 다운로드 받은 파일질라 FTP 클라이언트 설치 파일을 실행하여 설치한다. 닷홈 FTP 접.. 2023. 3. 10.

라이믹스를 웹 호스팅에 설치하자 1강 - 닷홈 무료 호스팅 신청 라이믹스 운영환경 라이믹스를 운영하는 환경은 크게 2가지로 나뉜다. 첫 번째는 서버를 직접 구축하여 운영하는 것이고 두 번째는 서버 공간을 대여하는 방식이다. 서버를 직접 구축하기에는 초기에 많은 비용이 발생하고 전문성 있는 관리인력을 두어야 하기에 비용부담이 크다. 그래서 서버 공간을 대여하여 라이믹스를 설치하는 것이 가장 흔하다. 이렇게 서버 공간을 대여하는 것을 보고 호스팅이라고 부르며 웹 서버 공간을 대여하는 경우 웹 호스팅이라고 부른다. 닷홈 무료 웹 호스팅을 신청하는 방법은 아래에서 설명한다. 동영상 설명 1강. 닷홈 무료 웹 호스팅을 신청하자 닷홈 회원가입 닷홈 무료 호스팅을 이용하려면 회원이어야 한다. 아래의 회원가입 주소에서 가입할 수 있다. 닷홈 회원가입 주소: https://www.d.. 2023. 3. 9.

[IT 용어] 라이믹스(Rhymix) 정의 라이믹스(Rhymix)는 XE(Xpress Engine)를 포크하여 개발한 국산 CMS(Content Management System)이다. 라이믹스 개발은 기진곰(kijin@poesis.org)님이 리드하고 있다. 특징 라이믹스는 PHP 환경에서 동작하며 태생이 국산이다보니 한국 웹 서비스 정서에 잘 맞는 기능과 디자인을 갖추고 있다. 참고문서 "라이믹스 소개", 라이믹스 공식 홈페이지. @원문보기 "Rhymix", 위키피디아. @원문보기 2023. 1. 11.

[IT 용어] 웹어셈블리(WebAssembly, WASM) 정의 웹어셈블리(WebAssembly, WASM)는 웹 브라우저에서 실행 가능한 저수준 언어이다. 특징 웹어셉블리를 활용하면 네티이브에 가까운 성능을 낼 수 있기에 고성능이 필요한 프로그램을 실행할 때 적합하다. 웹어셈블리는 C와 C++, RUST 같은 언어로 작성된 이진 형식의 프로그램 실행이 가능하기 때문에 메모리 관련으로 엄격한 응용이나 강력한 보안이 필요한 응용에 적합하다. 참고문서 "Overview", 웹어셈블리 공식 홈페이지. @원문보기 "WebAssembly Concepts", MDN, 2022년 10월 14일. @원문보기 "웹 어셈블리 시스템 아키텍처 모델", 박진태, 문일영, 한국항행학회논문지, 2019년 8월. @원문보기 "웹어셈블리 인기에 날개달까?··· 주목할 만한 언어 프로젝트 1.. 2022. 12. 28.

[IT 용어] 웹(Web) 3.0 정의 웹(Web) 3.0은 플랫폼에 종속되지 않고 서비스 참여자가 많은 권한을 가진 탈중앙화된 웹이다. 참고문서 "웹 3.0, Web 3.0, 웹3(Web3)", 정보통신용어사전, 한국정보통신기술협회. @원문보기 "Web 3.0의 정의와 주요 기술요소", TTA 저널 제203호, 한국정보통신기술협회, 2022년 9월. @원문보기 "웹 3.0 표준화 이슈보고서", TTA-22083-SA, 한국정보통신기술협회, 2022년 7월. @원문보기 "Introduction to Web3", 이더리움 공식 홈페이지, 2022년 12월 23일. @원문보기 2022. 12. 26.

웹 개발 중에 크롬 웹 브라우저의 화면이 계속 똑같을 때는 '캐시 비우기'를 수행하자 캐시(Cache)는 서버의 부하를 낮추고 사용자에게 더 빨리 화면을 제공할 수 있는 장점이 있는 기술이다. 하지만 개발 중이라면 캐시로 인해 실제 소스코드를 변경했음에도 불구하고 프로그램에 반영되지 않는 경우가 발생한다. 특히 웹을 개발하는 과정 중에는 자주 겪는 현상이다. 캐시는 WAS(Web Application Server)부터 웹 브라우저(Web Browser)까지 모두 수행하므로 소스코드를 변경했고 컴파일을 했다해도 WAS의 캐시 혹은 웹 브라우저의 캐시 때문에 웹 브라우저에서 테스트할 때 같은 결과가 나타나는 문제가 발생한다. 본 글에서는 크롬 웹 브라우저의 캐시를 삭제하여 이 문제를 해결하는 방법을 안내한다. 1. 개발자 도구 활성화 캐시 삭제를 하려면 먼저 개발자 도구를 활성화해야한다. 아.. 2022. 10. 7.

[CentOS 7] Express 방화벽 허용 Node.js의 웹 개발 프레임워크인 Express의 포트를 확인하고 방화벽 설정을 해두어야 본인이 원하는 위치에서 원활하게 접속이 가능하다. CentOS 기준으로 Express 프로젝트가 사용하는 포트를 확인하고 적절한 포트를 아래의 사진처럼 입력하면 방화벽 규칙이 추가된다. firewall-cmd --permanent --zone=public --add-port=포트번호/프로토콜 아래의 명령어를 입력하여 CentOS 방화벽 규칙을 적용한다. firewall-cmd --reload 아래의 명령어를 입력하여 적용된 CentOS 방화벽 규칙을 확인한다. firewall-cmd --list-all 다시 웹브라우저로 실행한 Express 프로그램에 접속하면 아래처럼 잘 나타나는 것을 확인할 수 있다. 2022. 9. 22.

브라우저 보안 정책 때문에 웹 포트번호도 신중히 정해야 한다. 웹 서버를 구축하는 중에 남은 포트가 별로 없어서 임의로 포트번호를 넣었는데 포트번호 때문에 아래의 사진처럼 파이어폭스 브라우저에서 차단한다. 인터넷 기반 개발에 복귀한지 얼마되지 않아서 굉장히 당황했다. 앞으로는 웹은 포트번호를 신중히 선정해야 유지보수 요소가 적어지지 않을까 싶다. 2022. 8. 8.

[CentOS 7] Node.js 16.15 설치하고 웹 서버 프로그램을 작성하여 실행해보자 Node.js 16 버전을 설치하고 웹 서버 프로그램을 작성 및 실행하는 방법은 아래와 같다. 설치를 진행한 운영체제는 CentOS 7.8이다. YUM 저장소 목록 확인 아래의 명령어를 입력하여 Node.js 패키지 설치가 가능한 저장소가 있는지를 확인한다. yum repolist EPEL 저장소가 없으면 아래의 명령어를 입력하여 저장소를 추가한다. yum install epel-release Node.js 설치 아래의 명령어를 입력하여 Node.js 패키지를 설치한다. yum install nodejs 설치된 Node.js 버전 확인 아래의 명령어를 입력하여 설치한 Node.js 버전이 원하는 버전인지 확인한다. node -v; rpm -qa | grep node NPM 설치 아래의 명령어를 입력하여 .. 2022. 8. 1.

라라벨 8 시간/타임존 변경 PHP 설정과 DB 설정에 가서 타임존을 변경하였는데도 시간이 의도와 달리 나온다면 라라벨 8의 자체 타임존을 확인해볼 필요가 있다. 라라벨 8 설정 변경 아래의 명령어처럼 라라벨 8 설정 파일을 텍스트 에디터로 연다. vi config/app.php 그러면 아래와 같은 화면이 나타나는데 timezone을 찾아보자. timezone 설정을 찾았다면 UTC로 되어 있는 것을 원하는 시간으로 수정한다. 필자의 경우 우리나라(대한민국) 표준시인 서울로 설정하였다. 'timezone' => 'Asia/Seoul' 설정파일을 저장하면 바로 적용된다. 정상적으로 반영되었는지 테스트 해본다. 2021. 11. 12.

IIS 7.5에서 TLS 1.2를 활성화 하자. 어느 날 아주 예전에 구축해놓은 홈페이지와 웹서버를 점검하고 있던 중에 'TLS 1.2'를 지원하지 않아서 크롬의 보안 정책으로 인해 홈페이지의 기능이 정상적으로 동작하지 않고 있는 것을 발견하였다. 2020년 5월부터 크롬에서는 TLS 1.2를 지원하지 않는다고 한다[1]. 다행히 'IIS 7.5'는 간단한 설정만으로 'TLS 1.2'를 지원한다. 방법은 다음과 같다. 1. 실행 - regedit 입력 2. HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols 로 이동 3. 'TLS 1.2' 키 생성 4. 'TLS 1.2' 키 안에 'Client'와 'Server' 키 생성 5. 'Client', .. 2020. 9. 26.

XE3에서 관리자 2차 비밀번호 분실시 확인하는 법 XE3가 무엇인지 알아보겠다고 설치한 지 몇달의 시간이 지난 후에 드디어 시간이 되서 관리자 페이지를 살펴보려고 했는데 2차(2단계) 비밀번호를 입력해라고 떠서 좀 당황했다. 2차 비밀번호를 잊어버려서 찾는다고 시간을 좀 버렸다. 비밀번호는 평문으로 사이트가 설치된 폴더에 있는 파일에 저장되어 있었다. 2차 비밀번호 파일 경로 : {XE3가 설치된 경로}/config/production/auth.php 'password'에 들어가는 문자열 값이 현재 2차 비밀번호이다. 저 부분을 확인해서 그대로 쓰거나 변경하고 싶으면 변경하면 된다. 기존 비밀번호가 저장된 파일 정보 2019. 9. 8.

이전 1 다음

티스토리툴바