LazyWon Story

목차 Vue CLI 설치 Default 옵션으로 프로젝트 설치하기 Manually select features 옵션으로 프로젝트 설치하기 Vue 프로젝트 매니저로 프로젝트 설치 Vue CLI 설치 Vue CLI는 Vue 프로젝트를 빠르게 구성하고, 빌드, 배포 할 수 있게 도와주는 도구이다. vs code의 터미널에 다음 명령어를 입력하여 Vue CLI를 설치한다. npm install -g @vue/cli -g(global) npm install -g 패키지명 -g 옵션을 사용하면 설치하는 패키지가 현재 디렉토리뿐만 아니라 앞으로 생성하게 되는 모든 프로젝트에서 사용할 수 있는 global 패키지로 등록된다. --save npm install 패키지명 --save ./node_modules에 패키지를 ..

목차 Visual Studio Code 설치 Node.js 설치 NPM(Node Package Manager) 설치 Vue 개발을 위한 유용한 vs code Extension 설치 Vue.js 개발을 위한 개발환경을 구성하도록 하겠다. Visual Studio Code 설치 https://code.visualstudio.com Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on you..

목차 Vue.js는 무엇인가? Vue.js 장점 Vue.js 특징 급히 Vue.js 프로젝트에 투입되어야 하기 때문에 무작정 공부하기 위한 책을 구매하였다. Vue.js 프로젝트 투입 일주일 전 vue.js 에 대해 들어만 보았지 아는것이 거의 없기 때문에 하나씩 배워가려고 한다. 게으른 내가 공부하기 위해 (살기 위해) 블로그에 기록하기로 했다. Vue.js는 무엇인가? Vue.js가 목표로 하는 것은 웹의 장점과 앱의 장점을 모두 수용할 수 있는 웹앱 애플리케이션을 만들 수 있는 프레임워크를 제공하는 데 있다. 일반적인 웹사이트 페이지 이동시마다 페이지 전체를 다시 로딩하게 된다. 매번 이동시마다 자바스크립트, CSS, 이미지 파일 등 전체를 서버로부터 받아와서 로딩을 하는 것이다. Vue.js Vu..

Apache에 부하가 발생했을 때 모니터링하는 방법을 알아보자! Apache Server-Status 란? Apache 모듈 중 mod_status는 server-status라는 핸들러를 제공한다. 이는 서버 관리자에게 서버의 상태를 보여주며, 쉽게 읽을 수 있는 HTML 페이지로 현재 서버 통계를 보여준다. Apache Server-Status 설정 방법 mod_status 모듈을 이용할 수 있도록 LoadModule에서 mod_status 모듈을 로드한다. httpd.conf 파일에서 다음과 같이 설정해 주면 된다. LoadModule status_module modules/mod_status.so ... SetHandler server-status Order Deny,Allow Deny from a..

목차 Apache MPM 이란? Apache MPM 방식 Apache MPM 확인 방법 서비스 가입자 수가 150만 명을 돌파하면서 동시 접속자 수가 급격히 증가하여 서버가 다운되었던..! 잠 못 잤던 그때로 돌아가 보려고 한다. 아파치 동시접속자 튜닝, 아파치 최적화에 대해 알아보다가 Apache MPM 설정 관련하여 공부하게 되었다. 먼저 Apache MPM에 대해 알아보자!! Apache MPM 이란? MPM은 Multi Processing Module의 약자로 번역하면 "다중 처리 모듈"인데, Apache HTTP 서버에서 클라이언트로부터 받은 요청을 어떤 방식으로 처리할 것인지를 결정하는 모듈이다. Apache MPM은 prefork, worker, event 방식이 있다. 아파치 웹서버는 다양..

외부 업체에서 우리 웹서버로 API 요청 시 CORS 이슈가 발생한다는 메일이 왔다. 이전에도 Flask-React를 사용하여 사내 백오피스를 개발하면서 API(Flask)의 도메인과 Front(React)의 도메인을 다르게 설정하여 Front에서 API로 요청 시 CORS 이슈가 발생하여 데이터를 정상적으로 받아오지 못했던 경험이 있었다. 이 경우 정상적인 통신을 위해서는 몇 가지 설정이 필요했던 것으로 기억한다. 먼저, CORS가 무엇인지 알아보기로 하자! CORS (Cross-Origin Resource Sharing) 교차 출처 리소스 공유 CORS는 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체..

API 개발 중 클라이언트에서 보내는 파라미터는 웹서버로 url 인코딩이 되어 들어오고, 웹서버에서는 백엔드 서버 쪽으로 평문을 암호화하여 보내고 있었다. 인코딩 문제로 인해 제대로 통신이 되고 있지 않은 것을 깨닫고 인코딩 개념에 대해 공부하고자 한다. 인코딩이란? 인코딩은 정보의 형태나 형식을 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해 다른 형태나 형식으로 변환하는 처리 혹은 그 처리 방식을 말한다. URL Encoding & Decoding URL 인코딩이란 URL에서 url로 사용할 수 없는 문자 혹은 url로 사용할 수 있지만 의미가 왜곡될 수 있는 문자들을 '% XX'의 형태로 변환하는 것을 말한다. 그리고 URL 디코딩이란 변환된 url을 다시 원래 형태로 되돌리는 것을 말..

cron 이란? unx 운영체제에서 어떠한 작업을 특정 시간에 정기적으로 처리하기 위해 소프트웨어를 실행하도록 설정하는 시간 기반 잡(job) 스케줄러 성격의 데몬 프로세스 리눅스에서 특정 시간에 명령이나 프로그램이 주기적이고 반복적으로 수행되도록 하는 리눅스용 작업 스케줄러이다. 즉, 우리가 설정해 놓은 쉘 명령을 일정 주기에 다라 실행해주는 서비스라고 생각하면 된다. 매일 로그를 파일로 분할하여 저장하는 log splitter 작업, 5분마다 다른 서버들과 sync를 맞추는 작업 등에 사용하고 있다. cron 관련 파일들 파일 설명 /usr/sbin/cron 크론 데몬 파일 /usr/sbin/anacron 크론과 같이 동작하는 프로그램. 서버가 일정 시간 중지되었을 때도 작업이 실행되는 것을 보장하기..

웹뷰 개발 시에 인증된 클라이언트에게만 접근 가능하며 아무 곳에서나 호출하지 못하도록 앱과 웹 간의 규약을 맞추어 앱에서 웹으로 특정 헤더를 보내는 방식으로 구현하는 경우가 있다. 예를 들어, 웹뷰에 접근하기 위해 앱에서 사용하는 auth token을 가지고 있어야 하는데 웹 개발자로서 개발이나 테스트를 할 때 매번 앱을 통해 웹뷰에 접근하여 테스트하는 게 굉장히 귀찮고 번거로웠다. 오류가 나면 브라우저 개발자 모드를 통해 콘솔 로그를 찍을 수 없어 어느 부분에서 나는지 파악하기가 쉽지 않았다. 그러던 중 발견한 Chrome Extension 인 ModHeader ModHeader를 설치하면 우측 상단에 아이콘이 생기는데 클릭하면 내가 Request Header를 커스텀하게 조작하여 넣을 수 있다. He..

개발하면서 vi 편집기를 많이 이용하는데 매번 사용할 때마다 명령어를 까먹기도 하고 헷갈리기도 해서 이번에 제대로 공부해보고자 주로 자주 사용하는 명령어를 정리해보기로 했다. vi란? 각종 문서를 편집할 수 있는 텍스트 기반 편집기. 리눅스뿐 아니라 유닉스 계열의 모든 운영체제에서 사용하는 편집기로, 키보드와 몇 개의 명령어 만으로 빠른 속도로 개발을 진행할 수 있다. vi 편집기는 다음과 같은 세 가지 모드로 구성된다. 1. 명령 모드 처음 vi 명령어를 실행하면 명령 모드로 시작한다. 커서 이동, 복사, 붙여 넣기, 문자열 검색 등을 수행할 수 있다. 2. 입력 모드 입력 모드로 가면 자유롭게 코드를 편집하거나 작성하면 된다. 입력 모드에서 명령 모드로 전환하기 위해서는 ESC키를 누르면 된다. 3...