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

CSS link와 import 차이 작성 위치 - link와 import 모두 head 섹션에 있지만, link 태그는 상단에 작성되고, import는 head 섹션 내부의 style 태그 안에 작성된다. DOCTYPE html> Page Title DOCTYPE html> Page Title @import url("main.css"); 비교 사용은 비슷하나, link 방식을 사용하는 것이 @import 방식을 사용하는 것보다 페이지의 로딩 속도 측면에서 뛰어나다. link 방식 - HTML의 link 태그 사용 - 유지보수 용이 : CSS 연결 방식으로 하나의 파일에 여러 페이지의 스타일을 일괄 수정 및 추가 - 직렬방식이 아닌 병렬방식으로 다운로드 하기떄문에, 로딩속도 빠르다. @import 방식 -..

SPA (Single Page Application) 이란? 단어의 의미대로 단일 페이지의 웹 애플리케이션을 의미한다. 최초 한 번 페이지 전체를 로드한 후 데이터만 변경하여 사용. 즉, 웹 사이트의 전체 페이지를 하나의 페이지 담아, 서버로부터 새로운 페이지를 불러오지 않고, 화면을 동적으로 표현하는 것을 웹 사이트나 웹 애플리케이션을 SPA 라고 한다. SPA의 장점 - 네이티브 앱을 쓰는 것 같은 사용자 경험 - 간단한 배포 - 적은 서버 요청 (화면에 필요한 부분의 데이터만 받아 렌더링) - 트래픽 감소 SPA의 단점 - 최초 로드 시 한번에 받아오기 떄문에, 초기 구동 속도가 느림 - SEO (Search Engine optimization, 검색 엔진 최적화) 관점 불리 MPA (Multi P..

ECMASCRIPT 란 자바스크립트 언어의 표준 규격을 뜻한다. ES6는 자바스크립트 표준 규격 버전6 라는 의미를 가진다고 생각하면 된다. ES6 이전에는 변수를 선언할 수 있는 키워드가 var 였으나, let, const 가 추가되어 이를 사용하여 변수를 선언할 수 있다. 간단한 특징 var - 변수 재선언 가능하기 때문에, 필요할 때마다 변수를 편리하게 사용할 수 있다는 장점이 있지만, 코드량이 많은 경우, 같은 이름의 변수명을 남용하게 된다면, 파악하기도 힘들고, 문제가 생길 수 있다. let - 변수 재선언 불가능 - 변수 재할당 가능 let name = '변수 선언'; console.log(name); name = '변수 재할당'; console.log(name); let name = '변수 ..

JavaScript new Date() 함수로 현재 날짜와 시간을 구하는 방법 1. 현재 날짜 구하기 let today = new Date(); console.log(today); 2. 현재 날짜 년-월-일 포맷으로 구하기 let today = new Date(); // 년도 getFullYear() let year = today.getFullYear(); // 월 getMonth() (0~11로 1월이 0으로 표현되기 때문에 + 1을 해주어야 원하는 월을 구할 수 있다.) let month = today.getMonth() + 1 // 일 getDate() let date = today.getDate(); // 일 console.log(year + '-' + month + '-' + date); 3. ..

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. 메서드 호출 - 함수가 객체의 프로퍼티 값이면 메서드로서 호출된다.메서드..