영프로 개발

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..

모나드 모나드는 *컨텍스트 레벨을 값 레벨로 끌어들여 추상화한 컨테이너박스를 말합니다. 함수형 프로그래밍에서는 참조 투명성이 이루어져야 하며 이를 위해 모나드를 사용한다. 컨텍스트 : 어떤 로직실행에 영향을 줄 수 있는 레지스터, 콜스택, 객체의 현재 상태 등에 해당하는 것 참조 투명성 : 함수가 함수외부의 영향을 받지 않는 것 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 고차함수 고차함수는 함수가 다른 함수를 매개변수로 받아 로직을 생성하는 함수를 말한다. * 함수를 값 자체로 다른 함수에 넘길 수 있는 일급 ..

1. 정렬하기 [HTML] div 태그: 레이아웃을 나누기 위해 사용하는 태그 img 태그: 이미지를 표시하는 태그 (src 로 이미지 지정) a 태그: 링크를 연결하는 태그 (href 로 링크 지정) p 태그: 문단을 표시하는 태그 h 태그: 제목을 표시하는 태그 input 태그: 사용자로부터 입력을 받는 태그 [CSS] width: 가로 길이 지정 height: 세로 길이 지정 flex: 정렬을 위해 사용하는 display 의 값 (display: flex) justify-content: 메인 축 중앙 정렬 (초기에는 가로 축) align-items: 교차 축 중앙 정렬 (초기에는 세로 축) color: 글자 색 지정 background-color: 배경 색 지정 margin: 테두리 밖 여백 pad..

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 = ..

I/O Bound 작업 DB, 파일시스템, 네트워크 등을 다루는 작업 CPU Bound 작업 CPU 자원을 사용하는 일을 다루는 작업 기본적으로 자바스크립트(이하 JS) 의 함수는 콜스택(Call Stack)에 쌓였다가 pop이 되면서 동기적으로 실행된다. 하지만 web APIs의 setTimeout 함수, I/O Bound작업은 콜스택에 쌓인 다음 바로 web APIs의 백그라운드 공간으로 넘어간 후 비동기적으로 완료가 되면 콜백큐(Callback queue)에 쌓이고 이벤트 루프(Event loop)를 이용해 다시 콜스택에 쌓여 호출된다. http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpI..