전체 글

코딩 개발/Javascript

Web 서비스의 역사와 발전

반복학습이 중요합니다. 다시 작성해보겠습니다. Internet 자주 사용하는 인터넷이 과연 무엇일까요? 사전적인 의미로는 여러 통신망을 하나로 연결한다는 inter + network 입니다. 전 세계의 컴퓨터가 서로 연결되어 정보를 교환할 수 있는 하나의 거대한 컴퓨터 통신망 -> 컴퓨터 네트워크를 의미합니다. 1960년대, 인터넷의 탄생 1950 - 모뎀(modem) 미 국방부가 방공(적의 항공기나 미사일의 공격을 막음) 시스템을 구축하기 위해 개발 통신 기술과 컴퓨터 기술의 결합 컴퓨터에서 사용하는 디지털 데이터를 전화선이 활용할 수 있는 아날로그 신호로 바꿈으로써 광범위하게 설치되어 있는 전화선을 통해 컴퓨터 통신을 가능하게 하는 장치 Modem = modulation(변조) + Demodulati..

코딩 개발/Javascript

Javascript - event

addEventListener 어떤 이벤트를 진행했을 때 함수 내부의 내용을 실행을 요청하는 함수입니다. (event 뜻 : 사건, 행사, 경기 ...) 요소.addEventListener(이벤트종류, function() { //이벤트가 일어났을 때 실행할 내용 }); 지정한 요소에 이벤트리스너 함수를 지정하고 이벤트의 종류를 사용자가 실행하면 그 안에 함수가 실행되는 느낌입니다. 이벤트 종류에는 많은 것들이 있는데, (그냥.. 사용하고 싶은 이벤트가 있으면 찾아서 하는 것으로... 뭔가 직접 사용해봐야 알 것 같다) click : 클릭 contextmenu : 마우스 오른쪽 메뉴 선택 이벤트, 키보드 dblclick : 더블클릭 mousedown : 마우스를 눌렀을 때 mouseenter : 마우스가 ..

코딩 개발/Javascript

Javascript - Object

객체와 배열에서 사용가능한 for in 문을 먼저 알아보도록 해요. for - in 문 배열이나 객체 전체에 반복문을 줄 때 사용하는 문법입니다. const arr = ["coconut", "banana", "pepper", "coriander"]; //첫 번째 방법 for (let i = 0; i < arr.length; i++) { console.log(i); console.log(arr[i]); } //두 번째 방법 for (let i in arr) { console.log(i); console.log(arr[i]); } 첫 번째 방법은 아시다시피 for 구문을 이용하는 방법 입니다. 개인적인 생각으로 for 구문은 조금 더 정밀한 방법으로 반복문을 진행하는 방법이라고 생각이 됩니다. index의 ..

코딩 개발/Javascript

JavaScript - async 와 defer의 차이(feat.드림코딩)

HTML 파일과 자바스크립트 파일이 열리는 과정을 확인하면서 async와 defer의 차이를 확인해봅시다. (드림코딩사랑해요) HTML 파일을 parsing 하는 과정 중 js 파일을 먼저 실행하기 위해서 html 부분에 태그를 넣으면 js 파일이 html파일pasing 중간에 진행된 후 html 파일이 실행됩니다. 이렇게 진행하게 될떄, js 파일이 어마어마하게 크고 복잡하다면 html 파일이 pasing되지 않아서 웹페이지가 보이지 않을 수도 있다는 단점이 있습니다. 그래서 body 밑에 script 파일을 넣어서 html 파일을 다 pasing 하고 js 파일을 오픈하는 방법을 사용하면 웹 페이지는 빨리 열리겠죠? 하지만.... 이것 또한 문제가 있습니다. 어떤 문제일까요... 바로 기본적인 htm..

코딩 개발/Javascript

JavaScript - Class

Class 객체지향 프로그래밍의 핵심입니다. 이 클라스라는 것이 왜 필요하는지 생각을 해보면 백만개의 오브젝트를 만들면 자바스크립트 파일에 너무나도 많은 양의 데이터를 삽입해야합니다. 그래서 큰 틀을 만들고 큰틀에 재료만 바꿔서 데이터를 찍어내는 느낌으로 진행을 하면 작성해야하는 양이 확연히 줄게 되겠죠? 뭐... 롤 케릭터나 자동차의 정보 등 너무 많은 케릭터나 차가 있다면? 이 클라스를 사용하여 정보를 만드는 것이 편하다고 생각합니다. 롤을 좋아하기 때문에 롤 케릭터로 예를 만들어 보겠습니다. (하기에 작성한 유투버의 class 설명은 100번 봐도 유의미합니다. 아주 좋습니다.) const 가렌 = { Q : '침묵', W : '방어' } const 누누 = { Q : '강타', W : '눈덩이 굴..

코딩 개발/Javascript

JavaScript - Scope

Scope 변수가 어디까지 쓰일 수 있는지 의 범위를 의미합니다. scope를 알기전에 block이란 중괄호 {} 로 감싸진 것을 block 이라고 합니다. function 의 내부는 하나의 block 입니다. Block 이제 block 의 예제를 보실까요. function getResult() { let result = 10; console.log(result); } console.log(result); 이렇게 진행을 했을 때, 아마 is not defined 가 나타날 것입니다. block 외에서 함수가 선언이 되지 않으면 result의 값은 외부로 노출이 되지 않기 때문에 getResult()를 선언해야만 비로소 result를 알게됩니다. 따라서 getResult()를 한번 선언하고 콘솔을 확인하게..

호소세
호소세의 개발 블로그