You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[JS] 📚 프로토타입(Prototype) 개념 완전 정복 ❗](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbTXrX4%2Fbtrfo5NEGf8%2FRO4oQcF1iA0SyCtw9zkjW1%2Fimg.jpg)
[JS] 📚 프로토타입(Prototype) 개념 완전 정복 ❗
프로토타입 기반 언어 자바스크립트는 프로토타입 기반 언어라고 불립니다. 자바스크립트 개발을 하면 빠질 수 없는 것이 프로토타입인데요. 프로토타입이 거의 자바스크립트 그 자체이기때문에 이해하는 것이 어렵고 개념도 복잡합니다. 자바스크립트에 클래스는 없지만 함수(function)와 new를 통해 클래스를 비스무리하게 흉내낼 수 있습니다. function Person() { this.eyes = 2; this.nose = 1; } var kim = new Person(); var park = new Person(); console.log(kim.eyes); // => 2 console.log(kim.nose); // => 1 console.log(park.eyes); // => 2 console.log(p..
![[C] 📚 포인터 표현 - 그림으로 알기 쉽게 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbrkpHX%2FbtrfoRWyay2%2F2IOXe2wsFDpAK9r6PtvPJ1%2Fimg.png)
[C] 📚 포인터 표현 - 그림으로 알기 쉽게 정리
C언어 포인터 이해하기 다음과 같이 포인터를 정의할때 배열원소 2를 표현 하는 방법은 다음과 같다. int a[5] = {1,2,3,4,5}; int *arr = a; 구조체 포인터 표현 방법 struct person { int age; char name[10]; }; struct person *arr, pe[3]={{10,"jack"},{20,"Poul"},{30,"Jim"}}; arr = pe; 예를 들어 원소 20에 대한 표현은 총 3가지로 가능하다. arr[1].age (*(arr+1)).age (arr+1)->age 포인터 증감 연산자 종류 int a = 1; int *p = &a; //a주소는 1000이라 가정 *p + 1 // → a + 1 = 1 + 1 = 2 *(p + 1) // → ..
🌐 이벤트 기본 동작 취소 하는 3가지 방법
이벤트 기본 동작 취소하기 웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다. 폼에서 submit 버튼을 누르면 데이터가 전송된다. a 태그를 클릭하면 href 속성의 URL로 이동한다. 그밖의 브라우저 기본 단축키 (복사 기능이나, f12, 엔터 같이, 키를 누르면 기본적으로 동작하는 기능) 이러한 기본적인 동작들을 기본 이벤트라고 하는데, 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소하거나 조작 할 수 있다. 다음 3가지 방법을 소개해본다. inline 방식 onclick 의 속성값에 이벤트의 리턴값이 false이면 기본 동작이 취소된다. prevent event on opentutorials prope..
🌐 브라우저 이벤트 종류 & 사용법 총정리
브라우저 이벤트 란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련이 있다. 이벤트가 발생하면 그에 맞는 반응을 하여야 한다. 이를 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다. 이 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술한다. 자바스크립트 이벤트의 종류 실무에 자주 쓰이는 대표적인 자바스크립트 이벤트를 소개한다. UI Event Event Description load 웹페이지나 스크립트의 로드가 완료되었을 때 unload 웹페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우) e..
🌐 DOM(문서 객체 모델) 다루기 문법 💯 총정리
브라우저 DOM 종류 브라우저는 HTML 문서를 로드한 후, 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 트리로 구성되는데, 이것을 DOM tree라 한다. 문서 노드(Document Node) 트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다. 요소 노드(Element Node) 요소 노드는 HTML 엘리먼트를 표현한다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성된다. document.getElementById(id) // -> i..
📚 자바스크립트 화살표 함수 사용법 총정리
화살표 함수 (Arrow function) 자바스크립트에서 함수를 만들 때는 function 키워드를 사용하여 정의할 수 있다. 예를들어 두 수의 합을 구하는 함수는 다음과 같이 작성할 수 있다. function sum(a, b) { return a + b; } ES6부터는 화살표 함수(arrow function)라는 새로운 문법 방식으로 함수를 만들 수 있게 되었다. 화살표 함수는 => 기호를 사용하여 function 키워드를 생략할 수 있다. 그래서 위의 함수를 화살표 함수로 바꾸면 아래와 같이 구성할 수 있다. let sum = (a, b) => { return a + b; } // 만일 함수가 단순한 리턴문만 있다면 한줄로 더 심플하게 줄일 수 있다 const sum = (a, b) => a +..
📚 콜백 함수(Callback) 개념 & 응용 - 완벽 정리
자바스크립트 콜백 함수 란? 콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다. 예를 들어 아래 코드와 같이 sayHello() 함수를 호출할때 입력 매개변수로 문자열과 printing 함수 자체를 전달하는 것을 볼 수 있다. 그리고 sayHello() 함수가 실행되면 실행문 안에서 함수가 들은 두번째 매개변수인 callback 을 괄호 () 를 붙여 호출한다. function sayHello(name, callback) { const words = '안녕하세요 내 이름은 ' + name + ' 입니다.'; callback(words); // 매개변수의 함수(콜백 함수) 호출 } sayHello("인파", function ..
📚 자바스크립트 in 연산자 활용 정리
프로그래밍 언어에서의 in 연산자 파이썬 프로그래밍을 하다가 자바스크립트 프로그래밍을 하다 보면 은근히 햇깔리는 부분이 바로 in 연산자 사용처이다. 예를들어 파이썬의 in 연산자는 멤버십 연산자로서, 문자열이나 리스트나 튜플과 같이 연속적인 자료구조에 속한 멤버를 확인하기 위한 연산자이다. 그래서 아래와 같이 리스트를 순회할 일이 있다면 for in문을 통해 가능하다. fruits = ["apple", "banana", "orange"] for fruit in fruits: print(fruit) 그런데 똑같이 자바스크립트로 배열에 in 연산자를 사용하면 다음과 같이 출력된다. const fruits = ["apple", "banana", "orange"]; for (fruit in fruits) { ..
📚 자바스크립트의 예외 처리(Exception)
예외 (exception) 프로그래밍에서 예외(exception)란 실행 중인 프로그램에서 예기치 못한 상황이 발생하여 더 이상 진행할 수 없는 상황을 말한다. 예를 들어 문법적인 오류이거나 파일을 찾을 수 없거나, 메모리 부족 등의 상황에서 예외가 발생할 수 있다. 이러한 예외 상황은 프로그램의 실행을 중단시키거나, 비정상적인 결과를 초래할 수 있으므로, 프로그래머는 이러한 예외를 발생하지 않도록 미리 방지하는 것도 중요하지만, 발생한 예외를 처리할 수 있는 방법을 마련해야 한다. 예외 처리 (exception handling) 이를 위해 대부분의 프로그래밍 언어에서는 try-catch 구문을 제공하여 예외를 처리할 수 있도록 한다. 자바스크립트 역시 프로그램이 실행되는 도중 발생하는 예외를 처리하기 ..
![[JS] 📚 자바스크립트 this 💯 완전 정복](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbC2UUy%2FbtreTIElCLy%2FjSpsKwpcYiwk5TkQKrxo3K%2Fimg.jpg)
[JS] 📚 자바스크립트 this 💯 완전 정복
this 정의 let group = { title: "1모둠", students: ["보라", "호진", "지민"], title2 : this.title, title3() { console.log(this.title) } }; console.log(group.title2); //undefined group.title3(); // 1모둠 this는 함수의 블록 스코프 내에서 선언 되야 작동한다. 브라우저 콘솔(F12)을 켜고, this를 쳐보자 this; // Window {} 이번엔 변수와 함수 안에 넣어서 해보자. var ga = 'Global variable'; console.log(this.ga); // === window.ga function a() { console.log(this); }; a(..
![[JS] 📚 Call & Bind & Apply 함수 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbAvKzB%2FbtreJYPAPE6%2FB97iV910oMDJGI9m3oR7Kk%2Fimg.jpg)
[JS] 📚 Call & Bind & Apply 함수 정리
call 원래 함수는 선언한 후 호출해야 실행되죠. 호출하는 방법으로는 함수 뒤에 ()를 붙이는 것과, call 그리고 apply하는 방법이 있습니다. var example = function (a, b, c) { return a + b + c; }; example(1, 2, 3); example.call(null, 1, 2, 3); example.apply(null, [1, 2, 3]); 보면 call은 보통 함수와 똑같이 인자를 넣고, apply는 인자를 하나로 묶어 배열로 만들어 넣는 것을 알 수 있습니다. 그렇다면 call과 apply가 공통적으로 가진 null 인자의 역할은 뭘까요? 바로 this를 대체하는 겁니다. var obj = { string: 'zero', yell: functio..
📚 자바스크립트 배열(Array) 완벽 정복 ❗
자바스크립트 배열 자바스크립트에서 배열은 여러개의 값을 저장하고 관리하는데 사용되는 아주 기본적인 자료구조이다. 자바스크립트 배열은 타입이 고정되어 있지 않아서, 서로 다른 타입의 원소들을 적재할 수가 있다. 그리고 배열은 동적으로 크기가 변할 수 있어 자바(Java)와는 달리 크기를 지정할 필요가 없다. 배열의 생성 자바스크립트에서 배열을 생성하는 방법은 여러가지가 있지만, 주로 대괄호 [] 안에 값을 넣어서 선언하는 문법을 사용한다. // 배열 리터럴을 이용하는 방법 (추천) var arrLit = [1, true, "JavaScript"]; // Array 객체의 생성자를 이용하는 방법 var arrObj = Array(1, true, "JavaScript"); // new 연산자를 이용한 Arra..
