🔨nodemon 설정

이전에 우리가 만든 서버소스는 node를 이용해서 해당 파일을 직접 실행시켜주었습니다.

이런방식의 실행은 개발할때 조금 불편한? 귀찮은? 일이 생깁니다.

우리가 서버를 실행시켜둔 상태에서 특정 소스를 추가한다거나 수정할때 이전과 이후의 결과물은 달라지겠죠? 하지만 서버를 다시 재 실행시키지 않는다면 우리가 추가한 내역이 서버에 반영되어지지 않습니다.

이러한 소스코드 수정여부에 대하여 감지하고 서버를 재 실행시켜주는것을 돕는것이 nodemon의 역할이라고 생각하시면 되겠습니다.

그럼 지금부터 해당 모듈을 설치해보도록 하죠! ( yarn add nodemon )

이제 서버를 실행시킬때 node nodemon --watch  src/ src/index.js 로 실행하면 수정내역이 반영이 되어집니다. ㅎㅎ

( 매번 서버를 실행하려니... 실행문이 너무 길어 귀찮네요 )

이렇게 실행문이 긴것들은 우리가 이전에 만들어두었던 package.json에서 매크로처럼 짧은 문장으로 대체가 가능합니다.

package.json 파일을 열어보면 scripts라는 키를 가진 곳이 보일것입니다. 

그곳에 다음의 내용을 추가하도록하죠

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start:dev": "nodemon --watch src/ src/index.js"
  },

이제 실행시에 yarn start:dev 혹은 npm run start:dev로 실행이 가능해졌습니다.

🔨 보안관련 미들웨어 dotenv, koa-helmet 설치

우리가 만드는 서비스들은 웹상에서 특정유저의 요청을 받고 그에대한 응답을 해주는 방식의 서비스입니다. 이러한 과정에서 악의적인 sql문장을 보내여 DB내의 혼란을 야기시키거나 우리가 주고받는 응답 메시지를 영탐해서 악의적으로 사용하는 사람들이 있습니다. 

이를 위해서 중요한 내용은 따로 숨기거나, 기본적인 보안을 위한 프로그램들을 구축해야 우리의 서버 뿐만 아니라 우리의 서비스를 사용하는 사용자들을 안전하게 만들 수 있습니다.

그래서 첫번째로 해줄일은 dotenv입니다.

dotenv는 중요한 소스 가령 우리가 사용할 port번호나 나중에 사용할 암호화된 pw를 만들때 사용되어지는 key값등을 저장하게 됩니다.

일단 설치해보도록 하죠, yarn add dotenv 해줍시다.

설치가 완료되었다면, 우리가 이전에 만들었던 src 폴더와 같은경로 안에 .env  파일을 만들어줍니다.

그리고 그안에 우리가 앞으로 사용할 서버 포트를 채워넣어주겠습니다.

PORT = 4000

그리고 다시 index.js로 돌아와서 소스코드를 조금 수정해주도록 하겠습니다.

우리가 .env 에 작성한 코드들을 다른 특정 파일에서 불러다 쓰기 위해서는 dotenv 모듈을 import 해주어야 합니다. 이를 위해 다음의 코드를 index.js 상단에 작성해주도록 하겠습니다.

// 환경변수를 불러옵니다.
require('dotenv').config();
const { 
  PORT: port
} = process.env;

이전에 사용했던 const port = 4000 이 코드는 지우고 .env에 작성한 PORT 변수를 가져와서 port라는 소문자이름으로 바꿔 사용해 대체했습니다.

이런식으로 상단에 require('dotenv').config(); 를 작성해주게 되면 process.env에서 우리가 .env에서 작성해준 변수들을 사용이 가능해집니다. 

(왜 이렇게 하냐구요? 나중에 해커가 소스코드를 열어봐도 port나 key와 같이 중요한 값은 볼수 없도록 하기 위해서 입니다 ㅎㅎ)

이제 중요한 값들도 숨겼으니 보안 모듈(미들웨어)를 설치후 연결해 보아요.

우리가 보안을 위해사용할 모듈은 바로 helmet 입니다.

사실 express를 이용해 개발을 조금 해본 친구들이라면 helmet이 뭔진 바로 알꺼에요. 

node.js를 이용해 웹서버를 개발할때 간편하게 기본적인 보안설정을 이 모듈이 다 맡아서 해주기 때문에 꽤나 유명한 모듈입니다.

하지만 우리는 koa에서 사용하기 때문에 일반적인 helmet을 받진 않을껍니다.

(이유즉슨, 뇌피셜이지만 koa는 promise 기반이라 기존helmet과 인터페이스가 맞지 않아서가 아닐까... 싶습니다. 이게 아니라면 가르쳐주세요 ㅎㅎ)

그럼 설치를 진행해 봅시다. yarn add koa-helmet 을 해주시고 index.js를 열어주세요.

그 다음에는 설치한 모듈을 우리의 app에 연결해 주도록 하겠습니다.

일단 설치한 모듈을 상단에 아래의 소스코드를 추가하여 불러와주도록 하겠습니다.

const helmet = require('koa-helmet');

그다음 해줄 연결작업도 마저 해주도록 하겠습니다.

express 나 koa 에서 특정 미들웨어(=모듈)을 연결해줄때는 use라는 메서드를 사용하게 됩니다.

(예를들어 app.use(...) 와같은 형태인거죠)

그래서 우리가 연결해줄 미들웨어는 helmet 이니깐 .use(helmet) 이 될꺼고 이 미들웨어는 우리가 만들 서버 전체에 적용이 되어져야 하니 app에 연결해주어야 합니다. 즉 app.use(helmet)이 되겠네요. 

// 미들웨어 연결
app.use(helmet);

자, 기본적인 보안설정이 완료되었습니다. 가장 많이 시도되는 웹보안 공격에 대해 이친구가 대처를 잘 도와줄껍니다.

이번 포스팅은 여기서 마치고, 다음포스팅에서는 router 설정전에 DB 연결처리를 먼저하고 그 이후에 router 처리를 해주도록 하겠습니다.

todoList

* DB연결 / MongoDB

* Router 연결

🔨 웹프레임워크 설치 Koa

index.js에서 서버관련 소스코드를 작성하기 위해서는 이를 도와주는 프레임워크를 사용해야합니다.

back-end에서 이번에 사용할 프레임워크는 koa라는 프레임워크입니다. 물론 node에서는 express가 제일 유명하나.. 같은 제단? 회사? 에서 현재도 가볍기는 하지만 이것저것 많이 제공해서 무거운 express대신에 비동기와같은 기능은 보강해서 다시만든 koa를 출시했습니다. (저도 잘은 몰라요 ㅎㅎ)  koa는 REST API용 서버를 만들때 강하다는 장점이 있다고 하니 이것을 채택해 사용하겠습니다.

yarn 을쓰신다면 yarn add koa koa-router, npm을 쓰신다면 npm i koa koa-router를 입력해줍니다.

설치가 되셨다면 VSCODE에서 index.js파일을 열어주세요

일단 koa 프레임워크가 익숙치않은 뉴비이기 때문에 정석대로 koa document를 많이 참고하여 만들어보도록 하겠습니다.

(모르는건 질문해도 좋으나, 답변을 못할수도 있어요 ㅎㅎ... 답변이 가능하도록 열심히 공부할게요.) 

https://devdocs.io/koa/

일단 공식문서를 보아하니 기존에 사용하던 express문법과 거의 흡사합니다. 다른점이라면 미들웨어를 처리하는 정말 조금의 문법정도..?

const Koa = require('koa');

// app을 생성해줍니다.
const app = new Koa();
// 서버에서 사용할 포트를 불러옵니다.
const port = 4000;

// test 응답
app.use(async (ctx) => {
  ctx.body = 'Hello World';
});

// app을 활성화상태에 둡니다.
app.listen(port);

일단 위의 소스코드를 index.js에 저장하고 콘솔에가서 node index.js를 통해 실행시켜 봅시다.

(실행 후 브라우저로가서 http://localhost:4000/ 경로로 접속시 다음과 같은 화면이 뜬다면 성공입니다.)

일단 koa를 사용하는데까진 성공했습니다. 조금 아쉬운점은 콘솔창에서 서버가 실행중임을 나타내는 문구가 나왔으면 좋겠네요. 그래서 소스코드를 조금 수정하여 다음과 같이 나타내볼게요.

const Koa = require('koa');

// app을 생성해줍니다.
const app = new Koa();
// 서버에서 사용할 포트를 불러옵니다.
const port = 4000;

// test 응답
app.use(async (ctx) => {
  ctx.body = 'Hello World';
});

// app을 활성화상태에 둡니다.
app.listen(port, () => {
  console.log(`✅  MEMO server is listening http://localhost:${port}`);
});

아주 좋습니다. 오늘은 여기까지 포스팅을 마치고 다음 포스팅에서는 아래의 일들을 처리해보도록 하겠습니다.

📌 Todo List    

* nodemon설정

* 우리의 app을 위한 기본적인 보안미들웨어 추가

* REST API시 각 URL요청 처리를 위한 router 설정

🔨 개발환경구축 

nodeJS라이브러리인 Koa.js를 이용해서 Back작업을 해줄겁니다.

일단 환경부터 구축하겠습니다.

🔨 폴더구성

본인의 컴퓨터의 적당한 장소에 Momo라는 폴더를만들어주세요. 

그리고 VSCODE에디터로 해당 폴더를 열어주세요.

그다음에  npx create-react-app front  라고 콘솔창에 쳐줍니다.

(이후에 있을 우리의 front-end 작업을 위한 폴더입니다.)

그리고 front 폴더와 같은경로에 back이라는 이름의 폴더도 만들어줍니다.

(앞으로 작업할 back-end 작업을 위한 폴더입니다.) 

위의 절차가 마치셨다면, VSCODE를 끈후에 방금생성한 back폴더경로로 VSCODE를 다시켜줍니다.

(당분간은 front작업보다는 back작업위주로 할터이니 이렇게 설정해줍니다.)

🔨 npm init

back폴더 안에는 우리의 API서버의 역할을해줄 몇가지 파일들을 만들어줄겁니다.

그전에 npm init 이라는 명령어를 통해 현재폴더에 package.json파일을 만들겠습니다.

(package.json은 프로젝트에관련 정보들이 적혀있는 파일입니다. 이파일이 있어야 추후에 버전관리나 다른 개발환경에서의 초기설정이 쉬워진답니다.)

추가로 package.json이 생성된 경로에 src 이름의 폴더를 만들고 그안에 index.js 파일을 생성해줍니다.

(앞으로의 back-end 관련 파일들은 src폴더안에서 다뤄지게 됩니다.)

🔨 eslint 설정

이번에는 eslint를 설정해줄꺼에요. eslint가 무엇이냐면, js언어는 다른 타개발언어에 비해 자유로운 문법의 이유로 개발사마다 코드 스타일이 재각기 다르게 나옵니다. 예를들자면 세미콜론같은거죠

(세미콜론이 없어도 자동으로 적용이 되어집니다. 즉 ;은 써도그만 안써도 그만) 

이런 코딩스타일을 제한하여 일관성있는 코딩스타일을 만들어 나 이외 타개발자가 보아도 이해되도록 돕습니다.

(사용하는 이유는 다양하니 검색해보시길 바랍니다.)

yarn을 사용하신다면 yarn add --global eslint, npm을 사용한다면 yarn add 대신에 npm install 혹은 npm i로 바꿔치시면 됩니다.

설치가 완료되면, 또다시 콘솔창에 eslint --init 이라는 명령어를 쳐줍니다. 그다음에 나오는 질문은 아래의 사진을 따라오시길 바랍니다.

여기까지 잘 따라오셨다면 환경설정의 대부분이 완료되었습니다. 

다음 포스팅에서는 실질적으로 웹서버의 역할을 수행해줄 index.js에대해 설정을 끝마쳐보도록 하겠습니다.

다음은 공유관련 추가설정 기능입니다.

폴더와 관련한 추가 설정

파일과 관련한 추가 설정

첫번째로 구글에 로그인을 해줍니다!!

두번째로 아래와 같이 링크로 들어가 줍니다.

https://colab.research.google.com 

이번에는 새로운 주피터 노트북파일을 생성해 보겠습니다.

이번에는 내가 작성중이던 주피터노트북 파일을
실시간으로 다른이들과 공유하는법을 배워보겠습니다.

( 사실 구글 드라이브나 구글시트 공유와 방법은 동일합니다. )

공유버튼을 클릭하면 아래와 같은 화면이 나옵니다.

이번에는 GPU를 사용해 컴파일을 돌리는 법을 배워보겠습니다.

이렇게 하드웨어 가속기를 GPU로 설정하는것만으로
다음번 컴파일시에 GPU를 계속 사용이 가능해집니다.

이번에는 주피터노트북 파일이름 설정과
이전에 작성했던 파일을 열어보는 방법을 알아보겠습니다.

1️⃣ What is AJAX?

**Ajax(Asynchronous JavaScript and XML)**는 비동기적인 웹 제작을 위한 기법입니다.

2️⃣ ​Why we use this?

웹사이트 내의 특정 페이지의 데이터 변화가 존재할 때 페이지를 **새로고침(refresh)**해야 적용이 됩니다. 이는 데이터의 변화빈도가 많다면 그만큼 **새로고침(refresh)**도 많이 수행해 주어야 한다는것을 의미합니다.

이러한 방법은 매우 불편하고 비효율적인 방법이며, 우리가 새로고침(refresh)이전에 가지고 있던 데이터에 비해 새로고침(refresh)이후에 새로 받은 데이터가 크게 변화된게 없다면 아주 작은 변화를 위해 이전에 받았던 데이터까지 몽땅 다 받아와야 함을 의미합니다.

이것은 매우 불편한 진실이고 트래픽이 증가하게되어 비효율적인 로딩이 많아지게 됩니다.
이러한 상황에서 우리는 AJAX통신을 사용합니다. AJAX이름에서 맨 앞의 **A는 synchronous**라는 의미로서 비동기라는 의미를 가지고 있습니다.

여기서 동기와 비동기에 대한 빠른 이해를 위해 예시를 들어 설명해 드리겠습니다.

가정 )

자 상황을 설정해 보죠, 우리는 야채를 사기위해서 야채가게에 서있다고 가정해 봅시다. !

이러한 상황에서 우리는 원하는 야채를 사기위해서 자신의 차례가 올때까지 줄을 기다려야 하며, 그동안은 아무 작업도 하지 못하게 됩니다.

이것이 일반적인 우리가 웹서버를 만들었을때 브라우저와 서버가 데이터를 주고 받는 모습입니다. 우리가 이전에 하던 작업을 끝내기 전까지는 다른 작업을 할 수 없음을 의미하고 그리고 이것을 **동기방식** 이라고 부릅니다.

이번에는 **비동기 방식**상황을 살펴보겠습니다. 이전예시와는 다르게 야채를 사기위해 줄을서서 기다리지 않고 번호표를 뽑은 후에 다른 작업을 하러 갑니다.

번호표를 뽑았기 때문에 내차례가 돌아왔을때 잠깐 들러서 원래 하려던 볼일을 보고 다른일을 하러 가면됩니다.

이처럼 이전 동작이 안 끝났어도 일단 제어권을 반납한 후 자신의 할일 계속하는 방식을 비동기 방식이라고 부르며, 이러한 방식을 통해서 필요한 데이터만을 쏘옥! 받아온 후에

document.getElementById("tag").innerHTML = 'hi';

를 이용해 받아온 데이터를 화면에 재구성하는 방법이 있습니다.

3️⃣ How to use AJAX?

🖐 JSON이란?

Javascript Object Notation 의 약자입니다.

• JSON은 경량(Lightweight)의 DATA-교환 형식

• Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.

• JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.

• 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다.

🖐 JSON 형태는?

'{ "firstName": "Kwon", "lastName": "YoungJae", "email": "kyoje11@gmail.com" }'

보시는것처럼 javascript의 list 형태 (python에서는 dictionary 형태죠?)를 띕니다.

🖐 주로 사용되는 JSON함수!

• **JSON.stringify()**

  • JSON.stringify() 메소드는 인수로 전달받은 자바스크립트 객체를 문자열로 변환하여 반환합니다. (EX. js에서 Server로 데이터를 넘겨서 Server에서 데이터를 사용해야 하는 상황)

  • JSON.stringify(value)

  • value에는 변환할 자바스크립트 객체를 전달합니다.

    이 메소드는 UTF-16으로 인코딩된 JSON 형식의 문자열을 반환합니다.

• **JSON.parse()**

  • JSON.parse() 메소드는 JSON.stringify() 메소드와는 반대로 인수로 전달받은 문자열을 자바스크립트 객체로 변환하여 반환합니다. (EX. Server에서 js로 보낸 데이터를 객체로 만들어서 사용하는 상황)

  • JSON.parse(text)
  • // JSON 형식의 문자열 var data = '{"name": "식빵", "family": "웰시코기", "age": 1, "weight": 2.14}'; var dog = JSON.parse(data); // JSON 형식의 문자열을 자바스크립트 객체로 변환함. document.getElementById("json").innerHTML = dog + "<br>"; document.getElementById("json").innerHTML += dog.name + ", " + dog.family;

• **toJSON()**

  • 자바스크립트의 toJSON() 메소드는 자바스크립트의 Date 객체의 데이터를 JSON 형식의 문자열로 변환하여 반환합니다.

    따라서 이 메소드는 Date.prototype 객체에서만 사용할 수 있습니다.

  • var date = new Date(); // 자바스크립트 Date 객체 var str = date.toJSON(); // Date 객체를 JSON 형식의 문자열로 변환함. document.getElementById("json").innerHTML = date + "<br>"; document.getElementById("json").innerHTML += str;

⭐️ 실습!!

빠른 실습을 위해서 우리는 Jquery라이브러리를 사용한 AJAX 통신을 해볼것입니다.

(※ jquery 기본문법 공부 참고는 아래 사이트 참고바랍니다! ※) <https://www.w3schools.com/jquery/default.asp>

👨‍💼: ​jquery CDN추가해줍니다.

👨‍💼 : $.ajax의 문법은 아래와 같습니다.

jQuery.ajax( [settings ] )

setting는 Ajax 통신을 위한 옵션을 담고 있는 객체가 들어갑니다. 주요한 옵션을 열거해보면 아래와 같습니다.

• **data** 서버로 데이터를 전송할 때 이 옵션을 사용한다.

• **dataType** 서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 값으로 올 수 있는 것은 xml, json, script, html이다. 형식을 지정하지 않으면 jQuery가 알아서 판단한다.

• **success** 성공했을 때 호출할 콜백을 지정한다. Function( PlainObject data, String textStatus, jqXHR jqXHR )

• **type** 데이터를 전송하는 방법을 지정한다. get, post를 사용할 수 있다.

•  

  **error** 실패했을 때 호출할 콜백을 지정한다.

   

   

👨‍💼 : python에서 json을 사용하기 위한 라이브러리를 받습니다.

pip install simplejson

👨‍💼 : ​그 후 views.py 상단에 다음과 같이 라이브러리를 임포트 해줍니다.

import simplejson as json

👨‍💼: ​DATA를 views.py에서 반환할때

return HttpResponse(json.dumps(context), content_type="application/json")

▶ index.html 결과 화면

Hello, world!

hello

▶ index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <p id="example">hello<br></p>
    <input type="button" id="execute" value="execute" />    

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        $('#execute').click(function(){
            $.ajax({
                url:"{% url 'ajax' %}",
                dataType:'json',
                success:function(data){
                    var str = '';
                    alert('ajax통신성공!!');
                    alert(data);
                    for(var name in data){
                        str += '<li>'+'1.KEY: '+name+'</li>';
                        str += '<li>'+'2.VALUE: '+data[name]+'</li>';
                    }
                    alert(str)
                    $('#example').html('<ul>'+str+'</ul>');
                },
                error: function(request, status, error){ // 통신 실패시 - 로그인 페이지 리다이렉트
                    alert("ajax통신실패...")
                    alert(error)
                    alert(request)
                    window.location.replace("{% url 'main' %}")
                    //  alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
                },
            })
        })
    </script>
    </body>
</html>​

▶ example앱 ➡️ urls.py

from django.contrib import admin 
from django.urls import path, include 

urlpatterns = [ 
	path('admin/', admin.site.urls), 
	# example app의 urls.py로 이동합니다. 
	path('', include('example.urls')), 
    ]

▶ example앱 ➡️ views.py

from django.shortcuts import render 
from django.http import HttpResponse  # 이것 추가해줍니다. 
import simplejson as json # 이것 추가해줍니다. 

# Create your views here. 
def main(request): 
	return render(request, 'index.html') 

def ajax(request): 
	example = 'hello AJAX!' 
    context = { 'hello' : example } 
    return HttpResponse(json.dumps(context), content_type="application/json")

최대한 짧게 3부작으로 만들 계획이었지만..! 만들다 보니 5부작 교육이 되었습니다!

1.

2.

3.

4.

5.

KaKao 의 서비스 Oven app을 통한 UI만들기

어떤 프로젝트를 만들때 항상 어떤식으로 만들어야할지에 대한 구체적인 그림을 먼저 그리는게 가장 중요합니다.

그래서 저희는 KaKao에서 제공해주는 Oven app이라는 서비스이용해 앞으로 만들고자 하는 APP의 프로토타입 화면을 그려볼것 입니다.

다음의 가이드 라인을 따라 실습을 진행해 주세요 ! .

오븐앱으로 이동

1. 회원가입

위에서 첨부해드린 링크로 접속 후, 아래 사진에서 보이는 것처럼 계정생성을 진행해주세요. 

2. 새로운 프로젝트 만들기

아래의 사진에서 빨간펜으로 표시된 부분을 눌러 새로운 프로젝트를 생성해보겠습니다.

앞으로 계속 사용하게 될 프로젝트의 이름과 상세내용을 기입 후
기본화면 사이즈는 만드는 대상(PC 혹은 Phone(Mobile))에 따라 선택해 주시면 되겠습니다. 

생성이 완료되면 다음과 같은 화면처럼 새로운 빈 프로젝트가 생성이 됩니다.

3. 프로젝트 수정하기.

이전의 사진에서 생성된 프로젝트로 접속을 해보면 아래와 같은 화면을 보실 수 있습니다.

기본적으로 UI를 그릴 도화지가 되는 view부분과 그 view를 채워넣을 아이템들인 component로 구성이 되어 있습니다.

각 아이템들은 HTML의 TAG와 동일하게 구성이 되어있고,
Drag & Drop으로 해당 View(도화지)에 추가하여 수정할 수 있습니다.

더 많은 페이지(html)들을 생성하고 싶다면 아래의 사진에서 처럼 [ 페이지 추가 ] 버튼을 통해 새로운 도화지를 얻으실 수 있습니다.

4. 내 Oven app 프로젝트를 팀원들과 공유하기

자신이 생성한 프로젝트를 팀원들과 결과물을 공유 또는 함께 수정을 하실 수 있습니다.

아래의 사진과 같이 우측 상단에 [ 프로젝트 ] 메뉴를 클릭 후 [ 공유옵션 ] 을 클릭해 주세요.

그 후 아래와 같은 모달창이 나옵니다. 여기서 공유하고자 하는 팀원의 이메일을 추가하여 결과물을 공유해 줍니다.