javascript

해당 글에서는 Front-end에서 용어들에 대해서 정확하게 알고 개념을 이해하기 위한 목적으로 작성한 글입니다. 1️⃣ 저장소 1. 쿠키(Cookie) 💡 웹 브라우저 상에 작은 ‘텍스트 파일’로 저장이 되는 만료 기간이 존재하는 저장소를 의미합니다. [사용 예시] 로그인 화면에서 ‘아이디 자동완성’ 기능에 사용 팝업 화면에서 ‘오늘 하루 보지 않기' 기능에 사용 미 로그인 상태에서 ‘장바구니 담기’ 기능에 사용 2. 로컬 스토리지(Local Storage) 💡 만료기간이 존재하지 않고 페이지를 변경하거나 브라우저를 닫아도 반영구적으로 유지되는 저장소를 의미합니다. 사용 예시 로그인 화면에서 ‘자동 로그인' 기능에 사용 3. 세션 스토리지(Session Storage) 💡 브라우저의 탭 안에서만 유효한..

해당 글에서는 Front에서 용어들에 대해서 정확하게 알고 개념을 이해하기 위한 목적으로 작성한 글입니다. 1️⃣ 구조 1. 컴파일러(Complier) 💡 ‘프로그래밍 언어(고급 언어)’를 컴퓨터가 이해할 수 있는 ‘기계어’로 변환하는 컴파일을 수행하는 것을 의미합니다. [예시] typescript → Javascript로 컴파일을 수행합니다. [예시] Java(.java) → Java(.class)로 컴파일을 수행합니다. [참고] Typescript의 경우 컴파일 단계에서 사전에 오류가 될 사항에 대해 오류를 찾아서 런타임 되기 이전에 확인할 수 있습니다. 2. 트랜스 파일러(Transplier) 💡 트랜스 파일링(Transpling)을 통하여 '특정 언어'를 '다른 언어'로 바꿔 주는 것을 의미합니다..

해당 글에서는 CRA(Create-React-App)를 사용하지 않고 개발 환경을 구축하는 방법에 대해서 공유합니다. 더불어서 선택적으로 설치해야 할 사항까지 함께 공유합니다. 1) 개발 환경 💡 개발 환경 구축을 위해 이용한 IDE, Package Manager, Package를 정리 한 내용 입니다. 분류 버전 설명 Visiual Studio latest 개발 IDE 툴로 VSCode를 사용하였습니다. node 16.16.0 자바스크립트를 수행하는 용도로 사용하였습니다. yarn 1.22.19 패키지 매니저로 사용하였습니다. react / react-dom 18.2.0 웹 프레임워크 React와 React-dom을 사용하였습니다. typescript 4.8.4 타입스크립트를 사용하였습니다. webpa..

해당 글의 목적은 캐시 무효화란 무엇이고 어떠한 해결 방법이 있는지에 알아보기 위한 목적으로 글을 작성하였습니다. 1) 문제점 발생💡 웹 브라우저에서 새로 배포를 하였는데도 이전 파일을 바라보고 있는 문제가 발생하였습니다. 이 문제는 브라우저 내에서 ‘강력 새로고침’ 혹은 ‘캐시 초기화’를 수행해야지만 이전 버전에 캐시가 사라지고 새로운 버전을 바라보아서 해결이 되었는데, 매번 변경 때마다 사용자 들이 ‘캐시 초기화’를 수행해야 하는 번거로움이 생겨서 이러한 작업 없이 수행 할 수 있도록 Cache Busting을 적용합니다. 2) Cache Busting💡 Cache Busting 이란? - Cache를 Busting(부수다, 고장내다) 라는 의미에 Cache Busting은 이전에 남아 있는 캐시로 ..

해당 글의 목적은 문자열을 조작하는 함수로 문자열 조작에 사용되는 메서드에 대해서 공식 문서를 읽어보고 예재를 통해서 이해를 돕기 위해 작성한 글입니다. 해당 글에서는 모든 메서드에 대해서는 포함되어 있지 않고 자주 사용되는 메서드 위주로 작성하였습니다. (상시 업데이트 예정입니다) 0. 요약 번호 입력 타입 주요 기능 메서드 명 반환 타입 1 Array / string 문자열 조작 split() / Array.from() / Spread Operator string 2 string 문자열 조작 split() Array 3 string 문자열 조작 charCodeAt() / fromCharCode() number 4 string 문자열 조작 substring() string 5 string 문자열 조작 ..

해당 글에서는 브라우저가 이벤트를 감지하는 방법을 이해하기 위한 목적으로 이벤트 버블링, 이벤트 캡쳐링, 이벤트 위임에 대해 이해합니다. 💡 해당 방식에서는 'React'를 기준으로 작성하였기에 'addEventListener'를 이용한 이벤트 처리 방식을 사용하지 않고 예시를 작성하였습니다. [참고] React 공식 사이트 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org 1) 이벤트 버블링(Event Bubbling) 💡 이벤트 버블링(Event Bubbling)이란? - 특정 화면 요소에서 이벤트가 발생하였을 때, 해당 이벤트가 발생하는 위치뿐만 아니라 상위의 화면 요소들로 전파되는 특성을 의미합니다. ..

해당 글의 목적은 배열 조작 함수로 배열을 조작하는 사용되는 메서드에 대해 공식 문서를 읽어보고 예제를 통해 이해를 돕기 위해 작성한 글입니다. 여러 챕터로 구성을 하였고 모든 메서드에 대해서는 포함하고 있지 않으며 자주 사용되는 메서드 위주로 작성하였습니다. (상시 업데이트 예정입니다) 💡 해당 글은 이전에 작성한 글을 참고하시면 다양한 함수를 이해하는데 도움이 됩니다. 🙏 [JS] 배열 조작 함수 -1 (from, splice, reduce, filter, join, sort, fill) 해당 글의 목적은 배열 조작 함수로 배열을 조작하는 사용되는 메서드에 대해 공식 문서를 읽어보고 예제를 통해 이해를 돕기 위해 작성한 글입니다. 여러 챕터로 구성을 하였고 모든 메서드에 adjh54.tistory.c..

해당 글의 목적은 배열 조작 함수로 배열을 조작하는 사용되는 메서드에 대해 공식 문서를 읽어보고 예제를 통해 이해를 돕기 위해 작성한 글입니다. 여러 챕터로 구성을 하였고 모든 메서드에 대해서는 포함하고 있지 않으며 자주 사용되는 메서드 위주로 작성하였습니다. (상시 업데이트 예정입니다) 1. 요약 chapter 번호 입력 타입 주요 기능 메서드 명 리턴 타입 1번 글 1 Array 배열 생성 [] / new Array / Array.from() Array 1번 글 2 Array 배열 초기화 [] / new Array / splice() Array 1번 글 3 Array 배열 조작 push() / unshift() / pop() / shift() Array 1번 글 4 Array 배열 조작 reduce(..

해당 글의 목적은 클로져에 대한 정의를 이해하고 왜 사용을 해야 하는지에 대하여 이해를 돕기 위해서 작성한 글입니다.       💡 [참고] 클로저를 이해하기 위해서는 이전에 작성한 '스코프'에 관련된 글을 읽고 오시면 이해하는데 도움이 됩니다. [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] 웹 스토리지(로컬 스토리지 / 세션 스토리지) 이해하기 해당 페이지에..