반응형

흥미로운 아이를 발견함.

loginModule.js

import router from "@/router";
import axios from "axios";

const loginModule = {
    namespaced: true,    
      actions: {
        signUp(params){
          console.log('signup action activated')
          console.log(params)
           
        },
      },
}
export default loginModule;

MemberRegisterView.vue

<template>
  <b-container fluid>
    <h1>Sign Up</h1>
    <b-form>
      <b-form-group
        label="Name"
        label-for="username">
        <b-form-input
          type="text"
          id="username"
          placeholder="Enter name"
          v-model="user.username"
          v-validate="{required : true ,min:3, max:20}" />
      </b-form-group>

      <b-form-group
        label="Email"
        label-for="email">
        <b-form-input
          type="email"
          id="email"
          placeholder="Enter email address"
          v-model="user.email"
          v-validate="{required : true , max:50}" />
      </b-form-group>
      <b-form-group
        label="Password"
        label-for="password">
        <b-form-input
          type="password"
          id="password"
          placeholder="Enter password"
        
          v-model="user.password"
          v-validate="{required : true , min: 6 ,max:40}" />
      </b-form-group>
      <b-button
        variant="primary"
        @click="handleRegister">
        Sign Up
      </b-button>
    </b-form>
  </b-container>
</template>

<script>
export default {
  name: "MemberRegisterView",
  data() {
    return {
      user: {},
    };
  },
  methods: {
    handleRegister() {
      this.$store.dispatch("loginModule/signUp", this.user)
    },
  },
};
</script>

그래서 console을 확인해보면!!!

그래서 찾아보니,

Action handlers receive a context object which exposes the same set of methods/properties on the store instance, so you can call context.commit to commit a mutation, or access the state and getters via context.state and context.getters

이렇게 되어있다.

Action 은 context 객체를 받아야하는거다.

그 context 객체 안에는 commit, dispatch, getters  등이 들어있는거다! 

그래서 바꾼거!

loginModule.js

import router from "@/router";
import axios from "axios";

const loginModule = {
    namespaced: true,    
      actions: {
        signUp(context, params){
          console.log('signup action activated')
          console.log(params)
           
        },
      },
}
export default loginModule;

이렇게 actions 에 받는아이에 context를 넣으면, 

이렇게 콘솔창에 잘 뜬다!!!

 


회원가입으로 다시 돌아가면, 

axios 를 실행한 후에 backend 에서 쿼리를 실행하다 오류가 발생했을때, actions에서 아무것도 안하고 그냥 console에 에러만 발생하더라. 그래서 위에서 배운 try catch 를 넣어봤다. (에러 처리를 위해서)

loginModule.js

import router from "@/router";
import axios from "axios";

const loginModule = {
    namespaced: true,    
      actions: {
        async signUp(context, params){
          try{
            const res = await axios.post('/api/signUp/action',params);
            if(res.data.isSuccess == true){
              alert('회원가입이 완료되었습니다.');
            }else{
              alert('화원가입을 진행중 오류가 발생했습니다. 관리자에게 문의해주세요.');
            }
          }catch{
            alert('화원가입을 진행중 오류가 발생했습니다. 관리자에게 문의해주세요.');
          }
        },
      },
}
export default loginModule;

이렇게 했더니, 

 

alert창이 잘 떳다.

그런데 이제 생각해보니, 회원가입 전에 있는 이메일주소인지를 확인을 하고 넣어야하는데...? 라는 생각이 들었다.

그래서 그과정을 넣어보도록하겠다.

java에서 미리 확인해서 보내는 과정을 넣었다. 

// 회원가입
	@PostMapping(value = "/signUp/action")
	@ResponseBody
	public HashMap<String, Object> signUpAction(@RequestBody HashMap<String, Object> paramMap){
		HashMap<String, Object> returnMap = new HashMap<>();
		System.out.println(paramMap);
		if(paramMap != null) {
			// 일단 입력한 이메일주소가 이미 등록되었는지 확인하기
			int emailDupCheck = service.getCountMember(paramMap);
			if(emailDupCheck > 0) {
				returnMap.put("isSuccess", false);
				returnMap.put("errorMsg", "emailDup");
			}else {
				int result = service.addNewMemeber(paramMap);
				if(result == 1) {
					returnMap.put("isSuccess", true);
				}else {
					returnMap.put("isSuccess", false);
				}
			}
		}
		
		return returnMap;
	}

loginModule.js

import router from "@/router";
import axios from "axios";

const loginModule = {
    namespaced: true,    
      actions: {        
        async signUp(context, params){
          try{
            const res = await axios.post('/api/signUp/action',params);
            if(res.data.isSuccess == true){
              alert('회원가입이 완료되었습니다.');
            }else{
              if(res.data.errorMsg != null && res.data.errorMsg == 'emailDup'){
                alert('이미 등록된 이메일 주소입니다. 다시 입력해주세요.');  
              }else{
                alert('화원가입을 진행중 오류가 발생했습니다. 관리자에게 문의해주세요.');
              }
            }
          }catch{
            alert('화원가입을 진행중 오류가 발생했습니다. 관리자에게 문의해주세요.');
          }
        },
      },

}
export default loginModule;

이렇게 했는데.... 말이 안되는 것 같다. 왜냐면, 일단 vue 를 쓰는건 결국엔 frontend와 backend를 완전히 구분지어서 작업하는게 가능하게 한것인데. 결국엔 backend 개발자가 front를 건드리는 느낌..... 아니면 axios는 결국에는 backend의 작업이니 이게 맞는건가.... 잘모르겟다.

좀더 깔끔하게 사용하기 위해서, loginModule.js 에서는 확실하게 Vuex에 관한 것만 넣어놓고 싶기때문에, alert처럼 에러나 action에 대한 각각의 처리는 vue에서 하는게 맞는것같다 ( 이미 만들어져 있는 프로젝트를 참고해보면 ) -> 물어보고 시도해보겟다. 왜냐면, backend 에서 error로 넘겨줘야하는데... 잘모르겟다.

 

 

반응형
반응형

vuex 를 

npm install vuex 를 이용해서 다운로드를 하려는데, 계속해서 에러가 났다. 

npm uninstall vuex 를 하고 나서 다시 해도 여전히 안되면서, 동일한 에러가 발생했는데 그건

찾아보니, 나는 vue 를 버전 2.x 를 사용하고 잇는데, vuex 는 4 버전을 받으려고 한다

vue 3.x 버전 - > vuex 4.0 버전
vue 2.x 버전 -> vuex 3.x 버전

결국 호환성의 문제였다. 결국 나는 vue 가 2 버전 이기때문에 

npm install vuex@3.4.0 --save

 

이거로 해주면 끄읏!

반응형

'당마 프로젝트' 카테고리의 다른 글

DAY 01 - 시작 & 기획  (0) 2022.01.04
반응형
Actions

Actions 는 mutations 와 비슷하다. 하지만 다른점이 있다면,

  • Instead of mutating the state, actions commit mutations.
  • Actions can contain arbitrary asynchronous operations.

그래서 Actions 에 로그인한 정보를 DB에서 비교하며 맞는지를 확인하는 비동기작업을 axios 를 이용해서 구현해보겠다.

 

여기서 전부터 의문이 생겼던 부분은, 비동기적 특성상 코드가 짜여진 순서대로 진행이 되지 않기 때문에 이를 통제하기 위해, Promise 객체의 resolve/reject 를 사용할 것이냐? async/await을 사용할 것인가이다.

참조: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

아직도 완벽하게 Promise라는 객체가 이해가 되지는 않았다. 하지만 일단 내가 이해한 바로 설명해보면,

Promise
객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

대기 중인 프로미스는 값과 함께 이행할 수도, 어떤 이유(error)로 인해 거부될 수도 있습니다. 이행이나 거부될 때, 프로미스의 then 메서드에 의해 대기열(큐)에 추가된 처리기들이 호출됩니다. 이미 이행했거나 거부된 프로미스에 처리기를 연결해도 호출되므로, 비동기 연산과 처리기 연결 사이에 경합 조건은 없습니다.

Promise.prototype.then()
 및 Promise.prototype.catch() 메서드의 반환 값은 새로운 프로미스이므로 서로 연결할 수 있습니다.

Promise.reject(reason): 주어진 사유로 거부하는 Promise 객체를 반환합니다.

Promise.resolve() : 주
어진 값으로 이행하는 Promise 객체를 반환합니다. 이때 지정한 값이 then 가능한(then 메서드를 가지는) 값인 경우, Promise.resolve()가 반환하는 프로미스는 then 메서드를 "따라가서" 자신의 최종 상태를 결정합니다. 그 외의 경우, 반환된 프로미스는 주어진 값으로 이행합니다.

※어떤 값이 프로미스인지 아닌지 알 수 없는 경우, 보통 일일히 두 경우를 나눠서 처리하는 대신 Promise.resolve()로 값을 감싸서 항상 프로미스가 되도록 만든 후 작업하는 것이 좋습니다.


참조: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise
async function

async function 선언은 AsyncFunction 객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise 를 사용하여 결과를 반환합니다. 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는것과 많이 비슷합니다.

async 함수의 실행을 일시 중지하고 전달 된 Promise의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료후 값을 반환합니다.

async/await함수의 목적사용하는 여러 promise의 동작을 동기스럽게 사용할 수 있게 하고, 어떠한 동작을 여러 promise의 그룹에서 간단하게 동작하게 하는 것이다.
promise가 구조화된 callback과 유사한 것 처럼 async/await또한 제네레이터(generator)와 프로미스(promise)를 묶는것과 유사하다.


async function foo() {
    return 1
}​

위 코드는 아래와 같습니다.

 

function foo() {
    return Promise.resolve(1)
}​


async 함수의 본문은 0개 이상의 await 문으로 분할된 것으로 생각할 수 있습니다. 첫번째 await 문을 포함하는 최상위 코드는 동기적으로 실행됩니다. 따라서 await 문이 없는 async 함수는 동기적으로 실행됩니다. async function의 반환값이 암묵적으로 Promise.resolve 로 감싸지기 때문이다. 하지만 await 문이 있다면 async 함수는 항상 비동기적으로 완료됩니다. 

참조: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction

 

요약해보면,

axios.post 는 return type이 Promise 이다.

Promise는 비동기적인 처리를 위해 사용되는 콜백함수의 에러, 예외처리의 어려움을 해결해준다.
그래서 Promise 객체는 resolve와 reject를 받아 처리한다. 
Promise 다음에는 then() 과 catch()를 사용한다 .
then() : 사용한 Promise 객체에서 인수로 전달한 resolve가 호출되면 실행된다.
catch() : 생성한 Promise 객체에서 인수로 전달한 reject가 호출되면 실행된다.

※ async & await 
- 비동기식 코드를 동기식으로 표현하여 간단하게 나타내는것.
- 코드가 장황환 Promise를 보완하기 위해 도입됨.
- Promise 객체를 반환한다.

- function 앞에 async 를 붙이면 해당 함수는 항상 Promise를 반환
- await 키워드를 만나면 Promise가 처리(settled)될 때까지 기다리고, 결과는 그 이후 반환

※ async & await  예외 처리
- try{ } catch(e){ } 를 사용함.

참조: https://hi-zini.tistory.com/entry/%EB%B9%84%EB%8F%99%EA%B8%B0%EC%A0%81-%EB%B0%A9%EC%8B%9D-%EC%B2%98%EB%A6%AC-%EB%B0%A9%EB%B2%95-Callback-Promise-async-await

결국은 Promise 객체가 이렇게 할거야 라고 해주는 객체. 그래서 약속을 지켜보는데, await를 써주면, 그 약속이 지켜지는지 모고 그 다음줄이 실행된다. 

나의 코드의 문제


 

actions 안에 getters 사용해보기

loginModule.js

import router from "@/router";
import axios from "axios";

const loginModule = {
    namespaced: true,
    state: {
        isLogin: false,
        loginEmail: "",
        loginName: "",
      },
    getters:{
      getUserInfo: state => state.isLogin,
    },
      mutations: {
        updateLoginStatus(state, { loginEmail, loginName }) {
          state.isLogin = true;
          state.loginEmail = loginEmail;
          state.loginName = loginName;
          localStorage.setItem("isLogin", true);
          localStorage.setItem("userName", loginName);
        },
    
      actions: {
        
        async signIn({ commit }, { loginEmail, loginPw }){
          // httpheader 에 authrization에 저장
          const res = await axios.post('/api/login/action',{ loginEmail, loginPw });
          if(res.data.isSuccess == true){
            var userName = res.data.userInfo.NAME
            await commit("updateLoginStatus", { loginEmail, loginName:userName });
            if(this.getters['loginModule/getUserInfo'] == true){
              router.push("/user/main")
            }
          }else{
            console.log('실패');
          }
        },
      },
}
export default loginModule;

store.js

import Vue from "vue";
import Vuex from "vuex";
import loginModule from "./loginModule";

Vue.use(Vuex);

export default new Vuex.Store({
   modules:{
    loginModule,   
  }, 
});
반응형

LoginView.vue

<template>
  <b-container fluid>
    <b-form @submit.prevent="loginAction()">
      <h1>Sign In</h1>
      <b-form-group
        label="Email"
        label-for="loginEmail">
        <b-form-input
          type="text"
          id="loginEmail"
          placeholder="Enter email address"
          v-model="loginEmail" />
      </b-form-group>
      <b-form-group
        label="Password"
        label-for="loginPw">
        <b-form-input
          type="password"
          id="loginPw"
          placeholder="Enter password"
          v-model="loginPw" />
      </b-form-group>
      <b-button
                
        variant="primary"
        @click="loginAction">
        Sign in
      </b-button>
      <p>
        Don't have an account?
        <router-link to="/signup">
          Sign up here
        </router-link>
      </p>
    </b-form>
  </b-container>
</template>
<script>
export default {
  name: "LoginView",
  data() {
    return {
      loginEmail: null,
      loginPw: null,
    };
  },
  computed: {
    loginStatus() {
      return this.$store.state.loginStatus;
    },
  },
  methods: {
    loginAction() {
      this.$store.dispatch("loginModule/signIn", {
          loginEmail: this.loginEmail,
          loginPw: this.loginPw,
        });
    },
  },
};
</script>

CommonLayout.vue

<template>
  <div>
    <nav class="header bg-warning">
      <div class="nav-right">
        <p>{{ loginName }}</p></div>
    </nav>
  </div>
</template>

<script>
export default {
  name: "BasicLayout",
  computed: {
    loginName() {
      return localStorage.getItem("userName");
    },
  },
};
</script>

 

내가 DB에 저장해둔 email로 로그인하면, 이렇게 DB에 저장해준 해당하는 이름이 출력된다!

 

반응형
반응형

다시 구성한 나의 로그인 시퀀스 다이어그램

반응형

일단, JWT를 굳이 왜 써야하는지 이해가 되지않았다.

도대체 어떤점이 session을 이용하는 것보다 더 좋길래 요새는 JWT를 쓰는건지 의문이 들었다.

왜냐하면, 어차피 JWT는 매번 api 호출을 할 때마다 Http header에 있는 authrization 에 Access Code를 넣어서 보내야하는데, 도대체 이 불편한 작업을 해가면서 왜 써야하지?

session은 원할 때 꺼내서 쓰면되는데... 라는 생각이었다.

 

아직 속시원한 답은 아니지만,

일단 header에 넣는 이유는 간단하다

 

이 요청이 누구에게서 온건지 모르지 않냐? 이다. 그래서 누구에게서 온 건지에 대한 정보가 JWT access code에 들어있기 때문이다. 

 

그리고, JWT를 사용하면 다른 서비스 (외부서비스 예를 들면, 카카오 로그인)을 손쉽게 사용할 수 있다. 왜? 걔네들도 token 을 이용해서 정보를 가져오거든. 그래서 그 token 을 우리가 JWT처럼 사용할 수 있는거다.

어떻게? JWT처럼 http header authrization에 넣어서!!!!

 

그리구, JWT를 사용할 거면 middleware 가 필요하다! 나는 spring boot를 사용하니, spring security가 middleware 가 될 것 이라고 한다. 하지만, 이것에 대해서는 좀더 공부해야한다.

 

그리고, 개발하면서 가져야하는 습관!!!

만약 안되는 로직이 있다면, 왜 안되는 것일까? 라는 의문을 가지고,

이래서 안되는 것일까? 라는 이론을 가지고 접근을 매번 해보자는 것이다.

 

처음에는 userName 이라는 곳에 res.data.NAME을 아예 넣어서 실험을 해봤었다. 그런데, 안되더라. 그래서 음... 직접적으로 데이터를 넣으면 안되는건가? 라는 생각에 변수에 담아서 변수를 넣었다. 그랬더니 작동을 하더라.

그래서 난 잘되었네? 하고 넘어갔다. 

하지만 여기서 왜 안됫다가 저렇게 하니까 된거지? 라는 생각을 가지고 접근을 했어야 한다는 거다.

결국 그 이유는 { } 이 안에는 map 이 들어갈 수 있다. 즉, key 와 value로 이루어진 애들이라는 거다. 하지만 value만 넣어버리면 당연히 안되엇겟지 

라는 이런 이론을 세우고 이야기를 해야한다는 것이다... 어렵다 증말ㄹㄹㄹㄹㄹ

 

하지만, 포기하지말자!!! 포기하는게 더 바보같은거니깐!!! 이렇게 배워가는거지 뭐....

vue 로 프로젝트를 끝내는 것은 못하고 로그인과 회원가입만 완벽하게 끝낸다면 정말 성공한 것이라고 생각한다. 그것만이라도 완벽하게 내것으로 만들어보자!

반응형
반응형

-크로스 플랫폼 앱

- 제작사 : 구글

- React Native와 쌍두를 달림. 

- 사용언어: 다트 (리액트 네이티브는 자바스크립트)

거두절미하고 시작해보자

1. 플러터 설치하기

플러터 SDK 다운받기

https://docs.flutter.dev/get-started/install?gclid=Cj0KCQjwgO2XBhCaARIsANrW2X39O3I9vdViWunk1ewoDTlwbh8B9rL47lCF9ef8GfSeQ8DOSigTkEoaAhEUEALw_wcB&gclsrc=aw.ds

본인의 OS에 맞게 설치하세요. 나는 Windows를 다운받겠슴둥https://docs.flutter.dev/get-started/install/windows

 

Windows install

How to install on Windows.

docs.flutter.dev

저기서 압축파일을 다운로드하세요!

압축파일을 다운로드 -> 압축풀기 ->
flutter/bin 를 환경변수에 추가해주기

환경변수에 추가해주면, cmd 창에서 flutter --version을 쳐보면 정보가 나온다? 그럼 잘 설정이 된거다!

 

 2. flutter doctor 

flutter doctor를 cmd 창에 입력하여 현재 플러터 관련 설치 상태를 진단하여 무엇이 필요한지를 확인해보자.

에러 해결위해!!

첫번째 에러, cmdline-tools component is missing

나는 원래 Android Studio가 깔려있었다. 그런데 flutter doctor가 못잡길래 검색해서 찾은게 Android Studio 에서 SDK 설정을 해줘야한다.

Android Studio의 SDK Manager에서 Android SDK Command-line Tools를 체크해주고 다운받아준 후 OK! 

그리고 잊지 않아야할 것은, Android SDK 가 환경변수로 잘 설정이 되어있는걸 확인하는 거!!

반응형

설정을 완료하고 다시 flutter doctor 실행했더니

 

처음 에러와는 달라졌다!!! Android toolchain부분을 보면 'Some Android licenses not accepted' 라고 나오고, resolve 하기 위해서는 flutter doctor --android-licenses 를 실행하라고하길래 해보겠다!

실행하면, Terms and Conditions 가 나온다. 모두 'y' 를 눌러줬다.

다시 flutter doctor를 실행해주니,

 

경로문제인 것 같다. 

그래서 보니 android-studio-dir 의 경로가 android-sdk 의 경로로 설정이 되어있었다. 그래서 android studio가 있는 dir로 변경해주었다.

flutter config --android-studio-dir="본인의 android studio가 들어있는 폴더 경로"

를 실행해주고 cmd창을 껏다 켜준 후에 다시 flutter doctor를 실행해주면 모든 에러가 사라진걸 발견할 수 있음!!!

오케이이이잉이that is what I was looking for yay

 

3. VS Code 연결하기

 

당연히 먼저 VS Code를 다운을 받아야겠쥬? 저는 이미 깔아있는 상태라 넘어가겠어유

이제, VS Code 를 실행해서, 저 블럭 모양의 아이콘을 클릭하세요!! 우린 extensions 즉, flutter를 VS Code에서 사용할 때 편하게 이쁘게 사용하기 위한 확장자들을 다운 받을 거에요!!

이게 안보인다면, View > command Palette 를 실행시켜 install 을 입력한 후 아래에 Extensions: install Extensions 를 클릭!!!

무엇을 받을 거냐!!

dart, flutter, prettier

 

Flutter 를 사용할 준비 끄읏!

반응형
반응형

Android Studio 를 이용해서 QR코드를 읽어 DB작업을 수행하는 앱을 만들어야한다.

이 작업만 수행하는 어플을 하나 더 추가적으로 만드는 것이다. 즉, 단순한 QR만 읽어내는 앱만 만들면 끝나는거다.

( + 회사에서 이미 이전에 작업해서 사용한 코드는 존재한다)

 

단시간에 만들어내야하다보니, 난 이 안드로이드 스튜디오를 처음부터 끝까지 공부할 필요는 없다. 그런데, 난 그렇게 하고 있었다..... 기초가 중요하다면서....

 

그러다가 결국엔 못만들고 넘어갈 것 같았다. 혼자 3일? 정도 어떻게 공부하면 좋을까 하면서 기초를 두들기고 있다가 도저히 이건 아닌것같다는 생각이 들어서 팀장님께 물어봤다.

 

브레이크포인트 찍기!!!

이미 코드는 만들어져있으니, 그 프로젝트를 break point를 찍어가며 debugging을 해서 어떤게 어떻게 담기는지 보면서 이해하라고 하셨다.

 

역시, 물어보기 잘햇어.... 그래서 방금 그런식으로 debugging 했더니, 어느정도 틀이 잡히는 느낌이 들었다.

 

빨리 만들어야하고 이미 코드가 있다면!!! 디버깅을 찍어가며 흐름을 파악해봐라!!! 

반응형

디렉토리도 이상하게생겻어.....ㅜㅜ

반응형
반응형

 이미 진행중인 회사 프로젝트는 작업해둔 안드로이드 파일이 존재한다.

그래서 그 아이를 먼저 이해하고 새로운 기능을 추가하려고한다.

그러기위해 기본적인 흐름을 이해해보고자 기본 구성과 기능을 알아보려고한다.

공식사이트: https://developer.android.com/guide/components/fundamentals

 

              App component              

  • Activities
  • Services
  • Broadcast receivers
  • Content providers

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=myshyz&logNo=50133779484

이 component 들이 생성이되고, destroyed 되는지 알아보자!

              Activities              

 

- 사용자와 애플리케이션과 상호작용을 담당하는 인터페이스 +  entry point!
- 애플리케이션은 반드시 하나 이상의 액티비티를 포함하고 있음
생명주기(Life Cycle) 관련 메서드들을 재정의하여 원하는 기능 구현 가능
- Activity 내에 Fragment를 추가하여 화면을 분할 가능

 

             Service             
- 백그라운드(Background)에서 어떠한 작업을 처리
- 메인 Thread 에서 동작하기 때문에 서비스 내에서 별도의  Thread를 생성하여 처리 필요
- Background에서 수행되기때문에 별도의 UI를 가지지 않음
- 애플리케이션이 종료되어도 이미 시작이 된 Service는 Background 에서 계속 동작
- 예) 
모바일 게임을 하는 중에 동시에 유튜브 앱을 사용할 때

 

             BroadCast Receiver (방송 수신자)             
- 안드로이드 OS로부터 발생하는 각종 이벤트와 정보를 받아와 핸들링
- 사용자 디바이스의 네트워크 끊김 등 특수한 이벤트에 대한 처리때 동작
- 알림, 문자 수신 정보를 받아 처리를 해야할 때 동작
- 대부분 UI를 가지지 않음
- 안드로이드 디바이스의 특수한 상황에 대응하기 위해 사용됨
- 예) 메신저앱에서 메시지가 오면 모든 앱에 "메시지가 왔다"라는 하나의 정보를 BroadCase함
                     Content Provider (콘텐트 제공자)                     
- 데이터를 관리하고 다른 애플리케이션의 데이터를 제공하는데 사용
- 애플리케이션이 사용하고 있는 DB를 공유하기 위해 사용
- 애플리케이션 간의 데이터 공유를 위해 표준화된 인터페이스 제공
- 작은 데이터들은 Intent 로 애플리케이션끼리 데이터를 서로 공유 가능하지만, 용량이 큰 데이터를 공유할 때는 Content Provider 가 적합함
- 데이터의 Read(읽기), Write(쓰기)에 대한 permission (허용)이 있어야 애플리케이션에 접근이 가능

 

             Intent (인텐트)             
- 애플리케이션 컴포넌트(구성요소) 간에 작업 수행을 위한 정보를 전달하는 역할 즉, 통신수단
- 액티비티 간의 화면 전환(이동) 에 가장 많이 사용
- 서로 독립적으로 동작하는 4가지 컴포넌트들 간의 상호 통신을 위한 장치

참조: https://velog.io/@jojo_devstory/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-Android-4%EB%8C%80-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

반응형
반응형

매번 혼나는 부분!!!!! 이자 나의 취약점인 것 같다...

만약 내가 JWT를 이용해서 로그인에 대한 관리를 하겠다. 라고 한다면, 그 JWT를 이용해서 어떠한 흐름으로 내가 관리를 할 것인지 미리 생각을 해두고 작업을 시작해야하는데....

일단은 그래 JWT 를 이용한 로그인에 대해서 이론적으로 공부를 한다. 하지만? 그 공부가 완벽하지 않은거다.

나는 내가 어느정도 안다고 생각하고 코드적인 부분으로 넘어가는 경향이 있는데, 내가 아는게 아는게 아니다!

그러면, 어떻게 내가 이걸 극복할 수 있을까? 라고 생각해보면 답은

 

이해한 큰 흐름의 sequence diagram 을 그려보고, 물어보는 것 이다.

 

물어보는 것에 대해 두려워하면 안된다!!!

결국, 신입에게 회사란 키워주는 입장이다 안타깝게도. 그러다보니, 신입은 최대한 빨리 클 수 있게 나보다 경력이 많은 사람들의 도움을 많이 받아야한다는거다! 괴롭히면서라도 빨리 성장한다면, 그게 회사가 신입에게 투자한 값어치를 뽑아낼 수 있는 방법 중 하나라고 생각이 든다. 그래서 최대한 빨리 물어봐서 빨리 습득해서 실전에 내가 쓰일 수 있는 경우의 수가 많아질 수 있도록 노력해야한다.

 

망한 로그인 sequence diagram....

 

여기서의 오류는, 3. HttpServletRequest 에 JWT가 존재하는지를 체크한다. 부분이다.왜 HttpServletRequest 에 JWT가 존재하는지를 체크하냐는 질문에 나는 말문이 또 콱 막혀버렷다....ㅠㅠ 대답을 할 수 없었다는 말은 결국엔 JWT에 대한 공부가 정말로 내것이 되지않아서 라는 말밖에는 설명이 되지 않는다. 나는 localStorage에 저장하기로 했으니, JWT가 존재한다는건 localStorage에 저장이 되어있는지만 확인하면 되는것이라고 했다.

 

 

칼국수 나왓으니 짠🥂회무침 나왓으니 짠🥂수육 나왓으니 짠🥂

 

헤헷😊여기서의 하이라이트는 저 찹쌀생주!!!!! 🤞 JMTGR

반응형

+ Recent posts