개인프로젝트 1-4 화면구성

Vue.js 구성 및 동작 원리를 잘 몰라서 간단히 공부할 필요가 있었다

그치만 아키텍쳐 위주로 프로젝트를 진행하는 거라 내부 프론트 백 코드를 상세하게 짚고 간다기보다는 목표로 한 서비스를 빠르게 만들 수 있을 정도로만 훑었고 아래 글들에 설명이 잘 되어있었다.

 

🔗 재그지그의 개발 블로그 - Vue 라이프사이클 이해하기

https://wormwlrm.github.io/2018/12/29/Understanding-Vue-Lifecycle-hooks.html

 

🔗 개발자의 품격 - 한 시간만에 끝내는 Vue.js 입문

https://www.youtube.com/watch?v=sqH0u8wN4Rs

 

🔗 워냐의 개발일기 - vue 모바일 웹 설정

https://wonya-dev.tistory.com/9

 

🔗 npm run build시 파일 구성

https://blog.naver.com/emmaeunji/221772750974

 

스타일링 : BootstrapVue

*vuetify를 써보려했는데 아직 unstable한 것 같다.

BootstrapVue

 

<!-- Login.vue -->
<template>
  <div class="container d-flex align-items-center justify-content-center" style="height: 100vh;">
    <b-card class="text-center p-4" style="max-width: 400px;">
      <h3 class="mb-3">로그인</h3>
      <b-form @submit.prevent="onLogin">
        <b-form-group label="ID" label-for="input-id">
          <b-form-input
            id="input-id"
            v-model="id"
            type="text"
            placeholder="아이디를 입력하세요"
            required
          ></b-form-input>
        </b-form-group>

        <b-form-group label="비밀번호" label-for="input-password" class="mb-3">
          <b-form-input
            id="input-password"
            v-model="password"
            type="password"
            placeholder="비밀번호를 입력하세요"
            required
          ></b-form-input>
        </b-form-group>

        <b-button type="submit" variant="primary" class="w-100 mb-3">로그인</b-button>
        <b-button variant="secondary" class="w-100 mb-3">회원가입</b-button>

        <hr />

        <b-button variant="warning" class="w-100" @click="onKakaoLogin">
          <i class="fab fa-kakao"></i> 카카오톡으로 로그인
        </b-button>
      </b-form>
    </b-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      password: ''
    };
  },
  methods: {
    onLogin() {
      // 로그인 로직 구현
      console.log("ID:", this.id);
      console.log("Password:", this.password);
    },
    onKakaoLogin() {
      // KakaoTalk OAuth 로그인 로직 구현
      console.log("카카오톡으로 로그인");
    }
  }
};
</script>

<style scoped>
/* 로그인 화면 스타일을 추가할 수 있습니다 */
</style>

 

다행히 학부 때부터 내가 너무 귀찮아했던 부분들을 이제는 chatgpt가 다 해준다. 이런건 빨리 해결해버리고 아키텍쳐에 집중하고싶다. 

일단은 리퀘스트를 처리하는 서버를 EC2에 올려두고 로그인 기능을 처리하도록 하고, 그 다음으로는 람다로 처리해보려한다.

디자인은 전혀 신경을 안 써서, 일단 chatgpt가 만들어준 화면은 이렇다 ^_^

 

 

진짜 구리당 풉

그래서 귀여움