본문 바로가기

Programming181

[Javascript] 명령형 vs 선언형 프로그래밍 Imperative Programming VS Declarative Programming 명령형 프로그래밍 VS 선언형 프로그래밍 리액트와 Javascript를 접하다보면 명령형 프로그래밍과 선언형 프로그래밍을 만나게 된다. 프로그래밍 하는 방식에도 차이가 있나 싶을 때 쯤, 리액트의 장점 중 하나가 선언형 프로그래밍이라는 말까지 듣게 되고, 혼란이 생긴다. 위키백과를 찾아봐도 혼란만 가중된다. 도대체 두 프로그래밍의 차이는 뭘까? 위키백과에서는 명령형 프로그래밍과 선언형 프로그래밍의 차이를 애매모호하게 설명해놓고 있다. 명령형 프로그래밍은 무엇을 어떻게 할 것인지에 집중한다. 선언형 프로그래밍은 무엇을 할 것인지에 집중한다. 개발자 입장에서 볼 때 명령형 프로그래밍과 선언형 프로그래밍을 이해하는 것은 .. 2022. 5. 17.
[Javascript] Underbar 구현 underbar 란? 과거 웹 브라우저에서 사용되는 Javascript에서는 배열 메소드를 지원하지 않았다. 따라서 배열과 객체를 다루기 위한모음집이 개발되기 이르렀는데, 이게 바로 underbar.js 다. Underbar의 모티브는 underscore.js와 lodash가 있다. 지금이야 웹 브라우저에서 작동하는 Javascript에서 배열과 객체를 다루기 위한 고차함수를 지원하지만, underbar를 직접 구현하는 과정은 Javascript의 동작원리를 이해하는데 큰 도움이 된다.  Collection 이란? Collection이란 데이터의 모음을 의미한다. 여러개의 데이터를 한 군데에 모아놓은 자료구조를 의미하며, 대표적으로 배열과 객체가 있다. 배열은 데이터를 순서대로 모아놓은 자료구조이며, 객.. 2022. 5. 17.
[Javascript] Function arguments 속성이란? Javascript Function arguments ? 함수 객체는 다양한 프로퍼티 값을 기본적으로 내장하고 있다. 그 중 arguments 프로퍼티는 arguments 객체를 의미한다. arguments 객체는 함수가 호출되는 경우 전달된 인수들의 정보를 담고 있다. 또한 순회 가능한 유사 배열 객체다. arguments는 함수 내부에서 지역변수로 사용가능하다. Javascript Function에서는 함수가 전달받는 인수의 갯수를 정확하게 카운트 하지 않는다. 따라서 인수의 갯수와 함수호출시 매개변수의 갯수가 달라도 에러를 반환하지 않는다. function mul(x, y){ console.log(arguments); return x * y; } console.log(mul(1,2,3)); ➜ Al.. 2022. 5. 17.
[Javascript] 비동기 프로그래밍이란? Javascript 비동기 프로그래밍이란? 비동기 프로그래밍을 이해하기 위해서 줄을 늘어선 대기 줄이 있다고 하자. 먼저 주문한 손님이 물건을 받을 때 까지 뒤의 손님들은 대기 줄에서 '기다릴 수 밖에' 없다. 심지어 주문조차 할 수 없는 상황이다. 이렇게 대기열에서 아무런 행동도 하지 못하는 상황을 'Blocking' 상태라고 한다. 미리 주문한 사람이 물건을 받고 나서야 뒤의 사람이 주문이라는 행위를 할 수 있다. 이렇게 프로세스의 시작 시점과 종료시점이 동일한 상황을 동기화되어있다 라고 표현한다. 효율적인 매장 운영을 위해서 스타벅스에 도입된 사이렌 오더를 생각해보자. 방문객들은 '주문'을 하기 위해 기다릴 필요 없이 앱으로 바로 주문을 할 수 있고, 물건이 준비되면 '바로' 수령이 가능하다. 이런.. 2022. 5. 17.
[Javascript] Array Function some, sort, every 사용법 Javascript Array some 함수 some 함수는 배열의 요소 중 하나라도 참 값을 가지면 true를 반환하는 Javascript Array 함수다. 배열이 비어있는 경우나 조건식이 없는 경우의 초기 반환값은 false를 가진다. some 함수는 배열의 요소를 검색하면서 조건값이 true임을 발견하는 즉시 함수 로직을 종료하고 값을 반환한다. Syntax arr.some(callback[, thisArg]) 예제 코드 배열의 요소 중 홀수가 존재하면 true를 반환하는 코드다. Arrow Function을 사용해서 간단하게 값을 구할 수 있다. const arr = [1,2,3,4,5]; const result = arr.some((item)=>{ return item % 2 === 1 });.. 2022. 5. 15.
[Javascript] Function Expression vs Declaration 함수 표현식 vs 함수 선언식 차이점 What is the difference between Function Expression and Declaration? Javascript 일급객체 함수 (First Class Function) Javascript에서 함수를 선언하는 방식은 크게 두가지가 있다. Javascript에서 함수는 일급객체로 크게 3가지 특징을 가지고 있다. ① 다른 함수의 인자로 전달 가능 ② 다른 함수의 리턴값으로 사용가능 ③ 인자로 전달받아 리턴값으로 사용 가능 Javascript 함수의 일급객체에 대해서 아래 글에서 더 자세하게 알아볼 수 있다. [Javascript] 일급 객체(First-class Object)란 무엇인가? What is first-class function in Javasript? 일급 객체(fi.. 2022. 5. 15.
[Javascript] onclick VS addEventListener 차이점? What is the difference between onclick and addEventListener? Javascript EventTarket 객체 Javascript를 통해 DOM을 조작하는 부분에서 가장 많이 사용하는 객체는 EventTarget 객체다. 객체의 조작에 따라 Evenvt를 추가할 수 있는 방법은 크게 onclick을 사용하거나 addEventLintener() 메소드를 사용할 수 있다. 둘다 Event 객체로 사용할 수 있지만 두개의 차이점은 존재한다. onclick onclick 속성은 이벤트 객체를 하나만 추가할 수 있다. Button 태그를 생성하고, onclick에 2개의 이벤트 객체를 할당하면, 첫번째 이벤트만 activated 된다. See the Pen Untitl.. 2022. 5. 15.
[Javascript] Element와 Node 차이점? What is diffrence between Element and Node in DOM? Element vs Node 차이점 HTML을 구성하는 요소를 Element 혹은 Node 라고 부른다. 비슷하게 들리지만 Element와 Node는 분명히 다른 개념이다. Element와 Node 모두 Javascript의 Object 객체를 상속받는 객체지만, 상속 체인의 관점으로 봤을 때 Node가 Element의 상위 개념이 된다. Node 먼저 상위 개념인 Node를 알아보자. Node는 태그노드와 텍스트 노드 전체를 가리킨다. 사용자에게 렌더링 되는 DOM은 HTML 소스가 불안정하더라도 일부 수정한뒤 사용자에게 렌더링 하게 된다. DOM은 Node의 계층 구조로 구성된다. 노드는 시맨틱 태그(일반적인 .. 2022. 5. 15.
[Javascript] DOM 이란? (feat CRUD 구현하기) Javascript DOM DOM(Document Object Model) 이란 HTML 요소를 Javascript의 Object처럼 조작할 수 있는 모델을 의미한다. 우리가 사용하는 일반적인 웹 페이지들은 모두 HTML로 구성되어 있다. DOM은 프로그래밍 언어가 아니다. HTML은 기본적으로 트리구조를 띄고 있기 때문에, 부모 노드에서 자식 노드까지 접근하기 위해서는 Javascript로 접근할 수 있어야 한다. 정확히 말하면 DOM을 통해 javascript가 HTML 로 구성된 웹 페이지의 각 노드에 접근이 가능한 것이다. 렌더링 웹 브라우저는 HTML 소스를 받아서 각 노드를 파싱하고 사용자에게 렌더링 하는 과정을 거친다. 이 때 태그를 만나면 렌더링 과정을 일시중지 하고, Javascript .. 2022. 5. 15.
[Javascript] prototype 이란? 함수 객체의 Prototype Javascript에서 함수만이 유일하게 가지는 프로퍼티가 있다. 바로 prototype 프로퍼티다. 함수의 prototype 프로퍼티는 생성자 함수가 생성하는 인스턴스의 프로토타입을 가리키게 된다. 익명 함수 객체 익명 함수 객체를 func12에 할당한 후 hasOwnProperty() 함수를 호출해서 prototype 프로퍼티를 소유하는지 확인하면 true값을 반환한다. 함수 객체 func3 함수 객체를 생성해서 hasOwnProperty() 메소드로 prototype 프로퍼티를 소유하고 있는지 확인하면 true값이 나온다. Arrow Function Arrow Function으로 함수 객체를 생성한 뒤 prototype 프로퍼티를 소유한지 확인하면 false값이 나온다.. 2022. 5. 14.
[Javascript] __proto__ 접근자 프로퍼티 이해하기 Can I use __proto__ in javascript? What is the difference between __proto__ and Object.getPrototypeOf? [Javascript] Prototype 이란? 객체지향 프로그래밍이란? Javascript는 명령형, 함수형, 프로토타입 기반 객체 지향 프로그래밍 언어로 정의할 수 있다. 기존 객체지향 언어와 차이점이 있다면 객체 지향 언어보다 효율적인 객체 about-tech.tistory.com __proto__ 접근자 프로퍼티를 사용하는 이유? Javascript에서 [[Prototype]]은 Object.prototype에서 상속받게 된다. 프로토타입에 접근하기 위해 __proto__ 접근자 프로퍼티를 사용하게 되는데, 이 이유.. 2022. 5. 14.
[Javascript] Prototype 이란? 객체지향 프로그래밍이란? Javascript는 명령형, 함수형, 프로토타입 기반 객체 지향 프로그래밍 언어로 정의할 수 있다. 기존 객체지향 언어와 차이점이 있다면 객체 지향 언어보다 효율적인 객체지향 프로그래밍 능력을 가진 프로토 타입 기반의 객체지향 언어라는 점이다. 먼저 객체지향 프로그래밍이란 뭘까? 자바스크립트 언어를 이루고 있는 거의 모든 것은 일단 객체다. 원시타입 데이터를 제외한 함수, 배열, 정규 표현식 모두가 객체(Object) 타입을 가진다. 객체는 실생활의 사물들을 객체로 표현하고 모든 객체는 속성을 가진다는 패러다임에서 시작한다. 프로그래밍을 하기 위해 필요한 속성값들을 모아놓은 것을 추상화라고 한다. 이 처럼 필요한 속성값만 모아 놓은 복합적인 자료구조를 객체라고 칭하며, 독립적인.. 2022. 5. 14.
[Programming] JSON 이란? JSON 이란? JSON(JavaScript Object Notation)은 데이터 포맷의 한 형식이다. 네트워크에서 다른 사용자에게 데이터를 전송할 때 특정 포맷을 사용해야 하는데, 이 중 XML, JSON 등의 포맷이 존재한다. 네트워크에서 메시지를 전송하기 위해서는 특정 조건을 성립해야 한다. 전송 가능 조건(Transferable Condition) ① 수신자, 발신자가 같은 프로그램을 사용한다. ② 문자열 처럼 범용적으로 읽을 수 있어야 한다. Javascript에서 Object는 String으로 변환할 수 있다. 이 때 변형된 Object는 객체 자체의 내용을 포함하지 않는다. 이 때문에 네트워크에서 메시지를 전송할 때 String으로 변환 후 다시 객체로 변환하는 작업이 필요하게 된다. JS.. 2022. 5. 13.
[Javascript] IndexOf 배열 내에서 특정 위치 찾는 방법 indexOf() 배열 내에서 특정 요소의 위치값을 찾기 위해서는 indexOf() 메소드를 사용한다. 매개변수로는 요소 데이터를 받으며 배열 내에서 위치값을 반환한다. 물론 배열 뿐만 아니라 문자열에서도 indexOf() 메소드를 사용하면 특정 캐릭터를 찾을 수 있다. const arr = [1,2,3,4,5] const location = arr.indexOf(3); console.log(location); ➜ Javascript node test.js 2 문자열 내 indexOf() 메소드 사용 const str = "hello world"; const str_loc = str.indexOf('lo ') console.log(str_loc); ➜ Javascript node test.js 3 만약 .. 2022. 5. 12.
[Javascript] 배열 메소드 Array Method 정리 원본 유지 vs 원본 변경 메소드 Javascript의 배열을 다루는 메소드는 크게 원본을 변경하는 메소드와 원본을 유지하는 메소드로 구분된다. 서로 비슷한 기능을 수행하지만 원본 배열을 변경하고 안하고의 차이는 크다. 원본을 유지하는 메소드 : concat(), slice() 원본을 변경하는 메소드 : push(), pop(), shift(), unshift(), splice() 같은 기능을 하는데, 원본 배열 데이터를 변경하면서 코드가 꼬이는 경우가 한두번이 아니다. Javascript를 사용할 때 배열을 다루는 함수를 유의해야 하는 이유다. concat() 매개변수로 전달받은 데이터를 배열의 가장 마지막에 추가하여 새로운 배열을 리턴한다. 원본 배열은 그대로 유지한채 새롭게 복사된 배열을 리턴하게 .. 2022. 5. 12.

티스토리툴바