'Frontend/JavaScript' 카테고리의 글 목록

[JavaScript] 무한 스크롤 구현하기(Intersection Observer API)

2023.05.19

무한 스크롤(Infinite Scroll)이란? 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(UX) 방식이다. 한 페이지 아래로 스크롤 하면 끝없이 새로운 화면을 보여주게 되고 이로 인해 많은 양의 콘텐츠를 스크롤 해서 볼 수 있다. 페이지네이션이 아닌 무한 스크롤로 구현하려는 이유❓ 상품 목록에서 상품을 보여주고자 할 때 페이지네이션, 무한 스크롤 중 무엇이 사용자 경험을 더욱 좋게 할 수 있을지 고민한 끝에 모바일 환경을 고려해서 무한 스크롤을 사용하기로 했다.(차후에 프로젝트를 반응형으로 리팩터링 할 계획🙇🏻) 또한, 다음 상품을 보기 위한 사용자의 클릭을 최소화하고 더 쉽게 다양한 상품을 볼 수 있을 것이라고 판단했다. 구현하는 과정 무한 스크롤을 구현하는 방법은 스크..

Frontend/JavaScript

[Axios] Axios 인터셉터 적용하기

2023.05.10

인터셉터(Interceptors)란? then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있다. Axios 인터셉터를 적용하려는 이유❓ 토이 프로젝트를 진행하면서 서버에 토큰 인증을 필요로 하는 API 요청을 할때마다 HTTP Authorization 요청 헤더에 토큰을 넣어줘야하고 401(Unauthorized) 에러가 서버로부터 들어오면 토큰을 갱신해준 후 재요청을 보내는 과정을 한 곳에서 모두 처리하여 중복 코드를 제거하고 유지보수성을 향상시키기 위해 Axios 인터셉터를 적용하기로 했다. 사용자 지정 config로 새로운 Axios 인스턴스를 생성하여 사용하니 더욱 편리했다. (baseURL, timeout 설정) 적용하는 과정 1) Axios 인스턴스 생성 const instanc..

Frontend/JavaScript

[JavaScript] 정규 표현식 안에 동적으로 변수를 넣는 방법

2023.04.23

정규 표현식(Regular Expression)은 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. RegExp RegExp 생성자는 패턴을 사용해 텍스트를 판별할 때 사용한다. 리터럴 표기법의 매개변수는 두 빗금으로 감싸야 하며 따옴표를 사용하지 않는다. 생성자 함수의 매개변수는 빗금으로 감싸지 않으나 따옴표를 사용한다. // 정규 표현식 생성하기 /ab/g new RegExp(/ab/, 'g') // 리터럴 new RegExp('ab', 'g') // 생성자 동적으로 정규 표현식 생성하기 const 변수 = 'JS'; const regex = new RegExp(`${변수}`, 'g'); console.log(regex); // /JS/g 🧐 응용하기 match() 메서드는 문자열이 정규식과 매치되는..

Frontend/JavaScript

[JavaScript] 연결 리스트로 큐(Queue) 구현하는 방법

2023.03.21

큐(Queue)란? 큐는 데이터를 일시적으로 저장하는 자료구조 중 하나로, 먼저 입력된 데이터가 먼저 출력되는 "선입선출(FIFO: First-In-First-Out)" 원칙을 따릅니다. 큐(Queue)의 구현 방법 2가지 큐는 배열(Array)이나 연결 리스트(Linked List)를 사용하여 구현할 수 있습니다. 1️⃣ 배열 배열을 사용할 경우, 크기가 고정되어 있어서 데이터의 추가 및 제거에 제한이 있을 수 있지만, 연산 속도가 빠릅니다. 2️⃣ 연결 리스트 연결 리스트를 사용할 경우, 크기에 제한이 없어서 데이터를 유동적으로 추가 및 제거할 수 있지만, 연산 속도가 느립니다. 🧐 배열로 큐(Queue)를 구현해도 되지만 굳이 ? 연결 리스트로 구현해야 하는 이유 JavaScript에서 배열을 사용..

Frontend/JavaScript

[JavaScript] 한번에 하는 배열 생성 & 초기화

2022.09.28

JavaScript의 배열(Array)는 객체(함수)다. 따라서, 대표적 객체지향 언어인 자바와 마찬가지로 new Array()가 존재한다. 배열의 생성자(new Array())와 하나의 숫자 매개변수로 생성할 수 있지만, 그 결과는 length가 매개변수고, 길이만큼의 빈 슬롯을 가진 배열이다. 배열의 초기값을 확인해보면 undefined가 출력되는 것을 볼 수 있다. let datas = new Array(5) console.log(datas[0]) // undefined console.log(datas.length) // 5 아래와 같이 new Array()의 매개변수에 원하는 초기값들을 넘겨주는 방법으로 생성과 초기화를 동시에 할 수 있지만, 배열의 길이에 따라 한계가 존재한다. // new Ar..

Frontend/JavaScript

[JavaScript] 스코프(Scope)란 무엇인가?

2022.09.05

스코프(Scope) ❓ 1️⃣ 변수를 참조할 수 있는 유효 범위 2️⃣ 식별자(변수, 함수, 클래스 이름) 접근 규칙에 따른 유효 범위 범위(스코프)는 중괄호(블록) 또는 함수에 의해 나눠진다. 스코프의 주요 규칙 ❗ 👉 규칙 1. 블럭 안의 변수는 블럭 안에서만 유효하다. 바깥쪽 스코프에서 선언한 식별자는 안쪽 스코프에서 사용 가능 반면, 안쪽에서 선언한 식별자는 바깥쪽 스코프에서는 사용할 수 ❌ 블럭 내부에서만 존재하고, 블럭이 끝나면 가비지 컬렉터(GC)에 의해 자동으로 소멸된다. const a = 1; { const b = 2; console.log(a); } console.log(b); // 오류 발생(app crashed) 👉 규칙 2. 전역 스코프 vs 지역 스코프 가장 바깥쪽의 스코프를 전..

Frontend/JavaScript

[JavaScript] 클로저란 무엇인가?

2022.09.02

클로저 ❓ 함수와 함수가 선언된 어휘적 환경의 조합 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 즉, 내부 함수에서 외부 함수에 있는 상태에 접근할 수 있는 권한을 부여한다는 것이다. 왜 사용할까 ❓ 내부 정보를 은닉하고, 공개 함수(public 또는 외부)를 통한 데이터 조작을 위해 사용한다. (캡슐화, 정보은닉) 전역변수 또한 줄여지게 되므로 개발 과정에서 실수로 접근하는 일이 안생긴다. 현재는 클래스에서의 private 필드 또는 메소드를 사용하면 된다. 어떻게 이것이 가능할까 ❓ inner 렉시컬 환경이 외부 렉시컬 환경을 참조하고 있기 때문이다. 클로저를 잘 이해하려면 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다...

Frontend/JavaScript

[JavaScript] 문자열 치환( replace(), split().join() )

2022.08.19

replace() 메서드 1️⃣ 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환 2️⃣ 첫 번째 문자열만 치환이 되며 원래 문자열은 변경되지 ❌ const str = '안녕하세요! 이성호 입니다.'; console.log(str.replace('', '').replace('', '')); // expected output: "안녕하세요! 이성호 입니다." ''와 ''의 모든 문자를 치환하고 싶었던 나는 replace() 메서드의 한계를 느꼈다. 다른 방법도 많이 있겠지만 나는 split(), join() 메서드를 사용하여 이를 해결하였다. split() 메서드 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눔 Join() 메서드 각 요소 또는 멤버 사이에 지정..

티스토리툴바