백짱미 개발log

0. AWS S3(Simple Storage Service)

AWS S3란 인터넷용 스토리지 서비스이다. 이 서비스는 개발자가 더 쉽게 웹 규모 컴퓨팅 작업을 수행할 수 있도록 설계되어있다.

- 단순 웹 서비스 인터페이스를 사용해서 웹에서 언제 어디서나 원하는 양의 데이터를 저장하고 검색

- S3의 버킷은 무한대의 객체를 저장할 수 있으므로 스토리지의 요구를 미리 추정하여 관리할 필요가 없어 확장, 축소에 신경쓰지 않아도 됨

- HTTPS 프로토콜을 사용하여 SSL로 암호화된 엔드포인트를 통해 데이터를 안전하게 업로드, 다운로드 가능

1. 준비작업

(1) AWS 계정

(2) AWS 계정의 Access Key, Secret Key

(3) S3 버킷 생성

2. AWS SDK 모듈 설치

npm install aws-sdk

3. config/awsconfig.json

{
  "accessKeyId": "access key를 입력해주세요.",
  "secretAccessKey": "secret key를 입력해주세요.",
  "region": "ap-northeast-2"
}

파일에 AWS 계정의 Access key, Secret key 작성

절대 외부로 노출되어서는 안됨

routes/waste-upload.js 파일에 AWS SDK 로딩

const AWS = require("aws-sdk");
AWS.config.loadFromPath(__dirname + "/../config/awsconfig.json");

let s3 = new AWS.S3();

추가해준다

4. multer 모듈

일반적으로 파일 업로드를 위해서 multer 모듈 필요

업로드된 파일을 S3에 바로 업로드할 수 있도록 multer-s3 모듈 사용하자

npm install multer
npm install multer-s3

클라이언트로부터 받은 이미지 파일을 S3에 업로드하는 라우터 함수 작성

var storage = multer.multerS3({ //s3
    s3: s3,
    bucket: 'cmh-project',
    acl: 'public-read',
    key: function (req, file, cb) {
        cb(null, Math.floor(Math.random() * 1000).toString() + Date.now() + '.' + file.originalname.split('.').pop());
    }
});

* 하단의 블로그 보고 참고하였음!

0. 헤로쿠

- 여러 프로그래밍 언어를 지원하는 클라우드 컴퓨팅 플랫폼. Git, GitHub 등을 지원하고 많은 서비스를 애드온과 API로 지원

- Application 배포시 바로 온 사이트로 서비스 해주는 대표적인 PaaS 서비스

- PaaS (Platform as a Service) : 클라우드에서 제공되는 완전한 개발 및 배포 환경. 개발적으로 서버, 저장소, 네트워킹, 미들웨어, 개발도구, BI, 서비스, DB, 빌드, 테스트, 배포, 관리, 업데이트 등 모든 어플리케이션 수명 주기를 지원하는 서비스

1. 헤로쿠 가입

Log in or sign 중 sign 클릭하고 이메일 인증

로그인하면!

2. Create a new app

왼쪽 버튼 클릭

3. App 이름 설정

이름 설정 후 국가는 미국으로! ( 비용 안나감 ,,)

4. 소스 설정

이제 소스 어떻게 넣을지 물어보는데 heroku Git - heroku CLI 사용 선택하자

5. Windows 64-bit installer 설치 클릭

Heroku CLI 버튼 누르고 조금 내리다 보면 위 사진과 같이 뜨는데, 본인 노트북 OS에 맞게 설치하자!

6. 설치 진행

Next 누르고 서서히 진행하다보면 ! 잘 설치된다.

참고한 블로그 보면 기존에 Node.js 깔려있을시 충돌된다고 해서, 하단의 명령어를 통해 설치하면 된다고 한다

C:\Users\Administrator\npm install -g heroku

설치 확인!

7. Heroku 저장소 생성

터미널에 heroku login을 입력하면 브라우저가 뜨면서 로그인 인증을 요하고 로그인이 된다!

Opening browser to https://cli-auth.heroku.com/auth/cli/browser/......
Logging in... done
Logged in as xxx@naver.com

8. 배포하고자 하는 디렉토리로 이동한 후 아래 명령어를 수행

heroku git: remote -a [app name]

git remote -v 명령어로 연결된 원격저장소 확인

$ git remote -v
heroku  https://git.heroku.com/cmh-node-js.git (fetch)
heroku  https://git.heroku.com/cmh-node-js.git (push)
origin  https://github.com/codusl100/dongguk_cmh.git (fetch)
origin  https://github.com/codusl100/dongguk_cmh.git (push)

9. 연결된 로컬 디렉토리 내 파일들을 heroku 원격 저장소로 push

git push heroku [브랜치]

main 브랜치로 push 하려했는데 안돼서 새로 브랜치 생성하고 (node1) 상단의 명령어 다시 입력했다

10. push까지 끝나면 배포는 완료됐고, 배포된 링크로 이동해서 확인하면 정상적으로 메인페이지가 보인다. 

그러나 sleep 상태의 dyno를 깨워주는 명령어를 수행해야함. 안그러면 배포된 웹 서비스에서 request 못받음

heroku ps:scale web=1

11. 배포된 프로젝트 확인하는 법

(1) 직접 타이핑 

https://[heroku dashboard에 보이는 app 이름].herokuapp.com/

(2) heroku dashboard에서 app 클릭 -> 우측 상단에 위치하는 open app 버튼 클릭

(3) heroku 명령어: 터미널에서 heroku app 실행

1. ../routes/login.js

const express = require("express");
const User = require("../models/User");
const router = express.Router();
const bcrypt = require("bcryptjs"); // 암호화 모듈
const jwt = require("jsonwebtoken");

router.post('/', (req, res)=>{
    // 요청된 이메일을 db에서 찾는다.
    User.findOne({email: req.body.email}, (err, user)=>{
        if(!user){
            return res.json({
                loginSuccess: false,
                message: "Unvalid email"
            });
        }
    // 요청된 이메일이 db에 있다면 비밀번호 일치여부 확인
    user.comparePassword(req.body.password, (err, isMatch)=>{
        if(!isMatch)
            return res.json({
                loginSuccess:false,
                message:"Wrong password"
            });
    // 일치 시, 토큰 생성. 생성한 토큰을 쿠키에 저장한다
    user.generateToken((err, user)=>{
        if(err) return res.status(400).send(err);
        // 토큰을 쿠키에 저장
        res.cookie("x_auth", user.token)
        .status(200)
        .json({
            loginSuccess: true,
            userId: user._id,
            token: user.token,
            name: user.name,
            email: user.email,
            password: user.password
            });
        });        
        });
    });
});

module.exports = router;

2. User 모델에 추가

userSchema.methods.comparePassword=function(plainPassword, cb){
    bcrypt.compare(plainPassword, this.password, function(err, isMatch){
        if(err) return cb(err);
        cb(null, isMatch);
    });
}

userSchema.methods.generateToken=function(cb){
    const user=this;
    const token=jwt.sign(user._id.toHexString(), 'secretToken');
    user.token=token;
    user.save(function(err, user){
        if(err) return cb(err);
        cb(null, user);
    });
}

위에는 비밀번호 비교해서 해당 유저가 맞는지 확인

아래는 token 생성해서 로그인시 제공!

3. Postman 결과 화면

login 성공 여부, userId, token, 이름, 이메일, 비밀번호 출력 완료!!

1. 회원 가입

router.post(
    "/",
    async (req, res) => {
        const { name, email, password, address } = req.body;

        try {
            // email을 비교해서 user가 이미 존재하는지 확인
            // 존재한다면 return해서 뒤의 코드를 실행하지 않음.
            let user = await User.findOne({ email });
            if (user) {
                return res.status(400).json({ errors: [{ msg: "User already exists" }] });
            };

            // user가 존재하지 않으면 새로운 user에 대해서 DB에 추가
            user = new User({
                name,
                email,
                password,
                address,
            });

            // bcrypt 모듈을 이용해 salt값을 부여하며 password 암호화
            const salt = await bcrypt.genSalt(10);
            user.password = await bcrypt.hash(password, salt);

            // 암호화된 내용까지 포함해 DB에 user를 저장.
            await user.save();
    });

2. jwt (jsonwebtoken) 기능 추가

// 암호화된 내용까지 포함해 DB에 user를 저장.
            await user.save();

            const payload = { // json web token 으로 변환할 데이터 정보
                user: {
                    id: user.id,
                },
            };
            // json web token 생성하여 send 해주기
            jwt.sign(
                payload, // 변환할 데이터
                "jwtSecret", // secret key 값
                { expiresIn: "1h" }, // token의 유효시간
                (err, token) => {
                    if (err) throw err;
                    res.send({ token }); // token 값 response 해주기
                }
            );

        } catch (error) {
            console.error(error.message);
            res.status(500).send("Server Error");
        };

register 밑 부분에 추가하기!

3. postman 결과

req에 필요한 body값들 담고 api 호출시 token 반환

auth api를 통해 회원가입되어 있는지 확인 가능!

1. connectDB

mongoDB와 연결되는 모듈

2. cookieParser

요청된 쿠키를 쉽게 추출할 수 있도록 해주는 미들웨어

request 객체에 cookies 속성이 부여됨

3. bodyParser

Node.js의 POST 요청 데이터를 추출할 수 있도록 만들어주는 미들웨어

req에 body 프로퍼티 사용 가능

- bodyParser.json()은 'application/json' 방식의 Content-Type 데이터를 받아줌

- bodyParser.urlencoded({...})는 'application/x-www-form-urlencoded' 방식의 Content-Type 데이터를 받아줌 (jQuery.ajax의 기본 타입)

- bodyParser,text()는 'text/xml' 방식의 Content-Type 데이터를 받아줌

4. cors

추가적인  HTTP 헤더를 사용해 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 관리하는 체제

보안상의 이유로 cors 이슈 발생

(ex. https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우 cross-origin HTTP 요청이 됨)

1. vscode와 git 연동하기

git clone <복사할 깃 주소>

2. node.js 기본 설정

npm init
// npm init -y 하면 기본 값들 다 불러와짐

package.json 파일 생성

3. node 모듈 설치 + express.js까지 추가한다면

npm install --save express

그러면 프로젝트 폴더에 node_modules, package-lock.json 파일까지 생성된다.

package.json 파일이 존재한다면 프로젝트 공유시 node_modules 폴더까지 공유할 필요가 없어짐!!

├─manifests
│       └─AndroidManifest.xml # 앱에 관한 필수 정보
│ 
├─java
│  └─com.example.android_practice
│                   ├─ MainActivity.xml # 앱 실행 파일
│                   ├─ ExampleInstrumentedTest.xml # 테스트 코드 작성 파일 
│                   └─ ExampleUnitTest.xml # 유닛 테스트코드 작성 파일
└─res
    ├─drawable # 앱에서 사용하는 이미지 저장
    │
    ├─layout # 화면의 레이아웃 설정
    │
    ├─mipmap # 앱 아이콘 저장 폴더
    │
    └─values # 자주 사용하는 변수 설정
        │    
        ├─ color.xml : 색 설정
        ├─ string.xml  : 문자 설정
        │
        └─ themes # 앱 테마 설정

1. Manifests

├─manifests
│       └─AndroidManifest.xml

Android 빌드 도구, Anroid 운영 체제 및 앱에 관한 필수 정보 설명

AnroidManifest.xml

<?xml version="1.0" encoding="utf-8"?> XML 문서 선언
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.android_practice"> 프로젝트 앱 패키지명

		앱의 구성요소를 등록하기 위한태그
    <application
        android:allowBackup="true"
				애플리케이션이 백업 및 복원 인프라에 참여 하도록 허용할지 여부

        android:icon="@mipmap/ic_launcher"
				앱의 아이콘 설정

        android:label="@string/app_name"
				앱의 라벨 설정 설정

        android:roundIcon="@mipmap/ic_launcher_round"
				앱의 아이콘 원형 아이콘 설정

        android:supportsRtl="true"
				앱이 RTL(right-to-left)를 지원해 주는 여부를 선언한다.

        android:theme="@style/Theme.Android_practice">
				앱의 기본 테마를 정의한다.

				애플리케이션의 시각적 사용자 인터페이스 요소를 구현하는 
				액티비티(Activity 하위 클래스)를 선언합니다.
        <activity
            android:name=".MainActivity"
						앱이 시작될 때 가장 먼저 실행되는 클래스

            android:exported="true">
						시스템이 액티비티를 인스턴스화할 수 있는지 여부를 나타냅니다.

						활동, 서비스, broadcast receiver가 응답할 수 있는 인텐트의 유형을 지정합니다.
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

출처: https://taegyuhan.github.io/android/folder_structure/

앱에 대한 전반적인 정보를 담고 있는 파일. 앱의 구성요소나 권한 등을 정의

2. java

├─java
│  └─com.example.android_practice
│                   ├─ MainActivity.xml # 앱 실행 파일
│                   ├─ ExampleInstrumentedTest.xml # 테스트 코드 작성 파일 
│                   └─ ExampleUnitTest.xml # 유닛 테스트코드 작성 파일

MainActivity.java: 스마트폰 화면을 구성하는 액티비티를 정의하는 파일로 앱 실행 시 처음으로 실행되는 코드를 정의

activity_main.xml: MainActivity.java에 대한 레이아웃을 정의하는 XML 파일

string.xml: 앱이 동작하면서 참조하는 문자열들이 정의된 파일

R.java: 앱이 동작하면서 참조하는 자원(문자열, 이미지, 소리, ...)들의 ID가 정의된 파일

3. res

└─res
    ├─drawable # 앱에서 사용하는 이미지 저장
    │
    ├─layout # 화면의 레이아웃 설정
    │
    ├─mipmap # 앱 아이콘 저장 폴더
    │
    └─values # 자주 사용하는 변수 설정
        │    
        ├─ color.xml : 색 설정
        ├─ string.xml  : 문자 설정
        │
        └─ themes # 앱 테마 설정

각종 리소스(자원) 앱에 사용되는 이미지, 자료 등을 저장하는 폴더

res/drawable: 화면에 표시되는 이미지 파일이 저장되는 폴더

res/layout: 액티비티의 화면을 구성하는 레이아웃 리소스가 정의된 파일을 저장하는 폴더

res/values: XML 형태로 정의된 다양한 리소스 파일이 저장되는 폴더