앱 개발 노트

angular6 + wordpress + scss + angular material + angular flex-layout

앵귤러와 워드프레스를 어떻게 조합할지를 계속 실험중이다. 이 글에서는 Angular Material Library와 Flex Layout 을 사용하여 워드프레스 포스트 리스트를 보여주는 앨귤러 애플리케이션을 만들어보았다. Angular 프로젝트 생성 ng new {Project_Name} –style scss scss 를 포함한 프로젝트가 생성된다. Angular Material 추가 ng add @angular/material Angular flex-layout 설치 npm install @angular/flex-layout –save  flex-layout 임포트 import {NgModule} from ‘@angular/core’; import … angular6 + wordpress + scss + angular material + angular flex-layout 더보기

Angular 로 WordPress Theme 만들기

Angular 와 워드프레스 rest api 를 이용해 Theme을 만들 수 있다. 그냥 일반적인 방법으로 테마를 만드는 것 보다는 좀 복잡하지만, 앵귤러에 익숙해지면 앵귤러로 테마를 만드는 것이 오히려 쉬워질 것 같다. Contents1 테마 폴더 만들기2 기본 파일 만들기3 Angular 컴파일하기4 워드프레스 어드민에서 테마 지정하기5 서버사이드 렌더링 테마 폴더 만들기 일반적인 방법으로 테마를 만들때처럼, wp-content/themes 폴더안에 테마 … Angular 로 WordPress Theme 만들기 더보기

워드프레스 프론트앤드 접근 막는 법

워드프레스의 프론트 앤드 기능을 버리고, 오직 백앤드로만 사용해야할 경우가 있다. 로그인하지 않은 경우, 워드프레스 프론트앤드로의 접근을 막고자 한다면 header.php의 <head></head> 태그 안에 다음과 같이 넣어주면 된다. if ( ! is_user_logged_in() ){ header(“Location: “.get_admin_url()); exit(); } 서버차원에서 리다이렉트 해주는 법도 있지만, 위 방법이 제일 간편한 것 같다. 위 방법을 좀 더 발전시켜, 리다이레트를 위한 테마를 따로 … 워드프레스 프론트앤드 접근 막는 법 더보기

nginx 와 apache 연동

nginx 와 apache 는 각각 단독으로 서버기능을 수행하지만, nginx 는 빠른 속도로 static 파일을 처리하는 것으로 유명한 반면, apache는 다양한 php 기능을 파워풀하게 제공한다고 한다. nginx와 apache 연동을 통해,이 두 서버의 장점을 취할 수 있다고 하니 한번 시도해보았다. 작업과정에서 apache 쪽에서 rewrite 이 실행되지 않아 고생을 했다. 절대 잊지말아야할 것… sudo a2enmod rewrite 아래 아티클을 순서대로 … nginx 와 apache 연동 더보기

Angular package.json 업데이트 : ncu

명령프롬프트에서 ncu 를 실행하면, 디펜던시 업데이트 상황을 알 수 있다. 실제로 package.json 을 업데이트 하려면, ncu -u 옵션을 사용하면 된다. 그 후 npm install 을 다시 해주면 dependency 업데이트가 완료된다. 다만, 주의할 점은 경우에 따라 잘못되면, 업데이트 후 애플리케이션 전체를 못쓰게 될 수도 있다. 따라서 반드시 백업 후 업데이트하고 테스트 후 프로덕션 환경으로 옮겨놓는 것이 … Angular package.json 업데이트 : ncu 더보기

워드프레스 Php 클래스 인스턴스와 Ajax

워드프레스 클래스 인스턴스 안에서 등록된 Ajax function이 오작동하는 오류를 접하고 한동안 고전했다. Private 으로 설정된 변수값이 Ajax function 안에서는 새로운 인스턴스의 값으로 Override되는 현상이다. Private 변수가 먹히지 않는 것은 정말 이해할 수 없는 일이었다. 도저히 원인을 찾지 못해서 방황하던 끝에, 드디어 그 원인을 찾았다. Classname 이라는 class 가 있다고 치자. 이 클래스 안에서 ajax function 을 … 워드프레스 Php 클래스 인스턴스와 Ajax 더보기

동시 대비 효과 Simultaneous Contrast

사진과 실제가 다르게 보이는 경우가 많다. 몇 가지 이유가 있지만, 그 중 하나가 동시 대비 효과이다. 영어로는 Simultaneous Contrast 라고 한다. 한가지 계열의 색깔을 가진 한 오브젝트를 바라볼때, 인간은 그 속에서 디테일을 찾아내려고 하는 경향이 있다. 단순히 옐로가 아니라 옐로 안에서의 섬세한 대비를 인지하게 된다. 즉, 인간은 실제보다 과장된 대비를 실제라고 믿게 된다. 반면, 카메라는 … 동시 대비 효과 Simultaneous Contrast 더보기

랩 컬러 개념 Lab Color Space

Lab Color 는 RGB 나 CMYK 컬러 스페이스와는 완전히 다른 구조를 가진다. RGB나 CMYK 에서 작업하면, 어떤 채널을 만지든지 컨트라스트와 색상을 모두 변화시키게 된다. 하지만, Lab Color 스페이스를 사용하면, 컨트라스트는 L채널에서 결정되고 색상은 a, b 채널에서 담당한다. 즉, Lab Color 스페이스에서는 색상과 컨트라스트를 완전히 분리해서 작업할 수 있다. L 채널은 Lightness or Luminosity 채널이며 디테일을 … 랩 컬러 개념 Lab Color Space 더보기