본문 바로가기

전체 글

 (136)
[기능 구현] 커스텀 훅(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과 달리 여러 요청들에 대한 응답 처리를 뒤로 미루는 방법을 사용한다. - 하지만, 이는 완전한 멀티플렉싱이 아닌 응답처리를 미루는 방식이므로 각 응답의..
커링과 클로저 1. 커링(Currying) - 커링 : 커링은 f(a, b, c)처럼 단일 호출로 처리하는 함수를 f(a)(b)(c)와 같이 각각의 인수가 호출 가능한 프로세스로 호출된 후 병합되도록 반환하는 것이다. - 커링은 함수를 호출하는 것이 아닌 단지 반환할 뿐이다. - 함수 호출을 체인으로 연결할 수 있으며, 함수의 재사용성을 높일 수 있다. * 커링 예제 function curry(f) { // 커링 변환을 하는 curry(f) 함수 return function(a) { return function(b) { return f(a, b); }; }; } function sum(a, b) { return a + b; } const curriedSum = curry(sum); console.log(curriedS..
[Trouble Shooting] 상품 수정 등록 후 뒤로가기 경로 문제 - 세컨핸드 프로젝트를 수정하면서 겪은 고민과 문제 해결에 대해서 기록해보고자 한다. - 먼저 아래 두 개의 영상을 보면 사용자 입장에서 불편함을 느낄 수 있다고 생각한다. 홈화면 - 상품상세 - 상품수정 판매내역 - 상품상세 - 상품수정 - 프로젝트의 로직은 아래와 같다. 1. 홈화면 또는 판매내역에서 상품을 선택했을 때, 해당 상품의 상세페이지로 이동을 한다. 2. 만약 내가 등록한 상품이라면 상품 게시글을 수정할 수 있고, 수정 완료가 되면 해당 상품의 상세페이지로 이동한다. - 이때, 위의 두 개의 영상에서 확인할 수 있듯이 상품의 수정 완료를 하고 해당 상품의 상세 페이지로 이동했을 때, 뒤로가기 버튼을 클릭하면 상품의 상세페이지의 진입점(홈화면 또는 판매내역)이 아닌 다시 상품 수정 페이지로 ..

티스토리툴바