findIndex

특정 배열에서 중복 객체를 제외하는 많은 방법 중

주관적인 견해로 가장 간결하게 처리할 수 있는 방법으로

findIndex를 활용하는 방식을 채택하여 실제 프로젝트에

적용한적이 있다.

findIndex매서드는 iterable한(반복 가능한) 객체에서

사용 가능한 매서드로 해당 객체를 0번째 요소부터

순회하며 매개변수내에서 true를 반환하게 되면

해당 요소의 index를 반환하는 매서드이다.

사용예시

const array = [{id:1, title: "test"}, {id:2, title: "test"}, {id:3, title: "test"}, ];

// id가 2인 객체의 인덱스를 반환
const findSecondId = array.findIndex((value) => value.id === 2);

console.log(findSecondId); // 1

이런 방식으로 특정 조건을 만족하게 되면 true를 반환하게 되고

findIndex는 true를 감지하면 순회를 멈추고 해당 데이터의 index를

반환하게 된다.

어떻게 findIndex로 중복 객체를 제거 할까?

순회의 프로세스를 순차적으로 이해한다면

비교적 간단하게 접근하여 적용할 수 있다.

실질적인 데이터베이스에 저장된 데이터들은

각각 고유값(id)을 가지고 있기 때문에 이를 통해서

중복 객체를 제거할 수 있다.

꼭 고유 id가 아니더라도 중복되는 데이터를 타겟으로

filter와 findIndex를 활용한다면 쉽게 가공할 수 있다.

• 예시코드

//  데이터 중 title이 "제목입니다." 인 객체는 createAt, title, id 모두 동일하다.
const data = [
  { id: 1, title: "textTitle.", createAt: 1235 },
  { id: 2, title: "제목입니다.", createAt: 1236 },
  { id: 2, title: "제목입니다.", createAt: 1236 },
  { id: 4, title: "newTitle.", createAt: 1238 },
  { id: 5, title: "allNewTitle.", createAt: 12359 },
];
// data 깊은 복사
const data2 = JSON.parse(JSON.stringify(data));

// id를 비교한 경우
const filteredById = data.filter((obj, idx) =>
  (data.findIndex(obj2 => obj.id === obj2.id)) === (idx)
)

console.log(filteredById);
/*
  [
    { id: 1, title: "textTitle.", createAt: 1235 },
    { id: 2, title: "제목입니다.", createAt: 1236 },
    { id: 4, title: "newTitle.", createAt: 1238 },
    { id: 5, title: "allNewTitle.", createAt: 12359 },
  ]
*/


//  createAt를 비교한 경우
const filteredByCreateAt = data2.filter((obj, idx) =>
  (data2.findIndex(obj2 => obj.createAt === obj2.createAt)) === (idx)
)

console.log(filteredByCreateAt);
/*
  [
    { id: 1, title: "textTitle.", createAt: 1235 },
    { id: 2, title: "제목입니다.", createAt: 1236 },
    { id: 4, title: "newTitle.", createAt: 1238 },
    { id: 5, title: "allNewTitle.", createAt: 12359 },
  ]
*/

왜 중복이 제거되는걸까?

원리는 아주아주 심플하다.

배열 내의 특정 데이터가 유일한 경우에는 해당 데이터를 가진

데이터의 index 또한 유일해야만 한다.

하지만 같은 데이터가 존재한다면 index만 유일한 값이 되고

특정 데이터는 중복된 데이터를 가지게 된다.

그렇기 때문에 배열에서 반드시 유일할 수 밖에 없는

index값을 비교할 수 있도록 findIndex와 filter의 index를

활용하면 중복되는 특정 값을 가진 객체를 제외시킬 수 있다.

findIndex는 index 0부터 탐색을 시작하고 해당 조건이 맞는 순간

순회를 멈추고 해당 index를 반환하기 때문에 순회 도중

같은 데이터가 발견되면 서로 index가 달라지기 때문에

filter의 조건인 currentIndex === findIndex 가 false를

반환하게 되어 결국 중복된 데이터는 제외하고 반환하게

되기 때문이다.

마치며...

간혹 개발을 하다보면 이론적으로는 알고 있지만 막상 코드로 구현하고자 할 때 이상하리 만치 고민하게 되는 경우가 종종 있는 것 같다. 이번의 경우도 그랬다. 분명 어려운 것은 아니지만 딱히 활용할만한 상황이 없어서 였는지 설계할 때 고민을 꽤 했던 것 같다. 이론적으로 알고 있더라도 결국 직접 문제를 직면하고 해결하기 위해 설계를 떠올려보고 구상해보는 것이

더 깊은 이해도를 가질 수 있고 내 것으로 만들 수 있는 것 같다. 기술이든 개념이든 내가 설명할 수 있을 정도의 이해도를 갖춰야만 활용할 수 있다는 것을 깨달았다. 앞으로도 내가 아는 것을 설명할 수 있는 사람이 되자.

useNavigate

react에서 Client Side Routing을 편리하게 사용할 수 있도록 돕는

"react-router-dom"에서 제공하는 훅으로 react에서 주로 페이지를

동적으로 이동할 때 사용되는 훅이다. Link 태그와 다르게 훅으로서

함수와 함께 사용 가능하기 때문에 다양하게 활용 가능한 것이

특징이다.

useNavigate 사용예시

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

// 로그인 페이지로 이동
navigate("/login");

// 이전 페이지로 이동
navigate(-1);

기본적인 사용 예시는 위와 같다.

단순하게 Route의 pathName을 기재하는 것 뿐아니라
이전 페이지로 가는 경우 -1을 매개변수로 넣는 등

다양한 기능을 제공한다.

이동할 페이지에 State 전달

react에서 useState의 setState를 활용하여 state를 값을 얻는 방법 외

useNavigate의 state option을 사용하면 페이지로 이동 후

이동한 페이지에서 useLocation 훅을 통해 state를 전달 받는 것이 가능하다.

이러한 기능을 활용한다면 URL 파라미터에 값을 노출시키지 않고

특정 값을 private하게 전달해 줄 수 있다.

Navigate State 사용예시

/** current.jsx */
import { useNavigate } from 'react-router-dom';

export const current = () => {
  const navigate = useNavigate();

  const linkToNext = () => {
    // next 페이지로 이동하며 { state: fromCurrentPage } 전달
    navigate("/next", { state: { fromCurrentPage: "Hello, Next page?" } });
  }
    
  return <div onClick={linkToNext}> currentPage </div>
}



/** next.jsx */
import { useLocation } from 'react-router-dom';

const Next = () => {
  const location = useLocation();
  
  // "Hello, Next page?"
  console.log(location.state.fromCurrentPage);
  
  return <div> Filnally... Next Page! </div>
}

마치며...

약 2년간 react 를 주력으로 다뤄왔지만 useNavigate를 활용해서 다음 페이지로 state를 전달할 수 있다는 사실을 이번에 처음알게되었다... 다시금 부족함을 느끼고 멈추지 않고 꾸준히 정진해야겠다는 마음을 굳게 다지는 계기가 되었다.

Git Stash

Stash란 Staging된 파일의 수정 내역을 통째로

새로운 stash라는 stack에 추가하여 git에 임시저장할 수 있는

기능이다. 여기서 git은 github가 아닌 디바이스에서 등록하여

사용중인 git을 의미한다.

Commonds

git stash

• 임의의 이름으로 스냅샷(saved stash)이 임시 저장된다.

git stash [save 이름]

• save와 이름을 생략하는 경우 익명으로 저장된다.

git stash list

• 저장된 모든 스냅샷의 내역을 보여준다.

git stash show

• 저장된 스냅샷의 가장 최근 스냅샷의 변경 내용을 간략하게 출력한다.

git stash show [이름]

• 지정된 스냅샷의 내용을 간략하게 출력한다.

git stash drop

• 가장 최근에 저장한 스냅샷을 삭제한다.

git stash drop [이름]

• 지정된 스냅샷을 삭제한다.

git stash clear

• 저장된 모든 스냅샷을 삭제한다.

git stash apply

• 가장 최근에 저장한 스냅샷을 적용한다.

git stash apply [이름]

• 지정된 스냅샷을 적용한다.

git stash pop

• 가장 최근에 저장한 스냅샷을 적용 후 삭제한다.

git stash pop [이름]

• 지정된 스냅샷을 적용 후 삭제한다.

마치며...

최근에 SI개발 회사에 취업을 하게 되어 바쁜 나날을 보내고 있다. 회사 적응기, 경기권에서 서울권으로 이사 등 신경써야 할 일이 부쩍 늘어 블로그와 깃허브 잔디를 제대로 심지 못해 그 동안 너무 아쉬웠다... 개발자 취준생일 때는 한번도 사용해보지 않았던 git commond 였는데 실무에서는 생각보다 stash를 자주 쓰게 되는 것 같아 포스팅 해보았다. 이제 바쁜 몇가지 일이 마무리 되었으니 다시 블로그 포스팅과 github 잔디심기에 소홀해지지 않도록 꾸준히 노력해야겠다.

Circular Dependencies

의존성 순환이란 코드를 모듈화 하여 작업할 때 생기는 모듈간의

의존성이 순환하며 무한루프를 일으키게 되는 현상을 뜻한다.

A라는 모듈이 B를 참조하여 의존성을 가지게 되고

B모듈 역시 A모듈을 참조하여 서로 의존성을 가지게 되면

A 혹은 B 모듈중 하나만 실행되어도 멈추지 않고

A모듈과 B모듈을 지속 실행하게 된다.

Node.js의 의존성 순환

기본적으로 자바스크립트 모듈 시스템은 순환 참조를 허용한다.

때문에 런타임 오류가 발생하진 않지만 간혹 참조 평가 순서에 의해

순환참조로 인한 에러를 마주할 수 있다.

여기서 "평가 순서"란 객체가 파라미터를 넘기고 수행하는 시점을 뜻한다.

해결책

결과적으로는 서로 순환참조할 수 없도록 평가 순서에 영향을

미치지 않는 새로운 모듈을 정의하고 이를 필요한 모듈에서

가져와 사용한다면 해결할 수 있다.

• 예시 코드

// modules.js  (새롭게 정의한 모듈)
export * from './B.js';
export * from './A.js';

// index.js  (A, B 모듈을 사용)
import { A, B } from './modules.js';

// A.js  (B에 의존성을 가진 모듈A)
import { B } from './modules.js';
export const A = 'My name is A!';
B("Hello! ");

// B.js  (A에 의존성을 가진 모듈B)
import { A } from './modules.js';
export const B = (Hello) => {
  alert(`${Hello + A}`);
};

위 예시 코드는 새로 정의한 modules.js 파일에 모듈을

집합 시켜 평가 순서를 결정할 수 있도록 정의했기 때문에

모듈을 가져올 때 반드시 modules.js 파일에서 가져온다.

위 예시 코드는 모듈들을 번들링하여 순환 참조를

해결하는 하나의 방법론이다.

조영호 님의 '우아한 객체지향' 세미나에서 언급했던 이야기 중 [ 설계란, 코드를 어디에 위치시킬 것인가에 대한 의사 결정이며 이에 대한 결정은 " 변경 " 에 초점을 맞추는 것이다. " 변경되는 코드들을 함께 " 넣어야 하고 " 변경의 핵심은 의존성 "이다. ] 라고 조언해 주신 것이 순환 참조, 의존성에 대한 개념과 이해도를 높일 수 있는 키워드가 되었던 것 같다.

마치며...

깃허브를 둘러보다 Node.js런타임에서 개발되는 코드들을(주로 React) 봤을때 위 방식으로 순환참조를 방지하는 것을 종종 보았다. 분명 좋은 방법처럼 보이지만 개인적인 견해로는 차라리 폴더 아키텍처를 조금 더 구분감 있게 분류한다면 자연스럽게 해결할 수 있지 않을까? 싶은 생각이 들었다. 이 처럼 다양한 문제를 다양한 사고방식의 사람들이 다양한 방법론을 제시하고 발전시켜 왔기 때문에 지금처럼 개발 생태계를 발전시킬 수 있었던 것 같다.

React

Facebook에서 개발된 오픈소스 라이브러리이며

CSR 웹페이지를 개발할 때 주로 사용된다. 컴포넌트 단위로

개발할 수 있어 유지보수, UI 재사용성을 높여 효과적으로 웹페이지를

개발, 운영할 수 있다.

React의 주요 특징

1. Virtual DOM, 동적인 웹페이지 구성

React는 메모리에 Virtual DOM(가상돔)을 생성하고 이를 활용하여 이벤트가 발생할 때 마다 실제 DOM과 상태를 비교하여 변경이 필요한 최소한의 변경 사항만 실제 DOM에 반영하여 렌더링되기 때문에 렌더링 효율성이 좋다. 이러한 특징으로 유저와 상호작용하는 동적인 웹페이지 개발 시 자주 채택된다.

2. Data Flow

Data Flow(데이터 방향)는 한 방향으로 흐르는 단방향이다. 데이터흐름이 양방향인 경우 어플리케이션의 규모가 커질 수록 데이터의 흐름을 추적하기 힘들고 복잡해지는 경우가 발생한다. 이와 달리 단방향으로 개발된 어플리케이션은 데이터를 추적하기 수월하고 변화에 대한 예측이 가능하여 디버깅이 쉬운 장점이 있다.

3. JSX를 활용한 컴포넌트 개발

React를 사용할 때 필수적인 요소는 아니지만 보편적으로 필수적 요소처럼 사용되고 있다. 개인적인 견해로 JSX를 활용하였을 때 가장 큰 장점으로는 "개발의 생산성의 증대"라고 생각한다. JS코드내에서 즉시 UI구현 작업이 가능하고 가독성 또한 좋아지기 때문이다.

4. Props & State

Props는 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 의미하며 readonly 타입의 데이터이다. props는 변경이 불가능한 불변데이터이고 props를 전달해 준 최상위 부모 컴포넌트에서만 props를 변경할 수 있다.

State는 컴포넌트 내부에서 선언하여 값을 변경할 수 있어 동적인 데이터를 다룰 때 주로 사용된다. 사용자와 상호작용을 통해 데이터를 동적으로 변경할 때 사용되며 각각의 state는 독립적인 데이터이다.

5. Hooks

React가 함수형 컴포넌트를 표준으로 제공하면서 생긴 개념으로, React state와 Life cycle을 연동할 수 있게 해주는 함수를 뜻한다. 대표적으로 useState, useEffect, useCallback, useMemo 등이 있다.

마치며...

지금 껏 개발에 대한 포스팅을 해오며 돌이켜 생각해보면 react훅을 제외하면 나의 주력인 react에 관한 포스팅이 단 하나도 없다는 것이 조금 놀라웠다. 기술에 대한 이론적 역량을 보완하기 위해 react의 개념을 복기하며 포스팅하였고 알고 있더라도 포스팅을 하고 안하고의 차이는 꽤 크니 앞으로 꾸준히 노력하며 포스팅해야겠다.

변수 값을 어떻게 서로 바꿀 수 있을까?

가장 단순한 방법으로 새로운 변수를 만들고 값을 복사해서 두 변수의 값을

서로 교환 할당하는 방식이 있을 것이다.

쉽게 떠올릴 수 있는 가장 확실한 방법이기도 하다.

• 새로운 변수를 활용한 예제 코드

let data1 = "It's String";
let data2 = 10;

console.log(data1) // "It's String"
console.log(data2) // 10

let copyData1 = data1;
data1 = data2;
data2 = copyData1;

console.log(data1) // 10
console.log(data2) // "It's String"

이러한 올드한 방식 말고 또 하나의 값을 교환하는 현대적인 방법이 있다.

바로 구조 분해 할당을 활용하여 값을 교환하는 방법이다.

구조 분해 할당

ES6부터 사용 가능하며 배열을 변수로 분해할 수 있도록 하는

특별한 문법이다. 몇가지 예제코드를 통해 쉽게 이해할 수 있다.

• 구조 분해 할당 예제 코드

// 기본적으로 활용하는 방식
let arr = ["Ze", "Riong"];
let [firstName, surname] = arr;

console.log(firstName); // Ze
console.log(surname);  // Riong

// 필요하지 않은 데이터는 , 를 사용해서 건너뛰기가 가능하다.
let array = ["A", "B", "C", "D", "E"];
let [a, , c, ,e] = array;

console.log(a) // "A"
console.log(c) // "C"
console.log(e) // "E"

// 할당 연산자 우측에 배열 뿐 아니라 모든 이터러블(반복 가능한 객체)이 올 수 있다.
let [a, b, c] = "all";
let [on, tw, th] = new Set([1, 2, 3]);

console.log(a, b, c) // a l l
console.log(on, tw, th) // 1 2 3

이렇게 구조 분해 할당에 대해 이해했다면 대충 감이 올 수도 있다.

아래 예제 코드를 통해 어떻게 변수 값을 교환할 수 있는지 알아보자.

구조 분해 할당을 활용한 변수 값 교환

변수는 이터러블 구조가 아닌데 어떻게 구조 분해 할당을 활용할까?

답은 간단하다. 변수를 배열에 넣어 이터러블하게 만들고 재할당하는 방식이다.

백문이 불여일견!

let str = "string";
let num = 230;

console.log(str) // "string";
console.log(num) // 230;

// 배열 내부에 변수를 넣어 이터러블 구조를 만들고 swap
[str, num] = [num, str];

console.log(str) // 230;
console.log(num) // "string";

마치며...

운이 좋게 서류합격을 하고 기술 면접을 보았는데 두 변수의 값을 서로 할당해주기 위한 방법을 서술해보라는 질문이 있었다. 나는 올드한 방식으로 새로운 변수를 선언하고 값을 할당하는 방식으로 설명하였고 면접이 끝나고 찾아보니 구조분해할당을 활용하는 트렌드한 방법이 존재했었다... 분명 당시의 질문 의도는 이러한 방식을 활용한 변수 값 교환에 대해서 설명하길 바랐을 것이다. 앞으로도 좀 더 다양한 방식에 대한 자료를 찾고 이해하기 위해 노력해야겠다.

API

Application Programming Interface의 약자로 응용 프로그램에서

운영체제나 프로그래밍 언어가 제공하는 기능을 제어 가능하도록

만든 인터페이스이며, 프로그램들이 서로 상호작용하는 것을

돕는 매개체라고 볼 수 있다.

REST

HTTP를 기반으로 필요한 자원에 접근하는 방식을 정의해둔

아키텍처이다. REST는 웹의 기존 기술과 HTTP 프로토콜을 그대로

활용하기 때문에 웹의 장점을 최대한 활용가능한 것이 특징이다.

REST의 속성

1. 서버의 모든 자원은 클라이언트가 접근할 수 있는 고유 URI가 존재한다.
2. 클라이언트가 요청할 때마다 필요한 정보를 보내주기 때문에 세션 정보를
   보관할 필요가 없어 서비스의 자유도가 높아지고 유연한 아키텍처 적용이 가능하다.
3. HTTP 메서드를 사용한다.(GET, POST, PUT, DELETE 등)
4. 서비스 내의 자원은 연관된 자원들과 연결되어 표현되어야한다.

REST는 HTTP메서드를 통해 자원을 처리하도록 설계된 아키텍처이다.

REST의 구성 요소

자원(Resource)

모든 자원은 서버에 존재하며 고유 ID를 가지고 있으며,

자원의 위치를 식별하는 URI(Uniform Resource Identifier)를 통해

자원에 접근할 수 있다.

메서드(Method)

• GET: 리소스를 조회
• POST: 리소스를 생성
• PUT: 리소스를 전체 수정
• PATCH: 리소스를 일부 수정
• DELETE: 리소스를 삭제

메시지(Message)

HTTP header, body, 응답 상태 코드 등으로 구성되어 있다.

• header: body에 어떤 형식으로 데이터가 담겼는지 표시
• body: 자원에 대한 정보를 JSON, XML 등으로 전달

응답 상태 코드는 200 ~ 500 사이의 숫자로 클라이언트의

요청에 대한 상태를 나타낸다.

REST의 특징

1. Server-Client 구조

클라이언트는 자원을 요청하고 서버는 자원을 가지고 있으며

API를 제공하여 비즈니스 로직처리 및 저장을 책임진다.

2. Stateless(무상태)

HTTP는 무상태이며 REST는 HTTP를 기본으로 하기 때문에 무상태이다.

클라이언트의 상태(State)를 서버에 저장하지 않는 것을 무상태라고 표현하고

서버에서 클라이언트의 요청을 완전히 별개의 것으로 인식하고 처리한다.

따라서 이전의 요청이 다음의 요청에 연관되지 않고 처리 방식에 일관성을

부여하고 부담이 줄어든다.

3. Cacheable(캐시 처리 가능)
HTTP의 캐싱 기능을 적용할 수 있어 대량의 요청을 효율적으로 처리할 수 있다.

캐시를 활용하여 응답 시간이 빨라지고 성능, 서버의 자원 이용률을 향상할 수 있다.
 
4. Layered System(계층화)
클라이언트는 REST API 서버만 호출하며 REST 서버는 다중 계층 구성이 가능하다.

API 서버는 순수 비즈니스 로직을 수행하고 이의 앞단에서 보안, 로드 밸런싱, 암호화,

사용자 인증 등을 활용해 구조에 유연성을 줄 수 있다.
 
5. Code-On-Demand
서버로부터 스크립트를 받아서 클라이언트에서 실행한다.

(필수 요건 아님)
 
6. Uniform Interface(인터페이스 일관성)
URI를 통해 자원 조작을 통일되고 한정적인 인터페이스로 수행한다.

HTTP 표준 프로토콜에 따르는 모든 플랫폼에서 사용이 가능하며 특정

언어나 기술에 종속되지 않는다.

REST API의 장단점

장점

1. 독립적인 언어와 플랫폼
2. REST API 메시지를 통해 의도를 쉽게 파악 가능
3. REST가 지원하는 프레임워크나 언어 등 없이 구현 가능
4. HTTP로 기존 웹 인프라를 사용 가능
5. 서버와 클라이언트의 역할을 명확하게 분리
6. 다양한 서비스 디자인에서 생길 수 있는 문제 최소화

단점

1. 표준이 존재하지 않음(보안, 정책 등)
2. HTTP프로토콜만 사용 가능

마치며...

얼마 전 회사에 서류합격을 통지받고 면접을 볼 수 있는 기회가 있었다. 지금껏 개발을 해왔지만 정작 이론에 대한 부분은 약하다는 것을 느끼게 되었고 면접결과 역시 좋지 못했다. 한번에 잘 되리라 생각하진 않았지만 생각했던 것 보다 모르는 이론이 너무나도 많았던 것 같다... 기술면접에서 REST API의 특징을 말하는 부분에서 시원하게 답변하지 못했고 이 포스팅을 시작으로 이론공부도 꾸준히 해야겠다!

Caret Browsing (Cursor Browsing)

웹페이지에서 텍스트 페이지를 볼 때 input에 focus된 것 처럼 커서를

보여주는 기능이다. 텍스트 페이지에서 클릭한 위치에 커서가 보여지며

키보드 컨트롤을 통해 드래그가 가능해지기도 한다.

캐럿 브라우징 모드

F7을 누르면 캐럿 브라우징사용 여부를 묻기 위한 confirm창이 뜬다.

사용을 누르면 캐럿브라우징 모드가 되며 다시 F7을 누르면 해제된다.

언제쓰면 좋을까?

개인적으로 장문의 글을 읽을 때 사용하면 좋겠다고 생각했다.

커서를 통해 읽던 위치를 파악할 수 있고 키보드를 사용하여 좀 더

정밀하게 드래그하여 텍스트를 복사할 수도 있기 때문이다.

마치며...

캐럿브라우징을 포스팅하게 된 이유는 개발을 하는 과정에서 live-server로 띄운 웹페이지의 텍스트영역에 지속적으로 커서가 생기는 현상에 당황스러웠고 처음에는 코드의 문제로 버그가 발생하는 줄 알고 몇분간 삽질을 한 경험이있었다. 이 후 키보드가 잘못 눌렸을 때 문제가 발생했고 해당 브라우저에서 띄운 모든 페이지가 커서를 띄우는 것을 확인 후 캐럿 브라우징에 대해 알게되었다... 혹시 캐럿브라우징 기능이 필요할 수도 있고 같은 실수를 했을 때 당황하지 않고 대처하기 위해 포스팅했고 앞으로도 경험해야 할 문제들도 발단부터 검증하면 분명 해결할 수 있을 것이라는 믿음이 더 강해졌다.