Spring

Server

Library

DATABASE

GIT

백준(Java ver)

SQLD

자바 Spring

자바

웹페이지

안드로이드

빅데이터

정보처리기사 통합 퀴즈

정보처리기사 실기

정보처리기사 필기

Vue.js 3.0 STEP 7 - TodoList 리팩토링

★ 컴포넌트 분할과 정의 재사용성, 테스트 용이성, 디버깅 편의성 등을 고려해 컴포넌트를 분할하는 것을 권장하고 있다. 한 번에 변경되는 데이터를 렌더링하는 UI 단위로 컴포넌트를 분할하는 편이 좋다. 데이터가 변경되는 단위로 컴포넌트를 세분화하면 해당 컴포넌트만 다시 렌더링하고 나머지 컴포넌트는 다시 렌더링 하지 않게 되어 보다 좋은 렌더링 성능을 제공할 수 있게 된다. 특히 반복 렌더링하는 부분은 반드시 별도의 컴포넌트로 작성하는것이 좋다. ■ 관리해야 할 데이터 todo는 InputTodo 컴포넌트의 로컬 데이터로 정의한다. 왜냐하면, 데이터가 관리할 만큼 중요하지 않으므로 데이터의 생명주기 관리가 필요하지 않기 때문이다. { todoList : [ { id : 1, todo : "자전거 타기", ..

Vue.js 3.0 STEP 6 - 단일 파일 컴포넌트

★ 단일 파일 컴포넌트 단일 파일 컴포넌트는 컴포넌트 하나를 .vue 파일 하나에 작성하기 때문에 붙여진 이름 한 파일에 컴포넌트 구성을 위해 템플릿, 스크립트, 스타일 정보를 모두 포함하기 때문에 컴포넌트 단위로 분리 가능 Vue 애플리케이션을 개발하기 위해서는 Webpack, Rollup 과 같은 모듈 번들러 도구와 ES6, TypeScript와 같은 트랜스파일러를 함께 사용하도록 개발 프로젝트 환경을 설정해야 한다. 1. 프로젝트 설정 도구 1.1 Vue CLI 도구 Webpack 기반의 Vue 공식 프로젝트 설정 도구였다. 하지만, 이 방법은 프로젝트를 생성하고 구동하기까지 다소 긴 시간이 소요가 된다. 또한, 번들링 과정을 거쳐야하기 때문에 작성한 코드를 테스트하기에 조금 긴 시간을 기다려야 한..

Vue.js 3.0 STEP 5 - TodoList

★ TodoList 할일을 적고 해당 사항들을 수행해 나가는 List Step1 ~ Step4에 대한 내용을 가지고 해당 기능을 개발 1. 기본 UI 개발 큰 틀 잡기 :: Todolist App 본문 내용 삽입 추가 할일 1 (완료) 삭제 할일2 삭제 할일3 삭제 2. 데이터와 메서드 정의 [ 데이터 ] todo 텍스트 박스에 사용자가 입력하는 내용을 받아내기 위한 data 입니다. todolist 추가한 todo 들의 목록, todo 한 건은 다음과 같습니다. id todo 한 건의 고유 키, 이 예제에서는 timestamp를 이용합니다. todo todo 내용 completed 완료 여부(true, false) [ 메서드 ] addTodo 텍스트 박스에 사용자가 입력하는 내용을 받아내기 위한 dat..

Vue.js 3.0 STEP 4 - 스타일 적용

1. HTML의 스타일 적용 HTML 요소의 스타일 적용은 모두 문자열이며, 케밥 표기법을 주로 이용한다. font-size와 같은 형태 이와 같은 표기법을 사용하는 이유는 HTML에서는 대소문자를 구별하지 않기 때문이다. 케밥 표기법은 HTML, 스타일 특성 등에서 주로 사용한다. 버튼 1 버튼 2 이렇게 클래스를 적용하는 모든 HTML 요소에 동일한 스타일이 적용된다. 하지만, 적용되는 순서는 꼭 알아둬야 한다. 이렇게 살펴보면, style 특성에 직접 지정하는 인라인 스타일 방식이 마지막으로 적용된다. 요소의 기본 스타일 -> .test 스타일 -> .over 스타일 -> 인라인 스타일 2. 인라인 스타일 인라인 스타일은 v-bind:style로 작성한다. style로 지정할 정보는 데이터 속성에 ..

Vue.js 3.0 STEP 3 - 이벤트 처리

★ 이벤트 처리 동적 UI는 HTML 요소에서 발생하는 이벤트 처리를 통해 구현되는 경우가 많다. Vue의 이벤트는 HTML, 자바스크립트에서 사용하는 이벤트를 준용해서 사용하기 때문이다. 1. 인라인 이벤트 처리 Vue에서의 이벤트 처리는 아래와 같이 주로 사용한다. v-on:[이벤트 이름]="표현식" 가장 많이 쓰이는 click 이벤트 예 v-on 디렉티브는 @로 줄여 쓸 수도 있다. v-onclick="test($event)" @click="test($event)" 금액 : 입금 출금 계좌 잔고 : {{ balance }} 2. 이벤트 핸들러 메서드 Vue 인스턴스에 등록한 메서드를 이벤트 처리 함수로 연결 이와 같이 복잡한 기능은 메서드를 미리 작성해두고, v-on 디렉티브로 참조해서 이벤트를 수..

Vue.js 3.0 STEP 2 - Vue 인스턴스

★ Vue 인스턴스 개요 const vm = Vue.createApp과 같이 메서드로 만든 객체들을 자주 사용한다. 이처럼 Vue.creatApp 메서드를 호출하여, 만들어진 객체를 애플리케이션 인스턴스라고 부른다. 여기서 사용된, name, data 옵션이 바로, 옵션 객체 이다. var vm = Vue.createApp({ name : "App", data() { return { name : "" }; } }).mount('#app') 1. data 옵션 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용한다. 관리와 추적의 의미는 변경을 탐지하고 추적하여, 화면을 갱신하겠다는 의미. 컴포넌트 인스턴스에서 $로 시작하는 이름은 인스턴스 내부에서 특수한 용도로 사용된다는 의미. 따라서 $,_로 시..

Vue.js 3.0 STEP 1 - Vue.js 기초와 Template

★ 보간법 mount하고 있는 9행 id가 app인 div요소 {{ }} : 콧수염 모양을 닮았다해서, 콧수염 표현식이라고도 부르며, 보간법이라고 불릅니다. {{message}} ★ 기본 디렉티브 1. v-text, v-html 디렉티브 Vue 디렉티브는 템플릿 안에 사용하는 v-로 시작하는 속성이며, 이것을 이용해 HTML 요소와 관련된 작업을 지정할 수 있습니다. v-text : {{message}} 와 같은 동일한 기능을 수행한다. 즉, inner Text 속성에 연결됨. 태그 문자열을 HTML 인코딩하여 나타나기 때문에 화면에는 태그 문자열이 그대로 나타남. v-html : innerHTML 속성을 변경하는 것. innerHTML 속성에 연결됨. 태그 문자열을 파싱하여 화면에 나타냄 2. v-bi..

ES6 STEP 2 - 기본 문법 2

★ 새로운 객체 리터럴 객체의 속성을 작성할 때 변수명과 동일하다면 생략 가능. var name = "홍길동"; var age = 20; var email = "gdhong@test.com"; var obj = { name, age, email }; console.log(obj); 새로운 메서드 표기법 ES6가 제공하는 새로운 객체 리터럴 -> function 키워드를 사용하지 않고 바로 { } 구현부가 따라옴. 이 함수는 화살표 함수가 아니기 때문에, 함수가 중첩되었을 때 바깥쪽 함수의 this가 이 함수의 this로 자동으로 전달되지 않는다. let p1 = { name : "아이패드", price : 200000, quantity : 2, order : function() { if(!this.amo..

깃허브 초기 셋팅하기

★ 깃(Git) 설치 먼저 설치하기 위해서 깃(Git) 홈페이지(https://git-scm.com/)에 들어가야 한다. 깃(Git) 홈페이지에 들어오시면 'Latest source Release'라는 부분에 'Download for Windows'를 클릭하셔서 설치할 수 있고, 설치 과정은 계속 다음(또는 Next)을 눌러주면 된다. 보통 윈도우 데스크탑 설치는 64-bit Git for Windows Setup을 설치하면 된다. 설치 완료 ★ 설치 완료 후 Git Bash를 클릭하여 실행한다. (!!사용자명과 이메일 주소는 깃허브의 등록사항과 같아야한다) git config -- global user.name "사용자명" git config --global user.email "아이디@이메일주소" g..

Vue.js 3.0 STEP 3 - 이벤트 처리

★ 이벤트 처리 동적 UI는 HTML 요소에서 발생하는 이벤트 처리를 통해 구현되는 경우가 많다. Vue의 이벤트는 HTML, 자바스크립트에서 사용하는 이벤트를 준용해서 사용하기 때문이다. 1. 인라인 이벤트 처리 Vue에서의 이벤트 처리는 아래와 같이 주로 사용한다. v-on:[이벤트 이름]="표현식" 가장 많이 쓰이는 click 이벤트 예 v-on 디렉티브는 @로 줄여 쓸 수도 있다. v-onclick="test($event)" @click="test($event)" 금액 : 입금 출금 계좌 잔고 : {{ balance }} 2. 이벤트 핸들러 메서드 Vue 인스턴스에 등록한 메서드를 이벤트 처리 함수로 연결 이와 같이 복잡한 기능은 메서드를 미리 작성해두고, v-on 디렉티브로 참조해서 이벤트를 수..

안드로이드 프로그래밍 - 다용도 앱 만들기 4

앱의 기능 설명 1. 로그인 기능 2. 메모장 3. 달력 4. 연락처 5. 그림판 6. 미니게임 7. 계산기 8. 스톱워치 9. 가계부 달력(일정 메모) 달력 xml 코드 더보기 캘린더 뷰를 이용하여 달력을 사용하였다. 저장, 수정, 삭제 버튼을 이용하여 해당 날짜에 해당하는 메모를 기입하고 수정, 삭제 한다. 달력 java 코드 더보기 public class Activity2 extends AppCompatActivity { public String fname=null; public String str=null; public CalendarView calendarView; public Button cha_Btn,del_Btn,save_Btn; public TextView diaryTextView,tex..

Vue.js STEP 1 - 기초 셋팅

★ VSCode 설치 자신의 환경에 맞는 버전과 운영체제에 맞게 다운로드 https://code.visualstudio.com/docs/?dv=win64user Documentation for Visual Studio Code Find out how to set-up and get the most from Visual Studio Code. Optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com ★ Node.js 설치(npm..

Git - 협업 툴

★ 버전 관리 레포트 게임 > 세이브 클라우드 서비스 구글 드라이브 > 버전 관리 지원 원드라이브 오피스 ■ 버전 관리 시스템 1. CVS(Concurrent Versions System) 2. SVN(SubVersion) Git ■ Git Git 호스팅 업체(Git 원격 제공 서비스) Github(MS) GitLab BitBucket ★ 프로그램 1. git https://git-scm.com 다운로드 > 64-bit git for windows Setup 2. SourceTree https://www.sourcetreeapp.com/ Sourcetree | Free Git GUI for Mac and Windows A Git GUI that offers a visual representation of..

JAVASCRIPT STEP 53 - 이미지 뷰어

★ 이미지 뷰어 이미지 뷰어를 구현. ▷/|| 버튼을 누르면 시작/멈춤을 제어. 1초마다 순차적으로 이미지가 변경. 특정 버튼을 눌러 이미지를 변경한다. 자동 실행 중 특정 버튼을 누르면 타이머는 중단되고 누른 이미지가 출력된다. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스

JAVASCRIPT STEP 51 - 새를 이용한 애니메이션

★ 새를 이용한 애니메이션 새를 날게 함. 이미지 전체 크기 : 800 x 140 / 한 장면 크기 : 200 x 140 ■ HTML 코드 새 날개짓 새의 속도 : 느림 보통 빠름 엄청빠름 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스

데이터베이스 - MAC 에서 오라클 셋팅하기

★ 터미널에서 brew를 이용하여 오라클을 셋팅하기 위한 준비단계 brew를 설치하기 1. 터미널을 연다 아래와 같이 입력하여 brew를 다운로드 한다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 다운로드가 완료 되고 난 후, brew를 입력하여 보면 아래와 같이 command no found:brew 가 뜨면서, 먹히지 않는 것을 볼 수 있다. 해결 방법은 아래와 같이 명령어를 3줄 입력하여 주면 된다. $ echo '# Set PATH, MANPATH, etc., for Homebrew.' >> /Users/{사용자명}/.zprofile $ echo 'eval "$(/opt..

안드로이드 프로그래밍 - 다용도 앱 만들기 3

앱의 기능 설명 1. 로그인 기능 2. 메모장 3. 달력 4. 연락처 5. 그림판 6. 미니게임 7. 계산기 8. 스톱워치 9. 가계부 메모장 메모장 xml 코드 더보기 스피너를 통해 카테고리를 선택할 수 있도록 하였다. EditText를 통하여 메모를 할 내용을 입력을 받는다. Register 버튼을 통하여 해당 메모를 저장한다. 메모장 JAVA 코드 더보기 public class Activity3 extends AppCompatActivity implements View.OnClickListener { Context context; RecyclerView memoList; MemoListAdapter memoListAdapter; // 리사이클러뷰의 어댑터 LinearLayoutManager layo..

안드로이드 프로그래밍 - 다용도 앱 만들기 1

앱의 기능 설명 1. 로그인 기능 2. 메모장 3. 달력 4. 연락처 5. 그림판 6. 미니게임 7. 계산기 8. 스톱워치 9. 가계부 메인 화면의 xml 코드 더보기 LinearLayout을 통하여, 각 버튼들이 균일한 레이아웃을 가질 수 있도록 하였다 layout의 width, height match_parent : 부모의 영역을 전부다 차지한다. wrap_content : 해당 콘텐츠의 크기만큼만 차지한다. gravity : 자신의 뷰에서 포함하고 있는 데이터를 정렬 하는 것 center, left, right orientation : 위치를 세로 방향으로 할 것인지, 가로 방향으로 할 것인지 메인 화면의 java 코드 더보기 public class Activity1 extends AppCompat..