Spring

Server

Library

DATABASE

GIT

백준(Java ver)

SQLD

자바 Spring

자바

웹페이지

안드로이드

빅데이터

정보처리기사 통합 퀴즈

정보처리기사 실기

정보처리기사 필기

React STEP 27 - jquery + react

⭐ jqueryjQuery는 클릭 이벤트, 체인지 이벤트 등 웹 페이지 동작의 기능을 조작할 때 브라우저의 영향을 받지 않고 원하는 기능을 제작할 수 있습니다. 브라우저의 버전에 따라 작동하지 않는 코드를  jQuery로 변경해서 사용하면 브라우저 문제 없이 사용할 수 있습니다. https://jquery.com/ jQueryWhat is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API t..

React STEP 26 - gsap + react

⭐ Gsap웹 화면에 쉽게 사용할 수 있는 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다.GSAP를 이용해서 멋진 인터랙티브한 웹사이트를 만들 수 있습니다.https://greensock.com/reacthttps://www.npmjs.com/package/gsap gsapGSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, str..

React STEP 25 - 기본 구조 사용하기

⭐ React 기본 구조HTML : 컴포넌트 방식으로 로딩합니다.CSS : import 방식으로 로딩합니다.Script: 생명주기 함수로 스크립트 작업을 할 수 있습니다. 1. Form 형식 페이지기본 사용 Form 페이지, title, description, form 각각의 컴포넌트로 분리 및 사용App.jsimport React, { Component } from 'react';import './App.css';import './css/basic1.css';import Component1 from './js2/Component1_1';import Component2 from './js2/Component1_2';import Component3 from './js2/Component1_3'; class..

React STEP 24 - TODO 리스트 예제

⭐ TODO LIST 1. 단계 1기본 구조 잡기AddTask.jsclass AddTask extends React.Component { render() { let inputStyle = { marginTop : 20, padding: "0px 10px", width: 125, lineHeight: "32px", fontSize : 14, border: "1px solid #ccc" }; let buttonStyle = { margin: "20px 0px 0px 5px", padding: 10, ..

React STEP 23 - Create React App - 5

⭐ Create React App컴포넌트 매핑 이해하기1. 단계 1src/DataComponent.jsclass DataComponent extends React.Component { render() { let ulStyle = { marginTop : 15 } let liStyle = { lineHeight : 1.8 } return ( member1 member2 member3 ) }} 2. 단계 2src/App.js class App extends Com..

React STEP 22 - Create React App - 4

⭐ Create React Appmap() 함수로 태그 반환하기 1. 단계 1반복해서 출력해야 하는 태그들을 배열에 넣어두고 map() 함수로 순서대로 나열해 컴포넌트를 return 할 수 있습니다.src/ReturnMap.jsclass ReturnMap extends React.Component { render() { let ulStyle= { marginTop: 15 } let liStyle = { lineHeight: 1.8 } let forArray = [ React, 18.2.0, Array Map ]; r..

React STEP 21 - Create React App - 3

⭐ Create React App 1. state 정의 하기App.jsimport React, { Component } from 'react';import SetState from './js/14_setState';import './App.css'; class App extends Component { render(){ return ( React Example ); } }export default App;SetState.jsimport React, { Component } from 'react';import ReactDOM from 'react-dom/client';con..

React STEP 20 - Create React App - 2

⭐ 생명주기 함수 이해하기컴포넌트의 정보를 보여주는 도구를 설치 -> 크롬 브라우저에서 해당 URL 접속https://chrome.google.com/webstore Chrome Web Store브라우저에 새로운 기능을 추가하고 탐색 환경을 맞춤설정합니다.chromewebstore.google.comReact Developer Tool 검색 및 [Chrome에 추가] 버튼을 눌러 확장 프로그램을 설치React 개발상에서의 컴포넌트를 보고 싶을 때, [Components]라는 탭이 앞에서 설치한 확장 프로그램에 의해 개발자 도구에 추가되어 있습니다.실제 태그를 보고 싶을 때는 [Elements] 탭을 쓰면 되지만, React 코드를 분석할 때는 [Components] 탭을 쓰면 컴포넌트들을 볼 수 있습니다..

깃허브 초기 셋팅하기

★ 깃(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..

React STEP 26 - gsap + react

⭐ Gsap웹 화면에 쉽게 사용할 수 있는 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다.GSAP를 이용해서 멋진 인터랙티브한 웹사이트를 만들 수 있습니다.https://greensock.com/reacthttps://www.npmjs.com/package/gsap gsapGSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, str..

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

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

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 디렉티브로 참조해서 이벤트를 수..

JAVA STEP 40. File/Directory 조작

★ File/Directory 조작 윈도우 탐색기로 하는 행동 > 자바로 구현 파일 > 정보 확인, 새로 만들기, 이름 바꾸기, 이동하기, 삭제하기 등.. 폴더 > 정보 확인, 새로 만들기, 이름 바꾸기, 이동하기, 삭제하기 등.. ★ 파일 입출력 메모장으로 하는 행동 텍스트 입출력 메모장, 이클립스 등.. 텍스트 편집기 ★ 파일 응용 파일 > 정보 경로 복사 : /Users/kimdaehwan/Desktop/class/code/java/file/test.txt 자바 프로그램 > 외부에 존재하는 파일에 접근 1. 외부 파일을 참조하는 객체를 생성 2. 참조 객체 조작 > 외부 파일에 적용 소스코드 String path = "/Users/kimdaehwan/Desktop/class/code/java/fil..

React STEP 27 - jquery + react

⭐ jqueryjQuery는 클릭 이벤트, 체인지 이벤트 등 웹 페이지 동작의 기능을 조작할 때 브라우저의 영향을 받지 않고 원하는 기능을 제작할 수 있습니다. 브라우저의 버전에 따라 작동하지 않는 코드를  jQuery로 변경해서 사용하면 브라우저 문제 없이 사용할 수 있습니다. https://jquery.com/ jQueryWhat is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API t..

React STEP 24 - TODO 리스트 예제

⭐ TODO LIST 1. 단계 1기본 구조 잡기AddTask.jsclass AddTask extends React.Component { render() { let inputStyle = { marginTop : 20, padding: "0px 10px", width: 125, lineHeight: "32px", fontSize : 14, border: "1px solid #ccc" }; let buttonStyle = { margin: "20px 0px 0px 5px", padding: 10, ..

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 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..

Spring Boot STEP 1 - 기초 셋팅 및 실행

★ 스프링 설치(Spring Boot) 툴 > - STS3(기본 Spring or Spring Boot) - STS4(Spring Boot) 다운로드 https://spring.io/ Spring | Home Cloud Your code, any cloud—we’ve got you covered. Connect and scale your services, whatever your platform. spring.io projects -> Spring Tools4 클릭 후 , Previous Releases Eclipse https://github.com/spring-projects/sts4/wiki/Previous-Versions Previous Versions The next generation of t..