최종목표 : 프로젝트
주제 : 자유
서버 : 스프링부트2
마리아 디비
클라이언트 : 모피어스 (모바일 어플리케이션 하이브리드 프레임워크)
웹 HTML / CSS / JS
[ 모피어스 ]
웹뷰 기반 하이브리드 어플리케이션 프레임워크
네이티브 앱 -
안드로이드 : java, kotlin
IOS : obj-c, swift
WebView
하이브리드 앱
하나의 소스로 여러개의 플랫폼을 대응 예) 일렉트론 (슬랙, 디스코드, 피그마)
ios, android 대응
react -> web ui 라이브러리 -> 브라우저 환경
컴파일기반 - ReactNative / flutter -> 리액트문법 -> c++ / flutter / ?
웹뷰기반 - 웹 언어를 통해서 UI를 구성하고 Native한 기능은 Native에게 요청
Cordova -> capacitor
모피어스
웹 앱(구분모호) - pwa
androidworkspace 폴더 만들고 빈공간에 마우스 우클릭해서
그러면 터미널 창이 뜨는데
아래 명령어로 git에서 프로젝트 가져온다. (git 주소 들어가서 다운로드 받아도 된다.)
가져온 프로젝트를 열어준다.
1. 프로젝트 clone 또는 다운로드
2. android studio로 프로젝트 열기
3. Device Manager 가상 디바이스 생성
3-1. pixel 5, api 33 선택
(gradle sync)
근데 프로젝트가 깨져서 그런건지 뭔지 안된다!!!!!!!!!!!!!
chrome://inspect/#devices
콘솔창에
> M.pop.alert('hello mobile') 입력해보면
아래처럼 내가 만들 device에 팝업이 뜬다.
https://wiki.uracle.co.kr/ko/madp/client/api
Morpheus MADP Client
wiki.uracle.co.kr
푸시 => 푸시서버 별도구현 필요
디바이스 로그인 ->
서버 디바이스 정보를 기준으로 FCM Server 에 등록 후 토큰 발급
FCM Server 토큰으로 데이터정보를 전달 (text/JSON)
알림은 아래방법으로 하는게 좋을듯.
1. 자동로그인 (영속 데이터) -> M.data.storage
2. 카메라 -> M.media.camera
3. 앨범 선택 (이미지 가져오기) -> M.media.picker
미리보기
1. 이미지 업로드 -> 서버에서 url 리턴 M.net.http.upload
2. 미디어를 base64로 변환 보여주기 -> M.file.read
4. 위도 경도 가져오기 M.location.current
5. 토스트 메세지 M.pop.instance
카메라 기능 해보자
사진찍고 저장한걸
body부분에 <img>태그로 집어넣은거 같은데 혼자 해버려서 놓쳤다 같이좀하지...
프로젝트 _기초강의
https://github.com/yb-k/fe-edu
GitHub - yb-k/fe-edu: FE 교육
FE 교육. Contribute to yb-k/fe-edu development by creating an account on GitHub.
github.com
백 / java
프론트 js / html / css
퍼블 html / css / js
javascript nodejs
protocol 통신 규약
렌더링
html/css
html을 서버로부터 다시 받아오는가?
CSR _ Vue, React, Angulaer (SPA)
GET index.html
-> $.ajax (게시판목록) -> application/json
-> js를 통해서 table 태그를 동적으로 생성
SSR _JSP/타임리프
GET board/list
boardList.html
그대로 내려받는것.
화면
MultiPageApplication
페이지가 변경되었을때 서버로부터 응답을 다시받는 경우
SinglePageApplication
서버로부터 내려받는 페이지는 단 하나 index.html
페이지, 화면에 대한 처리를 javascript한테 일임
angular, react, vue
index.html
-=> 한번 내려받으면 다시 서버로부터 페이지를 받지 않는다. 그런데 페이지는 여러개 필요하니까 router를 이용)
Vue-, react-Router
index.html/#/login 로 보내서 화면상으로만 페이지가 변경된것처럼 처리해주는거. (JS도 페이지 변경을 인식)
SEO 검색엔진최적화
검색엔진 -> 데이터를 어떻게 얻어올까요
SSR (ServerSideRendering) / SSG (StaticSideGenerate) _(nextjs / nuxt)
브라우저 런타임 javascript (=> 비동기, 콜백 등 장점이 있는데 이걸 os로 가져오자 하고 나온게 nodejs)
os -> nodejs (JS장점을 활용하면서도 런타임환경은 다르게 실행하는거)
nodejs 설치
npx vue create 프로젝트 생성
-> 노드 프로젝트
react나 vue는 js라이브러리 화면(ui)인데
브라우저는 ~~.vue 파일을 읽을수가 없다. 그래서 읽을수 있는 파일 형태가 필요해서 나온게 webpack -> vite/esbuild
HTTP 패킷 => HEADER / BODY
DOM
DOM 메모리객체
=> property (DOM에 바로 집어넣는거고)
attr 은 태그 내부에 들어가는거인듯?
서버 사이드 렌더링(SSR)이란? - CSR vs SSR(+SSG) (tistory.com)
서버 사이드 렌더링(SSR)이란? - CSR vs SSR(+SSG)
SSR(Server-side Rendering)이란? 간단히 말하자면 제공하고자 하는 웹 서비스의 화면을 서버 측에서 그리는 방법을 통칭하는 용어다. 웹 서비스는 결국 화면으로 보여줘야 하고 그걸 그려야 하는데, 클
khys.tistory.com
[FE] SSR(Server-Side-Rendering) 그리고 SSG(Static-Site-Generation) (feat. NEXT를 중심으로) (velog.io)
[FE] SSR(Server-Side-Rendering) 그리고 SSG(Static-Site-Generation) (feat. NEXT를 중심으로)
앞전 포스트에서 CSR(Client-Side-Rendering)과 SSR(Server-Side-Rendering)에 대한 개념을 살펴보았다. 자세한 내용은 여기를 참고하자.이번 포스팅에서는 SPA 형태의 웹 서비스에서 SSR 방식을 적용하기 위해 Ne
velog.io
렌더링 삼형제 CSR, SSR, SSG 이해하기 (velog.io)
렌더링 삼형제 CSR, SSR, SSG 이해하기
Single Page Application의 약자로 하나의 페이지로 구성된 웹 어플리케이션이다.웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드 하고, 그 이후에 새로운 페이지 요청이 있을 때
velog.io
5. CSS
6. ES6
크로스 브라우저 : 여러개의 브라우저에 대한 호환성을 위해 처리하는 것들
브라우조 버전에 따라서 다름.
javascript
ES6, ES8 ECMA2019
8. Module
라이브러리 적용 올바르게 하는 방법을 위해 JS모듈을 한번 정리하는게 좋다
vs code 열어서 폴더하나 만들어주고
index.html 파일 생성
이것저것 혼자하고 코드를 보내주셨다
너무너무너무 빨라서 하나도 못따라가겠다 큰일났다 뭐먹고살지
/vscode 폴더만들고
ctrl + shift + p => JSON 검색해서
아무튼 이렇게 만들어준다...
중첩함수 => 콜백지옥이라고 부른단다.
카카오맵 아주잠깐 보여주고 끝
Layout 틀
container
-> header
-> footer
-> main
(html 구조먼저 쌓기)
Component 재사용 가능한 최소 단위
area
box
card
item
카톡 어플 바로 실행시킬 수 있다.
브라우저 실행시키는 방법은 따로있음
웹 개발자를 위한 안드로이드 웹뷰 만들기 — 이로운 개발하기 (tistory.com)
웹 개발자를 위한 안드로이드 웹뷰 만들기
웹뷰란 App 내에 웹 사이트를 띄우는 것으로 웹 개발자들이 간단한 App을 만들기 위해서 선택할 수 있는 최고의 방법입니다. 하지만 웹뷰 만들기를 검색하면 전부 안드로이드 개발자의 시선에 맞
stir.tistory.com
[iOS]WKWebView를 이용한 하이브리드 앱(Hybrid App) 제작하기 :: DevJingyu (tistory.com)
[iOS]WKWebView를 이용한 하이브리드 앱(Hybrid App) 제작하기
오피스 체크인 모바일 웹 개발 이후 팀 결정에 따라 앱으로 출시하게 되었습니다. 모바일 웹은 이미 하이브리드 앱을 염두에 두고 개발되었고 저희 팀은 안드로이드와, iOS 개발이 가능하여 Cordov
jingyu.tistory.com