본문 바로가기

전체 글

(138)
[Trouble Shooting] 사용자 디바이스에 따른 다수의 이미지 조회 방법 문제정의 - 프로젝트의 기획에는 상품의 조회(상세페이지)에서 상품의 이미지가 1개 이상인 경우, 모바일 기기의 슬라이드 기능으로 다수의 이미지를 조회할 수 있게 되어있었다. - 하지만, 모바일 기기가 아닌 웹에서 접근시에는 다수의 이미지를 조회할 수 있는 기능이 누락되어 있었고, 이에 사용자의 디바이스에 따라 다수의 이미지 조회 방법을 다르게 구현하는 작업이 필요했다. - 해당 작업을 위해서는 먼저 사용자의 디바이스를 조회해야했고, 기존 슬라이드 기능 외에 추가로 캐러셀 기능 구현이 필요했다. 시도한 방법 및 해결방안 1. 사용자의 디바이스 조회 ⭕️ - 사용자의 디바이스 조회는 window.navigator의 userAgent 속성을 사용했다. - userAgent는 HTTP 요청을 보내는 디바이스와 ..
[기능 구현] 동적 portal 만들기 portal이란? - 리액트(React)에서 portal은 컴포넌트 트리 내에서 다른 위치로 자식 요소를 렌더링할 수 있는 기능이다. portal은 주로 모달 창, 팝오버, 툴팁과 같은 오버레이 컴포넌트를 구현하거나, 외부 DOM 요소에 컴포넌트를 렌더링할 때 사용된다. - portal을 사용하면 자식 요소는 DOM 트리의 지정된 위치로 이동되지만, 해당 자식 컴포넌트는 여전히 컴포넌트 트리의 일부로 유지된다. - portal을 사용하면 컴포넌트가 렌더링되는 위치와 실제로 화면에 표시되는 위치를 분리할 수 있으며, 레이아웃, 스타일링, 이벤트 처리 및 zIndex 관리를 보다 쉽게 할 수 있게 해준다. - portal은 보통 모달창을 구현할 때, 많이 사용된다. - 프로젝트에서도 모달창을 구현할 때, p..
[기능 구현] 커스텀 훅(Custom Hook)을 사용하여 비동기 로딩 및 에러 상태 처리 - 프로젝트를 진행하면서 React 커스텀 훅에 대해서 알게 되었고, 팀 동료 스눕과 함께 프로젝트에서 사용할 커스텀 훅을 만들어보기로 했다. React 커스텀 훅이란?- React 커스텀 훅이란, React의 기본 훅(Hook)을 조합하여 사용자 정의 로직을 재사용하기 위한 매커니즘이다.- 즉, 자신만의 커스텀 훅을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있으며, 컴포넌트에서 사용하고 싶은 값들을 반환해주면 된다.- 커스텀 훅은 use 라는 키워드로 시작하는 파일을 만들고 그 안에 함수를 작성한다.- 커스텀 훅의 장점은 재사용성(비슷한 로직을 여러 컴포넌트에서 반복적으로 사용해야 할 때, 커스텀 훅을 만들어 코드를 재사용할 수 있음)과 복잡한 컴포넌트 로직을 외부로 분리하여 관리할 수 있어..
[기능 구현] OAuth를 통한 로그인 기능 구현 - 지역 기반 중고거래 사이트를 만드는 프로젝트에서 로그인 기능을 구현해야했고, 팀원들과 상의 결과 자체 로그인과 github OAuth 로그인 두 가지를 사용하기로 했다. - 이 글에서는 OAuth에 대한 간단한 설명과 실제 프로젝트에서 github OAuth 로그인을 구현한 부분에 대해 설명하겠다. OAuth(Open Authorization)란? - OAuth는 권한 부여를 위한 공개된 인증 프로토콜(접근 권한을 위임하는 개방형 표준 프로토콜), 제3자 애플리케이션에 대한 보안 인증 및 권한 부여 프로토콜이다. - 쉽게 설명해서 애플리케이션(Client)에서 별도의 회원가입 없이 사용자(Resource owner)를 대신하여 리소스 서버(Resource server)에서 제공하는 자원에 대한 접근 ..
var, let, const 차이 - var와 ES2015(ES6)에서 추가된 let, const는 JavaScript에서 변수를 선언하는 키워드이다. - var, let, const는 변수를 선언하는 키워드라는 공통점이 있지만, 재선언과 재할당 가능성, 범위(Scope), 호이스팅(Hoisting)에서 차이점을 가지고 있다. ※ 재선언, 재할당 - 재선언 : 동일한 이름의 변수를 같은 스코프 내에서 두 번 이상 선언하는 것을 의미힌다. - 재할당 : 이미 선언된 변수에 새로운 값을 할당하는 것을 의미한다. - var는 재선언, 재할당이 모두 가능하다. var name = 'poco' console.log(name); // 'poco' // 재선언 var name = "Kim" console.log(name); // "Kim" // 재할..
call, apply, bind - JavaScript의 함수는 각자 자신만의 this를 정의한다. 일반 함수 호출(전역 함수, 중첩 함수, 일반 함수로 호출되는 메서드 내에서 정의한 중첩 함수 내부, 콜백 함수) : 기본적으로 this에는 전역 객체가 바인딩 된다. var name = "kim" // const, let으로 선언한 전역 변수는 window 전역 객체에 추가되지 않는다. function fn() { var name = "lee" console.log(this.name); // "kim" // 전역 객체 (브라우저에서는 window, Node.js에서는 global) } fn(); 메서드 호출 : 메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체가 바인딩 된다. const person = { na..
가비지 컬렉션 - 가비지 컬렉션(Garbage Collection)은 메모리 관리의 한 형태로, 프로그램이 더이상 사용하지 않는 메모리를 자동으로 회수하고 재활용하는 과정이다. - 이는 메모리 누수를 방지하고, 프로그램이 효율적으로 작동하도록 도와준다. - JavaScript의 원시값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지하고, JavaScript는 눈에 보이지 않는 곳에서 메모리 관리를 수행한다. 가비지 컬렉션 기준 - JavaScript에서는 도달 가능성(reachability)이라는 개념을 사용해 메모리 관리를 수행한다. - 도달 가능성이라는 것은 어떻게든 접근하거나 사용할 수 있는 값인가를 의미한다. - 루트(root) : 처음부터 도달 가능하기 때문에, 명백한 이유 없이는 삭제되지 않는다. ..
HTTP 1.1 VS HTTP 2.0 HTTP 1.1 VS HTTP 2.0 HTTP 1.1 * HTTP 1.1 특징 - HTTP 1.0에서는 Connection 당 하나의 요청을 처리할 수 있다보니 동시 전송이 불가능했고(하나의 요청에 대한 응답이 온 후 다음 요청을 처리하기 때문) 이는 네트워크 시간을 지연시키는 단점이 있었다. - 따라서, HTTP 1.1에서는 HTTP Pipelining이 도입하여 네트워크 시간을 줄이는 방식을 도입하였다. - HTTP Pipelining : 하나의 Connection으로 다수의 Request와 Response를 처리할 수 있게하는 것으로 HTTP 1.0과 달리 여러 요청들에 대한 응답 처리를 뒤로 미루는 방법을 사용한다. - 하지만, 이는 완전한 멀티플렉싱이 아닌 응답처리를 미루는 방식이므로 각 응답의..