Full Stack Developer 36

[JavaScript] this(함수,메소드,생성자)

this this는 함수 내에서 함수 호출 맥락(context)[사용하는 상황에 따라 변화하는 가변적인 것을 맥락이라 한다.]를 의미한다. 즉, 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다. 📢함수 안에서 this라는 keyword는 그 함수가 소속되어있는 그 객체를 가르킨다. 즉,this는 메소드가 속해있는 객체를 가르키도록 약속된 특수한 예약어라고 보면된다. 쉽게 코드로 알아보자 var yoon = { name = 'yoon', first = 10, second = 20, sum:function(){ return this.first+this.second; }/..

[JavaScript ES6]전역객체

✨전역객체란? 전역 객체 object 는 전역 범위 global scope(en-US) 에 항상 존재하는 객체를 의미합니다. 자바스크립트에는 전역 객체로 선언된 객체들이 항상 존재합니다. 웹브라우저에서 스크립트가 전역 변수를 생성할 때, 전역 객체의 멤버로서 생성됩니다. ( Node.js 에서는 예외.) 전역 객체의 interface 는 스크립트가 실행되고 있는 곳의 실행 컨텍스트에 의존합니다. 웹브라우저에 있는 스크립트가 특별히 백그라운드 작업으로 시작하지 않는 코드들은 그것의 전역 객체로써 Window 를 가집니다. 이것은 Web에 있는 자바스크립트 코드의 상당수가 그렇습니다. window 객체는 브라우저에서 전역 객체입니다. 어느 전역 객체나 함수는 window 객체의 프로퍼티로서 접근될 수 있습니..

객체 지향 프로그래밍 (은닉화,캡슐화,인터페이스)

객체지향 프로그램이란? 객체지향 프로그래밍(Object Oriented Programming)은 좀 더 나은 프로그래밍을 만들기 위한 프로그래밍 패러다임으로 로직을 상태(state)와 행위(behave)로 이루어진 객체로 만드는 것이다. 이 객체들을 마치 레고 블록처럼 조립해서 하나의 프로그램을 만드는 것이 객체지향 프로그래밍이라고 할 수 있다. 구체적으로 알아보자면, 하나의 객체 안에는 그 객체가 가지고있는 취지, 기능 등과 연관되어있는 변수와 메소드를 객체 안에 가둬두고 서로 연관성이 없는 다른 로직과 구분 짓는 것이다. 객체지향 프로그램을 만들 때 중요한 요소들을 알아보자 1. 문법 객체지향을 편하게 사용할 수 있도록 언어가 제공하는 기능을 익히는 것이 중요하다. 문법을 이해하고 숙지해야 객체 생성..

Language 2021.10.31

[JavaScript] arguments

arguments 함수에는 arguments라는 객체가 존재한다. 함수 안에서 여러가지의 인자의 정보를 담고있는 객체이다. 사용법이 매우 배열과 유사하기 때문에 유사배열이라 볼 수 있다. 즉, 함수를 이용하는 사람이 매개변수에 집어 넣는 값을 의미한다. function sum(){ //현재 인자 값이 존재하지 않는다. 그 이유는 인자가 들어오는 수를 예측 할 수 없기 때문이다. //함수 안의 arguments객체 안에 존재하는 값들을 꺼낸 후 sum에 더해 return해주면 결과를 알 수 있다. var _sum = 0; for(var i = 0; i < arguments.length; i++){ document.write(i+' : '+arguments[i]+' '); _sum += arguments[i..

[JavaScript] 값으로서의 함수와 콜백

값으로서의 함수 함수는 객체이다. 일종의 값이라고 볼 수 있다. 거의 모든 언어가 함수를 가지고 있다. But, JavaScript의 함수가 다른 언어의 함수와 다른 점은 함수가 값이 될 수 있다는 점이다. ※ function a( ){ }를 다른 방식으로 표현 하면 var a = function() {}(변수 a의 값은 함수이다.)이라고 표현할 수 있다. a = { b:function(){ //여기서 함수는 값이고 객체에 저장될 수 있다. /* key = b ->변수와 같은 역할을 해주고 있다. value = function(){} key값을 속성,property라 부른다. 그리고 value값을 메소드라 부른다. 즉, 객체 안에 정의되어있는 함수를 메소드라 부른다. */ } } 상단의 코드의 key값을..

HTML과 CSS만을 이용해 유튜브 나만의 방식으로 해석하기

나만의 youtube page 만들기 HTML과 CSS의 감을 익히고자 여러 플랫폼의 페이지를 저만의 방법으로 만들어보았습니다. 우선적으로 제가 직접 만든 후 드림코딩 엘리님의 영상을 참고해 몇몇 부분들을 수정하였습니다! 제가 만든 페이지의 URL은 하단의 링크로 접속하시면 됩니다! (+)TMI, 그리고 나오는 영상은 제가 직접 편집한 유튜브 영상입니다😊 https://youtubeclone.y00nmin.repl.co/ Youtube_Mobile #Yoon Coding #Yoon Coder #Yoon Clone Coding: Youtube Mobile Website 유튜브 모바일 웹사이트 따라 만들기 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript 드림코딩과 함께하는 프론트엔드 실..

Front-end 2021.10.27

[JavaScript ES6]유효범위 (지역변수와 지역변수), 정적 유효범위

✨유효 범위(Scope)란? 자바스크립트에서 객체나 함수는 모두 변수(variable)입니다. 변수의 유효 범위(scope)란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미합니다. 🌟지역(local) 변수와 전역(global) 변수 하단의 코드를 통해 지역변수와 전역 변수를 비교해보자 let vscope = 'global'; // 전역변수 // 애플리케이션 전역에서 접근 할 수 있는 변수 function fscope(){ let vscope = 'local'; // 지역변수 //함수의 중괄호 내에서만 접근 할 수 있는 변수 console.log(vscope); } fscope(); //fscope 함수는 같은 함수 안에 있는 vscope를 출력하게된다. 🟣전역 변수(global) l..

[WEB]API & UI & Interface

API: Application Programming Interface API(Application Programming Interface 애플리케이션 프로그래밍 인터페이스, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다 사전에서의 API 출처[위키피디아] 즉, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있습니다. 기반이되는 시스템이 우리에게 제공한 interface를 응용해서 소프트웨어를 만드는 것입니다.(code의 형태를 띄고있는 interface.) ex) 응용프로그래밍 개발자가 alert이라는 명령어를 프로그래밍해서 웹브라우저에게 전달하면 우리는 alert..

Front-end 2021.10.23

[JavaScript ES6]객체(Object)

✨ JavaScript에서 객체(object)란? 객체는 데이터와 함수의 집합입니다. +) 일반적으로 객체는 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 이들을 프로퍼티와 메소드라고 부릅니다 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 대부분의 모든 것은 객체입니다. 객체는 서로 연관되어있는 데이터를 담아내기 위한 그릇이라 생각해도되는데 이는 배열과 매우 유사한 모습을 보여준다. 🤔 그럼 그들의 차이점을 잠시 들여다보자 객체 배열 원하는 데이터 값(문자,숫자 등)을 지정 할 수 있다. index 값에 숫자를 저장 key = value의 쌍이 객체 안에서 저장될때 순서가 정해져있지 않다. index값의 순서가 정해져있다. 추가적으로 알아두면 좋은 정보로 인덱스로 문자..

[JavaScript ES6]배열(array)

✨배열(array)이란? 배열은 칸마다 촘촘히 박스가 모여있는 자료구조를 의미한다. 배열의 포인티는 각 칸(박스, 메모리)에 인덱스 값이 지정되어있다. ➕자료구조란? 자료구조는 비슷한 종류의 요소들을 모아서 분류한 것을 의미한다. 분류한다는 것을 예시로 몇 개 들어보겠다. 오브젝트는 서로 연관된 특징과 행동들을 묶어둔 것이라 생각하면 되며, 오브젝트들을 묶어둔 것을 자료구조라 한다. Type(문자열, 정수, 실수 등)이 있는 언어에서는 동일한 Type의 데이터만 담을 수 있다. BUT, Javascript는 타입이 동적으로 정의되기 때문에 한 자료구조에 여러 Type을 담을 수 있다. (그러나 그렇게 하진 않는다.) 👀index의 특징 배열은 요소 index로 문자열을 사용할 수 없습니다. 무조건 정수만..