본문 바로가기

프로그래밍 언어16

자바스크립트의 객체지향 : public, private 자바스크립트 참고 자료들을 찾다보면, `객체의 상속`을 중심으로 설명하는 글들을 흔히 찾아볼 수 있다. __prototype__ 접근자를 통해 찾아볼 수 있는 이 객체들은 객체지향(Object Oriented) 프로그래밍 원칙에 의해 정의되어있다. 당장에 해당 객체들을 사용할 일은 없지만, 참고자료들을 빠르게 이해하기 위해서 OOP 개념들에 해당하는 속성들을 chat gpt + Mdn을 활용하여 연습해보기로 했다. * OOP 원칙 중 캡슐화 OOP는 상속, 추상화, 다형성의 개념을 활용하여 하나의 객체로부터 수만가지에 이르는 인스턴스를 생성함으로 필요한 곳에 필요한 객체를 확장하여 새롭게 정의할 수 있는 강점을 가진다. 다만 이렇게 확장된 코드들은 외부로부터의 접근에 취약하기에, 외부에 노출시킬 데이터와.. 2023. 8. 18.
타입스크립트의 제네릭(generic) 가만보면,,, 프로그래밍 전체로 생각하기에는 내 앎이 굉장히 좁기에 단정지을 수 없지만,,, 적어도 자바스크립트는 하드코딩을 엄청엄청 싫어하는 것 같다. 1. 타입스크립트의 제네릭 (Generic) 공식문서에 따르면, 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다고 한다. 제네릭이 타입스크립트 내부에서 동작하는 원리는 TypeScript 컴파일러가 컴파일하는 과정에서 타입 추론에 활용됨으로 코드의 재사용성 및 안정성을 높이기 위해 사용된다. function getText(text: T): T { return text; } // 이 코드는 다음과 같은 익숙한 자바스크립트 함수에 새로운 제네릭 타입 를 선언한 구문이다. function getText [제네릭이 삽입된 부분] { retur.. 2023. 5. 4.
[Trouble Shooting] <input> 태그에서 undefined가 제출되는 경우 React 프로젝트를 진행하다가 아래와 같은 오류가 발생했다. (본 사례의 경우 이미 해결한 내용을 다시 점검하고 해결하느라 예시 코드를 활용했다.) import "./styles.css"; export default function App() { const handleSubmit = (e) => { console.log(e.target.value); // 일단 여기서 undefined 출력 }; return ( ); } 사실, 이 문제에 대한 다음 스텝은 어렵지 않게 찾을 수 있었다. 기존에 본인이 코드를 짜면서 input에서 event를 다루는 연습을 종종 했기에 사전에 작성했었던 코드들을 살펴봄으로서 찾을 수 있었다. 태그는 내부에서 제출되는 각 요소가 제출한 최종 이벤트들을 모아서 하나의 객체로 .. 2023. 4. 11.
Typescript 개요 타입스크립트란? Typescript는 마이크로소프트에서 개발한 자바스크립트 기반의 프로그래밍 언어이다. 타입스크립트의 공식문서에 따르면, 타입스크립트는, 1) 자바스크립트의 구문에서 추가적인 integration을 넣음으로 자바스크립트의 단점을 보완한다. 2) 자바스크립트가 호환되는 모든 에디터 및 환경에서 작동한다. 3) 규모에 상관없이 안정적인 작업을 가능하도록 한다. 는 강점을 갖는다. 추가적인 타입의 추가가 갖는 강점 ( Udemy 강의자료 참조 ) function add (a, b) { return a + b; // a + b를 하길 원해! } // DOM의 결과물을 가져올 때 === 문자열로 가져옴 add('5', '3') // "ab" function add (a: number, b: num.. 2023. 3. 29.
검색 엔진 최적화(SEO) 1. SEO(Search Engine Optimization)는, 검색엔진 최적화라는 의미로, 사용자가 검색 엔진에서 키워드를 검색했을 때 정확한 정보를 바탕으로 웹을 노출시키는 작업을 말한다. 2. SEO에는 크게 On-Page SEO와 Off-Page SEO로 나뉜다. 1. On-Page SEO : 말 그대로 페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법 2. Off-Page SEO : 웹 사이트 외부에서 이루어지는 SEO로, 소셜 미디어 홍보, 백링크(타 사이트에서 연결되는 링크) 등을 이용하는 방법 코드에서 조작할 수 있는 SEO는 On-page SEO이다. 3. SEO 최적화를 위한 방법 SEO 최적화를 위한 방.. 2023. 3. 1.
Sementic Tag(웹 표준) 웹 표준이란, W3C(World Wide Web Consortium)에서 권고하는 "웹에서 표준적으로 사용되는 기술이나 규칙"이다. 이는 2000년대 초반, 웹이 급속도로 상용화되던 시기에 브라우저 간 상호호환이 되지 않아, 개발자들이 각 브라우저에 맞는 동일한 페이지를 구현했던 시기의 비생산적인 활동을 최소화하고 어느 브라우저에서나 동일한 상호작용을 제공하고자 웹 개발 형식을 통일한 데서 출발한다. 1. Semantic Tag 모든 웹은 라이브러리에 따라 렌더링 하는 방식은 다르지만, 최종적으로 HTML로 화면의 구조와 컨텐츠를 출력한다. 이 때, 화면의 구조상 구현을 맡는 태그는 태그와 태그다. 기본적으로, 두 태그만 갖고 있어도 모든 웹 상의 구조를 구현할 수 있으나 어플리케이션이 커져감에 따라 아.. 2023. 2. 28.
Javascript Async 거의 대부분의 프로그래밍 언어에서 비동기는 중요하게 다뤄진다. 그 이유는, 대부분의 프로그래밍 언어가 싱글 스레드 기반의 동기식 작업 처리방식을 갖고 있기 때문이다. 동기식 처리와 비동기식 처리의 차이는 다음의 그림을 통해 확인할 수 있다. 그림에서도 보여지듯, 비동기적으로 처리된 작업시간은 동기적으로 작업하는 작업시간보다 빠르게 작업이 이뤄진다. 이는, 서버 통신이 이뤄지는 동안 타 작업을 수행하든지, 일정 시간이 지난 후 팝업/영상을 띄우는 setTimeout / 일정 간격으로 특정 작업을 수행하는 setInterval 등 호출 스케줄링 등의 경우에서 아주 중요하게 다뤄진다. 그 예시로, 만약 GPS 정보를 활용한 작업이 필요한 경우, GPS 정보를 가져오고 이에 관한 연속 작업이 이뤄지는 동안 사용.. 2023. 2. 19.
고차함수 설계 : arr.map() / arr.reduce() / arr.filter() 객체와 배열은 모든 프로그래밍 언어에서 다루는 개념이며, 특히 객체지향 프로그래밍에 있어서 중요한 역할을 맡는다. 이 중, 배열을 활용한 데이터의 조작은 프로그래밍을 통해 특정한 화면 및 데이터를 구현하고자 할 때 항상 사용되는 개념이다. 이에 본 포스팅에서는 가장 자주 사용되는 배열의 개념인 arr.map(), arr.reduce(), arr.filter()를 살펴보고 이를 다루는 예제를 살펴보고자 한다. 다만, 현재 배열을 고차함수(콜백함수)를 활용해서 이해하는 역량이 많이 부족하기 때문에 MDN에서 제공하는 프로토타입을 기준으로 쪼개보고 이 쪼갠 내용을 바탕으로 예시코드를 살펴봄으로 내용을 정리하고자 한다. Arr.Map() // MDN 프로토타입 arr.map(callback(currentValu.. 2023. 2. 16.
DOM 이해하기 (Document Object Model) Dom은, 자바스크립트로 HTML을 제어하기 위해 만들어진 "모델"이다. 이 때, 모델의 의미는 HTML을 자바스크립트에서 "객체"로 다루기 위해 만들어진 추상화된(여러 기능이 묶여 새로운 의미로 정의된) 개념이라는 뜻이다. console.dir() console.dir() 메서드는 브라우저의 콘솔에 내가 원하는 HTML의 요소를 객체형태로 보여주는 메서드이다. console.dir(document) // document 객체가 가진 (HTML에서는 head와 body요소 뿐만 아니라, // window에 렌더링 되기 전 document가 가진 모든 객체를 보여준다고 생각하면 쉽다) console.dir(title) // 크롬의 about:blank에서는 공백이 console에 찍힌다. // 이는 doc.. 2023. 2. 14.
Spread and Rest Operator (+a 구조분배할당) 스프레드 연산자 1. spread 연산자는 일반적으로 배열 혹은 객체 안에 있는 수많은 값들을 전개 한 뒤 새로운 배열 혹은 객체에 넣어서 활용하기 위한 방법으로 사용된다. 2. rest로 쓰일 때는, 전개하고 남은 값들을 특정 변수에 담아 재사용하게 될 경우 활용된다. // spread 연산자의 기본구문 // iterator : 순환(for...in / for...of), let iterableArr = [1, 2, 3, 4]; let iterableObj = { 1: "1", 2: "2", 3: "3", 4: "4" }; myFunction(...iterableObj); // iterable의 값들을 전개하는 연산자 console.log(myFunction); // 1: "1", 2: "2", 3: .. 2023. 1. 30.
Arrow Function 화살표 함수 // Arrow Fuction 기본구문 // 아래의 myFunc1~5는 모두 param을 매개변수로 받고 expression을 실행시키는 동일한 함수이다. // ----------------- 함수가 1줄로 끝나는 경우 ------------------ const myFunc = param => expression // 매개변수가 1개인 경우 const myFunc2 = (param) => expression // 매개변수의 수 관계x const myFunc3 = (param1, paramN) => expression // 매개변수의 수 관계x // ----------------- 함수가 여러 줄로 끝나는 경우 ------------------ const myFunc4 = param => {.. 2023. 1. 19.
__proto__ : 프로토타입 자바스크립트에서 모든 객체는 프로토타입(prototype)이라는 객체를 가진다. 프로토타입은 해당 객체가 가지는 속성과 메서드를 정의하고, 모든 객체는 자신의 프로토타입을 상속받아서 해당 프로토타입이 가지는 속성과 메서드를 사용할 수 있다. 이를 프로토타입 상속(prototype inheritance)이라고 한다. 이러한 프로토타입 상속은 프로토타입 체인(prototype chain)이라는 연결고리를 통해 이뤄진다. 프로토타입 체인은 클래스에서 생성된 객체가 상위 프로토타입의 상속을 탐색하는 연결고리를 말한다. 더 정확하게 프로토타입 체인은 프로토타입이 가지는 속성과 메서드를 사용할 수 있도록 프로토타입 객체의 연결된 체인을 순차적으로 탐색하는 과정이다. 이 과정에서 객체가 원하는 속성이나 메서드를 찾을.. 2023. 1. 16.
Class and Instance Class와 Instnace를 사용하는 이유?" 1. Class는 Instance를 생산하는 일종의 공장이자, Instance에 따라 일정한 형태를 리턴하는 청사진! 2. 구현된 기능을 파악하고 이를 재사용하기 용이하며, 향후 유지보수 및 기능을 추가할 때 생산성이 높다. // Class 기본구문 === MDN 참조 === ES6 최신구문 기준 const NewClass = class { // 클래스 선언 ===> 파스칼케이스 사용 (js의 카멜케이스x) constructor() { // 생성자 this.prop = "value" // 생성자에서 만들어내는 속성과 값 } newMenthod() { console.log(this.prop) // "value" } }; let newInstance = new.. 2023. 1. 16.
객체란? 1. 객체란? 1) 키(key)와 값(value)로 구성된 집합 2) 키(key)와 값(value)으로 구성된 한 쌍을 속성(property)라고 부른다. 2. 객체의 기본구조 (리터럴표기) let NewObject = { freshKey1 : "newValue1", // 값에는 문자열, 숫자열, 불리언 등 모든 타입이 들어갈 수 있다 freshKey2 : "newValue2" // 속성이 함수일 경우 ===> 해당 함수를 메서드라고 부른다 } 3. 객체에 접근하기! ===> 애초에 객체라는 개념이 주목받게 된 이유는, 절차적 사고를 중심으로 작성된 코드들이 IT의 발전에 따라 거대해져서 사람이 코드를 통해 유지보수를 하는데 많은 어려움을 겪게 된 데에서 찾을 수 있다. ===> 그렇기에 객체를 생성하고.. 2023. 1. 16.
(for문) n = n+i를 n === n+1처럼 착각하지 말자 예제) 1부터 100까지를 모두 더한 값을 for문을 활용하여 구하시오. tmi, 1부터 100까지의 합은 중학교때 처음 접했던 것 같은데,, 그때는 귀찮아서 그냥 답을 외워버렸다..(셤에 나온다길래) 근데 JS만나니 아주 반갑네;;ㅎㅎㅎ let sum = 0; for (let i = 0; i 2022. 12. 19.
자바스크립트의 타입과 변수 1. 자바스크립트의 타입(Type) 코딩을 하기 위해서는 다양한 타입(정확하게는 7개의 타입)들을 적절한 방법으로 작성할 수 있어야 한다. 특히, 타입의 특징을 활용한 여러 예제도 있는만큼 타입을 정확하게 이해하는 것이 중요하다. *내가 이해한 타입이란, 결국 일상생활에서 쓰이는 다양한 값(들어가는 값/나오는 값)을 컴퓨터 언어에 맞게 분류한 것에 불과하다! - 특히 어떤 예제에서 불린 타입(boolean) 형태로 Return(반환)하라는 요구를 들었을 때, "어? 내가 생각한 불린은 컴퓨터에서 알아서 판단하고 나오는 값 아닌가? 왜 그렇지?라는 선입관에 의해 벙쪘었다. 1. Number(숫자) 타입 : 양의 정수(100), 음의 정수(-100), 자연수(3.14 등) 2. String(문자열) 타입 :.. 2022. 12. 16.