programming

[Core C] Array | 배열

Array (배열) 우리가 힘들게 프로그램을 만드는 이유는 많은 데이터를 빨리 처리할 수 있기 때문입니다. 단, 많은 양의 데이터를 메모리에 저장하는 방법이 필요한데 이때 배열을 사용합니다. 배열을 만들고 사용하는 방법, 또 배열이 문자열을 어떻게 저장하는지 살펴봅니다. 동일한 자료형을 저장할 저장 공간이 많이 필요한 경우 일일이 변수를 선언하는 일은 만만치 않습니다. 이때 '배열'을 사용하는데, 배열을 사용하면 많은 변수를 하나의 선언문으로 간단하게 대체할 수 있습니다. 배열을 만들고 사용하는 방법에 대해 알아보겠습니다. FIFA에서 만든 축구 게임, FIFA 21에서 홈페이지에 게시되어 있는 FIFA 21 Ratings 중 한 선수의 데이터를 통해 배열을 사용하는 방법을 알아보도록 하겠습니다. 이 중..

git 지역 저장소에서 원격 저장소까지의 메커니즘

작년 4월 쯤, 서브버전(Subversion)을 통해 VCS 개념을 처음 알게 되었습니다. 이후 확장된 개념으로 볼 수 있는 분산 버전 관리 시스템(DVCS) 중 가장 쿨(cool)한 Git을 사용하기 시작했습니다. 저는 IDE마다 플러그인으로도 제공을 하지만, 환경에 영향을 적게 받는 CLI(Command Line Interface)가 마음에 들어 GUI와 겸해서 사용하고 있습니다. 아래의 예시는 실제 윈도우즈 환경의 개인 컴퓨터에서 원격 저장소 역할을 하는 Github에 push하는 작업까지 한번에 볼 수 있도록 작성하였습니다. 그럼 시작해봅시다. 1. 로컬 컴퓨터에 Git 셋팅 우선 이 작업을 CLI로 하기 위해서는 Git이 설치되어 있어야 합니다. 아직 설치가 되어있지 않다면 설치 방법 가이드를 ..

오라클 GUI, SQL Developer 설치하고 접속하기

오라클 설치, 그 다음은? 지난 포스팅 오라클 설치, 이대로만 하자! (Oracle 11g Installation) 을 잘 따라오신 분들이라면 이제 오라클을 Windows 환경에서 사용할 수 있게 되었습니다. 하지만 실제로 우리가 데이터베이스를 사용하는 경우는 방대하고 복잡한 쿼리문이 대부분입니다. 이걸 명령 프롬포트 창에서 일일이 확인하기란 쉽지 않습니다. 물론 일부 기업에서는 SQL*Plus 를 사용하기도 합니다. 하지만 보통 Toad나 SQL Developer 같은 GUI 툴을 이용하여 데이터베이스를 다룹니다. Toad는 온전히 활용하기엔 유료 라이선스라 기회가 된다면 다뤄보기로 하고, 이번 포스팅에서는 SQL Developer를 설치하고 접속하는 방법에 대해 알아보겠습니다. 설치를 위해 오라클 사..

[33-js-concepts] 24. 컬렉션과 생성기 (Collections and Generators)

컬렉션과 생성기 (Collections and Generators) Iterable vs Iterator Iterable과 Iterator 모두 ES5에서 추가된 새로운 규약(protocol)이다. Iterable 반복 가능한 객체들을 말한다. 프로퍼티로 Symbol.iterator를 반드시 가져야 Iterable한 객체로 정의될 수 있다. Array나 Map 같은 컬렉션들은 기본적으로 Iterable한 객체로 설정되어 있으며 일반 Object는 가지고 있지 않다. String 같은 빌트인 객체도 Iterable한 객체로 설정되어 있다. Iterable한 객체들은 아래와 같은 연산이 가능하다. for..of 구문을 통한 객체 접근 ( for child of someIterableObj ) Spread 연..

[33-js-concepts] 21. 클로저 (Closures)

클로저가 뭐야? 함수와 함수가 선언된 어휘적 환경의 조합입니다. 함수 밖에서 선언된 변수를 함수 내부에서 사용할 때 클로저가 생성됩니다. function outer() { const name = 'leehyowon'; function inner() { console.log(name); } return inner; } const innerFunc = outer(); innerFunc(); 이제 var innerFunc = outer()를 통해서 inner 함수를 반환받게 되는데, 일반적으로 함수가 종료되면 메모리에서 소멸하기 때문에 아래와 같은 모습을 하게됩니다. 때문에 일반적으로, innerFunc를 호출해도 name에 대한 참조는 메모리에서 소멸하여 호출이 불가하게 됩니다. 하지만 클로저는 이러한(외부..

[33-js-concepts] 18. Object.create and Object.assign

Object.create의 배경 - 자바스크립트의 상속 - 자바스크립트만으로 웹페이지의 동작을 구현하기 시작하면서 객체지향의 개념이 집중되게 되었다. - new를 이용한 상속 (prototype) function Person() { this.name = "anonymous"; this.job = "none"; this.sayHello = function () { alert("Hello, my name is " + this.name); }; } function Unikys() { this.name = "Unikys"; this.job = "Programmer"; } Unikys.prototype = new Person(); var unikys = new Unikys(); unikys.sayHello(); ..

[33-js-concepts] 16. new, 생성자, instanced, 인스턴스 (new, Constructor, instanced and Instances)

new 연산자 ? 동작원리 새로운 빈 객체 생성 this 를 새로 만들어진 객체에 바인딩한다. 새로 만들어진 객체에 __proto__ 라 불리는 property 를 더한다.(이것은 contructor 함수의 prototype 객체를의미한다.) 생성된 객체가 반환된다. first 라는 새로운 객체 생성 this 는 first object 에 바인딩 되므로 this에 대한 모든 참조는 first 를 가리킨다. __proto__ 가 추가 first.__proto__ 는 Student.prototype 을 가리킨다. 생성자 ? 객체를 만드는 역할을 하는 함수 자바스크립트의 생성자 함수는 new 와 함께 사용 할수도, 일반적인 함수처럼 사용될 수 도 있다. Prototype ? 자바스크립트의 모든 객체들은 pro..

[33-js-concepts] 15. this, call, apply and bind

this : 함수나 메서드를 호출하는 주체 ( 함수의 실행영역) - call, apply, bind : 함수의 실행영역을 지정 함수의 호출 방식 1. 함수이름(); 2. 함수이름.call / apply / bind ( 인자) 1의 방식이 기본적인 방식이며 함수의 호출 형태에 따라 this 가 변화! (예시) var obj = { a: 2, foo: foo }; var bar = obj.foo; var a = "나는야 전역"; bar(); function doFoo(fn) { fn(); } var obj = { a: 2, foo: foo }; var a = "나는야 전역"; doFoo(obj.foo); 2의 방식은 전달받은 인자가 this로 지정! ** 차이점 (요약) [call, apply ] : 함수를..

[33-js-concepts] 14. 팩토리와 클래스 (Factories and Classes)

자바스크립트는 프로토타입 기반(prototype-based) 객체지향 언어다. 비록 다른 객체지향 언어들과의 차이점에 대한 논쟁이 있긴 하지만, 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있다. 프로토타입 기반 프로그래밍은 클래스가 필요없는(class-free) 객체지향 프로그래밍 스타일로 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화(정보 은닉) 등의 개념을 구현할 수 있다. ES5에서는 생성자 함수와 프로토타입, 클로저를 사용하여 객체 지향 프로그래밍을 구현하였다. var Person = (function () { // Constructor function Person(name) { this._name = name; } // public method Person.prot..

[33-js-concepts] 13. DOM과 Layout Trees (DOM and Layout Trees)

Before DOM Introduction 웹 개발은 웹 브라우저와 밀접한 연관이 있습니다. 모든 서비스는 사실 웹 브라우저를 바탕으로 실행이 된다고 봐도 과언이 아닙니다. 이 브라우저와 관련된 객체 집합을 브라우저 객체 모델(Browser Object Model, BOM)이라고 하고, BOM을 이용해서 브라우저와 관련된 기능을 구성합니다. DOM은 이 BOM 중 하나입니다. DOM이란? DOM은 웹 브라우저로부터 HTML, XML을 표현하기 위한 인터페이스를 제공합니다. 이러한 인터페이스는 웹의 구조나 스타일을 조작할 수 있게 도와줍니다. 여기서 DOM은 문서 객체 모델(Document Object Model)의 약자입니다. 여기서 Model은 문서 객체를 '인식하는 방식' 을 의미합니다. DOM에 대..

[33-js-concepts] 12. 비트 연산자, 형식화 배열, 버퍼 (Bitwise Operators, Type Arrays and Array Buffers)

https://jsperf.com/or-vs-floor/2 자바스크립트에서 모든 숫자는 부동 소수점형 숫자형으로 취급된다. 자바스크립트에서 비트연산을 할때는 정수형으로 변환한 후 연산을 실행한다. 이러한 특성 때문에 다른 네이티브 언어에서의 비트연산자에 비해 속도가 매우 느리다. 속도 상의 이유로 비트연산자를 고집할 필요는 없다. 비트 연산자의 종류 AND 연산::& OR 연산::| XOR 연산::^ NOT 연산::~ 왼쪽 쉬프트 연산:: 부호 버림 오른쪽 쉬프트 연산::>>> const AA =25; const BB =3; console.log(AA,"(",AA.toString(2),")",'&',BB,"(",BB.toString(2),")","=",(AA &BB),"(",(AA &BB).toStrin..

[33-js-concepts] 11. 자바스크립트 엔진 (JavaScript Engines)

11.1 자바스크립트 엔진이란 정의 JS 코드를 실행하는 프로그램 또는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어(Interpreter Language)를 말합니다. 조금 더 자세하게 말해 자바스크립트 코드를 마이크로프로세서가 이해할 수 있는 더 낮은 수준의 언어(기계어)로 변환해주는 역할을 담당합니다. 종류 SpiderMonkey: 최초의 자바스크립트 엔진으로 JS의 창시자인 브랜던 아이크가 넷스케이프 브라우저를 위해 개발했습니다. 현재 FireFox에서 사용합니다. Chakra: Microsoft가 개발한 엔진이며, Edge 브라우저에 사용되었습니다. JavaScript Core(JSC): 애플에서 개발했고 처음에는 WebKit 프레임워크를 위해 개발되었습니다. 최근에는 Safari..