본문 바로가기

728x90
반응형

분류 전체보기

(265)
[Spring Boot] Spring Boot를 이용한 RESTful Web Services 개발 - 개요 본 포스트는 인프런 이도원 강사님의 "Spring Boot 3.x 를 이용한 RESTful Web Services 개발" 강의를 통해 직접 작성 및 정리한 글입니다.    이 강의는 Spring Boot를 이용하여 간단한 RESTful API를 개발해 보고, 나아가 Spring Cloud를 이용한 MSA 개발과도 연계되는 과정임.   2011년 베니스에서 개최된 소프트웨어 아키텍처 워크숍 이후 Micro Service라는 용어를 사용하기 시작함. 애플리케이션을 구축함에 있어서 전통적인 모놀리식 개발 방법이 아닌 Micro Service라는 개발 방법을 도입함으로써 개발뿐 아니라 유지보수에 있어서도 비용 절감, 효율성, 고객의 요구사항에 빠르게 대처할 수 있는 효과를 얻게 됨. 또한 이러한 Micro Se..
[Javascript] Console 객체(1) Console 자바스크립트를 처음 시작할 때부터 우리와 함께한 Console.브라우저들은 클라이언트 측의 개발을 보조하기 위해 개발자 도구를 지원하고 있는데, 이 개발자 도구를 조작할 수 있도록 하는 기능들을 제공하는 것이 바로 console 객체이다.     console은 자바스크립트에서 디버깅을 위해 존재하는 객체로 console 내부의 함수를 이용하면 개발자 도구의 콘솔창에 여러 정보들을 출력할 수 있다. console 객체 내부에는 이렇게나 많은 함수들이 있지만 이 글에서는 알아두면 디버깅에 편리함을 더해주는 것들을 위주로 소개해 보려 한다.    console.log()누구나 자바스크립트 코드의 결과 값을 출력하거나 테스트를 위해 console.log()를 정말 많이 써봤을 것이다. 역시나 가..
[jQuery] jQuery의 과거와 현재 그리고 미래 jQuery. 한 때는 웹 프론트엔드 개발에서 필수적으로 여겨지던 자바스크립트 라이브러리다. 2006년 미국의 SW 개발자 존 레식에 의해 "write less, do more."라는 모토로 출시된 제이쿼리는 이후 DOM의 조작, 이벤트 처리, 애니메이션 제공 등을 간편화 하여 웹 개발을 단순화하는 데 혁신적인 기여를 했다. 당시 순수 자바스크립트만으로는 브라우저 간의 호환성 문제와 복잡한 DOM 조작을 처리하는 것이 상당히 어려웠기 때문. 제이쿼리는 이러한 문제를 해결해 주었고 개발자들 사이에서 빠르게 인기를 얻었다. 제이쿼리는 다음과 같은 특장점을 가지고 있다. 웹 페이지상에서 Element를 쉽게 찾고 조작할 수 있다.거의 모든 웹 브라우저에 대응할 정도로 호환성이 뛰어나다.네트워크, 애니메이션 등..
[Javascript] eval() 바로 알기 eval은 evaluate의 약자로 문자열이 코드라고 가정하고 평가해서 실행한다는 의미를 가지고 있다. 그 의미대로 문자열로 된 표현식을 파라미터로 받아 코드로 해석한 후 실행하는 역할을 한다. 따라서 내장 함수 eval()을 사용하면 문자열 형식으로 표현된 코드를 실행할 수 있다. let code = 'console.log("Hello World")';eval(code); // Hello Worldlet value = eval('1+1');console.log(value); // 1let value2 = eval('let i=0; ++i');console.log(value2) // 1  value 의 예와 같이 길이가 긴 문자열이 코드가 될 수 있는데 여기에는 줄바꿈, 함수 선언, 변수 등이 포함될 수..
[Javascript] Javascript와 jQuery의 선택자 return 값 차이 바로 알기 여기 우리가 지금부터 접근하려 하는 HTML 요소가 하나 있다. Javascript와 jQuery에서는 DOM에 접근하기 위해 선택자(selector)를 사용한다. 그리고 이 요소에 접근하기 위한 Javascript와 jQuery의 선택자는 각각 아래와 같다.// 순수 Javascript 방식let jsCode = document.getelementById('myDiv');// jQuery 방식let jqCode = $('#myDiv'); 이 둘은 같은 요소에 접근하지만 다른 값을 반환한다. 위 코드를 각각 콘솔창에 출력해 보면, Javascript 선택자는 HTML DOM 객체(element 요소)를 리턴하는 것에 비해, jQuery 선택자는 jQuery 객체를 리턴한다. 따라서 Javascript 선..
[Javascript] 이벤트 추가 바로 알기 이벤트(event)란 웹 페이지에서 발생하는 상호작용을 말한다. 웹 페이지에서 '무언가 일어났다'는 일종의 신호 같은 것이다. 우리가 사용하는 웹 애플리케이션에서는 수많은 이벤트가 발생한다. 사용자가 마우스나 키보드를 이용해 일으킬 수 있는 이벤트도 있고 브라우저 스스로 웹 페이지를 로딩하며 여러 이벤트를 발생하기도 한다.  자바스크립트에서 이벤트를 다룰 땐 이벤트 핸들러를 사용한다. 이벤트 핸들러란 어떤 이벤트가 발생했을 때 실행되는 함수를 말한다. 사용자의 동작으로 인해 어떤 이벤트가 발생했을 때 그로 인해 어떤 일이 일어날 것인지 정의해 주는 것이다.     클릭하세요! 여기 버튼이 하나 있다. 여기에 이벤트를 등록하는 방법에는 세 가지가 있다.   1. 인라인(inline) 방식 가장 고전적이면서..
[Javascript] document 객체 그리고 DOM 바로 알기 자바스크립트로 웹 페이지를 자유롭게 다루기 위해서는 DOM에 대한 이해가 필요하다   DOM(Document Object Model) DOM은 말 그대로 웹 페이지의 모든 콘텐츠들을 객체로 나타내 주는 것이다. 그래서 간단히 생각하면 웹 페이지를 document라 부르고 이러한 document를 자유롭게 다루기 위해 객체화 하고자 구현된 개념이 결국 DOM이라고 생각할 수 있겠다. cf) HTML 태그와 텍스트, 속성 등 document에 담겨 있는 모든 요소 하나하나를 객체화 한 단위를 Node라고 부른다. 결국 DOM은 웹 페이지를 객체화 한 개념이고 이 웹 페이지의 가장 상단 진입점이 document 객체이다. document 객체는 DOM 트리의 최상위 객체. document 객체는 window ..
[HTML] Life Cycle(생명 주기) 바로 알기 Life Cycle(생명 주기)이란 생애, 그러니까 HTML의 라이프 사이클은 문서(document)가 브라우저상에 생겨나고 변화하고 사라지는 일련의 과정을 뜻한다. HTML 문서의 생명 주기에는 다음의 세 가지 주요 이벤트가 관여한다. DOMContentLoaded브라우저가 HTML을 전부 읽고 DOM Tree를 완성하는 즉시 발생. 이미지 파일이나 스타일시트 등 기타 자원은 기다리지 않는다. 사용 사례: DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때. loadDOM Tree 생성이 완성되었을 뿐 아니라 이미지, 스타일시트 등 외부 자원도 모두 불러오는 것이 끝났을 때 발생. 사용 사례: 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후 발생하..

728x90
반응형