진화하는공간

저번글에서는 리액트 네이티브가 무엇인지 작성하였습니다. https://marshmello.tistory.com/68?category=1213283 이번글에서는 리액트 네이티브로 프로젝트를 생성해 보도록 하겠습니다. 1. 자바 설치 및 환경설정 https://www.oracle.com/java/technologies/javase-downloads.html 사이트로 가서 자바를 설치합니다. JDK Download 클릭 -> jdk-xxx.-x64-bin.exe 클릭합니다. (windows10 기준) 팝업이 뜨면 체크박스 클릭 허용 후 Next 버튼을 계속 클릭하여 설치를 완료합니다. 환경변수 설정을 위해 설치된 자바 경로로 이동합니다. (C:\Program Files\Java\jdk-16.0.1) * 시스템..

1. 리액트네이티브란? 리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크입니다. 안드로이드, IOS, 웹 , UWP 용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 합니다. 리액트와 달리 웹브라우저가 아니라 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크입니다. 리액트 네이티브로 만든 다양한 어플리케이션은 https://reactnative.dev/showcase 사이트에서 확인할 수 있습니다. 대표적으로 페이스북, 인스타그램, 스카이프, 우버이츠, 바이두 등이 있습니다. 2. 리액트 네이티브 장점 리액트 네이티브의 강점은 IOS,안드로이드를 동시에 개발 할 수 있다는 점입니다. ..

저번글에서는 vue.js와 Express로 프론트엔드와 백엔드 간의 통신 방법을 다뤄보았습니다. marshmello.tistory.com/64 [PWA] Vue.js + Express + MySQL 연동 1 1. 프로젝트 생성 비쥬얼스튜디오 코드 실행 새 터미널 창을 열어 폴더를 생성합니다. 여기서는 프로젝트 폴더명을 movie 폴더로 하겠습니다. mkdir 프로젝트폴더명 생성한 폴더로 경로 이동을 하 marshmello.tistory.com 이번 글에서는 Express에 MySQL 연동하여 회원가입과 로그인을 하는 프로젝트를 만들어 보겠습니다. 우선 mysql을 설치합니다. 설치 방법은 아래의 링크로 가면 자세히 설명되어있습니다. marshmello.tistory.com/5?category=971973..

1. 프로젝트 생성 비쥬얼스튜디오 코드 실행 새 터미널 창을 열어 폴더를 생성합니다. 여기서는 프로젝트 폴더명을 movie 폴더로 하겠습니다. mkdir 프로젝트폴더명 생성한 폴더로 경로 이동을 하여, 개발 환경 세팅을 합니다. cd movie npm install -g yarn npm install -g @vue/cli 프로젝트 생성 vue create frontend // frontend 폴더 생성 서버실행 cd frontend npm run serve //서버 실행 익스플로러를 열어 locahost:8080으로 접속하면 아래와 같은 화면을 확인할 수 있습니다. 2. 백엔드 개발환경 세팅 최상위폴더 movie로 이동한 후 express 프레임워크를 설치 cd ../ npm install -g expr..

리스트 박스 깨지는 부분 수정, 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개이상의 시..