Front-end Developer

Javascript this를 공부해야지 해야지 하다가 드디어 공부를 하고 이렇게 정리를 해봅니다. this는 어떤 함수나 객체를 가르키게 되는데 어디서 호출되냐에 따라서 가르키는 함수 또는 객체가 달라집니다. 총 크게 6가지 경우가 있는데 어떤 경우에서 어떻게 변하는지 정리해보겠습니다. 1. 전역에서 쓴 this 전역에서 this를 호출하면 this는 Window라는 전역 객체를 가리키게 됩니다. (Node.js에서는 Global) Window(전역 객체)는 javascript의 모든 객체, 함수, 변수들을 포함하고 있습니다. //1. 전역에서 호출 var x = this; console.log(x); //Window 2. 일반 함수 안에서 쓴 this 일반 함수 안에서 this가 호출이 되면 this..

script async & defer JavaScript를 사용할 때 코드의 양이 별로 없으면 상관 없지만 그 양이 많을 때 Javascript 파일을 어떻게 HTML파일에 붙여야 효과적으로 코드가 실행이 될지 고민해야한다. async 와 defer은 boolean 타입이여서 return처럼 그대로 사용하면 프로그램이 인식한다. 고려해야될 사항은 총 3가지 인데 Script가 다운받는데 걸리는 시간, Script가 실행되는데 걸리는 시간, Script가 실행되기 전에 필요한 HTML이 파싱이 되었는지이다. 이 세가지를 고려하면서 어떤 코드가 제일 효율적일지 생각해봐야 한다. async 또는 defer 이 들어가지 않은것이 제일 비효율적일 것이다. async, defer 중에서 어떤것이 나을지 봐야한다. ..

NomadCoder에서 vanilla JavaScript로 모멘텀을 만드는 project를 했었는데, 이름을 삭제 하려면 localStorage에 들어가서 이름을 삭제 해야되는데 일반 사람들이 접근하기에는 어렵다는 생각이 들었다. 그래서 이름옆에 작게 이름과 인사 말을 삭제 할 수 있는 버튼을 만들어 보았다! Button 만들기 function makeButton() 먼저 button을 추가하기 위해서 makeButton() 이라는 함수를 만들었고, HTML에 button 태그를 추가하기 위해서 버튼 태그를 만드는 delBtn이라는 변수를 만들었다. button 모양을 만들기 위해서 button 태그 안에 텍스트를 넣었고(innerText) 어떤걸로 만들까 고민하다가 제일 simple한걸로 만들자는 생각..

Ajax Ajax는 서버로부터 데이터를 가져와서 전체 페이지를 새로 고치지 않고 일부만 로드할 수 있게 하는 기법이고 비동기 처리 모델 특징을 가지고있다. JSON이나 다른 텍스트 파일에서 데이터를 가져올 수 있다. 비동기 처리 모델 (asynchronouse processing model)은 클라이언트가 서버에 데이터를 요청하면, 작업이 완료되는것을 기다리지 않고 나머지 페이지를 계속 로드한다. Ajax 시작하기 먼저 JSONView를 설치해서 JSON 파일 보기 쉽게 한다. Ajax는 jQuery를 임포트한 페이지에서만 동작이 가능하다. Ajax 기본 골격 type: "GET" GET : 클라이언트가 데이터 조회(Read)를 요청할 때 예) 미세먼지 수치 조회, 영화 목록 조회 POST : 클라이언트..

오늘은 Javascript의 기본적인 개념에 대해서 정리해보겠다. I. Variable(변수) 변수는 정보들을 저장할 수 있는 저장소이다. 뒤에 나오는 세 단어들(var, let, const)은 변수를 선언할 수 있다. 1. var 변수들은 변수값을 바꿀 수 있고 재선언 할 수 있다. var greeter = "hey hi"; greeter = "say Hello instead"; var greeter = "hey hi"; var greeter = "say Hello instead"; 2. let 변수들은 변수 값을 바꿀 수는 있지만 재선언을 할 수 없다. let greeting = "say Hi"; greeting = "say Hello instead"; let greeting = "say Hi"; l..