자바스크립트120 [Javascript] Iterator(반복자), Generator(발생자) 오늘 소개드릴 자바스크립트 문법은 반복자와 발생자 입니다. 두 문법 모두 es2015에 추가된 문법입니다. 1. 반복자 Iterator Iterator는 반복된 처리가 가능한 객체를 의미합니다. 다른 말로는 객체 내부의 내용을 열거가 가능해서 각 요소들에 대해서 반복처리가 가능한 것들을 의미합니다. 대표적으로 Array, String, Set, Map 등이 반복자를 가지고있는 객체입니다.반복자를 가지고있는 객체들은 보통 다음과 같이 for~of문을 통해서 요소를 열거할 수 있습니다. ES2015부터 추가된 이터레이터 객체는 next()라는 메소드를 갖습니다. 이 메소드의 반환값으로는 done과 value를 가진 객체를 반환합니다. done은 반복이 끝났는지(끝났다면 true, 끝나지 않았다면 false).. 2022. 1. 11. [Javascript] Symbol 심볼은 ES2015에서 추가된 새로운 데이터 형입니다. 1. Symbol 심볼(Symbol)은 상징의 뜻을 가지고 있습니다. 흔히 이메일에 사용되는 @(a.k.a 골뱅이라고 하는 at Sign, 의미는 ~에서, 에게)가 대표적인 상징입니다. 이처럼 Symbol 형이란 어떤 값에 식별되는 유일한 이름을 붙이기 위해서 사용합니다. 우리가 문자열에 @가 존재한다면 아 이게 메일 주소일 확률이 높구나 하고 추정하거나, 길을 가다가 어떤 건물에 편지봉투가 있다면 아 여기는 우체국이겠구나 하고 알아 볼 수 있는 것 처럼, 어떤 값에 식별이 가능한 값을 주어 알아볼 수 있도록 하는 데이터 형입니다. 심볼형은 다음과 같이 Symbol()을 통해 만들어집니다. 생성자가 아니므로 앞에 new가 오지 않는 점이 여태까지의 .. 2022. 1. 10. [Typescript] 타입스크립트 1. 타입스크립트 Typescript 타입스크립트는 마이크로소프트에서 2012년도에 발표한 언어입니다. 이름에서 느껴지듯이 자바스크립트를 기반(자바스크립트는 자바기반이 아니지만요...)으로 정적 타입 문법을 더한 언어입니다. 그래서 자바스크립트 유저라면 간단하게 배울 수 있고 자바스크립트의 타입으로부터 오는 문제점들을 해결해주어서 갈수록 시장에서 한 자리씩 차지하고 있는 언어입니다. 앵귤러2 버전에선 정식으로 타입스크립트를 채택했고, React.js나 Vue.js에서도 타입스크립트를 사용하는 것을 심심치 않게 볼 수 있습니다. 저는 학부를 거쳐오며 C, C++, JAVA, Javascript, Python, Kotlin 등 다양한 언어를 접했는데 이 자바스크립트가 가진 유연함(변수 선언이나 구조 등의)에.. 2021. 12. 24. [React] 컴포넌트 반복하기 우선 반복을 하기전에 자바스크립트의 Array.map()함수에 대해 알고 넘어가야합니다. map()함수는 배열의 요소들을 인자로 가진 함수로 가공해서 배열의 형태로 반환하는 함수입니다. 이 함수를 꼭 기억해주세요. const animals = ['야옹', '멍', '짹', '삐약']; const repeat = animals.map(animal => animal.repeat(2)); console.log(repeat); 1. 배열을 컴포넌트 배열로 만들기 우선 간단하게 배열을 이용해서 컴포넌트 배열로 만들어서 반환하는 방법을 소개해드리겠습니다. 컴포넌트를 하나 만들어줍니다. 이때 map()함수는 animals배열의 요소들을 JSX형태로 변환해주는 역할을 합니다. import React from 'reac.. 2021. 12. 7. [React] 조건부 렌더링 렌더링에 조건을 걸어서 원하는 시점에만 컴포넌트를 렌더링하게 만들 수도 있습니다. 리액트도 당연히 자바스크립트 기반 프레임워크이므로 기존 자바스크립트 조건 문법을 이용하면 됩니다. 1. if문을 이용한 조건부 렌더링 첫번째 방법은 if문을 이용한 조건부 렌더링입니다. 우리가 알고있는 if문 용법 그대로 조건에 따라 return하는 컴포넌트를 다르게 설정하면 됩니다. const SayHello = props => { return Hello?; }; export default SayHello; const SayHi = props => { return Hi!; }; export default SayHi; import React from 'react'; import './App.css'; import SayHi.. 2021. 12. 6. [Node.js/express] 익스프레스 미들웨어 익스프레스에서 중요한 역할을 하고 있는 미들웨어를 알아보겠습니다. 1. 미들웨어와 익스프레스 미들웨어 미들웨어(Middleware)는 운영 체제와 응용 소프트웨어 사이에서 동작하는 중간자 소프트웨어입니다. 하지만 웹에서 말하는 미들웨어는 요청과 응답 중간에서 동작하는 것들을 미들웨어라고 부릅니다. 라우터 등이 대표적이 미들웨어의 일종입니다. 익스프레스에서는 이 미들웨어들을 핵심적으로 다루며 동작합니다. 기본적으로 .use()메소드로 미들웨어를 다루게 됩니다. .use(미들웨어) 지난번 코드에 미들웨어 다루는 것을 이어서 작성해보겠습니다. const express = require('express'); const app = express(); app.set('port', process.env.PORT ||.. 2021. 12. 5. 이전 1 2 3 4 5 ··· 20 다음 300x250
