분류 전체보기 (204) 썸네일형 리스트형 [Javascript] 함수선언문 & 함수표현식 & 화살표함수()=>{} 비교(호이스팅, this 관점에서) 호이스팅 관점에서의 차이 함수선언문은 함수 자체가 호이스팅 된다. 함수표현식은 함수 자체는 호이스팅 되지 않고, 변수가 호이스팅된다. 화살표함수는 함수표현식의 다른 표현(ES6에서 추가)으로 마찬가지로 함수는 호이스팅 되지 않고, 변수만 호이스팅된다. 선언하고, 사용하는게 정상적 로직이므로 함수표현식&화살표함수를 권장한다. case1) 함수 선언문은, 런타임 이전에 엔진에서 먼저 실행되어서 함수 자체를 호이스팅 한다. console.dir(plus) // output: ƒ plus(x, y) console.log(plus(2, 5)) // output: 7 // 함수 선언문 function plus(x, y) { return x+y } case2) 함수 표현식은 런타임 이전에 변수에 undefined라고.. [알고리즘] 주어진 정수 N 까지의 소수 구하기 (시간복잡도&제너레이터) [시간복잡도 O(N^2)] 일반함수 버전 const isPrimeNumber = (number) =>{ for (let i =2; i [Javascript] 제너레이터 (Generator) 이터러블, 이터레이터와 비교 generator yield는 제너레이터 함수 안에 존재 next는 함수 밖에서 호출되는 메서드, yield를 순서대로 부름 function* generateSequence() { yield 1; yield 2; return 3; } let generator = generateSequence(); console.log(generator.next()); // {value: 1, done: false} console.log(generator.next()); console.log(generator.next()); console.log(generator.next()); [실행결과] 어디서 많이 봤다. 어디서? Symbol.iterator() 메소드가 반환하는 값 = interator const array = [.. [Javascript] (iterable 프로토콜, iterator 프로토콜) of [iteration 프로토콜] ES6에서 도입됨 이터러블은 데이터 공급자의 역할 다양한 이터러블이 각자의 순회방식을 갖는다면, 데이터 소비자는 모든 방식을 각각 지원해야한다. 효율성을 위해 프로토콜(규칙)을 정의 이터러블은 Lazy evaluation(지연평가)를 통해 값을 생성한다. 100개의 값이 필요할때 처음부터 100개를 만드는 것이아니고, 하나씩 next -> next-> next로 하나씩 만든다. 할당이 이루어지기 전까지는 데이터를 생성하지 않는다. iteration 프로토콜 데이터 컬렉션을 순회하기 위한 프로토콜(규칙) 이터레이션 프로토콜(규칙)을 준수한 객체는 for문으로 순회할 수 있고, spread문법으로 펼칠 수 있다. 이터레이션 프로토콜 (대분류) 안에 이터러블 프로토콜과 이터레이터 프로토콜이 있다. iterab.. CSS3 특성 선택자(Selector) 특성 선택자란? 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택하는 것 title link Internal link https://example.com Insensitive internal link http://example.org /* css */ /* elements with a title attribute */ a[title] { color: red; } /* elements with an href matching "https://example.org" */ a[href="https://example.com"] { color: green; } /* elements with an href containing "example" */ a[href*="example"] { font-size: 2em;.. REST Service에 대하여 REST API란? Representational State Transfer 웹을 좀 더 효율적으로 사용하기 위한 아키텍처 REST 구성 - 자원(URI) - 행위(METHOD) - 표현 REST 특징 ( 아직 모호한 개념 ) 1) uniform interface : URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일 2) stateless (상태없음) : 작업을 위한 상태가 따로 없음. API는 들어오는 요청만 단순히 처리. 3) Cacheable(캐시가능): HTTP가 가진 캐싱 기능이 적용됨, HTTP프로토콜에서 사용하는 헤더(Last-modifed, E-tag)를 이용하여 캐싱 구현 가능 4) Self-descriptiveness(자체 표현 구조) : RE.. [Vue.js] #11 네비게이션 바(NavBar) 만들기 [specific concept] 1. 조건에 따라 class 값 추가/제거 - isOpened라는 boolean 변수의 값에 따라 open 추가/없음 토글 됨 - @click 속성으로 toggleMenu 함수 실행됨 [예제 코드] 1. /componets/NavBar.vue 만들기 HOME About Users About Users 2. App.vue 템플릿 상단 NavBar 추가하기 [실행결과] [Vue.js] #10 vue-router 데이터 전달하기 (params, props) 1. main.js props로 받겠다 true 설정 import { createApp } from 'vue' import { createWebHistory, createRouter } from 'vue-router'; import App from './App.vue' // router 쓰일 Component import Home from './views/Home.vue'; import About from './views/About.vue'; import User from './views/User.vue'; import UserDetail from './views/UserDetail.vue'; //routes 정하기 const routes = [ { path : '/', component: Home, n.. [Vue.js] #9 vue-router 사용하여 메뉴 navigation 링크만들기 1. view 폴더생성 2. 페이지 생성(About.vue, Home.vue, User.vue, UserDetail.vue) // About.vue 내용 (Home, User, UserDetail 모두 동일) About 3. main.js : routing 내용 설정 import { createApp } from 'vue'; import { createWebHistory, createRouter } from 'vue-router'; import App from './App.vue' // router 쓰일 Component import Home from './views/Home.vue'; import About from './views/About.vue'; import User from './views/U.. [Javascript] Callback 과 Promise 와 async-await 폴더구조 data.json 파일 내용 { "hello" : "world" } package.json 만드는 방법 npm init --yes [index.js 작성] 파일을 읽는 javascript 파일 시스템 모듈 import fs from 'fs' // 프로미스를 리턴 import fsPromise from 'fs/promises' 콜백함수로 표현 import fs from 'fs'; fs.readFile('data.json', 'utf-8', (err, data) => { if(err) { console.log(err) return } console.log("callback", data) }); Promise로 표현 import fsPromise from 'fs/promises' fsPromise.r.. 이전 1 ··· 10 11 12 13 14 15 16 ··· 21 다음
