본문 바로가기

Programming/Javascript91

[Javascript] XMLHttpRequest 이 객체를 사용하는 이유나 Ajax 등에 대해선 아래 포스트를 참조해주세요. 2021.10.15 - [Programming/CS] - Ajax Ajax 해외 축구를 많이 보던 저에게 단어 자체는 Ajax라는 단어는 익숙한 단어였습니다. 아약스라는 축구팀이 있기도 하고 그리스 신화에도 아약스라는 인물이 등장하기 때문에 처음 이 단어를 들을 bamtory29.tistory.com 1.XMLHttpRequest 비동기 통신을 관리하는 XMLHttpRequest 객체를 이용하면 자바스크립트로 서버와의 통신을 어느정도 제어할 수 있습니다. 이름에 XML과 HTTP가 들어가긴 하지만 이 두가지만 통신하는 것이 아니고 객체의 프로퍼티들을 통해서 JSON 문자열이나 일반 Text, HTML 문자열까지도 통신할 수 있습.. 2021. 10. 17.
[Javascript] 자바스크립트 코딩 컨벤션 어쩌면 이 글이 이 카테고리의 맨 앞으로 갔어야 할지도 모릅니다. 하지만 중요성을 잊고있다가 최근 파일 정리를 하면서 보니까 자바스크립트의 표준 코딩 규약과는 다르게 해놓은 것들이 많아서 스스로 다시 정리할 필요성을 느끼게 되었습니다. 늦었지만 이제서라도 한 번 다시 정리해보려고 합니다. 0. 코딩 컨벤션 코딩 규약, 코딩 컨벤션, 코딩 규칙 등이라고 불리는 이 규칙들은 다른 사람들이 내 코드를, 내가 다른 사람의 코드를 리뷰할 때 의사소통을 원활하게 만들어주는 규칙들입니다. 사람마다 익숙한 표기법이 있고 스타일이 있기 때문에 협업을 하게된다면 서로의 코딩 스타일이 달라서 읽고 해석하는데 애를 먹게 되죠. 실제로 지금 3학년이 되어 1학년때 과제로 냈던 소스 코드들을 살펴보면 변수명 규칙이나 띄어쓰기가 .. 2021. 10. 10.
[Javascript] 모듈 Module ES2015가 등장하면서 자바스크립트에서도 모듈 기능을 지원하기 시작했습니다. 1. 모듈 모듈이란 특정 기능을 가진 함수나 변수들을 모아둔 것을 말합니다. 예를 들면 수학적 계산을 하는 함수들을 모아둔다 던가, 문자열과 관련한 다양한 기능들을 모아두고 모듈이라고 할 수 있습니다. 이렇게 비슷한 기능을 가진 함수와 변수들을 모아두었기 때문에 한 프로그램에서 뿐만이 아니라 다른 프로그램에서도 이용할 수 있는 기능의 모임이 될 수도 있습니다. 그렇기에 모듈은 함수처럼 하나당 한 파일을 만들기 보다는 비슷한 기능끼리 여러개를 모아서 하나의 파일을 구성합니다. 2. 모듈 만들어보기 간단하게 덧셈, 뺄셈을 하는 모듈을 만들어보겠습니다. 우선 html 파일인데, 다음은 모듈입니다. 간단하게 덧셈만을 하는 모듈을 만들.. 2021. 10. 5.
[Javascript] 웹 스토리지 Web Storage DB 공부를 하다가 문득 생각해 봅니다. 웹 개발을 하다가도 잠깐 저장하고 싶은 정보가 있는데 그럴때마다 DB를 연동하고 서버를 켜두는 것은 굉장한 낭비가 될거같은데 어디다 저장해야하지? 하는 생각에 찾아보니까 스토리지(Storage)라는 기술이 존재하고 있었습니다. 1. 웹 스토리지 사실 웹에서 정보를 저장해 두는 수단엔 대표적으로 '쿠키'라는 것이 존재합니다. 하지만 이 쿠키는 크기가 매우작고 네트워크 통신이 필요하기에, 쿠키의 최대 크기(약 4KB)보다 큰 정보를 담거나, 네트워크 통신이 필요하다면 사용하는데 문제가 발생합니다. 무엇보다 쿠키는 자바스크립트만으로 조작하는 것이 어렵다는 단점이 있습니다. 그래서 이런점을 보완하기 위해 웹 스토리지를 이용하게 되었습니다. 웹 스토리지는 브라우저에 내장된.. 2021. 10. 2.
[Javascript] async/await async와 await는 ES2017(ES8)에서 추가된 문법입니다. 주로 비동기 프로그래밍에서 자주 사용하며, 이전 포스트에서 다룬 프로미스 객체를 좀 더 간결하게 바꿔줍니다. async와 await 문법은 지난번에 배운 프로미스 객체의 비동기 처리와 이어집니다. 2021.05.24 - [Programming/Javascript] - [Javascript] 프로미스(promise) 객체 [Javascript] 프로미스(promise) 객체 자바스크립트로 비동기 처리를 하는 경우에는 콜백 함수를 이용했었습니다. 그러나 콜백 함수는 문제점이 많았기에 이러한 현상을 해결할 대안으로 프로미스 객체를 ES2015에서부터 도입하게 됩 bamtory29.tistory.com 1. async와 await의 기본 문법.. 2021. 5. 24.
[Javascript] 프로미스(promise) 객체 자바스크립트로 비동기 처리를 하는 경우에는 콜백 함수를 이용했었습니다. 그러나 콜백 함수는 문제점이 많았기에 이러한 현상을 해결할 대안으로 프로미스 객체를 ES2015에서부터 도입하게 됩니다. 이 객체도 또한 자바스크립트의 내장 객체입니다. 콜백 함수를 다루지 않았어서 간단하게 설명하고 넘어가려고 합니다. 콜백 함수(CallBack Function)이란 나중에 호출되는 함수입니다. 비록 콜백 함수라고 명명되어있기는 하지만 일반적인 자바스크립트 함수와 똑같습니다. 다만 차이점으로는 코드에서 명시적으로 호출되는 것이 아닌, 특정 시점이나 이벤트의 발생에 따라 시스템에서 호출되는 함수입니다. 더 간단하게 정리하자면, 문법적으로는 일반 함수들과 차이는 없지만 호출 방식이 다르다 정도입니다. 1. 왜 프로미스 객.. 2021. 5. 24.
300x250