해당 글의 목적은 클로져에 대한 정의를 이해하고 왜 사용을 해야 하는지에 대하여 이해를 돕기 위해서 작성한 글입니다.       💡 [참고] 클로저를 이해하기 위해서는 이전에 작성한 '스코프'에 관련된 글을 읽고 오시면 이해하는데 도움이 됩니다. [JS] 스코프(Scope) 이해하기해당 글은 스코프와 스코프의 종류에 대해서 이해를 돕기 위해 작성한 글입니다. 1) 스코프(Scope) 💡 스코프(Scope)란? - 선언된 변수에 대해서 접근할 수 있는 유효한 범위를 의미한다. 만약, 변수adjh54.tistory.com   1) 클로저(Closure)💡 클로저(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 링크가 포함되어 있습니다.) 전달받은 클라이언..

해당 글에서는 React를 사용한다면 요즘 필수적으로 사용이 되는 React 웹 프레임워크인 next.js에 대해서 이해하고 왜 사용해야 하는지에 대해 공유합니다. 1) 웹 프레임워크의 동향 💡 웹 프론트엔드 개발에서 높은 점유율을 가지고 있는 ‘React’는 CSR(Client Side Rendering) 방식으로 동작을 합니다. 이에 동작 방법에 대해서 여러 가지 단점을 많이 가지고 있습니다. 그렇기에 CRS 방식과 SSR 방식의 각각의 장점을 유지하는 Next.js에 대해서 이해를 돕기 위한 글입니다. (* SSR , CSR 방식에 대한 설명은 하단에 준비되었습니다) 💡 2021년 / 2022년 Stack Overflow에서 조사한 웹 프레임워크 선호도 조사입니다. - 2021년에 React.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..

해당 글은 자바스크립트/타입 스크립트 내에서 의존성에 대해서 이해를 하고 상황에 따라 의존성을 설치해야 하는 이유에 대해 이해하고 관리하기 위한 방법과 관련된 글입니다. 1) 라이브러리 의존성 관리 💡 Javascript 내에서 라이브러리의 의존성 관리를 위한 종류는 3가지로 나뉩니다. 종류 설명 dependencies 현재 프로젝트를 실행하는데 필수적인 라이브러리들이 포함이 됩니다. 이는 컴파일을 수행하고 런타임 단계에서 수행되는 라이브러리들이 이에 해당 됩니다. devDependencies 현재 프로젝트를 개발하고 테스트를 하는데 사용되지만, 런타임에는 필요 없는 라이브러리들이 포함이 됩니다. 이는 런타임 단계에서는 수행되지 않고 이전 컴파일 단계에서까지만 수행되는 라이브러리가 해당 됩니다. ex) ..