분류 전체보기

AWS

전통 적인 서버 저장소는 물리적인 공간에서 보관 문제점 datacenter 렌트 비용을 지불 power supply, cooling, maintenance 비용을 지불 새로운 하드웨어(서버)를 추가하거나 교체할 때 시간이 많이 소모된다. 확장하는데 제한사항이 많다. 현재 유지되고 있는 인프라를 24/7 모니터링 할 인원을 고용해야 한다. 천재지변에 대응하기 어렵다. Cloud Computing IT 리소스를 인터넷을 통해 on-demand로 제공해주는 서비스 사용한 만큼만 지불하는 pay-as-you-go pricing이 적용 정확하게 필요한 타입과 크기의 리소스를 지정하여 사용할 수 있다. 기존보다 간편하게 서버, 스토리지, 데이터베이스 등에 접근가능한 솔루션을 제공한다. 클라우드의 장점 Flexibi..

라우팅

동적 라우팅 1. Routing 라우팅 - 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것. 2. 동적 라우팅 id 값에 따라 많은 url이 나타나고 각각의 모든 url에 대해 모든 경로의 형태와 개수를 결정할 수 없기 때문에 쓴다 그래서 url에 들어갈 id를 변수처럼 다룬다. 이처럼 정적이지 않은 동적일 수 있는 경로에 대해 라우팅 하는 것을 동적 라우팅이라 한다. 2-1 동적 라우팅 처리하는 방법 path parameter vs query parameter 1. query parameter /products?id=1 /products?id=5 /products?id=15id란 변수에 값을 담아 백엔드에 전달하는 방식이 Query string이다. products에 담긴 정보 중 ..

[자바스크립트] Promise

Promise Promise 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있는 Object로 콜백함수의 단점을 보완(fetch 함수는 Promise 객체를 리턴) Promise 생성자를 보면 executor라는 콜백 함수를 전달하는데 이 콜백함수는 또 다른 두가지의 콜백함수(기능을 정상적으로 수행해서 마지막에 데이터를 전달하는 resolve, 기능에 문제가 생기면 호출하는 reject)를 받는다. //promise를 만드는 순간 전달한 executor가 바로 실행(네트워크 통신을 작성한다면 바로 실행된다(원하지 않아도)) const promise = new Promise((resolve, reject) => { console.log('promise'); }); const promi..

리덕스 맛보기

리덕스 리액트 상태 관리 라이브러리 어플리케이션의 상태를 저장,관리 React-redux를 통해 리액트에서 사용 가능 리덕스를 사용하는 이유? 리액트는 컴포넌트를 쪼개서 하위, 하위, 하위, 컴포넌트를 구성하고 있다(프로젝트 규모가 클수록 컴포넌트 구조가 복잡하다) 리액트의 컴포넌트는 각각의 state를 쓰고 있는데 보통 같은 state를 쓰는 같은 계층의 컴포넌트가 있다면 상위 컴포넌트에서 props로 넘겨줘야 한다 -> 규모가 클수록 복잡해진다(같은 state를 많은 컴포넌트에서 쓴다면 복잡해진다) -> 그래서 리덕스를 통해 필요한 컴포넌트에서만 state를 쓸 수 있게 할 수 있다. 개념 component- 화면을 보여주는 뷰 store - 프로젝트 상태에 관한 데이터들이 담겨있다.(단 하나의 공간..

간단하게 이미지 슬라이드 구현하기

useRef를 사용하여 간단하게 이미지 슬라이드를 구현하고 setTimeout을 사용해 자동으로 이미지가 넘어가도록 이벤트 설정 result를 0.5로 보면 편합니다(코드펜보다 실제 툴을 사용해 구현하면 더 상세히 알 수 있음) See the Pen Untitled by Sunyeong (@cozynye) on CodePen.

자바스크립트 간단 요약 ver2

자바스크립트 개념 요약 ver2 타입 변환 타입변환 - 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것 명시적 타입 변환 - 개발자의 의도에 따라 다른 타입으로 변환 문자열 타입으로 변환 - String(), toString(), 문자열 연결 연산자(+) 숫자 타입으로 변환 - Number(), parseInt(), 산술연산자 이용 불리언 타입으로 변환 - Boolean(), !!사용 암묵적 타입변환 - 표현식 평가 도중 자바스크립트에 엔진에 의해 암묵적으로 타입이 자동 변환 문자열 타입으로 변환 - +연산자는 피연산자 중 하나 이상이 문자열이면 피연산사 중 문자열이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환 숫자 타입으로 변환 - 자바스크립트 엔진은 산술 연산자 표현식을 평가하..

[TIL] RESTful API

RESTful API REST(Representational State Transfer) 웹상에서 사용되는 여러 리소스를 HTTP URI로 표현하고 그 리소스에 대한 행위를 HTTP Method로 정의하는 방식. 즉, 리소스(HTTP URI로 정의된)를 어떻게 한다(HTTP Method + Payload)를 구조적으로 깔끔하게 표현 RESTful API란? REST 특징을 지키면서 API를 제공한다는 의미 장점 : Self-descriptiveness - RESTful API는 그 자체만으로 API의 목적이 쉽게 이해된다. 단점 : 표준 규약이 없어, 안티패턴으로 작성되는 경우가 흔하다 안티패턴 : 실제 많이 사용되는 패턴이지만 비효율적이거나 비생산적인 패턴 URI / HTTP Method / Paylo..

[TIL] 리액트에서 FontAwesome 사용하기

1. npm 사용하여 패키지 설치 $ npm i @fortawesome/fontawesome-svg-core // 무료아이콘만 설치 (solid, regular, brands) $ npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons // 리액트 컴포넌트 형태로 사용할 수 있게 변경 $ npm i @fortawesome/react-fontawesome2. 쓰고 싶은 js에서 임포트하기 import { faArrowRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@..

리액트 리코일

recoil recoil 리액트를 위한 상태 관리 라이브러리. 리코일은 기존의 리덕스와 MobX 같은 상태관리 도구들에 비해 가볍고 유연하게 사용할 수 있도록 페이스북에서 오픈소스로 공개한 라이브러리이다 Atom Atom은 상태이다. 리액트의 state,props 와 비슷하지만 리덕스의 store의 상태들처럼 구독할 수 있고 Atom의 상태가 변경되면 구독하고 있는 컴포너트들의 다시 랜더링되면서 변경된 Atom의 상태를 공유한다. Selector Selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수(pure function)다 쉽게 생각하면 컴포넌트에서 일일이 상태 값들을 컴포넌트끼리 전달하고 관련된 컴포넌트가 렌더링 되는 것이 아니라 한곳에 모아두고 렌더링할 때마다 그 ..