jh 공부 블로그

클라이언트 사이드 렌더링 방식으로 라우터를 제공한다.자바스크립트 DOM 작업 용이, 동적 데이터 처리 수월, UI 디렉티브들로 조건문이나 반목분 쉬운 구현, 가볍고 성능이 좋음 우선 Node.js를 설치하고 VScode가 필요하다. 기본 설정은 스킵하고 바로 진행해 보도록 하겠다.https://nodejs.org/ko/download Node.js — Node.js® 다운로드Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org //vue cli 설치npm ins..

이번 포스팅은 저번 포스팅까지로 기본적인 자바스크립트에 대해 알아보았으니 프론트엔드에서 중요한 요소에 대해 알아보자. 우선 DOM & CSSOM에 대해 알아보자. DOM은 Document Object Model로 문서의 표현, 프로그래밍 인터페이스로 정의하고 있다.https://developer.mozilla.org/ko/docs/Glossary/DOM DOM - MDN Web Docs 용어 사전: 웹 용어 정의 | MDNDOM (Document Object Model) 은 HTML 또는 XML 기반 문서와 상호작용하고 표현하는 API입니다. DOM은 browser에서 로드되며, node 트리(각 노드는 문서의 부분을 나타냅니다)로 표현하는 문서 모델입니다(예, eledeveloper.mozilla.or..

이번 포스팅은 저번에 다 설명하지 못한 기능인 좌표와 애니메이션에 대한 부분을 알아보도록 하자.이 부분을 끝내고 나면 설명 중간중간에 DOM과 트리 형태에 대한 설명이 많은데 이 부분인 DOM/CSSOM과 비동기와 관련된 AJAX를 알아볼 것이다.  우선 좌표에 대해 알아보자.요소의 위치 및 크기 관련 속성을 알아보자.지금까지는 html 요소의 위치와 크기를 구하기 위해 다음과 같이 사용했다.$대상.css("left");     $대상.css("width");위처럼 사용할 때 위 값들은 모두 단위를 포함한 문자열 정보이기 때문에 현재 위치에서 50만큼 이동하거나 현재 크기를 100만큼 크게 처리를 하기 위해서 아래와 같이 형변환을 했다.$대상.css(“left”, (parseInt($대상.css(“lef..

이번 포스팅에서는 이전 포스팅에서 알아본 스타일과 클래스에 대한 예제를 확인해 보고 순서대로 속성 값, 이벤트, 좌표, 애니메이션이 어떤 기능을 하는지 알아보고 각 기능에 대해 예제를 알아보는 시간을 가져보도록 하겠다.  스타일 다루기 스타일 다루기   스타일 다루기 스타일 다루기 실행 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5   실행 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 실행 메..

이번 포스팅에서는 JQuery 예제를 진행하고자 한다. 자바스크립트와 제이쿼리를 사용해서 각 어떻게 스타일을 바꿀 수 있는지 알아보자.DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>자바스크립트로 색상 바꾸기title>head>body> div> ul class="menu" id="menu1"> li>김밥li> li>비빔밥li> li>제육덥밥li> li>오징어덮밥li> li>돌솥밥li> ul> ul class="menu" id="menu2"> li>자라탕li> li>감자탕li> li>오리탕li> li>닭백숙li> li>..

저번 포스팅에서 자바스크립트와 자바스크립트 기본적인 사용법에 대해서 알아보았고 이번 포스팅은 JQuery에 대해서 알아보자. JQuery란클라이언트 측 페이지 제작을 손쉽게 만들어주는 자바스크립트 라이브러리이다.여러 브라우저에서 동작하는 사용하기 쉬운 API를 통해 HTML 문서 탐색과 조작을 한다.이벤트 처리, 애니메이션, Ajax 등을 간단하게 만들어 준다.함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있다. 주요한 특징을 알아보자.특징크로스 브라우저 호환성: jQuery는 다양한 브라우저에서 일관되게 동작하도록 설계되어, 개발자가 브라우저 호환성 문제를 신경 쓰지 않고 개발할 수 있게 해 준다.DOM 탐색 및 조작: jQuery는 CSS 선택자를 사용하여 HTML 문..

이번 포스팅은 자바스크립트의 기본 예제들을 알아보려 한다.기왕 프런트를 기초부터 배우니 백엔드와 겹치거나 프로그래밍 언어에서도 배웠던 것과 관계없이 기존 사용해 오던 것과 사용방법이 다를 것이기 때문에 기초부터 다시 알아보고자 한다. 변수와 자료형, 연산자 변수를 선언하는 규칙 3가지이름은 의미있게 짓는다.여러 단어를 연결한 변수 이름을 낙타 모양으로 만들어 준다.변수 이름의 첫 글자는 반드시 문자나 _,$로 시작해야 한다.변수 선언과 값/식 할당var 다음에 변수 이름을 적어서 변수를 선언한다.변수 오른쪽에 = 으로 저장할 값이나 식을 작성한다. (변수 선언과 값 할당을 동시에 할 수 있다.) 이와 같이 calc 함수를 정의할 수 있다.var로 변수를 선언하고 연산을 진행할 수 있으며 document ..

이번 포스팅으로 웹 페이지의 뼈대를 이루는 HTML과 HTML 요소의 서식을 지정할 수 있는 CSS 그리고 HTML에 CSS를 적용하는 방법과 전반적인 기초에 대해 복기하고 진행하도록 하겠다. HTMLHypertext Markup Language의 약자로 웹 페이지를 만드는 데 사용하는 언어이다.HTML에서 Hypertext의 의미는 링크를 통해 다른 문서로 이동할 수 있는 문서를 뜻한다.하이퍼텍스트라는 개념이 등장하기 전에는 방대한 양의 문서를 효율적으로 다루기 위해 색인 또는 다양한 문서 분류법이 사용됐다.웹이 등장하며 HTML 문서를 이용해 문서 간 참조가 자유로워짐에 따라 특정 단어가 담긴 문서를 쉽게 검색할 수 있게 되었다.HTML은 마크업 언어로 여러 태그를 이용해 제목이나 문단 등을 구분해 ..

이번 포스팅부터 프런트엔드에 대해 알아볼 텐데, 웹 프로그래밍에서 백엔드와 프런트엔드가 있다.이미 백엔드는 기본적인 것은 할 줄 알지만 프론트엔트적 지식은 아주 적다.html과 css, thymleaf 정도 간단히 사용할 줄 알며 js파일이나 script, jquery를 해석정도는 할 수 있지만 구상하는 기능을 구현할 레벨은 되지 않는다. 그러므로 이번 포스팅부터 자바스크립트를 시작으로 JQuery, JSP까지 예제와 실습을 통해 알아보도록 하자. 웹 프로그래밍에서 웹 브라우저와 관련된 프로그램을 작성에 각 백엔드와 프런트엔드가 하는 일을 간략히 알아보자.back-end : 서버에서 데이터 관리를 프로그래밍 서버 뒷 단에 존재한다.front-end : 서버에서 받아온 정보를 웹 브라우저에 어떻게 표시할 ..