영프로 개발

2022.08.04 - [JS] - 뉴스 API를 이용하여 뉴스 검색기 만들기 (1) 뉴스 API를 이용하여 뉴스 검색기 만들기 (1) https://developer.nytimes.com/docs/articlesearch-product/1/overview https://developer.nytimes.com/docs/articlesearch-product/1/overview developer.nytimes.com 우리는 위 링크 API를 이용하여 아래와 같.. youngpro95.tistory.com 1탄에 이어서 기사 불러오는 방법을 작성해보겠습니다. 기사를 불러오기전에 요구사항 리스트중 검색히스토리를 먼저 만들어봅시다. function addDiv(targetVal) { searchArray.uns..

2022.08.07 - [JS] - 클로저 문제 클로저 문제 Document Click me! 클로저 개념을 활용하여 "Click me!" 버튼을 2번이상 클릭시 0으로 초기화 되게끔 작성해주세요. youngpro95.tistory.com 정답은 const button = document.querySelector('button') button.addEventListener('click', (function(){ let count =0; return function(){ count += 1; if(count ===2){ alert("0으로 초기화 됩니다.") count = 0; } } })()); button.addEventListener('click',counter()) function counter(..

Click me! 위의 HTML 코드를 활용하여 클로저 개념을 활용하여 "Click me!" 버튼을 2번이상 클릭시 0으로 초기화 되게끔 작성해주세요.

https://developer.nytimes.com/docs/articlesearch-product/1/overview https://developer.nytimes.com/docs/articlesearch-product/1/overview developer.nytimes.com 우리는 위 링크 API를 이용하여 아래와 같은 요구사항을 만족하는 뉴스검색기를 만들어 보자. 일단 html을 이용하여 기본 틀을 만들어봅니다. 작성시 유의할점은 여러개의 속성이 있다면 class를 이용합니다. Clip된 뉴스만 보기 recent Keywords... 아직은 전혀 결과물과 똑같지 않은 모습입니다. 자 이제 CSS를 사용하여 꾸며봅시다. * { margin: 0; padding: 0; } #searchResult{..

모나드 모나드는 *컨텍스트 레벨을 값 레벨로 끌어들여 추상화한 컨테이너박스를 말합니다. 함수형 프로그래밍에서는 참조 투명성이 이루어져야 하며 이를 위해 모나드를 사용한다. 컨텍스트 : 어떤 로직실행에 영향을 줄 수 있는 레지스터, 콜스택, 객체의 현재 상태 등에 해당하는 것 참조 투명성 : 함수가 함수외부의 영향을 받지 않는 것 const log = console.log const users = [{name: '영민'},{name: '민호'},{name: '동준'},{name : '승태'},{name : '세민'}] const getUserByName = (name) => users.find( u => u.name === name) || Promise.reject("객체에 없습니다.") const g =..

함수형 프로그래밍 1탄 함수형 프로그래밍 순수함수 1. 최대한 지역변수만을 사용해 구현하기 2. 인수로 넘기는 값의 본체까지 수정하지 않기. 3. 매개변수로 넘기는 값이 객체라면 원본 객체에 변이를 일으키지 않기. ( 깊게 복사후 변이 youngpro95.tistory.com 커링 어떤 함수의 예상되는 여러 개의 매개변수보다 적은 수의 매개변수를 받아서 매개변수가 완전히 채워지지 않은 함수가 실행되지 않고 넘겨지다가 모든 매개변수가 채워지면 그때서야 실행되는 기법 const sum = ( a, b) =>{ return a + b } sum(10,20) //30 //커링, 다중인수를 갖는 함수를 단일 인수를 갖는 함수열로 전환 const sum = (a) => (b) => { return a + b } s..

함수 선언식 function trueFunc() {console.log(`true!`)} 선언된 함수는 나중 사용을 위해 저장되며 호이스팅 된다. 함수 표현식 var a = function (x,y){ return a + b } 위와같이 사용할수 있으며 변수에 할당되며 변수는 함수처럼 사용 가능해진다.

IIFE ( Immediately Invoked Function Expressions )는 즉시 호출 함수 표현식의 줄임말입니다. (function () { statements }) (); 위와 같이 함수를 만들수 있다. 만약 함수(IIFE)를 변수에 할당하면 함수자체는 저장이 안되지만 함수(IIFE)의 결과값은 저장이 된다. 함수 선언(declaration)은 미리 자바 스크립트의 실행 컨텍스트(execution context)에 로딩 되어 있으므로 언제든지 호출할 수 있지만, 표현식(Expression)은 인터프리터가 해당 라인에 도달 하였을때만 실행이 됩니다. 왜 쓰나요? 보편적으로는 전역스코프(Global Scope)를 오염시키지 않으려고 사용합니다.

순수함수 1. 최대한 지역변수만을 사용해 구현하기 2. 인수로 넘기는 값의 본체까지 수정하지 않기. 3. 매개변수로 넘기는 값이 객체라면 원본 객체에 변이를 일으키지 않기. ( 깊게 복사후 변이 하는 방법이 있다. ) 2022.06.30 - [JS] - 올바르게 객체 복사하기 올바르게 객체 복사하기 JS 객체를 함수를 통해 넘길때 call by value 형식을 취하기 때문에 메모리의 이점을 노리지 않는 이상 deep copy를 통해 원본객체를 안전하게 복사하는것이 좋다. 스프레드 연산자와 Object.assign 위의 2 youngpro95.tistory.com 고차함수 고차함수는 함수가 다른 함수를 매개변수로 받아 로직을 생성하는 함수를 말한다. * 함수를 값 자체로 다른 함수에 넘길 수 있는 일급 ..

Image Lazy Loading이란? 페이지 안에 있는 실제이미지들이 화면에 보여질 필요가 있을때 로딩 할수 있게끔 하는 기술입니다. 1. 성능 향상 페이지 초기 로딩시 필요한 이미지의 수, 용량을 줄일 수 있다. - 초기 보여지는 이미지를 placeholder를 적용하거나 압축된 이미지를 사용 How to use? HTML JS document.addEventListener("DOMContentLoaded", function() { let lazyImages = [].slice.call(document.querySelectorAll("img.lazy")) let active = false const lazyLoad = function() { if (active === false) { active = ..