본문 바로가기

Frontend Dev

(147)
자바스크립트의 프로토타입 (prototype) 자바스크립트와 프로토타입 자바스크립트는 프로토타입 기반 언어(prototype-based-language)로, 프로토타입은 원형 객체를 의미한다. 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미이다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지이다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이다. Java, C++ 과 같은 클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체(인스턴스)를 생성한다. 하지만 프로토타입..
ES6, 자바스크립트의 클래스(class) 기본 문법과 클래스 상속 객체 지향 프로그래밍과 클래스 객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴이다. → 청사진을 클래스(class) → 청사진을 바탕으로 한 객체를 인스턴스 객체(instance object) 라고 부른다. 📌 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메서드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. 📌 자바스크립트에서 클래스는 함수의 한 종류로 기존 prototype 기반 패턴의 syntactic sugar(기존 문법을 쉽게 읽을 수 있게 만든 문법)이다. 💬 클래스는 ES6에서 추가된 문법으로, ES6 이전에는 클래스를 어떤..
자바스크립트와 객체 지향 프로그래밍 (Object Oriented Programming) 👾 객체 지향 프로그래밍 (OOP) 이란? Java, C++, C# 등 현대의 언어들은 대부분 객체지향 프로그래밍을 지원한다. 객체지향 프로그래밍은 실세계에 존재하고 인지하고 있는 객체(Object)를 소프트웨어의 세계에서 표현하기 위해 객체의 핵심적인 개념 또는 기능만을 추출하는 추상화(abstraction)를 통해 모델링하려는 프로그래밍 패러다임을 말한다. 객체지향 프로그래밍은 함수들의 집합 혹은 단순한 컴퓨터의 명령어들의 목록이라는 전통적인 절차지향 프로그래밍과는 다른, 관계성있는 객체들의 집합이라는 관점으로 접근하는 소프트웨어 디자인으로 볼 수 있다. → 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, 데이터의 접근과 데이터의 처리 과정에 대한 모형을 만들어 내는 방식으로 데이터와 기..
Section2 Unit2 JavaScript 객체 지향 프로그래밍 - 프로토타입 Section2 Unit2 [JavaScript] 객체 지향 프로그래밍 - 프로토타입 📌 Chapter2. Prototype • 자바스크립트의 객체지향 프로그래밍은 프로토타입을 기반으로 한다. 이번 챕터에서 배운 프로토타입을 더 공부해보며 블로그에 따로 정리를 했다. 프로토타입이라는 개념이 처음에는 이해도 잘 안되고, 쉽지 않았는데 여러번 관련 자료과 코드를 읽다보니 점점 이해가 되는걸 느꼈다. 생각보다 복잡하거나 어려운 개념도 아니라는 것도 알았다. "자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있는데, 이 원형객체인 부모객체를 프로토타입 객체라고 한다. 프로토타입으로부터 프로퍼티와 메서드를 상속받으며, 자바스크립트의 모든 객체는 프로토타입 객체를 가지고 있다." 더 자세한 ..
Section2 Unit2 JavaScript 객체 지향 프로그래밍 - OOP와 클래스 문법 Section2 Unit2 [JavaScript] 객체 지향 프로그래밍 - OOP와 클래스 문법 📌 Chapter1. 객체 지향 • 자바스크립트는 프로토타입 기반의 언어로, 엄밀히 말하면 객체 지향 언어는 아니지만 객체 지향 패턴으로 작성이 가능하다. 객체지향에 대한 내용은 이번에 수업을 듣고 더 찾아보며 따로 정리를 했다. 아래 글을 참고하면 좋을것 같다. 자바스크립트와 객체 지향 프로그래밍 (Object Oriented Programming) 👾 객체 지향 프로그래밍 (OOP) 이란? Java, C++, C# 등 현대의 언어들은 대부분 객체지향 프로그래밍을 지원한다. 객체지향 프로그래밍은 실세계에 존재하고 인지하고 있는 객체(Object)를 소프트웨 fay-story.com 객체 지향 프로그래밍, 정..
Section2 Unit1 JavaScript 고차 함수 Section2 Unit1 [JavaScript] 고차 함수 📌 Chapter1. 고차 함수 • 자바스크립트에서 함수는 일급 객체로 취급되므로 다른 함수에 전달될 수 있다. 함수는 변수에 할당될 수 있고, 객체 속성으로 저장될 수 있다. • 고차 함수는 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수이다. ↓ 고차함수 개념이 좀 어렵다고 생각이되어 복습하면서 공부한 내용을 정리해보았다. 고차 함수(higher order function)란 무엇일까? 👾 고차함수(higher order function)란? 고차 함수는 ① 함수를 전달인자(argument)로 받을 수 있고, ② 함수를 리턴할 수 있는 함수이다. ✔️ 1. 다른 함수를 인자로 받는 경우 다른 함수(caller)의 전달인 fay..
Section1 회고, 부트캠프를 시작하고 벌써 한 달이 흘렀다. Section1 회고, 부트캠프를 시작하고 벌써 한 달이 흘렀다. Section1을 마무리하며, 이번 챕터에서 학습한 내용을 토대로 기술 면접 준비하기 챕터가 있었다. (오전에는 이력서 작성 방법에 대한 커리어 세션도 있었다.) 기술 면접 대비로 다양한 질문들이 있었고, 이에 대한 답변을 말해보는 시간이었다. 라이브 세션에서 강조했던 부분은, 기술 면접시 첫 한문장을 명확하게 말하자는 것. 오늘의 TIL은 다른 내용은 제외하고 Section1을 마무리해볼까 한다. 코드스테이츠에서 제안한 방법은 KPT를 기반으로 한 회고였고, 처음엔 뭘 써야할지 생각이 딱히 잘 안나서 별 생각없이 작성했었는데 쓰다보니 내가 해야 할 것들이 명확해지는 느낌이 들어서 나름 열심히(?) 생각해서 작성했다. 📌 Keep, P..
Section1 Unit11 솔로 프로젝트, 나만의 아고라스테이츠 만들기 Section1 Unit11 [솔로 프로젝트] 나만의 아고라스테이츠 만들기 ⭐️ 과제. 나만의 아고라스테이츠 만들기 ✔️ 배포링크 → https://sw2377.github.io/fe-sprint-my-agora-states/ ✔️ 배운점: 자바스크립트로 DOM 요소를 생성하고 삭제하는 방법을 배웠고, CSS로 다크 테마를 설정하는 방법을 학습할 수 있었다. ✔️ 어렵거나 아쉬웠던 부분: 페이지네이션 구현하는게 어려워서 구글링으로 찾기는 했는데 정확히 이해가 잘되지 않았다. 그래서 처음에는 페이지 내에서 디스커션 추가/삭제 시 페이지네이션이 업데이트 되지 않는? 오류가 있었다. 😭 ✔️ 앞으로 개선할 부분: 페이지네이션 구현하는 방법을 좀 더 찾아보고, 적용시킬 예정이다. → 현재는 오류 수정했고, 페이..

반응형