개발자가 되고 싶은 새

이번 포스팅은 비동기 프로그래밍 Ajax 에 관한 글이다. 들어도 들어도 무슨 말인지 모르겠고 나만 아작쓰가 났었는데 이제는 이해를 할 수 있길... 🎈 에이젝스 Ajax 란? 비동기 통신을 위한 기술 묶음 JavaScript 와 XML 또는 JSON 을 사용해 비동기 통신 방법으로 웹 애플리케이션을 제작하는 것 = 서버측 Scripts 와 통신하기 위한 XMLHttpRequest 객체를 사용하는 것 - 페이지 전체를 새로고침 하지 않아도 수행되는 비동기성 - 서버측으로 다양한 형식의 정보를 주고 받을 수 있음 XML : HTML 보다 강력하고 확장 가능한 언어 JSON : XML 보다 가볍고 사용하기 편리한 표준. 자바스크립트 객체 표기법 🎈 AJAX 의 장점 - 요청 / 응답 과정을 통해 불필요한 부..

객체, 배열안의 값을 추출해서 변수, 상수에 바로 선언하는 문법 객체를 설정하고 그 객체 안에 key 값을 변수 혹은 상수에 선언해야하는 상황이라면? const object = { a : 1, b : 2 }; const a = object.a; const b = object.b; console.log(a); console.log(b); 객체 안의 key, value 값이 많아질수록 불편해진다. const object = { a : 1, b : 2 }; const { a, b } = object; 이렇게 비구조화 할당을 통해 객체 안에 있는 값을 쉽게 함수나 변수 안에 설정할 수 있다. const array = [1,2]; const [one, two] = array; console.log(one);// ..

함수는 동작을 나타내며, 값처럼 취급할 수 있으고, 값처럼 할당, 복사, 선언할 수 있다. 함수의 용도는 중복 코드를 피하기 위함이다. 함수를 만들기 위해서는 1. true / false 값을 빨리 구별해낼 줄 알아야함 2. 값을 잘게 쪼갤 수 있어야 함 🎈 함수 선언문 Function Declaration 과 호출 함수 선언문으로 함수를 생성하면, 함수가 독립된 구문 형태로 존재하게 된다. function functionName(매개변수){ function body } // 함수 선언 functionName(); // 함수 호출 함수를 호출하면 함수 본문이 실행됨 ( ) : 함수실행연산 sum1(); function sum1(a,b){ returen a+b; } 함수 자체가 통째로 lexical env..

Sass 에서 버튼, 색깔 등등으로 파일을 분리해 작성해주고 나중에 한꺼번에 css 파일로 바꿔서 썼듯이, js 에서도 용도별(?)로 쓰는 함수들의 파일을 분리해준다. 이 때 분리된 파일 각각을 모듈 (module) 이라고 부른다. 이렇게 하나하나 연결해줘야 하는것들을 `type="module"` 모듈 프로그래밍으로 사용해보자! 모듈 프로그래밍에서는 `defer` 가 기본값이기 때문에 생략할 수 있다. dom 파일에 있는 attr,bindEvent,, 등등 많은 폴더가 있다. 🎈 모듈 내보내기 폴더 안에서 꺼내주고 싶은 함수나 변수 앞에 `export` 를 작성해준다. 이 폴더에서 불러오고 싶은 파일들을 index.js 로 불러와준다 여기서는 dom, error, math 안에 있는 index.js 파일..

- 원시타입 Primitive data type : 변경 불가능한 값 immutable value String Number Boolean null undefined symbol - 객체 타입 Object / reference type object 🎈문자형 String 빈 문자열이나 글자들로 이뤄진 문자열을 나타냄 큰따옴표, 작은따옴표, 역 따옴표 (백틱) 으로 묶어서 표현 " 값 ", ' 값 ' , ` 값 ` 원하는 변수나 표현식을 문자열 중간에 넣는 방법 let name = 'heesae'; console.log( ` Hi, ${name}!` ); // Hi, heesae! console.log( ` The answer is ${3 + 4}` ); // The answer is 7 🎈숫자형 Number..

📃 변수 Variable 📃 데이터 data 를 저장할 수 있는 메모리 공간, 저장된 값은 변경될 수 있음 유지보수, 성능 이슈를 해결하기 위해 사용 🎈선언 방법 🔍 var 변수 재선언 가능 변수 재할당 가능 🔍 let 변수 재선언 불가능 변수 재할당 가능 🔍 const : 상수값을 선언할 때 사용 변수 재선언 불가능 변수 재할당 불가능 🎈 선언부와 할당부 let name = 'hello'; 🎈 변수 명명 규칙 1. 문자와 숫자, 기호 `$` 와 `_` 만 사용 가능 2. 첫 글자는 숫자 X 3. CamelCase 주로 사용 4. 대소문자를 구별한다 ( box != BOX ) 5. 영어 사용 4. continue, break, count, let 같은 예약어 사용 불가 🎈 변수 타입 확인 : `typeo..

연산자와 조건 처리 구문 응용 🎈helper.js 가 필요한 이유 el('figure') 를 입력하면 값을 잘 찾아옴 el() ➡ null el('') 아무 값도 주지 않으면 에러가생김 사용자가 어떻게 쓸지 모르는 상태를 모두 방어적으로 대응하려면 내부적으로 문제가 생기는 코드들을 문제가 생기지 않게 만들어주기 위함. el('body', 'html'); ➡ 에러 helper.js 첨부 후, el() ➡ null el('') ➡ null el(' ') ➡ null el(document) ➡ null el('body', 'html') ➡ 잘 찹음! 🎈문장 해석하기 function els(selector, context) { // selector 유형이 문자가 아니거나, selector 공백을 제거한 길이가 ..