alex im

[컴퓨터구조] 프로세서와 스레드

Alexim — Mon, 26 Sep 2022 00:01:52 +0900

프로세서

명령어들을 처리하고 반응하기 위한 논리 회로를 말한다.크게는 소프트웨어 신호를 받아 다른 하드웨어 부분으로 신호를 보내는 제어장치와 연산을 담당하는 연산장치로 구성된다.프로세스가 존재한다면 무조건 스레드도 하나 이상 존재한다.

스레드

프로세스 내에서 실행되는 흐름 단위멀티프로세스와 멀티스레드는 양쪽 모두 여러 흐름이 동시에 진행된다는 공통점을 가지고 있다.

멀티 프로세스

하나의 어플리케이션을 여러 개의 프로세스로 구성하여 각 프로세스가 하나의 작업을 처리하도록 하는 것 . 각 프로세스는 독립적으로 실행되며 각각 별개의 메모리를 차지하고 있다. 안정성이 좋다. 자식 프로세스 중 하나에 문제가 발생해도 다른 자식 프로세스에 영향이 확산되지 않는다. 작업량이 많을 수록 오버헤드가 발생할 수 있다.

멀티 스레드

하나의 애플리케이션을 여러 개의 스레드로 구성하여 하나의 스레드가 하나의 작업을 처리하도록 하는 것. 자원 공유가 쉽다. 스레드들은 부모 프로세스의 자원과 메모리를 공유할 수 있다. 프로세스 간의 전환 속도보다 스레드 간의 전환 속도가 빠르다. 자식 스레드 중 하나에 문제가 생긴 경우 전체 프로세스에 영향을 줄 수 있다. 프로그램 디버깅이 어렵다. (동시다발적으로 실행되기 때문에)

클러스터

노드 js는 기본적으로 싱글 스레드. 노드js 어플리케이션은 하나의 코어에서 실행되기 때문에 cpu가 멀티 코어인 경우에는 컴퓨터가 가진 성능을 온전히 발휘하지 못하는 일이 될 수 있어 클러스터라는 기능을 제공하고 있다. 어플리케이션 스레드 간에 워크로드를 분산할 수 있는 node.js의 여러 인스턴스를 실행할 수 있다. 클러스터 모듈을 사용하면 모든 서버 포트를 공유하는 자식 프로세스를 쉽게 만들 수 있다.

[HTTP] HTTP 인증

Alexim — Mon, 26 Sep 2022 00:00:47 +0900

HTTP 인증

http는 액세스 제어 및 인증을 위한 일반 프레임워크를 제공한다.

일반적인 HTTP 인증 프레임워크

서버는 클라이언트에게 401 (Unauthorized) 응답 코드를 가지고 응답한다. 최소한 한 번의 시도에 포함된 WWW-Authenticate 응답헤더로 권한을 부여하는 방법에 대한 정보를 제공한다.
서버와 인증을 하기를 원하는 클라이언트는 Authorization 요청 헤더 필드에 인증 정보를 포함함으로써 인증을 수행할 수 있다.
그림에서 보는 것과 같이 Basic 인증의 경우, 교환은 안전을 위해 HTTPS (TLS) 위에서 발생하여야 한다.
위의 그림에 사용된 “Basic” 인증 체계는 인코딩되지만 암호화되지 않은 자격 증명을 보낸다. 교환이 보완 연결(HTTP/TLS)을 통하지 않는 한 이것은 완전히 안전하지 않다.

프록시 인증

동일한 시도 및 응답 메커니즘이 프록시 인증을 위해서도 사용될 수 있다. 이 경우에 이것은 인증을 요구하는 중간 프록시이다.
리소스 인증 및 프록시 인증은 함께 존재 할 수 있기 때문에, 헤더와 상태 코드의 다른 세트가 필요하다. 프록시의 경우, 요청에 대한 상태 코드는 407 , 요청 헤더는 (Proxy-Authentication 이고 요청 헤더는 프록시 서버에 인증 정보를 제공하기 위해 사용된다., 응답 헤더인 Proxy-Authoricate에는 프록시에 적용 가능한 하나 이상의 챌린지가 포함되며 요청 헤더는 프록시 서버에 인증 정보를 제공하는 데 사용된다.

접근 거부

프록시 서버가 주어진 리소스에 대한 접근 권한을 얻기 위해 적절하지 않은 유효한 인증 정보를 수신한다면, 서버는 403``Forbidden 상태 코드로 응답해야 한다. 401``Unauthorizaed나 407``Proxy Authentication Required와는 다르게, 해당 사용자에 대한 인증은 불가능하다.

WWW-Authenticate와 Proxy-Authenticate 헤더

이 응답 헤더들은 자원에 대한 액세스를 얻기 위해 사용되어야 할 인증 방법을 정의한다.
이들은 인증을 하려는 클라이언트가 인증 정보를 제공할 방법을 알기 위해, 어떤 인증 스킴 이 사용될 것인지를 구체적으로 적어야 한다.

WWW-Authenticate: <type> realm=<realm>
Proxy-Authenticate: <type> realm=<realm>

<type> : 인증 스킴(Scheme)
realm : 보호되는 영역을 설명하거나 보호의 범위를 알리는데 사용된다. 이는 어떤 공간에 사용자가 접근하려고 시도하는지를 알리기 위하여, “중간 단계의 사이트에 대한 접근”과 같거나 또는 비슷한 메시지가 될 수 있다.

인증 스킴

일반적인 HTTP 인증 프레임워크는 여러 인증 스킴에 의해 사용된다. 스킴은 보안 강도와 클라이언트 또는 서버 소프트웨어에서 사용 가능성에 따라 달라질 수 있다.

일반적인 인증 스킴 목록

Basic (base64-encoded credentials)
- 이는 base64를 이용하여 인코딩된 사용자 ID/비밀번호 쌍의 인증 정보를 전달한다.
- 사용자 ID와 비밀번호가 평문으로 네트워크를 통해 전달되기 때문에 (base64로 인코딩 되어 있으나, base64는 복호화가 가능한 인코딩이다.) Basic 인증 스킴은 안전하지 않기 때문에 HTTPS/TLS와 함께 사용해야 한다. 이러한 추가적인 보안상의 향상 없이는 민감하거나 귀중한 정보를 보호하는 데 사용되어서는 안된다.
Bearer (bearer tokens to access OAuth 2.0-protected resources)
- OAuth: Bearer를 이용한 토큰 기반인증의 공개 표준 프로토콜
Digest
HOBA
Mutual
AWS4-HMAC-SHA256

[React] 공식문서 HOOK 4 ~ 8정리

Alexim — Tue, 6 Sep 2022 17:36:21 +0900

Effect Hook

side effect를 수행할 수 있다.

Side Effect란?

데이터 가져오기
구독(subscription) 설정하기
수동으로 React 컴포넌트 DOM 수정하기
결과를 예상할 수 없는 것
렌더링 과정에서 구현할 수 없는 작업
다른 컴포넌트에 영향을 줄 수 있는 작업

정리(Clean-up)를 이용하지 않는 Effects

네트워크 리퀘스트, DOM 수동 조작, 로깅 등은 정리가 필요 없는 경우들이다. 이러한 예들은 실행 이후 신경 쓸 것이 없기 때문

useEffect가 하는 일

컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말한다.
useEffect 안의 함수는 DOM 업데이트를 수행한 이후에 불러낸다.

useEffect를 컴포넌트 안에서 불러내는 이유

effect를 통해 state 변수 또는 prop에 접근할 수 있게 된다.
함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있는 것

useEffect 렌더링 순서

기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행된다.
마운팅과 업데이트라는 방식으로 생각하는 대신 effect를 렌더링 이후에 발생하는 것으로 생각하는 것이 더 쉬울 것
컴포넌트를 렌더링할 때 React는 이용한 effect를 기억하였다가 DOM을 업데이트한 이후에 실행한다.

대부분의 effect는 동기적으로 실행될 필요가 없다.

흔하지는 않지만 동기적 실행이 필요한 경우에는 useEffect와 동일한 API를 사용하는 useLayoutEffect라는 별도의 Hook이 존재한다. (먼저 useEffect를 사용해 보고 문제가 있다면 그 다음으로 useLayoutEffect를 사용해 보기를 권한다.)

정리(clean-up)를 이용하는 Effects

외부 데이터에 구독(subscription)을 설정해야 하는 경우에는 메모리 누수 가 발생하지 않도록 정리하는 것은 매우 중요하다.

effect에 정리가 필요한 경우에는 함수를 반환한다.

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); // 구독
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

effect에서 함수를 반환하는 이유?

이는 effect를 위한 추가적인 정리 메커니즘. 모든 effect는 정리를 위한 함수를 반환할 수 있다. 이 점이 구독의 추가와 제거를 위한 로직을 가까이 묶어둘 수 있게 한다.

React가 effect를 정리하는 시점은 언제?

React는 컴포넌트가 마운트 해제되는 때에 정리를 실행한다.
위의 예시에서 보면 effect는 한 번이 아니라 렌더링이 실행되는 때마다 실행된다. React가 다음 차례의 effect를 실행하기 전에 이전의 렌더링에서 파생된 effect 또한 정리하는 이유는 메모리 누수나 충돌이 발생하는 것을 방지하기 위함이다.

Effect를 건너뛰어 성능 최적화하기

모든 렌더링 이후에 effect를 정리하거나 적용하는 것이 때때로 성능 저하를 발생시키는 경우도 있다.

클래스 컴포넌트의 경우에는 componentDidUpdate에서 prevProps나 prevState와의 비교를 통해 이러한 문제를 해결할 수 있다.

componentDidUpdate(prevProps, prevState) {
if (prevState.count !== this.state.count) {
  document.title = `You clicked ${this.state.count} times`;
}
}

useEffect에는 이러한 기능이 내장되어 있다. useEffect의 선택적 인수인 두 번째 인수로 배열을 넘기면 된다.

useEffect에서 의존성 배열을 사용할 때 주의해야 할 점

배열이 컴포넌트 범위 내에서 바뀌는 값들과 effect에 의해 사용되는 값들을 모두 포함해야 한다. 그렇지 않으면 현재 값이 아닌 이전의 렌더링 때의 값을 참고하게 된다.

Hook 규칙

최상위에서만 Hook을 호출해야 한다.
오직 React 함수 내에서 Hook을 호출해야 한다. (또는 Custom Hook)

자신만의 Hook 만들기

사용자 정의 Hook 추출하기

두 개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리한다. 컴포넌트와 Hook 또한 함수이기 때문에 같은 방법을 사용할 수 있다.
사용자 정의 Hook은 이름이 use로 시작하는 자바스크립트 함수이다.
같은 Hook을 사용하는 두 개의 컴포넌트는 state를 공유하지 않는다. 사용자 정의 Hook은 상태 관련 로직을 재사용하는 매커니즘이지만 사용자 Hook을 사용할 때마다 그 안의 state와 effect는 완전히 독립적이다.

useEffect의 콜백이 개별 사용자 입력의 결과이거나 flushSync로 래핑된 업데이트의 결과인 경우

레이아웃 및 페인트 전에 동기적으로 실행된다.

useRef

useRef hook은 DOM ref 만을 위한 것이 아니다. "ref" 객체는 현재 프로퍼티가 변경할 수 있고 어떤 값이든 보유할 수 있는 일반 컨테이너이다. 이는 class의 인스턴스 프로퍼티와 유사하다.
useEffect 내부에서 쓸 수 있다.
지연 초기화를 수행하지 않는 한, 렌더링 중이 ref 설정을 피해라. 일반적으로 이벤트 처리와 effect에서 ref를 수정하는 것이 좋다.

고비용의 객체를 지연해서 생성하는 법

useMemo를 사용하면 종속성이 동일한 경우 값비싼 계산을 메모할 수 있다. 그러나 힌트 역할을 할 뿐이며 계산이 다시 실행되지 않는다는 보장은 없다. 때로는 객체가 한 번만 생성되었는지 확인해야 한다.

1. 일반적인 사용 사례 : 초기 state를 만드는 데 비용이 많이 드는 경우

function Table(props) {
  // ✅ createRows()는 한 번만 호출됩니다
  const [rows, setRows] = useState(() => createRows(props.count));
  // ...
}

무시된 초기 state를 다시 생성하지 않으려면 useState에 함수 컴포넌트를 전달할 수 있다.
React는 첫 번째 렌더링 중에만 함수 컴포넌트를 호출한다.

useRef() 초깃값을 다시 작성하고 싶지 않을 때

예를 들어 명령형 class 인스턴스가 한 번만 생성되도록 하고 싶다면

function Image(props) {
// ⚠️ IntersectionObserver는 모든 렌더링에서 생성됩니다
const ref = useRef(new IntersectionObserver(onIntersect));
// ...
}

useRef 는 useState와 같은 특수 함수 컴포넌트 오버로드를 허용하지 않는다. 대신 느리게 생성하고 설정하는 자체 함수 컴포넌트를 작성할 수 있다.

function Image(props) {
const ref = useRef(null);

// ✅ IntersectionObserver는 한 번 느리게 생성됩니다
function getObserver() {
  if (ref.current === null) {
    ref.current = new IntersectionObserver(onIntersect);
  }
  return ref.current;
}

// 필요할 때 getObserver()를 호출해주세요
// ...
}

이렇게 하면 처음에 진정으로 필요할 때까지는 값비싼 개체를 만들지 않아도 된다.

[React] 공식문서 주요 개념 10 ~ 12, HOOK 1 ~ 3정리

Alexim — Mon, 5 Sep 2022 21:00:53 +0900

State 끌어올리기

state는 렌더링에 그 값을 필요로 하는 컴포넌트에 먼저 추가된다. 그러고 나서 다른 컴포넌트도 역시 그 값이 필요하게 되면 그 값을 그들의 가장 가까운 공통 조상으로 끌어올리면 된다. 다른 컴포넌트 간에 존재하는 state를 동기화시키려고 노력하는 대신 하향식 데이터 흐름에 기대는 걸 추천
어떤 값이 props 또는 state로부터 계산될 수 있다면, 그 값을 state에 두는 걸 추천하지 x

합성 (Composition) vs 상속 (Inheritance)

어떤 자식 엘리먼트가 들어올 지 예상할 수 없는 컴포넌트

범용적인 "박스" 역할을 하는 Sidebar 혹은 Dialog와 같은 컴포넌트에서 특히 자주 볼 수 있다.
이러한 컴포넌트에서는 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋다.

children 대신 자신만의 고유한 방식으로 전달하기

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

<Contacts />와 <Chat /> 같은 React 엘리먼트는 단지 객체이기 때문에 다른 데이터 처럼 prop으로 전달할 수 있다.

React로 사고하기

목업으로 시작하기

UI를 컴포넌트 계층 구조로 나누기
- 모든 컴포넌트 주변에 박스를 그리고 각각에 이름을 붙이기
- 단일 책임 원칙!
React로 정적인 버전 만들기
- 정적인 버전을 만들기 위해 state를 사용하지 x
- state는 오직 상호작용을 위해, 즉 시간이 지남에 따라 데이터가 바뀌는 것에 사용한다.
UI state에 대한 최소한의 표현 찾아내기
- 애플리케이션을 올바르게 만들기 위해서는 애플리케이션에서 필요로 하는 변경 가능한 state의 최소 집합을 생각해보아야 한다.
- 핵심은 중복배제원칙
- 애플리케이션이 필요로 하는 가장 최소한의 state를 찾기
State가 어디에 있어야 할 지 찾기
- state를 기반으로 렌더링하는 모든 컴포넌트 찾기
- 공통 소유 컴포넌트 찾기
- 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 한다.
- state를 소유할 적절한 컴포넌트를 찾지 못했다면 state를 소유하는 컴포넌트를 하나 만들어서 공통 소유 컴포넌트의 상위 계층에 추가하기
역방향 데이터 흐름 추가하기
- 리액트는 전통적인 양방향 데이터 바인딩과 비교하면 더 많은 타이핑을 필요로 하지만 데이터 흐름을 명시적으로 보이게 만들어서 프로그램이 어떻게 동작하는지 파악할 수 있게 도와준다.

Hook의 개요

Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다. Hook 이전에는 render props나 고차 컴포넌트와 같은 패턴을 통해 재사용 가능한 로직을 붙이는 문제를 해결해왔다. 그러나 이런 패턴의 사용은 컴포넌트의 재구성을 강요하며 코드의 추적을 어렵게 만든다.
Hook은 class 안에서는 동작하지 않는다. 대신 class 없이 React를 사용할 수 있게 해주는 것
Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 "연동(hook into)" 할 수 있게 해주는 함수

Effect Hook

side effects : 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업
함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해준다.

Hook 사용 규칙

최상위에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 실행하지 않기
React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. (+custom Hook)

useState

useState를 이용하여 변수를 선언하면 2개의 아이템 쌍이 들어있는 배열로 만들어진다. 첫 번째 아이템은 현재 변수를 의미하고, 두 번째 아이템은 해당 변수를 갱신해주는 함수이다. 배열 구조 분해라는 특별한 방법으로 변수를 선언해주었기 때문에 [0]이나 [1]로 배열에 접근하는 것은 좋지 않을 수 있다.

[React] 공식문서 주요 개념 1 ~ 9 정리

Alexim — Sun, 4 Sep 2022 17:34:05 +0900

JSX

const element = <h1>Hello, world!</h1>;

JavaScript를 확장한 문법
JavaScript 모든 기능이 포함
React "element"를 생성한다.

React + JSX

리엑트에서는 본질적으로 렌더링 로직이 UI 로직과 연결된다는 사실을 받아들인다.
리엑트는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트" 라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다.
JSX는 HTML 보다는 JS에 가깝기 때문에 React DOM은 HTML 어트리뷰트 이름 대신 카멜케이스 규칙을 사용한다.

JSX에 표현식 포함하기

JSX에 중괄호 안에는 유효한 모든 JS 표현식을 넣을 수 있다.
JSX도 표현식이다.

JSX는 객체를 표현한다.

Babel은 JSX를 React.createElement() 호출로 컴파일한다.

const element = (
<h1 className="greeting">
  Hello, world!
</h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

이 두 구조는 동일하다.
React.createElement()는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행하고 객체를 생성한다. 생성된 객체를 "React Element"라고 하며 화면에서 보고 싶은 것을 나타내는 표현이라 생각하면 된다. React는 이 객체를 읽어서 DOM을 구성하고 최신 상태로 유지하는 데 사용한다.

엘리먼트 렌더링

엘리먼트는 React 앱의 가장 작은 단위이다. 화면에 표시할 내용을 기술한다.
브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain obj) 쉽게 생성할 수 있다. React DOM은 엘리먼트와 일치하도록 DOM을 업데이트한다.

엘리먼트

React 엘리먼트는 불변객체이다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.
엘리먼트는 특정 시점의 UI를 보여준다.

root DOM 노드

<div id="root"></div>

이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 루트 DOM 노드라고 부른다.
React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다.
React 엘리먼트를 루트 DOM 노드에 렌더링하려면 둘 다 ReactDOM.render()로 전달하면 된다.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Components와 Props

Component

JS 함수와 유사하다.
"props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

함수 컴포넌트와 클래스 컴포넌트

컴포넌트를 정의하는 가장 간단한 방법은 JS 함수를 작성하는 것이다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

이 함수는 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이러한 컴포넌트는 JS 함수이기 때문에 말 그대로 "함수 컴포넌트" 라고 한다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

위 두가지는 동일한 컴포넌트이다.

컴포넌트 렌더링

const element = <Welcome name="Sara" />;

React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있다.
React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 props라고 한다.

컴포넌트 이름은 항상 대문자로 시작한다.

React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다.

컴포넌트 합성

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다. 이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미한다.
React앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 컴포넌트로 표현된다.

props

props의 이름은 사용될 문맥이 아닌 컴포넌트 자체의 관점에서 짓는 것을 권장한다.
props는 읽기 전용 이다. (순수 함수이다.)
모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

State and Lifecycle

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);

<Clock /> 엘리먼트가 ReactDOM.render()로 전달되었을 때 React는 Clock 컴포넌트의 constructor를 호출한다. Clock 에서는 this.state를 초기화한다.
React에서는 Clock 컴포넌트의 render() 메서드를 호출한다. 이를 통해 React는 화면에 표시되어야 할 내용을 알게 된다. 그 다음 React는 Clock의 렌더링 출력값을 일치시키기 위해 DOM을 업데이트 한다.
Clock 출력값이 DOM에 삽입되면, React는 componentDidMount() 생명주기 메서드를 호출한다. 그 안에서 Clock 컴포넌트는 매초 컴포넌트의 tick() 메서드를 호출하기 위한 타이머를 설정하도록 브라우저에 요청한다.
매초 브라우저가 tick() 메서드를 호출한다. 그 안에서 Clock 컴포넌트는 setState()에 현재 시각을 포함하는 객체를 호출하면서 UI 업데이트를 진행한다.
- setState() 호출 덕분에 React는 state가 변경된 것을 인지하고 화면에 표시될 내용을 알아내기 위해 render() 메서드를 다시 호출한다. 이 때 render() 메서드 안의 this.state.date가 달라지고 렌더링 출력값은 업데이트된 시각을 포함한다. React는 이에 따라 DOM을 업데이트 한다.
Clock 컴포넌트가 DOM으로부터 한 번이라도 삭제된 적이 있다면 React는 타이머를 멈추기 위해 componentWillUnmount() 생명주기 메서드를 호출한다.

State를 올바르게 사용하기

직접 State를 수정하지 말기 (직접 수정하게 되면 변화를 알아차리기 힘들어진다.)
다음 state를 계산할 때 해당 값에 의존해서는 안된다. (비동기적으로 업데이트될 수 있기 때문에)
```
// Correct
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
```
이 setState는 이전 state를 첫 번째 인자로 받아들이고 업데이트가 적용된 시점의 props를 두 번째 인자로 받아들인다.

State 업데이트는 병합된다.

setState()를 호출할 때 React는 제공한 객체를 현재 state로 병합한다.
병합은 얕게 이루어진다.

데이터는 아래로 흐른다.

모든 state는 항상 특정한 컴포넌트가 소유하고 있으며 그 state로부터 파생된 UI, 데이터는 오직 트리구조에서 자신의 "아래"에 있는 컴포넌트에만 영향을 미친다.

이벤트 처리하기

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다.

DOM 엘리먼트에서의 이벤트 처리와 React 이벤트 처리의 차이점

React의 이벤트는 소문자 대신 camelCase를 사용한다.
JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.
React에서는 false를 반환해도 기본 동작을 방지할 수 없다. 반드시 preventDefault를 명시적으로 호출해야 한다.
React에서는 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없다. 대신 엘리먼트가 처음 렌더링될 때 리스너를 제공하면 된다. (클래스 방식 컴포넌트에서는 이벤트 핸들러를 클래스의 메서드로 만드는 것이 일반적인 패턴이다.)

HTML
<button onclick="activateLasers()"> Activate Lasers </button>
React
<button onClick={activateLasers}> Activate Lasers </button>
HTML 에서 폼을 제출할 때 가지고 있는 기본 동작을 방지하기 위해 return false를 사용할 수 있다.
<form onsubmit="console.log('You clicked submit.'); return false"> <button type="submit">Submit</button> </form>
React에서는 다음과 같이 작성할 수 있다.
- React는 W3C명세 에 따라 합성 이벤트를 정의하기 때문에 브라우저 호환성에 대해 걱정할 필요가 없다.
- React 이벤트는 브라우저 고유 이벤트와 정확히 동일하게 동작하지는 않는다. 합성 이벤트
function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You clicked submit.'); } return ( <form onSubmit={handleSubmit}> <button type="submit">Submit</button> </form> ); }

조건부 렌더링

React에서 조건부 렌더링은 JS에서의 조건 처리와 같이 동작한다.
if나 조건부 연산자와 같은 JS 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용하면 React는 현재 상태에 맞게 UI를 업데이트 할 것이다.

논리 && 연산자로 if를 인라인으로 표현하기

JS 논리 연산자 &&을 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있다.

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

null을 이용해서 컴포넌트가 렌더링하는 것 막기

컴포넌트의 render 메서드로부터 null을 반환하는 것은 생명주기 메서드 호출에 영향을 주지 않는다.

리스트와 Key

Key

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.
대부분의 경우 데이터의 ID를 key로 사용한다.
React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다.
React는 휴리스틱 알고리즘에 의존하고 있기 때문에 휴리스틱이 기반하고 있는 가정에 부합하지 않는 경우 성능이 나빠질 수 있다.
key는 반드시 변하지 않고, 예상 가능하며, 유일해야 한다. 변하는 key를 사용하면 많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠지거나 자식 컴포넌트의 state가 유실될 수 있다.
key는 형제 사이에서만 고유한 값이어야 한다. (전체 범위에서 고유할 필요는 없다.
key는 react에게 힌트를 제공할 뿐 컴포넌트로 전달하지는 않는다.

폼

HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작한다.

제어 컴포넌트

HTML에서 <input>, <textarea>, <select>와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트 한다. React에서는 변경할 수 있는 staet가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트된다.
React state를 신뢰 가능한 단일 출처 로 만들어 두 요소를 결합할 수 있다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어한다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 제어 컴포넌트 라고 한다.
input의 value 어트리뷰트는 항상 this.state.value 가 되고 React state는 신뢰 가능한 단일 출처가 된다.
input의 onChange에 setState를 넣어 사용자가 입력할 때 보여지는 값이 업데이트 된다.
제어 컴포넌트로 사용한다면, input의 값은 항상 React state에 의해 결정된다. 이렇게 하게되면 다른 UI 엘리먼트에 input의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있다.

textarea 태그

HTML 에서 <textarea> 엘리먼트는 텍스트를 자식으로 정의한다.
```
<textarea>
Hello there, this is some text in a text area
</textarea>
```
React에서는 value 어트리뷰트를 대신 사용한다.

select 태그

HTML 에서 <select>는 드롭 다운 목록을 만든다. selected 옵션이 있다.
React에서는 selected 어트리뷰트를 사용하는 대신 최상단 select 태그에 value 어트리뷰트를 사용한다. 한 곳에서 업데이트만 하면되기 때문에 제어 컴포넌트에서 사용하기 더 편리하다.
<select value={this.state.value} onChange={this.handleChange}> <option value="grapefruit">Grapefruit</option> <option value="lime">Lime</option> <option value="coconut">Coconut</option> <option value="mango">Mango</option> </select>
select 태그에 multiple 옵션을 허용한다면 value 어트리뷰트에 배열을 전달할 수 있다.
<select multiple={true} value={['B', 'C']}>

다중 입력 제어하기 (다중 input)

여러 input 엘리먼트를 제어해야 할 때, 각 엘리먼트에 name 어트리뷰트를 추가하고 event.target.name 값을 통해 핸들러가 어떤 작업을 할 지 선택할 수 있게 해준다.

[Router] React Router

Alexim — Sun, 21 Aug 2022 23:23:57 +0900

react router

v5에서 v6으로 업데이트되면서 많은 게 바꼈는데 기능상의 업데이트 보다는 문법이 많이 바뀜. 직관적으로 많이 바꼈다고 함. Reach Router라는 것과 합쳐져셔 많이 바꼈다고 함.
문서를 볼 때 아래의 단어가 있다면 v5이다.
- Switch (Routes로 바꼈다.)
- exact (path와 정확하게 일치하는 경우에만 이동하라는 건데 v6에서 없어졌다.)
- params
- history.push or history.replay (useNavigate로 바꼈다.)
- history.goback() (뒤로 가는 기능으로 navigate(-1)로 쓸 수 있다. 2페이지 전: -2)
react router는 눈속임이다. 페이지가 여러 개 있는 게 아니라 여러 개 있는 척 하는 것. (실제로는 페이지가 하나다.)
Main Conceps react router에 대해 더 깊게 들어가는 개념들
- Main Conceps 번역(고맙게도 번역해놓으심)

Routers

앱을 브라우저의 URL에 연결해준다.
앱을 연결하기 위해서는 최상위 컴포넌트를 Router로 감싸주어야 한다.
Router는 최상위 컴포넌트라고 생각하면.. 될듯 합니다. 뼈대라고 보면 된다.
Router 종류는 5가지가 있다.

BrowserRouter
- 웹 브라우저에서 React Router를 실행하기 위한 권장 인터페이스.
- 제일 많이 쓴다고 함.
- 브라우저에 내장되어 있는(built-in) history stack - HTML5 history AP(pushState, replaceState and the popstate event)를 사용해서 UI를 URL과 동기화된 상태로 유지한다.
HashRouter
- 어떤 이유로 URL을 서버에 보내지 않아야 하는 웹 브라우저에서 사용하기 위한 것
- 서버에서 읽을 수 없기 때문에 Server Side Rendering으로 설정을 백업할 수는 없다.
- 가장 큰 특징은 주소에 해쉬(#)가 붙고 검색 엔진이 읽지 못한다는 것
- hash history를 지원하지 않는다.
- 꼭 필요한 경우가 아니면 사용하지 않는 것이 좋다고 나와있음(공홈에)
HistoryRouter
MemoryRouter
NativeRouter
Router
StaticRoute

용어 정리 https://itchallenger.tistory.com/566 님 블로그 참고

Components

Link
NavLink
Navigate
Outlet
Route
Routes

Navigating

URL이 변하는 것을 navigation이라고 한다. 방법에는 두 가지가 있다.
1. Link
2. navigate (hook, component)

Link
- 사용자가 클릭하거나 탭하여 다른 페이지로 이동할 수 있는 요소.
- navigation의 기본 수단.
- a <Link>renders an accessible <a> element with a real href that points to the resource it's linking to.
- /로 시작하지 않는 상대 값은 상위 경로를 기준으로 확인된다. 즉 해당 값을 렌더링한 경로와 일치하는 URL 경로를 기반으로 빌드된다.
- ..은 터미널의 cd와 같다.
- with a .. behaves differently from a normal when the current URL ends with /. ignores the trailing slash, and removes one URL segment for each ... But an value handles .. differently when the current URL ends with / vs when it does not.
navigate function
- 이 함수는 useNavigate hook에서 반환되어 원할 때마다 URL을 변경할 수 있도록 한다.
- 먼저 const navigate = useNavigate();로 선언을 해준다.
- navigate("/주소") 하면 가려는 주소로 이동할 수 있다.
- Link 대신 navigate를 사용할 때에는 충분한 이유가 있어야 한다.
Navigate
- 렌더링될 때 현재 위치를 변경한다. useNavigate의 컴포넌트 wrapper이다. useNavigate와 같은 props, 인자를 가진다.

Outlet

자식 경로 요소를 렌더링하려면 부모 경로 요소에서 <Outlet>을 사용해야 한다. 이를 통해 하위 경로가 렌더링될 때 중첩된 UI가 표시된다. 부모 라우트가 정확히 일치하면 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트가 없으면 아무것도 렌더링 하지 않는다. (Index Route란 부모 URL의 부모 Outlet에서 렌더링되는 Route가 없는 Child Route)
react router는 v6부터 outlet이라는 컴포넌트와 함께 컴포넌트 트리의 레이아웃에 직접적으로 관여한다. 강력한 능력이래용..

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* This element will render either <DashboardMessages> when the URL is
          "/messages", <DashboardTasks> at "/tasks", or null if it is "/"
      */}
      <Outlet /> // 자식이 렌더링 될 위치
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}> // 부모
        <Route
          path="messages"
          element={<DashboardMessages />} // 자식
        />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}

Routes and Route

Routes와 Route는 현재 location을 기반으로 React Router에서 무언가를 렌더링하는 주요 방법.
Route는 일종의 if statement와 같은 것이라고 생각할 수 있다. 만일 (if) path가 현재 URL과 일치한다면 그 라우트의 element를 렌더링 할 것이다.
Routes는 위치가 변경될 때마다 모든 children <Route> 요소를 살펴보고 가장 일치하는 항목을 찾고 UI의 해당 분기를 렌더링한다. <Route> 요소는 중첩된 URL 경로에 해당하는 중첩된 UI를 나타내기 위해 중첩될 수 있다. 상위 경로는 <Outlet>을 이용하여 하위 경로를 렌더링 한다.

<Routes>
  <Route path="/" element={<Dashboard />}>
    <Route
      path="messages"
      element={<DashboardMessages />}
    />
    <Route path="tasks" element={<DashboardTasks />} />
  </Route>
  <Route path="about" element={<AboutPage />} />
</Routes>

For example, in the following config the parent route renders an by default, so the child route will render without any surrounding UI. But the child route's path is /users/:id because it still builds on its parent.
<Route path="users"> <Route path=":id" element={<UserProfile />} /> </Route>

HOOKS

useHref
- React Router 외부에서도 주어진 위치에 연결하는 데 사용할 수 있는 URL을 반환한다.
useInRouterContext
- 만일 컴포넌트가 <Router>의 context에서 렌더된다면 "true"를 반환하고 그렇지 않으면 "false"를 반환한다.
useLinkClickHandler
useLinkPressHandler
useLocation
-현재 locaton 개체를 반환한다. 현재 위치가 변경될 때마다 일부 side effect를 수행하려는 경우에 유용할 수 있다.

import \* as React from 'react';  
import { useLocation } from 'react-router-dom';

function App() {  
let location = useLocation();

React.useEffect(() => {  
ga('send', 'pageview');  
}, \[location\]);

return (  
// ...  
);  
}

객체를 반환하며 이 객체는 현재 사용자가 보고있는 페이지의 정보를 지니고 있다. 이 객체에는 다음과 같은 값들이 있다.
- pathname: 현재 주소의 경로 (쿼리스트링 제외)
- search: 맨 앞의 ? 문자 포함한 쿼리스트링 값
- hash: 주소의 # 문자열 뒤의 값 (주로 History API 가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용합니다.)
- state: 페이지로 이동할때 임의로 넣을 수 있는 상태 값
- key: location 객체의 고유 값, 초기에는 default 이며 페이지가 변경될때마다 고유의 값이 생성됨
useMatch
- 현재 위치를 기준으로 주어진 경로의 경로에 대한 일치 데이터를 반환한다.
useNavigate
- 예를 들어 onSubmit에서 submit 된 후 navigate(이동, 탐색)할 수 있는 함수를 반환한다.
- useNavigate는 양식이 제출되거나 특정 event가 발생할 때, url을 조작할 수 있는 interface를 제공한다.
- replace: true 일 경우 새 항목을 추가하는 대신 history stack의 현재 항목을 대체한다.
useNavigationType
- 현재 navigate 유형 또는 사용자가 현재 페이지에 어떻게 왔는지를 반환한다. history stack 에 대한 pop, push 또는 교체 작업을 통해
- navigate("../success", { replace: true});
- 두 번째 인자로 { replace, state } 인수를 사용한다.
- replace: true
- navigate에 적힌 주소로 넘어간 후 뒤로가기를 하더라도 방금의 페이지로 돌아오지 않는다. 이 때는 자신의 메인 페이지 ("/")로 돌아오게 됩니다
navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } )
useOutlet
- 내부적으로 <Outlet> 자식 경로를 렌더링하는 데 사용된다.
useOutletContext
useParams
- <Route path>와 매치되는 현재 URL에서 동적 매개변수의 키/값 쌍의 개체를 반환한다.

import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
}

useResolvedPath
- This hook resolves the pathname of the location in the given to value against the pathname of the current location.
useRoutes
- <Routes>와 기능적으로 동일하지만 js 개체를 사용하여 경로를 정의한다.
- 반환 값은 경로 트리를 렌더링하는 데 사용할 수 있는 유효한 React 요소이거나 일치하는 항목이 없는 경우의 null 이다.
useSearchParams
- 현재 위치에 대한 URL의 쿼리 문자열을 읽고 수정하는 데 사용된다.
- React의 자체 useState hook처럼 useSearchParams는 현재 위치의 검색 매개 변수와 이를 업데이트하는 데 사용할 수 있는 두 가지 값의 배열을 반환한다.
- useSearchParams를 통해서 쿼리스트링을 쉽게 파싱할 수 있다.(키, 값이 여러개인 경우 분리시키기 쉬워졌다.)

import \* as React from "react";  
import```js
import * as React from "react";
import { useSearchParams } from "react-router-dom";

function App() {
  let [searchParams, setSearchParams] = useSearchParams();

  function handleSubmit(event) {
    event.preventDefault();
    // The serialize function here would be responsible for
    // creating an object of { key: value } pairs from the
    // fields in the form that make up the query.
    let params = serializeFormQuery(event.target);
    setSearchParams(params);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>{/* ... */}</form>
    </div>
  );
}

Utilities

createRoutesFromChillden
createSearchParams
generatePath
Location
matchPath
matchRoutes
renderMatches
resolvePath

__dirname과 process.crw()의 차이

Alexim — Sat, 6 Aug 2022 13:55:12 +0900

D:\blog\imalex\src\server 위치에서 __dirname과 process.crw()를 호출했을 때

(imalex가 프로젝트 경로이다.)

dirname -> D:\blog\imalex\src\server
process.cwd() -> D:\blog\imalex

__dirname은 모듈의 파일 경로를 말한다.

process는 node 전역 객체를 말한다.

crw()는 노드가 실행중인 위치를 반환한다.

즉 process.crw()는 프로젝트 안 어디서 호출하든 같은 결과를 가져온다.

[JS] "?." 옵셔널 체이닝 연산자 (Optional chaining)

Alexim — Wed, 3 Aug 2022 23:42:19 +0900

Optional Chaning

?. 앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

언제 사용하나?

1. 있을 수도 없을 수도 있는 객체의 속성을 조회할 때

말이 이상하게 들리겠지만 옵셔널 체이닝은 이런 경우에 굉장히 유용하게 사용된다.

옵셔널 체이닝 연산자가 없을 때는 객체에 속성이 있는지 확인하기 위해서 "&&" 연산자를 썼다.

let user = {};

user 객체 안에서 user.address.street 을 조회하여야 하는데 주소 정보가 없는 user가 있다고 할 때

그냥 조회한다면 바로 타입에러가 발생할 것이다.

이를 해결하기 위해서

console.log(user && user.address && user.address.street);

이런 식으로 확인하면서 접근하는 방법을 썼다.

옵셔널 체이닝이 만들어지고 나서는

console.log(user?.address?.street);

이렇게 접근할 수 있게되었다. 옵셔널 체이닝으로 접근하면 타입에러가 나지 않고 값이 없는 경우에는 undefined를 반환한다.

1-2.

나의 경우 api 값을 불러올 때 사용했다. (튜토리얼 보는중..)

        <img
          src={channelIcon?.url} // ? 이 물음표 뭐지
          alt='channel img'
        />

channelIcon이 api에서 불러온 값이고 값이 없을 경우를 방지하기 위해서 옵셔널 체이닝을 사용한 것 같다.

(튜토리얼에서 저 물음표를 봤을 때 오타인줄ㅎㅎ)

2. 존재하지 않을 수 있는 메서드를 호출할 때 (함수의 호출)

let result = someInterface.customMethod?.();

만약 속성에 해당 이름이 있지만 함수가 아니라면 ?. 의 사용은 여전히 예외를 발생시킨다.

옵셔널 체이닝은 ?. 이전 부분만 확인하기 때문에 저 예제의 경우 someInterface 자체는 null이나 undefined가 아니어야 한다. 만약 null 또는 undefined 값이 나올 수 있는 경우라면

someInterface?.customMethod?.();

이렇게 사용해야한다.

참고한 사이트

https://ko.javascript.info/optional-chaining

옵셔널 체이닝 '?.'

ko.javascript.info

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining - JavaScript | MDN

optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다.

developer.mozilla.org

[알고리즘] Leetcode. Remove Nth Node From End of List

Alexim — Wed, 3 Aug 2022 14:19:30 +0900

Given the head of a linked list, remove the nth node from the end of the list and return its head.

연결리스트 head과 n이 주어지고 끝에서 n번째 노드를 삭제하고 head를 return 하라

Example 1:

방법 1.

처음 생각한 방법

2개의 포인터가 필요함. p1(포인터1)은 head부터 시작, p2는 head.next부터 시작

리스트 길이를 계산하고 (리스트 길이 - n) 만큼 이동해 p1.next는 지울 노드가 되고 p2는 지울 노드를 가리킨다.

고려해야 할 코너케이스

1. n이 length와 같을 때

: 이 경우에는 p1 head 자체를 지워야한다.

2. length가 1일 때

: 위 첫 번째 케이스와 같은 케이스로 처리할 수 있다.

var removeNthFromEnd = function(head, n) {
    let temp = head;
    let p1 = head.next;
    let p2 = head;
    let length = 0;

    while (temp.next) {
        length++;
        temp = temp.next;
    }
    
    // 만약 n이 node의 length와 길이가 같다면 head를 삭제
    if (length === n - 1) {
        head = head.next;
        return head;
    }

    for (let i = 0; i < (length - n); i++) {
        p1 = p1.next;
        p2 = p2.next;
    }

    p2.next = p1.next;
    
    return head;
};

풀면서도 별로라고 생각했는데 풀고나서도 보니 별로다.

방법 2.

dummy를 사용하면 코너 케이스를 쉽게 해결할 수 있다고 한다. ( )

head를 복사할 때 dummy = head 이렇게 하는 게 아니라 dummy.next = head 이렇게 하면 length가 1일 때 케이스를 생각하지 않아도 된다.

var removeNthFromEnd = function(head, n) {
    const dummy = new ListNode();
    dummy.next = head;
    let p1 = dummy;
    let p2 = dummy;
    
    for (let i = 0; i < n; i++) {
        p1 = p1.next;
    }
    
    while (p1.next) {
        p1 = p1.next;
        p2 = p2.next;
    }
    
    p2.next = p2.next.next;
    
    return dummy.next; 
}

만약 length = 5, n = 2 라면

(노란 하트는 지워야 할 노드)

p1을 n만큼 옮겨간다.

초록색 위치에 p1이 위치해있다.

p1, p2를 p1의 next가 null이 될 때까지 이동하면 2번을 이동하게 되는데

p2의 next 노드가 지워야 할 노드의 위치가 된다.

p2.next( ) = p2.next.next ( )

결과

방법 3.

dummy를 쓰지 않는 방법

var removeNthFromEnd = function (head, n) {
    // Two pointers - fast and slow
    let slow = head;
    let fast = head;
    // Move fast pointer n steps ahead
    for (let i = 0; i < n; i++) {
        if (fast.next === null) {
            // If n is equal to the number of nodes, delete the head node
            if (i === n - 1) {
                head = head.next;
            }
            return head;
        }
        fast = fast.next;
    }
    // Loop until we reach to the end.
    // Now we will move both fast and slow pointers
    while (fast.next !== null) {
        slow = slow.next;
        fast = fast.next;
    }
    // Delink the nth node from last
    if (slow.next !== null) {
        slow.next = slow.next.next;
    }
    return head;
};

방법 2에서 dummy를 사용하면 다른 케이스를 생각하지 않아도 돼서 좋지만 공간을 더 사용한다는 단점이 있는데 그걸 보완해준 방법인 것 같다.

참고한 블로그

https://www.fwantastic.com/2021/01/leetcode-19-remove-nth-node-from-end-of.html

[Leetcode] #19. Remove Nth Node From End of List 뒤에서 N번째 노드 지우기

www.fwantastic.com

https://redquark.org/leetcode/0019-remove-nth-node/

LeetCode #19 - Remove Nth Node From End Of List

Hello LeetCode enthusiasts ! It’s time to look the nineteenth problem from LeetCode. Remove Nth Node From End Of List Problem Statement Given the head of a linked list, remove the nth node from the end of the list and return its head. Follow up: Coul

redquark.org

[알고리즘] Leetcode. Intersection of Two Linked Lists

Alexim — Wed, 3 Aug 2022 00:36:35 +0900

Given the heads of two singly linked-lists headA and headB, return the node at which the two lists intersect. If the two linked lists have no intersection at all, return null.

For example, the following two linked lists begin to intersect at node c1:

The test cases are generated such that there are no cycles anywhere in the entire linked structure.

Note that the linked lists must retain their original structure after the function returns.

Custom Judge:

The inputs to the judge are given as follows (your program is not given these inputs):

intersectVal - The value of the node where the intersection occurs. This is 0 if there is no intersected node.
listA - The first linked list.
listB - The second linked list.
skipA - The number of nodes to skip ahead in listA (starting from the head) to get to the intersected node.
skipB - The number of nodes to skip ahead in listB (starting from the head) to get to the intersected node.

The judge will then create the linked structure based on these inputs and pass the two heads, headA and headB to your program. If you correctly return the intersected node, then your solution will be accepted.

cycle이 없는 두 개의 linked list가 있고 두 리스트가 교차점이 있다면 그 교차점을 반환하고 없다면 null을 반환하는 문제

이런식으로 모두 다 순회해야 하는 알고리즘을 Brute Force 알고리즘이라고 부르는 것 같다. 무식한 힘이라는 뜻..?

장점으로는 오차 없이 계산할 수 있는 게 장점이라고 한다.

처음 생각한 방법

1. headA, headB 길이를 구하고 길이가 더 긴 리스트의 앞부분을 자르고 길이를 똑같이 만든 후 비교하기

var getLength = function(head) {
    let length = 0;
    while (head.next) {
        head = head.next;
        length++;
    }
    return length;
}

var getIntersectionNode = function(headA, headB) {
    const lengthA = getLength(headA);
    const lengthB = getLength(headB);
    let long;
    let short;

    for (let i = 0; i < Math.abs(lengthA - lengthB); i++) {
        if (lengthA > lengthB) {
            headA = headA.next;
        } else {
            headB = headB.next;
        }
    }
    
    while (headA !== headB) {
        if (!headA.next) return null;
        
        headA = headA.next;
        headB = headB.next;
    }
    return headA;
}

2. 각 리스트를 순회하고 null에 다다랐을 때 다른 리스트로 이어서 순회하여 각각 비교하기

순회한다면 각각의 끝부분에서 다른 리스트로 바꾸었을 때

A : 4 -> 1 -> 8 -> 4 -> 5 (마지막) B로 바꿈 -> 5 -> 6 -> 1 -> 8 -> 4 -> 5

B : 5 -> 6 -> 1 -> 8 -> 4 -> 5 (마지막) A로 바꿈 -> 4 -> 1 -> 8 -> 4 -> 5

결국에 마지막 부분은 같게 된다. 이걸 이용하여 풀면 구할 수 있다. (와 난 왜 이런 방법을 못생각했을까!)

var getIntersectionNode = function(headA, headB) {
    if (!headA || !headB) return null;

    let a = headA;
    let b = headB;
    let numA = 0;
    let numB = 0;
    
    while (a !== b) {
        if (a.next === null) {
            if (numA > 1) return null;
            numA++;
            a = headB;
        } else {
            a = a.next;
        }
        if (b.next === null) {
            if (numB > 1) return null;
            numB++;
            b = headA;
        } else {
            b = b.next;
        }
    }
    
    return a;
};