본문 바로가기

Programming/JavaScript14

[JS] HTTP 란 무엇일까 이번 포스팅은 HTTP 프로토콜에 대해서만 알아보려고 한다. 이전에는 HTTP란 Hyper Text Transfer Protocol 로 웹 간의 데이터를 주고 받기 위한 통신 규약으로만 간단히 이해하고 포트번호는 80을 사용한다고만 이해하고 있었다.오늘은 HTTP에 대해서 너무 깊진 않지만 약간 알아보려고 한다.HTTP ( Hyper Text Transfer Protocol )API와 같이 다른 서버와 통신을 할 때는 특정한 규칙에 맞춰 그 통신이 이루어져야 한다.현재 웹에서 통신을 할 때 가장 흔하게 HTTP를 사용한다.HTTP는 Hyper Text Transfer Protocol의 약자로, 간단하게 이야기하면 서로 다른 서버 간에 문자 형식으로 데이터를 주고 받을 때 지켜야 하는 규약이다.우리가 HT.. 2024. 6. 14.
[JS] 호이스팅 이전 포스팅에서는 스코프에 대한 원리와 이해를 해보기 위해 공부를 진행하였다.이번에는 호이스팅이란 무엇이고, 이것의 원리는 어떻게 되는 지 공부를 해보려고 한다. [JS] Scope(스코프)오늘은 JS 구문에서 스코프와 호이스팅의 개념에 대해서 공부를 해보려고 한다.평소에 프론트엔드 부분에 대한 개발을 하다보면, 우리는 아래와 같은 장애를 확인할 수 있다.Uncaught ReferenceError :hong-study.tistory.com먼저 호이스팅에 대한 개념을 알아보기 전에 아래와 같은 두 예시를 드며 호이스팅이란 무엇인가에 접근을 할 수 있다.console.log(item)let item = 1;console.log(item);var item = 1;위는 각 각 let 키워드와 var 키워드로 i.. 2024. 6. 14.
[JS] Scope(스코프) 오늘은 JS 구문에서 스코프와 호이스팅의 개념에 대해서 공부를 해보려고 한다.평소에 프론트엔드 부분에 대한 개발을 하다보면, 우리는 아래와 같은 장애를 확인할 수 있다.Uncaught ReferenceError : confined is not defined at :4:13이러한 에러가 발생하는 가장 큰 이유를 그저 박수 내부에 변수가 갇혀있다고로만 이해하고, 수정을 진행하였는데 오늘은 이러한 에러가 왜 발생하는 지 원인에 대해서 공부를 해보려고 한다.JavaScript에는 scope라는 개념이 존재한다.스코프는 크게 전역 스코프, 지역 스코프가 있는데 이해하기 쉬운 예로는 전역 변수, 지역 변수가 있다.전역 변수의 경우는 특정 함수에 갇히지 않고, 참조가 가능하지만 지역 변수의 경우는 해당 함수 내에서만.. 2024. 6. 14.
[JS] To do List 구현 이전에 여러 포스팅을 이용해, D-day 카운팅하는 프로그램을 간단하게 만들고, 로컬스토리지에 저장하여 유지하는 거 까지 공부를 진행하였다. D-Day 카운팅과 관련된 것은 아래 주소를 이용해 다시 확인해볼 수 있다.그리고 오늘은 To do List를 구현해보려고 한다. [JavaScript] 날짜를 생성하는 New DateDate 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성한다.Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는 UNIXhong-study.tistory.com  [JS] D-DAY 카운트 구현[JavaScript] 날짜를 생성하는 New DateDate 생성자는 시간의 특정 지점을 나타내는 Da.. 2024. 6. 13.
[JS] Local Storage [JS] D-DAY 카운트 구현[JavaScript] 날짜를 생성하는 New DateDate 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성한다.Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난hong-study.tistory.com이전 포스팅에서는 JS를 이용해 D-day 카운터를 구현을 해보았다. 하지만 입력한 D-Day 화면을 새로 고침할 때마다 내가 입력한 모든 값과 카운팅되는 값들이 사라지는 현상이 있는데, 이 문제를 Local Storage로 해결해보고자, 오늘은 Local Storage는 무엇이고 언제 사용하는 지에 대해 공부하려고 한다.웹 브라우저에서 어떠한 로직에 활용되는 데이터를 유지시키고자 한다면, 해당 데이터를 저장할.. 2024. 6. 13.
[JS] D-DAY 카운트 구현 [JavaScript] 날짜를 생성하는 New DateDate 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성한다.Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는 UNIXhong-study.tistory.com이전 게시물을 통해 new Date 함수를 이용해, 오늘의 날짜와 D-Day를 구해볼 수 있었다.오늘은 new Date 함수를 응용해 D-Day를 구현해보려고 한다.설명은 위해 아래와 같이 표기element : 초록색method : 파랑색Parameter : 주황색Variable : 빨강색HTML 구성 및 설명 D-DAY 0 일 .. 2024. 6. 13.
[JavaScript] 날짜를 생성하는 New Date Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성한다.Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는 UNIX 타임스탬프를 담는다.구문은 아래와 같이 기입하여 사용한다.new Date();new Date(value);new Date(dateString);new Date(year, monthIndex);new Date(year, monthIndex, day);new Date(year, monthIndex, day, hours);new Date(year, monthIndex, day, hours, minutes);new Date(year, monthIndex, day, hours, minutes, second.. 2024. 6. 11.
[JavsScript] API 활용 [JavaScript] 비동기 AJAX [JavaScript] 이벤트 핸들러 ( DOM ) [JavaScript] 자바스크립트 이벤트 핸들러 [JavaScript] 자바스크립트 기본 2 [JavaScript] 자바스크립트 기본 [HTML, CSS] CSS 문법 FLEX Flex 참고 사이트 CSS Flex 완벽 가이드 CSS Fle hong-study.tistory.com API API는 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘이다. 예를 들어 카카오 소프트웨어 시스템에는 지도나 메신저 등의 데이터가 들어있고 이를 활용해 어려가지 기능을 구현 및 데이터를 받아서 사용할 수 있다. API는 Application Programming Interface .. 2024. 3. 7.
[JavaScript] 비동기 AJAX [JavaScript] 이벤트 핸들러 ( DOM ) [JavaScript] 자바스크립트 이벤트 핸들러 [JavaScript] 자바스크립트 기본 2 [JavaScript] 자바스크립트 기본 [HTML, CSS] CSS 문법 FLEX Flex 참고 사이트 CSS Flex 완벽 가이드 CSS Flex는 효율적인 레이아웃 설계를 hong-study.tistory.com [JavaScript] 이벤트핸들러 ( BOM ) [JavaScript] 이벤트 핸들러 ( DOM ) [JavaScript] 자바스크립트 이벤트 핸들러 [JavaScript] 자바스크립트 기본 2 [JavaScript] 자바스크립트 기본 [HTML, CSS] CSS 문법 FLEX Flex 참고 사이트 CSS Flex 완벽 가이드 CSS Fle h.. 2024. 3. 7.
[JavaScript] 이벤트핸들러 ( BOM ) [JavaScript] 이벤트 핸들러 ( DOM ) [JavaScript] 자바스크립트 이벤트 핸들러 [JavaScript] 자바스크립트 기본 2 [JavaScript] 자바스크립트 기본 [HTML, CSS] CSS 문법 FLEX Flex 참고 사이트 CSS Flex 완벽 가이드 CSS Flex는 효율적인 레이아웃 설계를 hong-study.tistory.com BOM ( Browser Object Model ) BOM은 앞 선 DOM 문서에서 한 번 소개했듯이 브라우저 객체 모델이라 하고, 내장 객체들을 의미한다. window, location, history, document 등이 포함된다. BOM은 자바스크립트의 두 번째 강력한 기능이다. window 객체는 웹브라우저에 대한 전반적인 정보 취득이나.. 2024. 3. 7.
반응형

티스토리툴바