씹어먹는 블로그

순서 1. nvm 설치 (Node Version Manager) 2. Node.js 설치 (12.13.1 버전 사용) 3. Python 설치 nvm on > node -v > npm -v 설치 후 nvm 활성화 및 설치된 Node.js 버전 확인 > nvm use 12.13.1 Node.js 12.13.1 버전을 사용한다는 명령어 3. Python 설치 https://www.python.org/downloads/ Download Python The official home of the Python Programming Language www.python.org 위 사이트에서 Python 최신버전 다운로드 후 설치 React Native 빌드 시스템은 Python에 의존하기 때문에 설치 해줘야 함 (그런줄..

watch 속성은 '지켜보다'라는 의미를 가지고, data 혹은 computed 속성의 데이터 값이 변경될 때 실행되는 속성이다. {{ msg }} {{ msgReversed }} 결과 실행 : watch 속성에 msg 와 msgReversed 메소드를 만들어놓은 것을 볼 수 있고, 같은 이름의 data, computed 속성의 data 들이 변경될 때 각 이름에 해당하는 watch 메소드 들이 실행된다는 것을 알 수 있다. kr.vuejs.org/v2/guide/computed.html computed와 watch — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org

vue 인스턴스의 데이터를 가공할 때 computed 를 사용하면 된다. computed의 유용한 기능들에 대해서 알아보자. 1. 캐싱 2. Getter/Setter 1. 캐싱 {{ msgFun() }} {{ msgFun() }} {{ msgFun() }} 위 코드와 같이 반복적인 데이터를 사용해야 할 때 캐싱기능을 사용하면 리소스낭비를 줄일 수 있다. {{ msgFun() }} {{ msgFun() }} {{ msgFun() }} ============== {{ msgCaching }} {{ msgCaching }} {{ msgCaching }} === 구분선 위의 값은 매번 연산 한 값이고, 아래의 값은 캐싱된 값이 출력된다. * computed 캐싱 사용 시 주의할 점 : msgCaching 사용 ..

vue.js 인스턴스 라이프사이클 훅 new Vue 를 생성할때 라이프사이클이 돌기 시작 참고 : kr.vuejs.org/ Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 라이프사이클 훅 이벤트 순서 1. beforeCreate : 반응성 및 기본 Vue에서 필요한 기능들이 생성되기 전 2. created : 반응성 및 기본 Vue에서 필요한 기능들이 생성되고난 후 3. beforeMount : DOM 연결 전 4. mountd : DOM 연결 후 (html 요소를 제어하기 위해서는 mounted 사용) 5. beforeUpdate : 데이터가 변경되기 전 (화면을 다시 그리기 전) 6. updated : 데이터가 변경되고난 후 (화면을 다시 그리고난 후) 7. b..

순서 : - docker에서 ubuntu container 실행 - ubuntu container 에 php-fpm 설치 - laravel 설치 - nginx 설치 및 세팅 1. docker에서 ubuntu container 실행 - docker container를 실행할 폴더로 가서 shift+우클릭 -> 여기에PowerShell창 열기 클릭 - 아래 명령어 차례로 입력 PS C:\docker> docker pull ubuntu:latest PS C:\docker> docker run -it -p 80:80 --name docker_laravel_demo1 ubuntu bash - 그럼 docker_laravel_demo1 이라는 ubuntu container가 생성된다 - docker dashboar..

설치의도 : 기존에는 로컬에 vagrant/homestead 환경을 설치해서 laravel 을 사용했다고 한다면, 이번에는 vagrant 대신 docker 컨테이너를 사용해 laravel 개발 환경을 만들어 본다. 순서 1. docker 설치 2. git 설치 3. docker 세팅 1. docker 설치 - 아래 링크에서 Desktop for Windows 다운로드 후 설치 https://hub.docker.com/editions/community/docker-ce-desktop-windows Docker Desktop for Windows - Docker Hub Docker Desktop for Windows Docker Desktop for Windows is Docker designed to ru..

문제점 : windows 10 사용중에 윈도우즈 업데이트를 하고나서부터 갑자기 기본 앱 저장이 안되는 현상 발생 기본 앱을 아래 사진처럼 저장해도 재부팅을 하게되면 기본앱이 초기화 됨 MS 공홈에도 제대로된 답변 없음. 해결방법 : 윈도우즈 빌드 업데이트를 하면 가능 시작 -> 설정 -> 업데이트 및 보안 -> OS 빌드 정보 클릭 - 위 처럼 19... 버전으로 업데이트 하면 문제점 사라짐. 기존에는 18... 대 버전이었음 업데이트 방법 : - 아래 링크에서 Update Now 클릭해서 받은 파일 설치 (업데이트 시간 오래걸림) https://www.microsoft.com/en-us/software-download/windows10 Download Windows 10 If you downloaded..

개발 툴 설치 순서 1. JDK 1.8 (자바 8버전) 2. STS 4.0 (Spring 개발에 유용한 툴 모음) 3. Visual Studio Code (설치 안해도 무방하나, 설치파일 세팅시 에디터로 쓰기 편함) 4. XAMPP (Mysql 만 받아서 설치해도 되지만, 간편하게 로컬설치 및 세팅 하기위해 xampp 설치) 5. SQLyog community edition 또는 HeidiSQL (SQL 접속 툴) 6. 로컬서버에서 테스트 화면 띄우기 7. MySQL 연결 설정 1. JDK 1.8 (자바 8버전 설치) https://www.oracle.com/kr/java/technologies/javase/javase-jdk8-downloads.html - 위 링크 접속 후 - Java SE Devel..

*vue-cli 를 쓰는 이유 express-generate 와 마찬가지로 vue.js 프로젝트의 구성을 도와주는 역할을 한다. vue-cli를 쓰지 않더라도 vue.js 프로젝트를 만드는데 아무 문제가 없다. 하지만 vue.js와 관련된 오픈소스들은 대부분 vue-cli를 통해 쉽게 구성이 가능하고, 또한 프로젝트 시작 시 git으로 clone 하지 않더라도 vue-cli로도 손쉽게 설치가 가능하기 때문에 vue-cli를 많이 사용한다. vue-cli를 설치하기 위해서는 node.js 8.9 버전 이상이 필요 2020-02-27 현재 설치 버전 node.js : v12.16.1 vue-cli : @vue/cli 4.2.3 1. yarn 설치 //npm으로 설치한 vue-cli로 프로젝트를 만들더라도 y..

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops ##Device = 데스크탑 ##Screen = 1281px 이상 해상도 데스크탑 */ @media (min-width: 1281px) { //CSS } /* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px ##Device = 랩탑, 데스크탑 ##Screen = 1025px에서 1280px 사이 */ @media (min-width: 1025px) and (max-width: 1280px) { //CSS } /* ##Device = Tablets, Ipads (portrait), ##Screen = B/w 768px t..

*express란? node.js에서 web project를 간편하고 쉽게 만들기 위하여 만들어진 프레임워크 *express-generator란? web project의 구조(MVC) 를 간편하게 생성해주는 도구 설치구조 myapp 폴더 안에 backend(express 설치) 폴더와 frontend(vue 설치) 폴더를 생성해서 backend와 frontend를 분리한다. 설치순서 (nodejs와 npm까지 설치가 되어있다는 가정) 1. myapp 폴더 초기화 #mkdir myapp #cd myapp #npm init 2. express, express-generator 설치 // myapp에 express 설치 // --save 옵션을 통해 설치된 node 모듈은 package.json 파일 내의 d..

CentOS7에 nvm, nodejs, npm 설치 설치순서 1. nvm(Node Version Manager) 2. nodejs 3. npm (Node Package Manager) 4. 방화벽 설치 및 설정 * nvm 을 쓰는 이유 보통 리눅스에 yum install nodejs 와 같이 설치를 하게되면, nodejs 최신버전이 아닌 구버전이 설치된다. 그래서 nvm 을 미리 설치한 후, 원하는 nodejs 버전을 골라서 설치할수 있다. 이외에도 프로젝트별로 여러 버전의 nodejs를 설치해서 사용하기 위해 쓴다. 1. 초기환경 세팅 (CentOS7 처음 설치 후) //저장소 추가 #yum repolist //epel 추가 (Extra Packages of Enterprise Linux) 리눅스 추가..

전체적인 순서. 1. 실서버 생성 2. NAS 생성 3. NAS에서 NFS 접근제어 설정(mount 시킬 ip설정) 4. shell 에서 mount 작업 후 재부팅 5. NAS로 심볼릭 링크 1. 운영중인 서버에 NAS를 Mount 시킨다는 가정. 2. NAS 생성 ncloud 콘솔 -> NAS 메뉴 -> NAS 볼륨 생성 -> NFS 프로토콜로 NAS 생성 3. NFS 접근제어 설정 NFS 접근제어 -> Mount 시킬 서버를 추가 후 확인 4. shell 에서 mount 작업 #yum -y install nfs* #mkdir /NAS #showmount -e 10.220.13.73 위 빨간색 ip 부분은 ncloud NAS에서 세팅해주는 마운트 정보임 ##mount -t nfs 10.220.13.73..

이전 글 (여러개 게시판의 글을 한개씩 로테이션으로 출력)을 최신글로 뽑아보기 /theme/해당테마이름/lib/new_latest.lib.php 안에 새로운 latest 함수명을 짓고 넣으면 됨 사용 : total_latest('theme/total_latest', 'total_board', 'free,humor,gallery', 10, 20); // total_board 게시판 최신글 추출 function total_latest($skin_dir='', $bo_table, $boards, $rows=10, $subject_len=40, $cache_time=1, $options='') { global $g5; if (!$skin_dir) $skin_dir = 'basic'; if(preg_match('..

게시판과 최신글을 다수 게시판의 글들을 한개씩 섞어가면서 출력하는 방법. 조건 : 1. 여러개의 게시판에서 최신글 내림차순(desc) 순으로 순서를 정한다. 2. 순서가 정해지면 그 다음 글부터는 날짜에 상관없이 최초 정해진 순서대로 글 한개씩 계속 로테이션 한다. ex) 갤러리게시판 최신글 오늘, 유머게시판 최신글 어제, 자유게시판 최신글 그저께. 위 같은 상황일 경우, 1. 갤러리, 2.유머, 3.자유, 4.갤러리, 5.유머, 6.자유, 7.갤러리 ..... 순으로 출력 해야할 것. 1. 게시판을 새로 생성 후 새로운 이름의 스킨으로 지정. bo_table 명은 total_board로 한다는 가정. 2. 관리자 -> 게시판 관리에서 bo_1 여분필드에 갤러리, 유머, 자유 등등 원하는 게시판의 bo_..