전체 글 45

객체 지향 프로그래밍(OOP)과 4가지 특징

절차 지향 언어와 객체 지향 언어 🎾 절차 지향 프로그래밍 초기 컴퓨터 언어인 C나 포트란 등은 ‘절차 지향 언어’였다. 절차 지향 언어들은 사용하는 코드들을 순차적으로 처리한다. 자동차 제조를 예로 들면 엔진, 차체, 핸들, 의자, 바퀴 순서대로 만드는 것. 서로 분리되거나 순서가 틀려서도 안 된다. 절차 지향 프로그래밍이 이런 방식이었다. 절차 지향 프로그래밍은 프로그램 전체가 유기적으로 연결되어 있다. 코드의 순서가 바뀌면 결과가 달라지거나(언어의 융통성이 떨어짐), 문제 해결을 위해 시스템 전체를 수리해야 하는(유지보수의 어려움) 단점이 있었다. 이를 보완하기 위해 나온 개념이 **‘객체 지향 언어’**이다. 🎾 객체 지향 프로그래밍 객체 지향 프로그래밍은 명령어를 단순히 ‘목록’으로 보는 게 아..

클래스(Class)와 인스턴스(Instance)

객체 지향 프로그래밍(Object-oriented programming) 우선 객체(object)란 두 종류의 정보를 담고 있는 집합체를 뜻한다. 즉, 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료 구조이다. 객체에 담긴 두 종류의 정보 속성(attributes, properties) : 상태(state)를 나타내는 데이터 메서드(method) : 행동(behavior)을 나타내는 데이터 객체 지향 프로그래밍은 프로그램을 ‘객체’들의 모임으로 본다. 하나의 모델이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴이다. 모델이 되는 청사진을 클래스(class), 청사진을 토대로 만들어진 객체를 해당 클래스의 인스턴스(insta..

일급객체(first-class citizen)와 고차함수(higher-order function)

1. 일급 객체(First-Class Citizen) 비행기의 퍼스트 클래스(First Class)를 떠올려 보자. 탑승수속, 라운지 이용, 기내식, 좌석 등 일반적인 이코노미 클래스와는 다른 서비스를 받는다. 컴퓨터 언어에서도 일급 객체(First-Class Citizen)라는 개념이 존재한다. 비행기의 퍼스트 클래스처럼, 아래와 같이 특별한 대우를 받는다. 변수에 할당(assignment)이 가능하다 다른 함수를 전달인자(argument)로 전달 받는다 다른 함수의 결과로서 리턴(return)이 가능하다. 앞서 여러 번 다뤘던 함수(function)는 위의 특징을 가지고 있으므로, JavaScript에서 일급 객체로 취급된다(C언어 등에서는 함수가 일급 객체가 아니기도 하다). 2. 고차 함수(Hig..

벌써 11월 중순이라니

하루하루가 수업이든 뭐든 꼬박 채워져있다보니 시간이 더 빨리 가는 것 같다. 내일이면 수업에 첫 번째 섹션도 마지막 날이라니... 아직도 CSS랑 JS 검색해가며 겨우겨우 하는데 마지막이라니...! 하면 할수록 배워야 하는 게 참 많다는 생각이 든다. 필기해놓은거 블로그에 옮기면서 다시 꼼꼼하게 살펴야 하는데 임시저장 해놓은 게시물만 늘어가고... ^^ 나만의 아고라 스테이츠 만들기 섹션1의 마지막 과제. 피그마로 이것저것 작업해놓고 하려는데... 하루만에 다 하려니 시간이 제법 쫄려서 결국 저쯤에 그만두고 제출했다. 다른 분이 배경에 블러 효과 넣은거 너무 신기해서 결국 따라해 봄. 근데 사파리에선 이 효과가 또 먹히지 않아서, 브라우저별 가능한 효과들도 잘 찾아보고 시도해봐야겠다는 인사이트를 얻었다...

DOM : 문서 객체 모델의 기본 개념

DOM은 문서 객체 모델(Document Object Model)의 약자로, HTML요소를 Object(JS Object)처럼 조작(Manipulation)할 수 있는 Model이다. 즉, JS를 사용할 수 있으면 DOM으로 HTML을 조작할 수 있다. 이 객체 모델은 문서 내 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 웹페이지를 만들 때 토대가 되는 HTML파일, 스타일을 꾸미는 CSS 파일, 상호작용하는 JS파일을 만든다. CSS와 JS파일을 어떻게 HTML과 연결시켰을까? ... 웹 브라우저가 작성된 코드를 해석하는 과정에서 요소를 만나면, 웹브라우저는 HTML 해석을 잠시 멈추고 요소를 먼저 실행한다. 즉, 요소는 등장과 함께 실행된다. 요소는 사실 태그 앞이라면 어디에 넣어..

Spread Syntax / Rest Parameter

JS에는 JS 표준인 ECMAScript(이하 ES)이라는 버전이 존재한다. 가장 최신 버전은 ES2019(19년 출시)지만, ES6(SCMA Script6, 15년 출시)에서 가독성과 유지보수성을 획기적으로 향상할 수 있는 문법이 많이 추가되었다. ES6에서 추가된 기능으로 앞서 배운 let/const 키워드와 Template literals, Spread Syntax, Rest Parameter등이 있다. Spread Syntax(전개 구문)와 Rest Parameter(나머지 변수, 국내 검색 사이트에서는 주로 rest 파라미터로 통용된다) 는 둘 다 점 세개(…)로 표현할 수 있지만, 쓰임새는 완전히 다르다. Spread Syntax : 이름 그대로 배열, 객체, 문자열 등을 풀어 각각의 요소로 ..

수업 3주차, 어쩌고의 일상

11월 둘째주가 되었고 수업은 시작한지 3주가 지났다... 약간 낡고 지친건 JS에서 스코프랑 클로저를 연달아 두들겨 맞아서가 아닐까. 암튼 이 사이 되돌아 생각해보면 뭘 참 많이 배우기도 배우고 사람도 많이 만났다. 사람 많이 만난건 너무 내기준인데 암튼... 페어는 벌써 4번째 바뀌었고 화요일에 그룹회고 하느라 첨 뵙는 분들도 만나고 그래서... 근데 그룹회고때 모더레이터 랜덤선정된 바람에 좀 죽을 뻔 했음. 하 저한테 이런거 주지 마세요ㅜ 저는 MBTI 내향 95프로 나오는 내향인간이란 말이에요ㅜ 발발 떨면서 진행했는데 한 30분 말하고 나니까 좀 고장나가지고 마무리 할쯤엔 인간의 말을 처음 배운 오랑우탄처럼 뚝딱임. 하 ㄴㅓ무 힘들었따 아 그리고 맥 진짜 SIBAL 이전 iOS에선 그런 적 없는데..

JavaScript Koans (1) : 연산자와 변수, 호이스팅

Part 2 : Types ✅ 강한 연산자 === 과 느슨한 연산자 == ==는 실행 중 타입 변환(type coercion)이 일어나기 때문에 2 == ’2’가 ture라는 결과를 내놓는다. 다소 복잡하고 명확한 규칙이 존재하지 않아 프로그램의 작동을 예측하기 어렵게 만드는 것. 때문에 앞으로 엄격한 동치 연산(strict equality)인 === 사용을 권고한다. ✅ Addition (+) 더하기 연산자 참고 숫자 피연산자의 합을 구하거나, 문자열을 서로 연결한다. // number + number -> 덧셈 1 + 1 // 2 // string + string -> 문자열 연결 '1' + '1' // 11, string // number + string -> string으로 타입 변환 1 + '1..