개발/프론트엔드 검색 결과

해당 글 23건

[ES6] Async와 Promise의 차이점

Async와 Promise는 비동기 통신 함수이다. Promise가 Async보다 먼저 나왔고 Async는 비교적 최근에 들어서 생긴편에 속한다. 기존의 Promise는 콜백의 불편함을 해소하기 위해 만들어졌다고 한다. 그렇다면 Promise가 있음에도 어째서 새로운 문법인 Async가 추가된것일까? 이번글에서는 그 이유에 대해서 알아보고자 한다. Async / Await 이란? callback이나 promise와 같은 비동기 통신을 구현하는 새로운 방법으로 동기적으로 코딩할 수 있도록 도와주는 역할을 한다. 이전 글에서도 말했다시피 비동기의 특징중 하나로 논블로킹(Non-Blocking)이 있는데 이는 실행중인 비동기 함수가 다른 함수의 실행을 지연시키지 않는다는 의미이다. 그렇다면 Async는 비동기..
개발/프론트엔드 2021. 4. 11. 14:13

CSR과 SSR의 차이점

CSR(Client Side Rendering) 브라우저가 서버에 필요한 HTML과 static files을 요청한 후 로드되면 사용자의 상호작용에 따라 데이터(Dom)을 동적으로 렌더링한다. 이는 필요한 데이터만 서버측에게 요청해 받아온다는 뜻이다. 장점 첫 로딩시에 HTML과 static files만 받고나면 최소로 필요한 데이터만 요청하고 렌더링하기때문에 사용자 UX가 뛰어나다 위의 이유로 인해 서버에 요청하는 횟수가 훨씬 적어 서버 부담이 적다 단점 첫 로딩시 모든 HTML, static files이 로드될때까지 기다려야 한다 SEO(검색엔진 최적화)문제가 발생할 수 있다 SSR(Server Side Rendering) 장점 초기 로딩속도가 빠르기 때문에 사용자가 컨텐츠를 빨리 확인할 수 있다 모..
개발/프론트엔드 2021. 3. 25. 19:07

로컬 스토리지, 세션 스토리지, 쿠키의 차이점

기존의 웹에서 사용하던 쿠키는 여러 단점이 있어 이를 보안하기 위해 웹 스토리지라는 기술이 탄생함. 웹 스토리지는 로컬 스토리지와 세션 스토리지로 나누어지며 Key와 Value값을 가짐 로컬 스토리지 브라우저 클라이언트에 대한 정보를 영구적으로 저장함 세션 스토리지 브라우저를 닫을시 클라이언트에 대한 정보를 삭제함 장점 서버에 불필요하게 정보를 저장하지 않음 많은 용량을 저장할 수 있음(약 5mb) 단점 HTML5를 지원하지 않는 브라우저의 경우 사용불가 쿠키 장점 대부분의 브라우저가 지원함 단점 http를 호출할때마다 request에 포함되어 전송되기 때문에 서버에 부담을 줌 용량이 적음(4Kb) 자체적인 암호화를 지원하지 않음 -> 이는 JWT토큰 방식으로 해결
개발/프론트엔드 2021. 3. 18. 17:51

[ES6] 필터링 문법 줄이기

이번글에서는 필터링 코드를 간략화시켜 작성하는 방법에 대해 써보자한다. 배열은 하나만 놓고 보았을때는 단순한 구조이지만 오브젝트와 배열이 혼합됨에 따라 복잡한 구조로 바뀌어나가게되고 이렇게 복잡해져버린 배열에서 원하는 정보만을 추출하려면 filter()나 find()같은 내장함수를 사용해야 한다. { "items": [ { "header": "header content", "main": "main contnet 1" }, { "header": "header content", "main": "main contnet 2" }, { "header": "header content", "main": "main contnet 3" } ] } 위와같은 json형태는 items라는 Array안에 Object가 들어가있..
개발/프론트엔드 2021. 3. 12. 00:05

Vue의 라이프사이클과 인스턴스

이글에서는 Vue 라이프사이클 이해하기의 내용을 일부 인용하고 있습니다 Vue에서는 인스턴스나 컴포넌트가 생성될때 몇 단계의 과정을 거치게 되는데 이를 라이프사이클(LIfecycle)이라고 부른다. 라이프사이클이란 Vue 인스턴스가 생성됨으로부터 화면상에 나타나고 사라지기까지의 과정을 일컫는 용어이며 이번 글에서는 이 라이프사이클에 대해서 알아보고자 한다. 위 그림은 공식 문서에서 제공하고 있는 Vue 라이프사이클 다이어그램이다. 인스턴스의 과정을 축약하자면 생성(create) DOM에 부착(mounted) 업데이트(update) 소멸(destroy) 의 과정을 거친다. Vue는 각각의 과정에서 사용할 수 있는 API인 훅(Hook)을 제공하며 개발자는 이러한 훅들을 이용해서 Vue 프로젝트를 제어하고 ..
개발/프론트엔드 2021. 3. 8. 02:16

이벤트 버블링

이글은 Javascript.info의 글인 버블링과 캡처링의 내용을 일부 인용하고 있습니다 이번 글에서는 이벤트 버블링에 대해 알아보고자 한다. 버블링이란 자식요소에서 실행된 이벤트(핸들러)가 부모 요소에서도 실행되고 이런 현상이 가장 최상단의 요소를 만날때까지 반복되는 현상을 말하며 이러한 모습이 마치 거품이 생기는 모습과 비슷하다고 해서 이벤트 버블링이란 이름이 붙혀지게 되었다. 먼저 코드를 보면서 설명하도록 하겠다. FORM DIV P 위의 코드에서 p태그에 할당된 핸들러를 실행하게 상위에 있는 div, form의 onclick 이벤트까지 같이 실행된다. p태그를 클릭했을때 발생하는 일을 순서대로 설명해보겠다. 에 할당된 onclick 핸들러가 실행된다 바깥의 에 할당된 핸들러가 실행된다 그 바깥의..
개발/프론트엔드 2021. 3. 2. 20:44

화살표 함수의 활용

자바스크립트에서는 함수 표현식을 좀더 쉽게 사용할 수 있는 방법이 있다. 바로 화살표 함수(Arrow Function)이다. 화살표 함수라는 이름은 문법의 생김새에서 본따 만들어졌다. let func = (arg1, arg2) => arg1+arg2; 위와 같이 코드를 작성하면 arg1, arg2를 받는 함수 func가 만들어진다. 함수 func는 우측의 표현식인 arg1+arg2를 계산하고, 그 결과를 반환한다. 일반적인 함수 표현식와 비교하자면 아래와 같으며 인수를 감싸는 괄호를 생략함으로써 코드 길이를 더욱 줄일 수 있다. let func = (arg1, arg2) => arg1+arg2; let func1 = (arg1, arg2) => { return arg1+arg2; } 이처럼 인수가 하나밖..
개발/프론트엔드 2021. 2. 18. 00:39

자바스크립트. 싱글스레드, 멀티스레드?

해당글은 vincent님의 글인 Javascript 동작원리의 내용을 각색하고 있습니다 자바스크립트는 싱글스레드 구조로 작동되는 언어이다. 메인스레드라고 불리우는 하나의 스레드로 구성되어 있기 때문이다. 싱글스레드는 프로그램이 작동되는 동안 한번에 하나의 작업만을 수행할 수 있다는 뜻이다. 중간에 다른 작업이 끼어들수도 없고, 기존에 진행되던 작업이 종료되어야 그 다음 작업이 수행 가능하다. 그런데 자바스크립트의 특징들중 비동기, 동시성, 논블로킹(Non-Blocking)과 같은 싱글스레드와는 상반되는 개념이 등장한다. 분명 한번에 한가지의 작업만을 수행할수밖에 없을텐데, 동시성을 가지는 특성들이 자바스크립트에 내포되어 있는것이다. 오늘은 이러한 동시성이 어떻게 내포되어 있으며, 그 방법이 무엇인지에 대..
개발/프론트엔드 2021. 2. 14. 01:39