일상, 핸드메이드 감성 플라워 소품샵

Spring Framework를 이용한 프로젝트를 진행하기 위해 IDE로 STS를 선택하였다. STS란 Spring 개발을 위한 Eclipse 기반의 개발 환경을 말한다. 우선 설치를 위해 1. spring.io/tools 에 접속한다. Spring Tools 4 is the next generation of Spring tooling Largely rebuilt from scratch, Spring Tools 4 provides world-class support for developing Spring-based enterprise applications, whether you prefer Eclipse, Visual Studio Code, or Theia IDE. spring.io 2. 접속 후 각자..

리눅스 (Linux)에서 특정 명령을 실행하거나, 특정 파일에 접근하기 위해서 때로는 루트 (root) 권한이 필요한 경우가 있습니다. 이러한 경우에 사용하게 되는 su / su - / sudo 명령어들과 각 명령어들의 차이점, 현재 계정을 확인하는 whoami 명렁어와 계정 전환 후 다시 이전 계정으로 돌아가게 하는 logout / exit 명령어들에 관한 내용입니다. 우선, 일반 사용자 (user)가 루트 (root) 권한을 사용하기 위해서는 su (Switch User) 혹은 sudo (SuperUser DO) 명령어를 사용하면 됩니다. 1. su (Switch User) 명령어 - Switch User에서 알 수 있듯이, 현재 계정을 로그아웃하지 않고 다른 계정으로 전환하는 명령어 입니다. su ..

data() 1. 속성 추가 - $(selector).data(key, value) key는 string type의 변수로 말 그대로 데이터가 저장될 key 값이다.value는 object type으로 javascript에서 지원하는 모든 type의 데이터를 저장할 수 있다. 2. 속성 가져오기 - $(selector).data(key) key는 위에서 저장한 데이터를 가져오기 위한 key 값이다.key를 생략하여 .data()로 사용도 가능하며, 결과는 해당 엘리먼트에 저장된 모든 데이터들이 JSON 형식으로 나온다. 3. 속성 삭제 - $(selector).removeData(key) key는 string type으로 삭제할 데이터의 key값이다. attr() 1. 속성 추가 - $(selector)..

* $(document).ready 는 DOM (Document Object Model) 객체만로드(이미지 로드 전) 되자마자 처리합니다. 문법$(document).ready(function() { // DOM 이 모두 로드된 후 실행할 코드를 입력하세요.}); 위와 같이 사용하며, 아래와 같이 축약 문법으로도 사용이 가능합니다. $(function() { // DOM 이 모두 로드된 후 실행할 코드를 입력하세요.}); * $(window).load 는 해당 페이지의 모든 외부 리소스, 이미지 등이 로드 된 후에 처리합니다. 문법$(window).load(function() {// 모든 외부 리소스, 이미지 등이 로드된 후 실행할 코드를 입력하세요.});

1. 객체란 - 객체는 기능(Method) 또는 속성(Property)을 가지고 있다. 객체.메서드();객체.속성;객체.속성 = 값; 2. 객체의 종류 - 자바스크립트의 객체는 크게 내장 객체, 브라우저 객체 모델 (BOM), 문서 객체 모들 (DOM) 내장 객체- 자바스크립트 엔진에 내장- 필요한 경우 생성해서 사용할 수 있음- 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등 브라우저 객체 모델 (BOM)- 브라우저에 계층적으로 내장되어 있는 객체들을 브라우저 객체 모델이라 함.- window, screen, location, history, navigator 객체 등- 브라우저(window)는 document와 location 객체의 상위 객체임 문서 객체 모델 (..

자바에서의 this - 인스턴스 자신을 가르키는 참조 변수즉, this가 객체 자신에 대한 참조 값을 가지고 있다.주로 매개변수와 객체 자신이 가지고 있는 멤버 변수명이 같을 경우, 이를 구분하기 위해 사용한다. 자바의 경우 this에 바인딩되는 객체가 하나지만,자바스크립트에서의 this는 해당 함수 호출 방식에 따라 this에 바인딩 되는 객체가 달라지기 때문에 전혀 다른 의미를 갖는다. 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 1. 함수 호출 - 기본적으로 this는 전역 객체에 바인딩 된다.전역함수, 내부함수, 콜백함수 관계 없이 this는 전역 객체에 바인딩된다. 2. 메서드 호출 - 함수가 객체의 프로퍼티 값이면 메서드로서 호출된다.메서드..

React - 자바스크립트 라이브러리로 유저 인터페이스를 만드는 데 사용. 지속적으로 데이터가 변화하는 대규모 애플리케이션에 사용. 오직 V(View)만 담당 => 뷰에만 신경쓰는 라이브러리 이므로 기타 기능은 직접 구현해야 하지만 라우팅에는 리액트 라우터, Ajax 처리에는 axios / fetch, 상태 관리에는 redux / MobX를 사용. 초기 렌더링 - render() {} 함수 컴포넌트가 어떻게 생겼는지 정의하는 역할 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지 정보를 지닌 객체를 반환 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만들고, 우리가 정하는 실제 페이지의 DOM 요소 안에 주입. Virtual DOM - 실제 DOM에 접..

서버에 올리지 않은 로컬의 HTML 파일에서 크롬을 통해 Ajax 테스트를 하는 경우 Access to XMLHttpRequest at 'file:///xxxxxx' from origin 'null' has been blocked by CORS policy:Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 의 오류가 발생함. 이러한 오류를 해결하기 위해선 크롬 브라우저 별도의 작업이 필요하다. 1. 모든 크롬창을 닫는다. 2. 크롬 바로가기 아이콘을 만든다. 3. 우클릭 > 속성 > 바로가기 > 대상 맨 끝 xxxxxxxxxxxxxxx\chrome.exe"의 뒤에..

load()- 외부 콘텐츠를 가져올 때 사용 $(요소선택).load(url, data, 콜백 함수) $.ajax()- 데이터를 서버에 HTTP POST, GET 방식으로 전송이 가능하며, (X)HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메서드 $.post(), $.get(), $.getJSON() 메서드의 기능을 하나로 합쳐 놓은 것이라고 보면 됨. $.ajax({url : '전송 페이지(액션 페이지)', // 데이터 전송 및 요청할 외부 주소를 입력type : '전송 방식", // get, postdata : '전송할 데이터',dataType : '요청한 데이터 타입' // 서버로부터 반환 받아올 데이터 형식을 지정// html, xml, json, text, jso..

Ajax (Asynchronous JavaScript and Xml) 란? - Ajax는 Asynchronous JavaScript and Xml의 약자로 비동기식 서버와 통신하는 방식입니다. 이 때 XML을 이용하고, 최근에는 JSON (JavaScript Object Notation)을 많이 사용합니다. 비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로, 서버와 통신하는 동안 다른 작업을 할 수 있다는 의미를 지닙니다. (비동기성을 통해 페이지 전체를 refresh 하지 않고 일부분만 업데이트를 할 수 있습니다.) 결과가 주어지는 시간이 길어져도 그 시간 동안 다른 작업을 할 수 있으므로 조금 더 효율적으로 자원을 사용할 수 있는 장점이 있습니다. jQuery를 이용한 Ajax jQuery에서는..