본문 바로가기

전체 글

 (291)
[React] react-router 리액트 라이브러리를 이용하면 SPA( single page application ) 형식의 웹페이지를 구현할 수 있다. 이때 SPA는 통상적으로 하나의 html 페이지만 사용하므로, 이에 따라 하나의 페이지에서 동작한다. 그러나 실제 사용자 입장에서 모든 동작을 하나에 페이지 안에서만 수행하는 것은 평범하지 않다. 로그인이 필요하면 로그인 페이지를 방문하고, 블로그에 글을 쓰려면 블로그 페이지를 방문하는 등, 목적에 따라 URL 기반으로 다양한 페이지가 존재하는 것이 좀더 기본적이라고 생각할 수 있다. 리액트 프레임워크를 이용하여 만든 웹사이트는 SPA 기반으로 동작하므로, 원칙적으로는 하나의 페이지 내에서 데이터를 유저 및 서버로부터 주고 받으며 동작한다. 이때 리액트가 하나의 페이지 내에서 URL을 ..
[WEB] beforeunload 이벤트 특정 사이트 사용을 위해 유저가 로그인하는 상황을 생각해보자. 엄청난 양의 개인 정보를 작성한 이후 회원가입 버튼을 누르려는 찰나, 실수로 새로고침을 누르거나, 북마크에 있는 다른 사이트 링크를 클릭하여 기입했던 정보를 모두 잃어 처음부터 작성해야 하는 불상사가 일어나면 어떨까? 유저는 매우 부정적인 경험을 하게 되며, 해당 사이트의 대체제가 있다면 다른 사이트를 사용할 지도 모른다. 이를 방지하기 위해서는 유저의 행동이 의도된 것인지 확인할 필요가 있다. 위와 같이 유저가 현재 페이지를 벗어나는 상황을 재확인 해야 하는 경우, beforeunload 이벤트를 이용한다. Window: beforeunload 이벤트 - Web API | MDN beforeunload 이벤트는 문서와 그 리소스가 언로드 되..
[WEB] URL & Location & URLSearchParams URL은 네트워크 상에서 리소스를 위치 기반으로 식별하기 위한 규약으로, 해당 네트워크 자원에 접근하기 위해서 자원에 알맞은 프로토콜을 이용해야 한다. http://:/? 웹상에서 URL은 통상적으로 위와 같은 구조를 가진다. 각각의 요소를 설명하면 다음과 같다. http : http 프로토콜에 기반해 리소스에 접근한다. URL 자체는 http 이외 수많은 프로토콜에 대해 사용 가능하다. host : 호스트 정보를 작성한다. 도메인이 여기에 해당한다. port : 특정 기기 내에서 프로세스를 식별하는 번호로, 기본 값은 80으로 지정되어 있다. path: 경로 정보를 작성한다. /something 꼴의 경로를 논리적으로 덧붙인다. searchpart : 일종의 쿼리를 작성한다. key=value 꼴로 각..
[WEB] 도메인과 URL 웹에 노출된 수많은 사이트에 대한 서버는 IPv4 혹은 IPv6 체계로 정의된 일련의 숫자로 구성된 주소값에 기반하여 식별된다. 따라서 이론적으로 웹에 노출된 모든 사이트들은 이러한 숫자들에 기반하여 접근할 수 있다. 그러나 각 사이트 및 서버에 접근하기 위해 일련의 숫자를 모두 외워두는 것은 너무나도 비효율적이다. 당장 일주일 전에 무엇을 먹었는지도 제대로 기억하지 못하는 사람들에게 몇백개의 숫자 배열을 외우도록 하는 것은 스트레스만 쌓게 만들지 않겠는가? 다행히도 사람은 연상하여 기억하는 것은 잘한다. 길거리의 작은 꽃에도 이름을 붙이고, 새로 발견한 벌레에도 이름이 생긴다. 학자들이 생물 및 무생물에 이름을 붙여 각종 정보를 "기록" 하면, 우리는 해당 존재를 칭할 방법을 얻게 된다. 웹에서의 기조..
[React] custom hook 프로그래밍 할때 우리는 코드의 여러 부분에서 공통적으로 혹은 유사하게 사용되는 로직을 함수라는 형태로 묶어 따로 분리한다. 이 경우 재사용성 및 유지보수가 좋아진다는 장점이 있다. 예를 들어 특정 API에 http 요청을 하는 경우를 생각해보자. 하나의 API는 보통 유사한 url을 통해 외부에 정보를 제공해주기 때문에 주소 뒷단을 조금 바꾸면 다른 정보를 얻을 수 있는 경우가 많다. 정보를 fetch로 가져온다고 가정하면, 함수로 분리하지 않은 경우 필요한 정보가 있을 때마다 fetch 메서드에 url 및 headers 등의 각종 정보를 바꿔가며 사용해야 하지만, 만약 정보를 가져오는 전 과정 ( fetch 후 json ... ) 을 하나의 로직으로 생각하여 함수로 관리한다면 구현 방식에 따라 뒷단의 ..
[자바스크립트] Promise.all / allSettled 자바스크립트의 프로미스는 비동기 작업을 수행하는데 사용된다. 이때 다수의 프로미스 작업들에 대한 이행 여부를 검사하기 위해 다양한 메서드가 Promise 객체 내부에 존재한다. 그중 모든 프로미스의 이행을 대기하고 그에 대한 결과를 반환하는 유사 메서드 all 과 allSettled 가 존재한다. Promise.all const result_array = Promise.all([array of Promise object]); Promise.all은 다수의 프로미스 객체들을 배열 형태로 입력받아 해당 프로미스 객체들의 수행 결과를 배열 형태로 반환한다. 이때 하나의 프로미스 객체만 거절(reject) 상태가 되더라도 전체가 거절된다는 특징이 있다. 하나만 실패하더라도 의미가 없는 경우 사용할 수 있다. P..
[Git 09] Stash 통상적인 업무를 하다가 갑자기 긴급한 버그를 발견하거나, 수정 사항이 생겨 해당 업무를 먼저 처리해야 하는 상황이 있을 수 있다. 그런데 깃은 변경사항이 저장되지 않은 경우 ( 스테이지 상태에 뭔가 있는 경우 ) 충돌의 문제로 브랜치 이동을 허용하지 않는다. 이런 상황에서 stash 명령어는 큰 도움이 된다. stash 명령은 수행중인 상태를 임시로 저장하기 위한 명령으로, 명령 수행 이후 변경 이전의 커밋 상태로 돌아간다. 작업중인 업무 임시 저장 $git stash // 현재 진행중인 상황을 임시 저장 $git stash save "message" // 메시지를 달아 임시 저장 $git stash push // stash save을 대체할 가능성이 있는 명령 스태시 리스트 보기 $git stash l..
[Git 08] 브랜치 하나의 프로그램은 다양한 모듈 단위로 구성되는 경우가 많다. 이때 해당 모듈들이 긴밀한 관계를 가지는 것이 아니라면, 이들을 각각 나눠 다른 멤버가 생성하고 규칙에 따라 합병하는 방식으로 코드를 작성할 수도 있을 것이다. 이때 다양한 모듈들이 충돌 및 의존성이 적은 관계라면 굳이 하나의 흐름 내에서 개발할 필요는 없다. 깃은 특정 작업에 따라 구분하고 싶은 경우 branch 명령을 이용하여 흐름 분기를 나눠 해당 분기들이 따로 동작할 수 있게 한다. 브랜치는 커밋들 사이를 넘나들 수 있는 포인터의 일종으로, 하나의 커밋을 가리키는 SHA-1 체크섬 파일에 불과하다. 프로젝트를 통째로 복사하는 대신 스냅샷 방식으로 동작하므로, 복사 작업에 드는 시간이 짧다. 프로젝트 생성 최초 시점에 master 브랜치가..

티스토리툴바