IT 공부

새로운 프로젝트 생성 rails new 정상적으로 생성이되면, 위와같은 파일들이 생성이 된다. 중요한 App폴더와 config폴더에 대한 설명을하자면, App폴더 Ruby on Rails는 MVC디자인을 사용하는데, App폴더안에 Model, View, Controller 폴더가 들어있는 것을 확인할 수 있습니다. config폴더 Ruby on Rails를 사용하는데, 또 중요한 Routes파일이 config에 위치해있습니다. 서버실행 rails server 로컬서버인 localhost:3000으로 가보면, 위의 사진과같은 메인 Ruby on Rails 화면이 나오면 성공입니다. MVC구조로 라우트 하는법 config/routes.rb Rails.application.routes.draw do # For..

설치 Windows환경에서 Ruby on Rails를 설치할려면 꾀나 복잡한 과정이 필요 1. node.js 설치 nodejs.org 공식 싸이트가서 설치 2. yarn 설치 npm install --global yarn 3.sqlite3 설치 https://www.sqlite.org/download.html 위의 사이트에서 windows 부분에 총 3가지 파일이 있는데, 위의 2개는 32bit와 64bit버전이니 자신의 컴에 맞는 환경을 받으면 되고, 3번째꺼는 무조건 다운을 받아야합니다. 두개의 파일을 다 받으면 5개의 파일이 나오는데, 그것을 c:/windows/System32 폴더에 복사를 해줍니다. 4. ruby설치 rubyinstoller.org 공식 사이트에서 다운 5. gem을 이용해 sq..

Modal popup을 이용해서, 새로운 그룹 추가를 합니다. 우선 모달창을 사용하기 위한, 기본 CSS가 필요합니다. modal창 부분의 흰색과 너비, 패딩등을 설정, 배경부분은 어두워지도록 CSS한 것 입니다. ToDoList.vue > 모달을 사용하기 위한 기본 원리는 토글로 클릭 될 때마다, 해당 요소가 보이게 했다가 안보이게 했다가 그래서 모달부분을 감싸는 div태그에 v-if문을 사용해서 modal_is_state가 true면 보이도록 false면 안보이도록 Modal창 켜기 모달창은 Nav에있는 그룹생성을 클릭하면 보여지게 됩니다 . Navbar.vue グループ作り 그룹생성 div를 @Click이벤트를 이용해서 clickModal함수를 실행시킵니다. clickModal() { this.$em..

Navbar는 화면의 좌측에 위치하여, 간편하게 카테고리를 선택할 수 있도록 도와줍니다. 카테고리에는 전체, 중요, 그룹별, 패턴별이 존재합니다. 그리고 그룹을 생성할 수 있는 버튼도 존재합니다. 그룹 / 패턴 DropBox 그룹 {{ Group.group_name }} Group with selects 그룹은 메인 컴포넌트에서 그룹명을 받아온 것을 이용해 v-for를 이용해 select dropbox form을 사용합니다. 패턴 {{ value }} Pattern 패턴은 매일, 요일별을 array로 만들어 v-for과 select dropbox form을 이용했습니다. 카테고리 변경 함수 全体 重要 전체과 중요카테고리는 div박스에 @Click 이벤트를 이용해서 changeCategory라는 함수를 실..

작성한 To Do에 더욱 상세한 설명을 추가하거나, 패턴 / 마감일등을 추가할 수 있는 기능이다. 해당 To Do 불러오기 우선 상세설정을 하기 위해서는 이전글에서 만들어둔 Detail 화면에서 상세설정이라는 버튼을 누르면 됩니다. ToDoDetail.vue 詳細設定 위의 코드가 상세설정 부분의 코드인데, @Click 이벤트로 redirectToDataSet이라는 함수를 실행시킨다. 파라미터로 toDo 데이터를 같이 보내는 것을 확인 가능 redirectToDateSet(data) { this.$emit('ShowSetDetail', data) }, redirectToDataSet함수에서는 $emit을 통해서 ShowSetDetail이라는 함수이름으로 파라미터로 받아온 toDo데이터를 다시 파라미터로 부..

To Do 목록을 클릭했을 때, 해당 To Do의 Title과 상세내용 및 생성날짜, 마감일등을 확인할 수 있다. 그리고, 완료/복구 처리, 상세내용 수정이 가능하다. ToDoView.vue {{ toDo.title }} ToDo를 보여주던 ToDoView.vue의 div를보면 @Click 이벤트로 onClickToDetail()함수를 볼 수 있다. 이 함수가 목록을 클릭했을 때, Detail화면을 보여주도록 해주는 기반의 함수가 된다. onClickToDetail(data) { this.$emit('onClickToDetail', data); }, onClickToDetail함수는 해당 To Do 데이터를 파라미터로 받아서 부모 컴포넌트로 onClickToDetail이라는 함수로 $emit으로 보냅니다..