조금만한 개인 프로젝트 준비 하기 위해 과정을 조금 설명해보려고 합니다.

1. 어떠한 플랫폼으로 준비 할것인가 (제일 중요한것 같네요)
2. 타켓층을 어떻게 잡을 것인가? (ex: 나이, 성별 등등)
3. 어떠한 기능들을 준비해야될 것인가?

크게 보면 이렇게 3가지 라고 생각합니다. 저는 처음 기획할 때 방법은 육하원칙처럼 육하원칙 처럼 내가 남한테 설명할 방법으로 간단하고 기획을 짤수 있다고 생각합니다. 기초적이라고 하지만 절때 쉽지는 않습니다.!!

"내가 어떠한 플랫폼으로 이러한 타켓층을 잡을거고 이러이러한 기능으로 편리하게 사용하게 할것입니다."

이렇게 적으니깐 위에 3가지 방법이 아주 간단하게 만들어지죠 ~ 기획은 짤수 있지만 쉽게 되진 않아요...ㅠㅠ 몇번이건 계속 살펴보고 이거 맞는지 저게 맞는지 확인해보고 머리속에 그림 그리면서 만들어 보는 것을 추천합니다 ㅎㅎ

이것 저것 준비하니 벨로그도 잘 못 쓰고 있었네요 ㅎㅎ;

아무튼 오늘 비온다하니 다들 빗길조심하시고 ~~

오늘도 화이팅입니다 !

오늘은 v-for문 공부한거 조금 적어보려합니다.

바로 적어 보겠습니다.

<template>
  <q-page class="bg-white text-black q-pa-md">
    <div v-for="item in  userDtoList" class="full-width">
<!--      <div>{{item}}</div>-->
      <div>id : {{item.id}} name : {{item.name}}</div>
<!--      <div>{{item.books[0].id}}{{item.books[0].name}}</div>-->
      <div v-if="item.name != '김'" v-for="book in item.books">
        <div v-if="book.name !=''">{{book.name}}</div>
      </div>
      <hr/>
    </div>
    <div>
      {{this.iteration(userDtoList)}}
    </div>
  </q-page>
</template>

<script>
  export default {
    data(){
      return{
        userDtoList : [
          {id : 1, name : "김", books :[
              {id : 1, name : "맥심"},
              {id : 3 ,name : "html의 이해"},
              {id : 4 ,name : "css에 대하여"},
            ],
          },

          {id : 2,name :"박",books: [
              {id : 1,name :"맥심"},
              {id : 3 ,name : "html의 이해"},
            ]
          },
          {id : 3, name : "최",books :[
            {id : 2,name :"이더리움"},
            {id : 5,name :"비트코인"},
            {id : 6,name :"비트토렌트"},
            {id : 7,name :"도지코인"},
            ]
          }
          ]
        ,
      }
    },

    name: 'Main',
    computed:{
      ...mapGetters([
        'getLayout'
      ])
    },

    methods:{
      ...mapMutations([]),
      ...mapActions([]),
      iteration(items){
        for (let i =0 ;i<items.length ;i++){
          console.log(items[i]);
        }

        for(let item of items){
          console.log(item)
        }
        for(let item in items){
          console.log(item)
        }

      }
    },
  }
</script>

보시면 간단한 예제 입니다. ㅎ

id 뭐고 name이 뭔지 알수 있습니다. 하지만 books 같은경우 한번더 v-for을 돌린 이유는??

배열 안에 배열이기때문에 v-for문을 돌려서 적은 겁니다.

잘보면 간단하다 생각을 할수도 있지만.. 초보라..; 헷갈려요 아직 ㅋ...

v-if는 왜썼냐 하실수도 있지만 v-if는 어느 부분을 안보여주려고 사용한 것입니다. 나중에 기호?? != || == 등등 이러한것을 한번 설명 글 써보겠습니다 ㅎㅎ

2번재는 구구단 입니다. v-for문을 사용 하여 만들어본 구구단입니다.

<template>
  <q-page>
    <div>
<!--      v-for문 한번 타이핑 하기.-->
<!--      <div v-for="(dan,index) in number([])">-->
      <div v-for="(dan,index) in 9">
<!--        <div v-if="dan !=1 " v-for="number in 9">-->
<!--          <div>{{dan}} x {{number}} = {{dan * number}}</div>-->
<!--        </div>-->
        {{index+=1}}
        <div v-if="index % 2 ==0" v-for="number in 9">
          <div>{{dan}} * {{number}} = {{dan * number}}</div>
        </div>
        <hr/>
      </div>
    </div>
  </q-page>
</template>

<script>
  export default {
    data(){
      return{
        dan :[]
      }
    },
    methods:{
      number(num){
        for(let i =4; i< 10;i+=1){
          num.push(i);
        }
        return num;
      }
    }
  }

</script>

<style scoped>

</style>

2가지 방법으로 사용 했는데

주석 친곳은 메소드를 이용하여 만든 내용입니다.

첫번째 설명을 조금 이해하면 바로 구구단도 가볍게 사용하실수 있다 생각합니다..

오늘은 여러 작업들이 많아 짧게 적어봤는데요. 다음에 반복문을 가지고 설명 한번 드려보겟습니다 ㅎㅎ

(서울) 비오는데 빗길 조심하시고 오늘도 화이팅 하세요 !

• 사용하고 있는 툴

1. Intellij
2. Vue.js
3. Quasar

저는 이렇게 사용하고 있습니다 ~

Intellij는 설정 따로 잡을 것 없이 바로 사용 하고 있고 vue.js는 Quasar 바탕으로? 라고 생각 하고 있습니다.

기본?기초?적인 것이지만 적어보는 것도 기억하기 좋기에 적어봅니다 ~!

툴은 각 사용자마다 다르기에 바로 Vue,Quasar로 넘어가겠습니다.!

**Node,JDK 등등 환경변수 설정 했다는 과정하에 적습니다. (그레이들 나빠요 참고)

1. vue.js 사용

• 툴(intellij 등등) Plugin에서 vue.js 설치 하서야합니다. (간단하쥬~)

2. Quasar CLI

• Quasar홈페이지로 이동합니다. (https://quasar.dev) 밤하늘에 별이 돌아가는 것 같아서 좋아요 ~ (아무생각없이 30분동안 본적도...)

• 화면에 Get Started로 클릭하여 들어갑니다. 으악 영어다 ... 이렇게 생각하지말고 크롬은 한글 지원이 되요! 화면에 마우스 우측 클릭후 T 눌러주면 한글로 변경 됩니다.

• 좌측 카테고리에 Quasar CLI 들어갑니다. 카테고리에 보면 몽키스페너? 찾으시면 쉽습니다. Quasar CLI -> Installation 들어가시면 설명이 아주아주 잘나와 있지요 ㅎ 이렇게 나와있습니다.! 뷁뿕뺠뜍뤡 이건 뭔말이지.. 하지말고 한글 번역! ㅎㅎ

• 설치 방법 CMD 로 이용하여 저는 설치 할겁니다 ~!

• **yarn 같은 경우는 따로 Npm yarn을 설치 해야됩니다.

1. npm install -g @quasar/cli
2. quasar create 폴더이름
3. quasar dev

세가지가 끝입니다. 간단하죠 ? 라고 생각 하면 안되죠 CMD에 아직 안했으니깐요 ㅎㅎ 이제 CMD를 열어주세요!

저는 로컬D로 지정해서 폴더를 만들 겁니다. *중요 1번은 로컬C에 기본적으로 설치 해야됩니다.

(npm install -g @quasar/cli 는 C로컬에 설치!)

(제 정보가 있어 쭉내렸어요 이해 부탁드려요 ㅎ;)

CMD에 npm install -g @quasar/cli 설치 해주세요! (꼭!! C로컬에 해주세요!) 설치가 진행중입니다. 잠시만 기다려주십시오.

완료가 되었으면 이렇게 나옵니다 ~ 간단하죠?

다음 폴더를 설정 해야되는데 어디에 저장 할 위치로 이동하시면되요 !

• 로컬이동 c: 또는 d:
• 폴더이동 cd 폴더명
• 하위 폴더이동 cd..

저는 로컬 D에 저장 이렇게 quasar create test123 <폴더 이름 정합니다.

1 ↘ 엔터를 누르게 되면

• 프로젝트 이름
• 프로젝트 프로덕트 이름
• 프로젝트 디스크립션
• 작성자

이렇게 구성이 됩니다. 저는 기본으로 잡겠습니다

이제 내가 사용할 설정?기능? 을 잡아야되는 부분 입니다.

저의 순서

방향키 = 선택 엔터 = 적용 스페이스 = 체크

• Sass with SCSS syntax 엔터
• Import everything from quasar 엔터
• ESLint 체크해지 Vuex,Axios,Vue-i18n,IE11 support 체크
• Yes. use NPM 체크 (yarn 은 1번째)

2 ↘ 3 ↘ 4 ↘ 5↘ 6↘

이렇게 사용하시면 폴더 생성 완료 ~ 짜라란! 완료된것을 확인 하는 방법은

1. 툴을 사용해서 파일을 열어보는 것
2. CMD에 quasar dev 적어보시면 됩니다.

저는 개인적으로 1번을 추천드립니다.

완료 되어 잘 작동 합니다 ㅎㅎ

하나더 확인하면

터미널에 quasar dev 을 적어보시면 됩니다.!

CMD에서 안되는 분들은 파일 열어서 터미널에 적어보시는 것을 추천 합니다 !!

이렇게 진행 되면 딱 되면 이렇게 됩니다 ㅎㅎ 맨아래 것은 웹으로 연동 된것입니다 ~

기초? 라고 말하기보다 막상 보면서 하면 쉽지만 외우지 않고 하기때문에 항상 잔업이 생긴다 생각합니다. 사실 한 프로젝트 만들면 바로 또 만들지 않아 까먹는게 정상이죠 ~ 처음 하는 분들에게 조금이나마 도움 됬으면 해서 적는 개..발. 초짜 입니다 ㅎ

오늘 하루도 화이팅 하세요 !

그레이들(그리들) 1탄 이어서 작성 할께요.

1. 그레이들(그리들) 설정

• 안드로이드 스튜디오 프로젝트를 열면 이렇게 파일이 열릴겁니다. (왼쪽 Project로 되어 있는 거는 제가 변경 해서 그런겁니다~)

• 우측 상단에 있는 폴더와 테테리스? 같이 있는 모양인 icon을 클릭 해주세요.

• 창이 뜨면 처음 Project로 처음 시작할겁니다. Android Gradle Plugin Version 과 Gradle Version은 프로젝트에 맞게 사용 하시면 됩니다!

• 좌측 카테고리 보시면 SDK Location을 클릭 해서 이동해줍니다.

• **여기서 중요합니다. 안드로이드 SDK가 설치 되어 있는 경로로 되어 있어야만 됩니다. C로컬이라 했을때 ex) c:\User\유저이름\AppData\Local\Android\Sdk 입니다. (맥은 제가 잘모르기에............하하)

이렇게 하면 기본적인 설정은 끝난겁니다. Android Gradle Plugin Version 과 Gradle Version은 저는 개인적으로 Plugin : 4.1.2 Gradle : 6.5 를 사용합니다 이유는 해봤을때 제일 잘되고 뭔가 안정적으로 잘돌아 가는 느낌이 들어서 입니다.

그 외 "나는 설정을 했는데 안되요... 하.." 그러실경우 Gradle 폴더를 지워주시고 위에 방법중 Project안에 Android,Gradle 버전을 Plugin : 4.0.0 gradle : 6.1.1 설정 해주시고 설치가 끝난 후에 다시 Project에 맞는 버전으로 설정 해서 Apply,OK 해주시면 됩니다. ㅎ

Gradle은 여러 문제가 많다고 얘기하는데 저도 처음 할때 Gradle때문에 4~5시간을 헛고생 한적이 많았습니다.

다들 "아 이거 왜안돼냐_- 하 짜증나네" <-- 100프로 공감합니다 ㅎ... 왜냐면 저도 초보이자 신입 개발자이거든요 ㅋ.. 노트북,본체 문제이네 라고 생각하고 지내요 ㅋㅋ (사실 내 잘못...)

3줄 요약

1. 환경변수 및 파일 경로
2. Plugin,Gradle 버전 확인
3. 사용 버전 확인할것.

도움이 많이는 안되시겠지만 미세먼지만큼 도움이 되었다면 저는 성공한거라 생각합니다 ㅎ

오늘도 화이팅 하시고 코로나조심!

저번에 이어서 그레이들(그리들)을 이어서 좀 설명좀 하려고 합니다.

글로만 보기에 저도 이해가 안되는 부분이 많아 사진과 같이 설명 드리겠습니다~

1. 환경 설정

• 시스템 변수에 안드로이드 JDK SDK 설정을 잡았습니다.

• 위 사진 2개 처럼 3가지만 변경 해주었고 다른 부분은 변경 하지 않았습니다.

1-1 Path 설정

• JSK와 Android-tools 세팅을 해줬습니다. 안드로이드 tools설정은 어떻게 하나요는 보시다보면 설명 드립니다 ㅎ..

2. Android SDK 설정

• 기본적으로 처음 시작 했을때 화면입니다. 우측 하단에 Configure 클릭하여 SDK Manager를 들어가주세요 ~

• 들어오면 기본 첫 화면입니다. (하늘색은 화이트 모드 다크모드 변경할수 있어 넣어놨습니다.) 빨강색 부분인 Android SDK 클릭 해주세요.

****혹시나 해서 말씀드리지만 SDK 설정이 제가 맞는게 아닐수 있으니 꼭 개발에 맞는 설정으로 잡아주세요!!!!!!

• **중요 포인트 Android SDK Location : 경로 나오는데 이것이 환경변수에 ex) ANDROID-HOME 변수값에다 넣어줘야됩니다 !!

• 사용 버전을 체크해주면 되는데 저는 8~11버전까지만 체크 하였습니다.

• SDK Tools를 누르고 제 설정 그대로 하셔도 되지만 꼭 맞게 설정해주세요 (저는 그냥 몇가지 빼고 다 체크했습니다.) 오른쪽 하단에 보시면 Show Package Details 체크하시면 세부적으로 나옵니다.

• 이렇게 세부적으로 나오고 저는 Android SDK build-Tools 31-rc3 빼고 아무 것도 체크 하지 않았습니다. ㅎ 28~30.0.3 까지 체크!

설정이 끝나셨으면 OK 또는 Apply로 해주세요.

!! 시간이 너무 걸려서... 기본 세팅만 바로 잡고 내일 이어서 2탄 적을께요 ..ㅎ;

확실히 사진이 잇으니 보기 편하네요 ㅎ

내일 와서 이어서 그리들 설명 하겠습니다 ~!!

화이팅!

자주 백업을 하여 다행이 다른 노트북으로 이동하는데 무리가 있네요 !!!! 무려 4시간^..^;.. 이것 저것 파일들이 많아서 파일 옴기는데 많이 걸렸고 서론도 길었네요ㅎ

백업을 하면서 자주 생기는 문제가 저는 gradle이라 생각합니다.(지극히 개인적인 생각)

처음에 세팅도 그렇고 새로운 직원분들 오시면 알려주고 세팅해주는데 항상 gradle이 문제 (왜냐!? 저는 cordova를 사용하기에 gradle 문제 많이 발생합니다.)

설정은 아래

뚜둥! 문제 체크 할 부분

1. 환경 설정을 하엿는데 안된다.

• 경로가 맞는지 우선 확인하것!
• 로컬(저장공간)에 이름이 다르지 않은가!
• path와 시스템 변수에 잘 적용 했는가!

2. JDK가 있는지 확인 !

• cmd 사용하여 java -version 을 입력 잘뜨면 잘되어 있는 것!
• *중요 별 7천개 (저는 JDK 버전 체크까지 했는데 안드로이드 스튜디오에서 못잡아요... 이제 3번 부터 잘따라 하시면 됩니다.)

3. SDK 설치 하였는가 또는 버전을 몇까지 하였는가?

• 개인적으로 8.0(oreo) 부터 저는 최신까지 버전을 받습니다.
• Tools 는 잘 설정 되어 있는가 (AMD 사용자는 AMD Processors를 설치했는가)
• Android SDK Location의 경로를 환경 변수랑 맞게 설정 했는가? **중요(별 7천만개 진심) ex) 내 SDK 경로가 정확한지 확인. c:\User\유저네임\AppData\Locl\Android\Sdk (D에 적용하신분들은 금방 찾을 수 있습니다.)
• 환경 변수 path에 tools를 적용 해주었는지 확인할 것! JDK만 환경변수 설정 하면 SDK는 자동으로 되지 않습니다 ! 꼭 환경변수에 SDK 넣어 줘야됩니다!

이렇게 해야 기본세팅이 된겁니다. 글로 쓰니 참 길다라 생각이 드네요.

숨좀 고르고 다시 합니다 !

4. 전부 설정을 하였으면 안드로이드 아무 프로젝트를 실행 시킵니다.

• 우측 상단쪽에 보시면 폴더와 테테리스?블록이 같이 되어 잇는게 보이실겁니다. (안보이시면 일단 코끼리 왼쪽으로 2칸 가시면 보입니다.)

• 클릭을 하게 되면 Gradle Plugin Version 이라 있는데 4.0.0으로 먼저 잡고 gradle버전은 본인 프로젝트에 맞게 설정 잡으시면 됩니다.

• 저는 세팅도 되어 있고 gradle도 6.X 버전으로 되어 잇는데 안됩니다.

**제가 생각 해도 이부분이 제일 많다고 느낍니다. 이때 내 Android Gradle Plugin Version이 4.1.3 4.2 이면 4.0.0 으로 내리시고 Apply 누르신다음 OK 꾹~클릭! 그러면 Gradle을 설치 완료를 기다리신 후 본인의 Android Gradle Plugin Version을 4.X.X으로 변경 후 Apply -> OK를 해주면 끝!

제가 여러 방법 중 제일 빠른 방법이고 쉬운 방법인 것 같아 알려드린겁니다 ㅎㅎ (사실 저도 어제 이것때문에 잠시.. 하하 웃지요) 이거는 2탄으로 해서 사진으로 한번저 작성 예정입니다. 왜냐? 저도 이미지로 보는게 제일 좋아서요 ㅎ

제 방식이 맞을 수도 있지만 아닐 수도 있습니다. 저의 경험이니깐 맞다고 생각하는 것 뿐입니다 !

오늘의 교훈.

1. 백업 잘하자...
2. gradle 나빴어요.
3. 내책임 아님 컴퓨터&노트북 책임임이라 생각하지말기...
4. 꼭 SDK 경로와 환경변수 잘 체크 하자!

느낀점

작업을 올려야되는데 못올린 아픈점. 아예 모르는 사람들도 쉽게 알수 있는 방법을 찾아보고 알려주고 싶다.