dev-jong의 개발일지

API 란?[Application Programming InterFace] 의 약어로 서버와 클라이언트 (웹 브라우저)가 데이터를 주고받기 위한 약속된 방법에 일종이다. 예를들어 웹사이트에서 날씨를 보려고 할 때, 브라우저가 서버에게 날씨데이터를 요청하게 된다. (API 요청)요청을 받은 서버는 브라우저에게 날씨데이터를 응답하게 된다. (API 응답) fetch() 함수란? JavaScript에서 API에 요청을 보내기 위한 함수로 해당 함수에 인자로는 첫번째로 http://@@?board=2 같은 요청과 두번째 파라미터로 어떤 방식으로 요청을 보낼지에 대한 옵션을 담는다. 두번째 파라미터가 비어있다면 기본적으로 header와 body가 비어잇는 GET 방식의 요청을 보내게 된다. 여기서 JSON이라는 ..

[Spring]스프링(Spring)은 자바 기반의 가장 인기 있는 오픈 소스 프레임워크 중 하나로, 기업용 웹 애플리케이션을 쉽고 효율적으로 개발할 수 있도록 도와준다. [Spring framework]POJO(Plain Old Java Object) 기반의 프로그래밍을 지원웹, 데이터 보안, 메시징 등 다양한 모듈을 제공경량 컨테이너 기반의 자바 프레임 워크 [Spring Boot]스프링을 더 쉽게 사용할 수 있게만든 프로젝트복잡한 XML 설정 없이 어노테이션 기반으로 구성된다.내장 톰캣 서버로 바로 실행이 가능(main() 함수 사용)의존성 관리, 자동 설정 등 지원 해당 게시물에서는 회원가입의 JDBC 구조중에서 Controller에 해당하는 jsp 응답 및 사용자 요청(데이터) 처리를스프링 프레..

[JDBC]JDBC(Java Database Connectivity)는 자바 언어를 사용하여 데이터베이스에 접근하고 관리할 수 있도록 지원하는 자바 API이다. 다시말해서, 자바 프로그램에서 SQL을 실행하고 데이터를 가져오거나 변경하는 등의 데이터베이스 작업에 필요한 기능을 제공하는 인터페이스와 클래스의 집합이라고 할 수 있다. 회원가입을 다루는 간단한 JDBC 설계에 대해서 알아보자. [JDBC 구조]JDBC를 설계하려고 할 때, 크게 4가지 클래스로 나눌 수 있다. 1. MemberVo2. Member ~~ Controller3. MemberService4. MemberDao 1. MemberVo MemberVo 클래스에는 Oracle로 미리 구현해 놓은 유저 테이블에 컬럼들을 필드로 지정한 ..

해당 게시물에서는 여러가지 요소에 대해서 이벤트 리스너를 처리하는 방식과 그리고 css통해서 여러가지 요소중에 한 요소에 대해서 "선택" 됨을 알려주도록 하는 기능에 대해서 알아보겠다. 다음과 같은 구조의 HTML 구문이 있다. 각각의 코인명 가격 그리고 변동률에 대해서 태그로 묶여있는 구조이다.내가 다음과 같은 여러 요소중에서 코인 한개를 "클릭"해서 "선택"을 하려고 할 때, 어떤 작업을 통해서 다음과 같은 작업을 처리 할 수 있는지 자바스크립트 코드를 살펴보자 일단 태그를 확인해보면 동일하게 class = "coin"으로 묶어두었다. 묶어둔 클래스를 통해서 선택자를 .coin으로 해당 요소들을 참조가 가능하다. JavaScript 코드에서 다음과 같이 document.querySelectorAl..

자바에 클릭 이벤트를 통해서 실행문을 처리하는 방법에는 대표적으로 Onclick과 addEventListener() 방식이 있다. Onclick은 태그 내에 속성으로 넣어주어 이벤트를 처리하는 방식이고,addEventListener()는 특정 노드에 대해서 지정하여 사용한다 (노드는 document.querySelector(선택자)로 가져옴) 두 이벤트 처리에는 각각 함수가 들어가는데 파라미터로 this 그리고 이벤트객체를 넣어주어 클릭된 요소(노드) 에 대해서 세분화 하여 처리가 가능하도록 사용이 가능하다. [this]this는 현재 실행중인 코드에 문맥에서 참조하고 있는 값 이라고 볼 수 있다.다시 말해서, this는 좀있다 말할 addEventListener에 들어가는 함수에 파라미터로 들어가는 이..

자바스크립트의 주된 용도는 화면에 생동감을 주기위해, 다시말해서 화면에 사용자에 입력 또는 정해진 딜레이에 맞춰서 내가 만들어 놓은 정적의 시각적 화면인 html 화면에 동적처리를 위한 것이다. 이중에서도 사용자에 입력은 여러가지 형태에 "이벤트"로, "이벤트리스너"가 해당 이벤트가 발생하면 그에 맞춰서 어떤 화면작업을 해줄지 코드구현이 가능하다. 여기서 "이벤트리스너" 호출 방법 및 사용자의 어떤 입력을 "이벤트"로 받아들여서 처리하는지에 대해서 알아보겠다. [이벤트 처리] 1. onclick 속성을 통한 해당 요소의 이벤트 처리html에 태그 속성중에 onclick 속성을 사용해서 이벤트 처리가 가능하다. 다음 예시를 살펴보자 다음 html 코드를 살펴보면 3개의 태그 (button, a, di..

[HTML 요소 다루기]이전에 선택자를 통해서 html 태그에 설정한 속성값을 통해서 자바스크립트에서 해당 요소에 대해서 다루는 작업을 잠깐 해보았다.해당 게시물에서는 html 요소 및 이벤트리스너를 통한 상호작용에 대해서 설명해보겠다. 일단 HTML은 무조건 태그를 통해서 이루어져있는데 "노드"라는 용어 그리고 "DOM트리" 부터 배워보자. [DOM (Documnet Object Model)]- 모든 HTML 태그는 DOM에 따르면 객체라고 불리운다. 어떤 태그 내에 자식요소로 태그가 n개 존재하고 또 해당 자식요소로부터어떤 태그내에 자식요소도 존재한다. 그리고 태그내에 문자까지도 객체로 볼 수 있다.이런 모든 객체는 자바스크립트를 통해 접근이 가능하며, 페이지를 동적으로 조작하려고 할 때, 해당 객..

자바스크립트에서도 함수선언과 객체를 생성할 수 있다 해당 게시물에서는 다음과 같은 내용을 다루어보겠다. [함수선언] 1. 선언적 함수 선언function f01() { console.log("test01 called...");}f01(); 함수를 선언할 때는 function 키워드를 달아서 선언할 수 있다. 함수명(파라미터) {실행문} 과 같은 형식으로함수를 실행하려고 할떄는 f01(파라미터); 와 같은 형식으로 실행하면 된다. 2. 익명 함수와 화살표 함수 (자주사용)const f01 = function() { console.log("anonymous function called...");}//또는 화살표 함수const f01 = () => { console.log("anonymous function ..

[배열]자바스크립트에서 배열은 리스트 같은 객체(list-like objects)라고 불리운다. 배열은 리스트에 저장된 다수의 값들을 포함하고 있는 하나의 객체이다. 자료구조에서 말하는 배열은, 동일한 크기의 공간에 빈틈없이 연속적으로 나열된 구조를 말한다. 다시말해서 배열을 선언할 때, 이미 데이터 타입을 정하고 만들어지며 동일한 크기의 메모리 공간을 차지하게 되는것이다. 순서가 있고 순서에 따라 값을 가져올 수 있도록 하기 위해 서로 연속적으로 이루어진다. 자바스크립트의 배열은 자료구조에서 말하는 배열과는 사뭇 다르다. 배열의 요소를 위해서 각 메모리 공간을 동일하게 갖지 않는 다시말해서 타입이 다른 데이터가 들어올 수 있다. x = [1,2,3,'a',"asdvcd",false];console.lo..

[입출력 함수]우리가 결과에 대해서 출력을 확인해야하는 경우, 사용자로부터 입력을 받아야하는 경우 등간단한 코드를 작성하려고 할 때, 자주 사용하는 함수가 있다. 아래를 확인해보자 1. window.prompt(' ')해당 함수는 텍스트 필드, 확인, 취소 버튼이 있는 대화 상자를 띄운다. 입력한 메세지 내용을 리턴 값으로 돌려받는다. 2. document.write(' ')브라우저 화면 상의 페이지에 직접 값을 출력한다. 해당 함수는 html 내부에서 script 태그를 사용하여 사용 가능하다(위치가 필요하기 때문) 3. window.alert(' ') 해당 함수는 화면에 출력문과 알림창을 띄운다. window 4. document.querySelector(선택자)자바스크립트 코딩을 하면서 가장 많이..