Study(20)
-
프론트엔드 개발자 지망생에게 UI/UX란?
UI, UX란? UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. UX(User Experience, 사용자 경험)의 사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험을 의미한다. UI와 UX에 대해서 이 그림 하나로 설명이 되어버렸다. 프론트엔드 개발자에게 UI, UX란 어떤 의미일까? 한 사이트를 참고하면 UI/UX디자이너는 UI를 디자인하고, 퍼블리셔는 디자이너가 그려준 걸 화면에 코드로 그리고, 프론트엔드는 뒷단 서버 개발을 고려하며 코드를 짠다고 한다. 프론트엔드 개발자가 되기 위해 공부하며, 어떤 개발자가 되어야 할지 늘 고민하고 있다. 알고리즘 스터디에서 문제를 풀다 보면 가독성..
2022.08.23 -
[javascript] 프로토타입 체인
상속을 하기 위해서 프로토타입이라는 방법을 도입했다 프로토타입 DOM에서도 prototype 이용 가능하다. 생성자를 특정 값으로 초기화하면서 다른 값으로 바꿀 때는 constructor 함수의 괄호 안에 초기값을 입력하고 내부에 this.age = age, this.color = color로 할당하면 된다. this는 생성 시 해당 객체를 의미한다. class Bee{ constructor(age = 5, color = 'pink', food = 'jelly'){ this.age = age; this.color = color; } } super super 키워드는 부모의 함수를 호출하고, 속성을 상속받을 수 있다. 주의할 점은 this 키워드가 사용되기 전에 호출되어야 한다는 것이다. 그렇지 않으면 참..
2022.07.25 -
[javascript] 프로토타입 기반의 언어, javascript
프로그래밍 언어의 차이 Java, C++, C#, Python, PHP, Ruby, Object-C는 클래스 기반 언어에 해당된다. 클래스 기반 언어에서는 인스턴스는 클래스에 정의된 범위 내에서만 작동하며, 구조를 변경할 수 없다. 프로토타입 기반 언어인 javascript에서는 인스턴스의 자료구조와 기능을 변경할 수 있다. 프로토타입 프로토타입의 뜻은 원형이며, 아래의 그림과 같이 소프트웨어가 만들어 지기 전 가상으로 만들어 놓은 미완성 버전, 시스템의 초기모델을 의미로 사용되기도 한다. 프로토타입 기반 언어, javascript javascript는 클래스 기반의 언어와 달리 복제가 아닌 프로토타입 링크를 통해 원형을 참조한다. 배열과 객체는 원시자료형과 참조자료형에서 보았듯이 모두 참조자료형이자 객..
2022.07.22 -
[javascript] 객체지향 프로그래밍
객체 지향 프로그래밍 💡 절차 지향 vs 객체 지향 C가 절차 지향에 해당 - 절차적으로 생각! 데이터의 형태에 따라 코드의 흐름에 영향을 미쳐서 유지 보수가 어려움. JAVA, C++, C#이 객체 지향에 해당 javascript는 객체 지향x지만 객체지향 패턴으로 작성 가능하다 객체 지향 프로그래밍의 주요 개념 캡슐화 (Encapsulation) ⇒ 재사용성 높이기, 코드를 간단하게 - 모든 실행 순서에 따라 절차적 코드가 아니라 코드로 기능 상상할 수 있게 작성 - 은닉화 : 내부 데이터나 구현이 외부로 노출되지 않도록 하기. - 디테일한 구현, 데이터는 숨기고 필요 동작(메소드)만 노출 - 더 엄격한 클래스는 속성의 직접적인 접근을 막고, 설정하는 함수(setter), 불러오는 함수(getter)..
2022.07.22 -
[javascript] 클래스와 인스턴스
객체지향(OOP, Object-oriented programming) 오늘 다룰 주제는 클래스와 인스턴스이다. C언어를 배울 때 접했던 개념을 다시 보게 되어 반가웠다. 그 당시에는 객체에 대한 사전지식 없이 단어 그대로만 받아들이고 있었는데, 객체에 대해 이해하고 보니 폭을 더 넓힐 수 있었다. 객체 객체 지향에서 다루는 객체란? 키-값쌍의 이뤄져있다. 객체를 구성하는 값은 어떤 것이라도 가능하다. 프로퍼티(property)와 메소드(method)라고 부른다. const oheun = { name : Kim Oheun, age : 24, university : ... } 클래스 클래스는 틀이다. 우리가 생각하는 고등학생은 어떤 존재일까? 이름이 있고, n살인, nn고등학교에 다니고, 집에서 몇 분 정도..
2022.07.22 -
[javascript] 원시자료형과 참조자료형
원시 자료형 원시자료형을 할당하면 값을 참조합니다. 할당한 값을 새로 변경했을 때 원본이 변경되지 않습니다. string, number, bigint, boolean, undefined, symbol, (null) 참조 자료형 참조 자료형을 할당하면 주소를 참조합니다. 할당한 값을 새로 변경했을 때 원본이 변경됩니다. array, object, function
2022.07.22