해당 글에서는 Javascript 환경에서 클라이언트에서 API로 통신하는 다양한 방법에 대해 알아봅니다. 1) 동기 통신 💡 동기(Synchronous) 처리 방식이란? - 데이터 통신을 위해 ‘요청'을 하였을 때, 어떠한 요청에 대한 ‘응답'을 받을 때까지 기다리다가 완료된 뒤 다음 코드가 수행되는 처리방식을 의미합니다. [ 더 알아보기 ] 💡 브라우저에서는 동기 통신을 하면 안 되는 것일까? - 브라우저에서 동기 통신을 하는 것은 권장되지 않습니다. 동기 통신은 브라우저의 실행을 일시 중지시키고 사용자 인터페이스를 블로킹하는 문제를 야기할 수 있습니다. 따라서, 비동기적인 방법을 사용하여 서버와 통신하는 것이 좋습니다. 2) 비동기 통신 💡 비동기(Asynchrous) 처리 방식이란? - 데이터 통..
해당 글에서는 브라우저가 이벤트를 감지하는 방법을 이해하기 위한 목적으로 이벤트 버블링, 이벤트 캡쳐링, 이벤트 위임에 대해 이해합니다. 💡 해당 방식에서는 'React'를 기준으로 작성하였기에 'addEventListener'를 이용한 이벤트 처리 방식을 사용하지 않고 예시를 작성하였습니다. [참고] React 공식 사이트 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org 1) 이벤트 버블링(Event Bubbling) 💡 이벤트 버블링(Event Bubbling)이란? - 특정 화면 요소에서 이벤트가 발생하였을 때, 해당 이벤트가 발생하는 위치뿐만 아니라 상위의 화면 요소들로 전파되는 특성을 의미합니다. ..
해당 글의 목적은 클로져에 대한 정의를 이해하고 왜 사용을 해야 하는지에 대하여 이해를 돕기 위해서 작성한 글 입니다. 💡 클로저를 이해하기 위해서는 이전에 작성한 '스코프'에 관련된 글을 읽고 오시면 이해하는데 도움이 될 것입니다. [JS] 스코프(Scope) 이해하기 해당 글은 스코프와 스코프의 종류에 대해서 이해를 돕기 위해 작성한 글입니다. 1) 스코프(Scope) 💡 스코프(Scope)란? - 선언된 변수에 대해서 접근할 수 있는 유효한 범위를 의미한다. 만약, 변수 adjh54.tistory.com 1) 클로저(Closure)란? 💡 클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합입니다. 즉, 함수 안에 함수를 선언한 환경에서의 관계를 의미합니다. 💡 해..
해당 글에서는 쿠키와 웹 스토리지(로컬, 세션)에 대해서 다시 한번 정리하며 각각을 비교하며 각각의 특징과 사용처에 대해 이해를 돕기 위해 작성한 글입니다. 💡 해당 글을 읽기 전에 이전에 작성한 ‘쿠키(Cookie)'와 ‘웹 스토리지(Web Stroage)' 관련 글을 이해하고 오신다면 더 쉽게 이해가 되실 것입니다. 하단에 이전에 작성한 글입니다. [JS] 쿠키(Cookie) 이해하기 해당 페이지에서는 쿠키에 대해서 이해하기 위한 목적으로 작성한 글입니다. 1) 쿠키(Cookie)의 정의와 특징 💡 쿠키(Cookie) 란? - 웹 브라우저 상에 작은 ‘텍스트 파일’로 저장이 되는 만료 기간 adjh54.tistory.com [JS] 웹 스토리지(로컬 스토리지 / 세션 스토리지) 이해하기 해당 페이지에..
해당 페이지에서는 웹 스토리지(로컬/세션 스토리지)에 대해서 이해를 돕기 위한 목적으로 작성한 글입니다. 💡 웹 스토리지를 이해하기 이전에 쿠키를 이해하고 오시면 좀 더 이해가 쉽게 될 것입니다. 이전에 작성한 쿠키 관련 글입니다.! [JS] 쿠키(Cookie) 이해하기 해당 페이지에서는 쿠키에 대해서 이해하기 위한 목적으로 작성한 글입니다. 1) 쿠키(Cookie)의 정의와 특징 💡 쿠키(Cookie) 란? - 웹 브라우저 상에 작은 ‘텍스트 파일’로 저장이 되는 만료 기간 adjh54.tistory.com 1) 웹 스토리지(Web Storage)란 무엇인가? 💡 서버가 아닌 클라이언트 내에서 데이터를 저장할 수 있도록 지원하는 저장소를 의미합니다. 또한 웹 스토리지는 쿠키의 단점을 보완하기 위해서 H..
해당 페이지에서는 쿠키에 대해서 이해하기 위한 목적으로 작성한 글입니다. 1) 쿠키(Cookie)의 정의와 특징 💡 쿠키(Cookie) 란? - 웹 브라우저 상에 작은 ‘텍스트 파일’로 저장이 되는 만료 기간이 존재하는 저장소를 의미합니다. 💡 쿠키(Cookie)의 특징 쿠키는 브라우저를 종료하더라도 유지됩니다. 쿠키의 저장구조는 ‘cookie-name = cookie-value’ 형태의 구조로 저장이 됩니다. 쿠키는 하나의 String내에 속성을 세미콜론(;)을 기준으로 구분을 짓습니다. 쿠키는 텍스트 파일의 형태로 최대 4KB의 용량 제한을 가지고 있습니다. (value의 값의 제한을 의미합니다.) 쿠키는 개인정보가 포함된 보안정보를 사용해서는 안됩니다. Authentication 인증 정보 또는 세..
해당 글은 스코프와 스코프의 종류에 대해서 이해를 돕기 위해 작성한 글입니다. 1) 스코프(Scope) 💡 스코프(Scope)란? - 선언된 변수에 대해서 접근할 수 있는 유효한 범위를 의미한다. 만약, 변수가 해당 스코프에 존재하지 않다면 사용할 수 없다. 그리고 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만, 상위 스코프는 하위 스코프에 접근할 수 없다. [참고] 하위 스코프 → 상위 스코프 접근하는 경우와 상위 스코프 → 하위 스코프 접근하는 경우 /** * 하위 스코프 => 상위 스코프를 접근하는 경우 */ const ScopeComponent = () => { // 상위 스코프 const userId = "adjh54"; const fn_controlScope = ..
해당 글은 렌더링에 대해 이해하고, 클라이언트, 서버 사이드 렌더링에 대해서 이해를 돕기 위한 글입니다. 1) 렌더링이란? 💡 HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다. 2) 클라이언트 사이드 렌더링(CRS: Client Side Rendering) 💡 서버에서 전체 페이지(빈 페이지)를 최초 렌더링하고 사용자가 요청할 때마다 클라이언트 내(브라우저)에서 렌더링 하는 것을 의미합니다. 💡 CSR의 동작 과정 - 초기 화면 수행 사용자가 홈페이지를 접속한 경우(최초 접속) 클라이언트는 이를 확인하고 서버로 요청합니다. 서버는 빈 페이지(HTML, CSS)를 클라이언트에게 전달합니다. (해당 페이지에는 JS 링크가 포함되어 있습니다.) 전달받은 클라이언..
해당 글에서는 '데이터 바인딩'에 대해서 이해를 하고, 더 나아가서 '단방향/양방향 데이터 바인딩'에 대해 이해하기 위한 글입니다. 1) 데이터 바인딩(Data Binding)이란? 💡 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미합니다. 💡 예를 들어서 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정을 했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 합니다. [ 간단한 예제 - 1 ] 값을 데이터 바인딩한다. 💡 아래의 예제는 함수형 컴포넌트 안에서 ‘initData’로 초기화 한 값..
해당 글의 목적은 타입 스크립트(Typescript)란 무엇이며, 왜 써야 하는지에 대해 이해를 돕기 위해서 작성한 글입니다. 1) 기술 동향 하단의 사진은 ‘Stack Overflow’ 커뮤니티에서 조사한 자료로 2020년과 2021년에 가장 인기 있는 언어에 대해서 조사한 자료입니다. 해당 그래프를 확인해보면, 2020년에 타입 스크립트는 25.4%라는 많은 관심을 받는 언어에서 근래 2021년에 와서는 30.19%라는 더 많은 관심을 받는 언어로 선택 되었습니다.이는 Node.js, java를 압도할 만큼의 관심을 갖는 언어가 되었습니다. [출처] StackOverflow 커뮤니티 Survey Stack Overflow Developer Survey 2020Nearly 65,000 took this..
