본문 바로가기

분류 전체보기520

defer html 태그 내부에 body 태그 부분에 존재하는 어떤 특정 태그를 자바스크립트를 통해서 사용 하려면 어떻게 해야 할까 ? 태그 내부에 src 속성의 값으로 지정된 Xxx.js 파일이 HTML 구조를 모두 읽고 나서 동작 되도록 만들어야 한다. 따라서, 태그 내부에 defer 라는 속성을 추가 하면 된다. 2023. 10. 29.
유의적 버전 (Semantic Versioning == SemVer) Semantic 단어 뜻은 유의미한 == 의미있는 == 유의적인 이다. 말 그대로 의미가 있는 버전이라는 것이다. 프로젝트가 개발되는 특정한 시점의 어떠한 상태에 의미를 부여 해서 숫자를 매기는 방법을 의미 한다. 버전 예시) 버전은 . 을 기준으로 나뉘어서 구성 되어 있는데, 이것은 아래와 같다. Major.Minor.Patch 20.9.0 버전을 예시로 한다면, Major 버전 : 기존 버전과 호환 되지 않는 새로운 버전. 즉, 기존 버전은 19 버전을 의미 한다. 프로젝트에 큰 변경 사항이 발생 하면 이렇게 Major 숫자가 올라 가게 된다. Minor 버전 : 기존 버전과 호환 되는 기능이 추가 된 버전. 즉, 20 버전에 새로운 기능이 추가된것을 의미 한다. 기존 상태와 호환이 가능하므로, Ma.. 2023. 10. 29.
서버 (프로젝트) 실행 및 빌드 하기 1. 서버를 빌드 하기 위해서 프로젝트 내부에 index.html 과, main.js 를 생성 한다. 2. main 이라는 이름을 가진 JS 파일 에서는 import 키워드를 사용 해서 설치한 모듈을 사용 한다. 문법은 import _ from '패키지명' 이다. 테스트를 위해 console.log 에 lodash 패키지 내부에 있는 upperCase() 함수를 작성 했다. lodash 패키지의 여러 기능을 사용 하기 위한 문법은 언더바 ( _ ) 와 . 을 사용 한다. 더보기 lodash 라이브러리의 다양한 함수와 기능을 간편하게 사용 하기 위한 방법으로 _ (언더바) 를 사용 한다. 언더바는 lodash 라이브러리를 불러올 때 사용 되는 관용적인 변수 이름 이다. 3. main 이라는 이름을 가진 J.. 2023. 10. 29.
NPM (Node Package Manager) NPM : NPM 은 전 세계의 개발자들이 만든 다양한 기능 ( == 패키지 == 모듈 ) 들을 관리해주는 매니저 이다. 따라서 여러 유용한 기능들을 프로젝트에 설치 하고 관리를 하고 싶을 때 NPM 을 사용 한다. (자바의 maven / 파이썬의 pip 라고 생각 하면 된다) 터미널에 npm install XXX 명령어를 입력하여, 프로젝트에 NPM 생태계 안에 들어 있는 어떤 패키지 ( == 기능 == 모듈 ) 를 인스톨 할 수 있다. Node.js 를 설치 하면, 자동으로 NPM도 설치가 되어 있다. 결국, Node.js 환경 에서 NPM 이라는 개념을 활용 하여 각각의 패키지를 직접 설치 하고 관리 하며 동작 시켜 줘야 한다. NPM 버전 또한 cmd 창에 아래의 명령어를 입력 하여 확인 할 수 .. 2023. 10. 28.
Node.js 1. Node.js 는 Chrome V8 JavaScript 엔진으로 만들어진 JavaScript 언어가 동작하는 환경을 의미. 2. Chrome V8 자바스크립트 엔진 이란 ? >> 자바스크립트의 문법을 해석 + 동작 시켜 줄 수 있는 엔진. 3. 자바스크립트가 동작할 수 있는 환경 ? 1) Node.js 가 설치 되어 있는 특정한 컴퓨터 환경 2) 크롬 등과 같은 웹 브라우저 >> 자바스크립트를 통해 컴퓨터를 제어 할 수도 있고 브라우저의 내용도 제어 할 수 있다. 4. 웹페이지를 개발 하기 위해 Node.js 를 사용 하는 이유 ? 웹 브라우저는 오로지 HTML / CSS / JS 세개 언어만 읽을 수 있다. 이 언어들로 가지고 웹 개발을 하게 되면 최종적으로는 완성을 시킬 수는 있으나, 그 과정은.. 2023. 10. 28.
Servlet & Spring MVC 1. Servlet 탄생 초기의 웹 서비스는 정적 페이지만 제공 했다. (클라이언트 >>> 요청 >>> Web Server (정적 컨텐츠) >>> 응답 >>> 클라이언트) 그런데 사용자들마다 각 요청에 대해 다른 응답을 해줘야 하는 상황이 발생 했다. 그래서, WAS (Web Application Server) 의 개념이 추가 되었다. WAS 로직을 수행 해서 동적 컨텐츠를 생성 할 수 있게 되었다. (클라이언트 >>> 요청 >>> Web Server >>> WAS (동적 컨텐츠) >>> Web Server >>> 응답 >>> 클라이언트) 2. Servlet 이란 ? 동적 컨텐츠를 만드는 데에 사용 되는 자바 기반의 웹 어플리케이션 프로그래밍 기술 혹은 그러한 기술에서 사용 되는 객체 즉, WAS 내에서.. 2023. 10. 27.
Ajax 1. Ajax : Asynchronous JavaScript and XML 자바스크립트를 사용 하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청 하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식. 2. HTML, CSS, JS, DOM, XML, XMLHttpRequest 를 이용한 새로운 (2005 년 기준) 접근법 이자 싱글 스레드인 자바스크립트 엔진을 보완 하기 위한 비동기 통신 방식을 의미. 3. Ajax 적용 이전의 웹페이지 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로 부터 받는다. 즉, 웹페이지 전체를 처음 부터 다시 렌더링 하는 방식으로 동작 했다. 이는, 필요한 부분이 아닌 다른 부분들도 모두 렌더링 해서 페이지의 모든 부.. 2023. 10. 25.
쿠키와 세션 1. 쿠키란 ? 클라이언트에 저장되는 Key-Value 형태의 작은 데이터 파일을 뜻함. 2. 무엇을 저장할까 ? 1) 사이트에 방문한 이력 2) 검색 기록 3) 로그인 상태 3. 쿠키의 특징 1) 브라우저 단위로 쿠키를 생성 한다. (사용자 단위가 아니다) 같은 기기로 동일한 도메인 사이트를 접속 했는데, 크롬의 쿠키와 사파리의 쿠키가 다르다. 예시로 네이버를 크롬으로 접속 할 때, 로그인이 되어 있는데, Edge로 접속 하면 로그인이 되어 있지 않다. 2) 다른 도메인을 대신 해서 쿠키를 발급 받을 수 없다. 3) 만료 시간 까지 상태 정보를 유지 한다. 만료 시간은 서버가 쿠키를 만들 때, 설정해 줄 수 있다. 4. 쿠키를 사용 하는 이유 ? 웹사이트 재방문 시 효율적으로 서비스를 제공 하기 위함 .. 2023. 10. 25.
RESTful API 1. API 란? Application Programming Interface : 두 어플이 서로 통신 하는 방법을 정의 2. RESTful 이란 ? REST + FUL REST 아키텍처 스타일 요청과 응답을 하는 API 를 뜻함 3. REST 아키텍처의 개념은 왜 생겨났을까 ? REST에 기반이 되는 HTTP 프로토콜 프로토콜 : 클라이언트와 서버 간의 데이터를 주고 받기 위해 사용되는 표준 규약 이렇게 HTTP 프로토콜이 표준화 되어 있긴 하지만, 이를 어떻게 구현 해야 할지는 유연 하기 때문에, 개발자마다 이를 어떻게 해석 하는지에 따라 구현이 달라지게 된다. 그래서, 개발자마다 각자 다른 방식으로 구현을 하게 되면 복잡해지고 유지보수가 어려워지게 된다. 따라서, 웹 (HTTP) 의 장점을 최대한 .. 2023. 10. 25.

티스토리툴바