리스트 박스 깨지는 부분 수정, kboard 문구 삭제, 좋아요 싫어요 삭제 ( 아래 내용 파일 첨부) /*kboard set********************************************************************STR*/ /*우상단 리스트박스*/ #kboard-default-list .kboard-list-header .kboard-sort select, #kboard-thumbnail-list .kboard-list-header .kboard-sort select { -webkit-appearance: menulist !important; background-color: #fafafa !important; } /*table head(상단 타이틀 tr)*/ #kboar..
www.cosmotown.co.kr/ 한국전자인증 도메인 :: Cosmotown Korea :: 잠시만 기다려주세요. www.cosmotown.co.kr 한국전자인증 로그인 후 나의서비스 -> 나의 도메인 -> 연결할 도메인 관리 버튼 클릭 호스트관리 탭 클릭 -> 호스트 추가 항목에 IP 주소 추가 DNS 레코드 관리 영역 클릭 DNS 레코드 추가 영역에 @,m,www를 서브도메인에 입력 IP주소입력 후 저장버튼을 클릭합니다. 주소에 접속해보면 도메인에 연결된 것을 확인 할 수 있습니다. 수고하셨습니다.
aws 로그인 후 EC2 메뉴 클릭 연결할 서버 인스턴스 체크 -> 세부정보에 퍼블릭 IPv4 DNS를 복사합니다. 카페24 호스팅 센터 로그인 후 도메인 포워딩 관리 클릭 연결할 도메인 선택 후 변경 버튼 클릭 복사한 퍼블릭 IPv4 DNS를 포워딩 주소에 입력하고 변경하기 버튼 클릭 다시 aws 콘솔로 가서 퍼블릭 IPv4 주소를 복사합니다. 카페24에서 DNS관리 클릭 도메인 선택 후 DNS 관리 버튼 클릭 수정버튼 클릭 후 IP 주소를 aws 에서 복사한 퍼블릭 IPv4 주소를 입력 후 확인 버튼을 클릭합니다. A레코드 추가 버튼을 눌러 m , www를 차례대로 추가합니다. 최종 추가화면입니다. 수고하셨습니다.
이번 글에서는 PWA로 앱을 개발하여 배포까지 하는 전체 제작 과정을 올려보도록 하겠습니다. 1. 프로젝트 설치 및 세팅 서비스 워커의 작동여부를 테스트하려면 serve 라는 노드 패키지를 설치해야합니다. 정적인 HTML을 브라우저에서 실행하면 서브스 워커를 테스트 할 수가 없습니다. 그래서 미니 웹 서버가 필요한데 serve가 딱 그 용도에 적합합니다. 그리고 구글 파이어베이스의 웹 호스팅으로 웹에 배포할 것 이므로 firebase-tools 패키지도 설치해야합니다. VSCode에서 터미널 창을 열고 다음 명령어를 실행합니다. npm install -g serve npm install -g firebase-tools 명령어 -g 옵션은 노드 패키지를 시스템 전역에 설치한다는 뜻으로 아무곳에서나 명령어를..
메인페이지입니다. 확인 저번글에서는 뷰티파이의 개념과 뷰티파이의 기본적인 사용법에 대해 포스트하였습니다. marshmello.tistory.com/50?category=1158454 [PWA] 뷰티파이 기초편 뷰티파이 (vuetify.js)는 뷰 자바스크립트 프레임워크에 구글의 공식 material design을 사용할 수 있는 컴포넌트 프레임워크입니다. 뷰 생태계에는 다양한 UI 프레임워크가 있지만, 뷰티파이를 적극 추 marshmello.tistory.com 이번글에서는 뷰티파이 기능으로 뷰의 라우터와 Vuex를 디자인해서 싱글 페이지 앱을 만드는 방법에 대해 알아보겠습니다. 1. Bottom Navigation VSCode를 실행하여 bottom_nav.html 파일을 만듭니다. v2.vuetify..
뷰티파이 (vuetify.js)는 뷰 자바스크립트 프레임워크에 구글의 공식 material design을 사용할 수 있는 컴포넌트 프레임워크입니다. 뷰 생태계에는 다양한 UI 프레임워크가 있지만, 뷰티파이를 적극 추천합니다. 뷰티파이 공식 홈페이지 v2.vuetifyjs.com/ko/ Vue Material Design 컴포넌트 프레임워크 — Vuetify.js v2.vuetifyjs.com 그이유는구글의 material design 스팩을 충실하게 표현할뿐만아니라 웹앱에 필요한 컴포넌트를 편리하게 사용할 수 있도록다양한 기능을 지속적으로 지원하기 떄문입니다. 뷰티파이의 특징은 다음과 같습니다. ① 구글 머터리얼 스펙 지원 - 디자이너가 직접 커스터마이징할 수 있는 다양한 옵션을 제공 ② 80개이상의 시..
저번 글에는 뷰의 기초를 공부하였습니다. marshmello.tistory.com/48 [PWA] 뷰 vue.js 입문 뷰 vue.js 란 ? 에반 유가 개발한 자바스크립트 프레임워크입니다. 또한 뷰는 인터랙티브 웹 인터페이스를 개발하기 위한 PWA 자바스크립트 프레임워크입니다. 프로그레시브란 프로그램 실행에 필 marshmello.tistory.com 뷰의 가장 큰 특징은 HTML 기반을 둔 커스텀 엘리먼트인 컴포넌트를 제작하고 활용 할 수 있다는 점입니다. 그리고 컴포넌트의 상태값 관리와 뷰 간의 이동을 도와주는 Vuex와 라이터 또한 중요한 기능입니다. Vuex와 라우터 기능을 활용하면 싱글 페이지 애플리케이션을 간편하게 제작 할 수 있습니다. 1. computed 속성 vue.js 사이트에 가면,..
뷰 vue.js 란 ? 에반 유가 개발한 자바스크립트 프레임워크입니다. 또한 뷰는 인터랙티브 웹 인터페이스를 개발하기 위한 PWA 자바스크립트 프레임워크입니다. 프로그레시브란 프로그램 실행에 필요한 최소한의 모듈로부터 점점 확장해간다는 의미가 있습니다. 즉, 뷰는 웹에서 UI, 비즈니스 로직, 데이터 관리를 돕는 최고 성능의 콤팩트한 자바스크립트 라이브러리입니다. 뷰는 앵귤러, 리액트와 유사하며 가상돔을 제어하는 기능도 제어합니다. 핵심적인 장점은 다음과 같습니다. 뷰는 html와 css를 토대로하여 동작하므로 진입장벽이 낮습니다. 기존 웹 표준작업에 익숙하면 쉽게 적용가능합니다. MVC 모델또한 지원합니다. 리액티브 양방향 데이터 바인딩을 지원하여 데이터의 변화를 자동으로 체크해서 화면을 바꾸는 동기화..
자바스크립트로만 PWA를 개발해보겠습니다. 단계별로 하나하나씩 PWA를 완성해보도록 하겠습니다. 1. 프로젝트 생성 우선 VSCode를 열어 폴더(프로젝트)를 만듭니다. (파일 -> 폴더열기 -> 폴더생성 후 폴더 클릭 -> 폴더 선택) 저는 PWA_TEST 폴더를 만들었습니다. 프로젝트(폴더) 마우스를 올리면 새파일 아이콘이 나타납니다. 새파일 아이콘 클릭 후 index.html 파일을 만듭니다. index.html 파일을 열어 html5 파일로 만들어줍니다. index.html 파일은 PWA의 메인화면이 됩니다. 2. 매니페스트 작성하기 manifest.json 파일 이름으로 새파일을 만들어주세요 manifest.json 을 작성해봅시다. { "name": "PWA 테스트 앱", "short_name..
모던자바스크립트는 기존 자바스크립트와 달리 변수가 유지될 수 있는 범위가 더 엄격해졌으며, 함수를 객체처럼 변수에 저장해서 사용할 수 있는 함수 표현식도 가능해졌습니다. 1. 함수와 변수 ① 함수 표현식 - 함수명 없이 선언한 후 객체 변수에 저장하는 방식입니다. 예를 들어 const fnPlusNumber = function(p1,p2){ return p1+p2; } 위와 같이 const 변수에 함수를 대입하여 사용합니다. 또한 함수표현식은 선언 후 호출할 수 있어서 순서를 엄격하게 지켜야합니다. 만약 아래와 같이 사용한다면 에러가 발생합니다. fnPlusNumber(1,2); const fnPlusNumber = function(p1,p2){ return p1+p2; } ② 변수 - 기존 자바스크립트..
- Total
- Today
- Yesterday