바로 예시로 들어가보겠습니다.

문제 발생

프로필을 등록하기 위해 아래와 같은 단계별로 프로필을 추가했습니다.

1. 프로필 등록 페이지 접속
2. react-easy-crop를 활용하여 원하는 이미지 추출
3. 파일 선택

그러나 여기서 똑같은 파일을 클릭하게 되면, 화면 추출하는 모달이 열리지 않는 문제가 발생합니다.

만약 사용자가 같은 파일을 선택하면 브라우저는 이전 값과 동일하다고 판단합니다

그렇다면 같은 파일의 조건이 무엇일까요?

따라서 위 4가지가 같으면 브라우저는 같은 파일로 간주하여, 변화를 인식하지 않게됩니다.

문제 해결

문제 해결은 아주 간단합니다. input의 value값을 빈문자열로 초기화 해주게 되면 됩니다.

onChange 이벤트를 핸들링 하는곳에서 event.target.value = '' 값으로 초기화 해주게 되면, 문제가 바로 해결됩니다.

• Git Hook이란
• Husky란
• 실제 사용해보기

Git Hook이란

• Git Hook은 Git이 제공하는 이벤트 기반 스크립트 시스템입니다.
  즉, Git에서 특정 이벤트(예: 커밋, 푸시 등)가 발생할 때 자동으로 실행되는 스크립트를 등록할 수 있습니다.

Husky란

Husky란

• Husky는 Git Hook을 쉽게 설정하고 유지할 수 있게 도와주는 툴입니다.
  원래 Git Hook은 .git/hooks/ 안에 직접 스크립트를 넣어야 했지만, Husky를 사용하면 프로젝트 루트 디렉터리에서 .husky/ 폴더로 Git Hook을 관리할 수 있습니다.

사용방법

1️⃣ 설치 및 실행

npm install husky --save-dev

npx husky init 

2️⃣ Git hook 활성화 설정

// package.json
"scripts": {
  "prepare": "husky install"
}

prepare는 npm install 이후 자동으로 실행되도록 설계된 NPM 스크립트입니다. 이를 통해 다른 개발자들도 npm install만으로 hook이 자동 설치됩니다

3️⃣ 🧪 lint-staged와 함께 사용하기 (선택적)

lint-staged란 커밋할 때 전체 파일을 검사하지 않고, Stage에 올라온 파일만 검사하고 싶을 땐 사용합니다.

3️⃣-1️⃣ 설치

npm install lint-staged --save-dev

3️⃣-2️⃣ 설정 (package.json 또는 별도 config)

"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}

3️⃣-3️⃣ .husky/pre-commit 파일 수정

npx lint-staged

실제 사용해보기

1️⃣ Husky 사용전

1️⃣-1️⃣ lint에 걸리도록 코드 작성

1️⃣-2️⃣ 커밋 시도 : lint에 걸렸으나, 커밋이 잘 됩니다.

1️⃣ Husky 사용후

1️⃣-1️⃣ 커밋 시도 : lint에 커밋이 안되는걸 확인할 수 있습니다.

1️⃣-2️⃣ 코드 수정후 커밋 시도
-> Vscode에서 사용되지 않는 값이 선언돼있어서 또 lint에 걸렸습니다.(lint에 해당 기능을 꺼놨나 봅니다) -> 수정 후 다시 커밋을 해보면 잘 커밋이 되는 것을 확인할 수 있습니다.

• Vue에서 라우팅
• 결론
• 참고

Vue에서 라우팅

• Vue.js로 SPA(Single Page Application)를 개발할 때 가장 중요한 부분 중 하나가 바로 라우팅(Routing)입니다.

• Vue에서는 vue-router를 통해 라우팅을 손쉽게 구성할 수 있는데, 이때 라우팅 모드로 Hash mode와 History mode를 선택할 수 있습니다.

• 라우팅 모드는 URL 경로를 어떻게 처리할지를 결정하는 방식입니다. Vue Router는 기본적으로 두 가지 모드를 제공합니다.

  1. Hash Mode (기본값)
  2. History Mode

Hash Mode

• Hash mode는 URL의 #(해시) 기호를 기준으로 라우팅을 처리합니다. 브라우저는 # 뒤의 내용을 서버에 요청하지 않고, 클라이언트에서만 처리합니다.
• ex) https://example.com/#/about
• 위 URL은 서버에는 /만 요청되며, #/about은 브라우저에서만 처리됩니다.

✅ 장점

• 별도 서버 설정 없이 동작
• 브라우저 호환성이 뛰어남
• 서버에 요청이 가지 않기 때문에 404 에러 없음

❌ 단점

• #이 URL에 포함되므로 깔끔하지 않음 -> ex) https://example.com/#/about
• SEO(검색엔진 최적화)에 불리할 수 있음

History Mode

• History mode는 HTML5의 History API를 사용해 URL을 처리합니다. 이 방식은 # 없이 일반적인 URL처럼 보입니다.

• https://example.com/about

• History Mode의 경우 브라우저는 실제 /about 경로로 요청을 보내기 때문에, 서버에서 해당 요청을 적절히 처리해줘야 합니다. 그렇지 않으면 404에러가 발생합니다.

✅ 장점

• URL이 깔끔하고 직관적
• SEO에 더 적합
• 실제 웹사이트처럼 보이기 때문에 UX 측면에서 유리

❌ 단점

• 서버 설정이 필요 (특히 새로고침 시)
• 잘못 설정 시 404 에러 발생 가능

결론

• Hash Mode는 간편하고 설정이 필요 없지만, URL이 깔끔하지 않고 SEO에 불리합니다.

• History Mode는 깔끔한 URL과 더 나은 사용자 경험을 제공하지만, 서버 설정이 필요합니다.

• 라우팅 처리는 History mode로 사용하면서, 같은 페이지 내에서 탭을 통해 이동할 경우는 hash로 처리하면 좋을 것 같다는 생각이 듭니다.

  • 예를들어 홈페이지, 프로필 페이지, 리스트 페이지의 경우 History mode를 사용하여 아래와 같이 라우팅 처리를 합니다.
    • ex) /home, /profile, /list
  • 그러나 같은 페이지 내부에서 (탭 이동 혹은 스크롤 이동시) hash를 사용하면 좋을 것 같습니다.
    • ex) /profile#top, /profile#bottom

• 결과적으로 hash와 history를 상황에 맞게 적재적소에 맞게 사용할 수 있으면 베스트가 아닐까 생각합니다.

• 추가적으로 이글 자체에 목차를 만들고, 목차를 클릭하면 이동되도록 하는 기능 또한 #으로 돼있는걸 확인할 수 있습니다.

현재 글에서 목차를 눌러보며 url의 변화를 확인 할 수 있습니다.

참고

• vue 공식문서

• URI란
• URL이란
• URN이란
• URI 연습
• 참고

URI란

• Uniform Resource Identifier의 약자로서 어디서든 늘 같은 Resource(텍스트, 이미지, 비디오 등)를 보여줄 수 있도록 해주는 고유 식별자 입니다.

• URI는 크게 URL, URN으로 나눌 수 있습니다.

URL이란

• Uniform Resource Locator의 약자로서 네트워크 상에서 Resource(텍스트, 이미지)가 위치한 정보를 나타냅니다.

• 일반적으로 사이트 도메인을 자주 의미합니다.

• URL을 구성하는 요소는 Scheme(Protocal), Host(Damain), Port, Path입니다.

  • Scheme(Protocol) : 서로 다른 컴퓨터간의 통신을 하기 위한 규약으로서 HTTP(웹),HTTPS(HTTP보다 더욱 안전), FTP(파일), Talnet(원격지 접속) 등이 있습니다.

  • Host(Domain) : 인터넷에 접속되어 있는 각각의 컴퓨터를 가리키는 주소 입니다.

  • port : IP 내에서 애플리케이션 상호 구분(프로세스 구분)을 위해 사용하는 번호이며, http의 기본 포트는 80이며, https의 기본 포트는 443입니다. port번호를 직접 기입하지 않으면 웹 브라우져가 미리 약속한 80, 443 포트를 사용합니다. 왜냐하면 HTTP, HTTPS의 포트를 이것으로 사용하겠다는 표준화가 되어 있기 때문입니다.

  • path : 컴퓨터 내부에 있는 디렉토리의 파일을 가리킵니다. 즉 자원의 경로를 의미합니다.

URN이란

• Uniform Resource Name의 약자로서, Resource의 이름값을 이용해서 접근하는 방식입니다.

• 프로토콜을 제외한 URL에 Query, Fragment로 구성되어져 있습니다.

• 실제 자원을 찾기 위해서는 URN을 URL로 변환하여 이용합니다.

• Query(Query String) : 웹 서버에 보내는 추가적인 질문입니다.

• fragment : html 내부 북마크 등에 사용되며 서버에 전송되는 정보는 아닙니다.

URI 연습

Javascript MDN사이트로 연습을 해볼려고 합니다. 아주 복잡해 보이지만, 한번 분해(?)를 해볼려고 합니다. https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript#%EC%9B%B9_%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C_javascript%EB%8A%94_%EC%96%B4%EB%96%A4_%EC%9D%BC%EC%9D%84_%ED%95%98%EB%82%98%EC%9A%94

차근차근 앞에서부터 해석을 해보겠습니다.

• Scheme(protocal) : https 를 사용하고 있습니다.
• Host : developer.mozilla.org/ko를 사용하고 있습니다. ko는 한국을 의미합니다.
• Port : 기입을 따로 안했고 HTTPS이므로 443포트를 사용하고 있을것입니다.
• Path : docs/Learn/JavaScript/First_steps/What_is_JavaScript를 사용하고 있으며 해석 해보겠습니다.
  • 1. docs(문서를 의미하겠죠?)안에
  • 2. learn(배우는 부분 인가봅니다) 안에
  • 3. JavaScript(JS를 배우는곳 인가봅니다) 안에
  • 4. First_steps(첫단계 인가봐요) 안에
  • 5. What_is_JavaScript(JS가 무엇인지를 알려주나봅니다) 중에서
  • 6. %EC%9B%B9_%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90%EC%84%9C_javascript%EB%8A%94_%EC%96%B4%EB%96%A4_%EC%9D%BC%EC%9D%84_%ED%95%98%EB%82%98%EC%9A%94 내부 북마크부분을 의미하나 봅니다.

참고

• javascript MDN

1. input을 통한 짧은 text
2. text area를 통한 긴글
3. input의 radio 타입 버튼
4. select의 선택한 값 위와같이 여러개의 값을 입력받고, *를 통해 필수 여부를 받는 아주 일반적인 기능입니다.

문제 발생

input text에 focus 될 경우

• 위 사진처럼 text 타입의 input box를 focus할 경우 제가 원했던 방식으로 문제없이 잘 작동합니다.

• 마찬가지로 input의 radio 타입의 Input box를 focus할 경우 아래의 사진과 같이 동작합니다.

input radio에 focus 될 경우

마치 focus가 동작하지 않는 것 처럼 보입니다

• 위 사진과 달리 범위를 넓혀보면 페이지가 이동하여 focus가 동작하는구나 알 수 있지만, 위 사진처럼 같은 화면 내부에 존재한다면, 페이지의 이동이 발생하지 않고, 테두리에 특정 UI 변화가 보이지 않아 동작하지 않는 것 처럼 보입니다.

• GPT에게 물어보니 라디오 버튼은 브라우저에 따라 기본 스타일이 적용되어 있으며, focus 시 기본적으로 outline이 적용되긴 하지만 시각적으로 거의 보이지 않거나, 표시되지 않도록 설정되어 있는 경우가 많기 때문입니다. 라고 말합니다.

• 저는 Crome을 썼지만 safari, Brave Browser 모두 확인해본 결과 아무런 UI 변화가 보이지 않습니다.

문제 해결

• 따라서 focus가 될 경우 outline이라는 Css 속성을 직접 추가해주고, blur가 될 경우 css를 해제하는 방법으로 문제를 해결할 수 있습니다.

  focus이벤트는 요소가 포커스를 받으면 발생합니다. blur 이벤트는 요소가 포커스를 잃었을 때 실행되는 이벤트입니다.

• 여러 방법이 존재합니다.

  1. CSS에 focus 스타일 추가
  2. onfocus, onblur 이벤트를 추가하여, style을 변경

css에 Focus 스타일 추가

input[type="radio"]:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

onfocus, onblur 이벤트를 추가하여, style을 변경

  <script>
      const radio = document.getElementById('radio');

      radio.addEventListener('focus', () => {
        radio.style.outline = '2px solid blue';
      });

      radio.addEventListener('blur', () => {
        radio.style.outline = 'none';
      });

      const button = document.querySelector('button');

      button.addEventListener('click', (e) => {
        const inputs = e.target.parentElement.parentElement
          .querySelector('div')
          .querySelectorAll('input');

        const input1 = inputs[0];
        input1.focus();
      });
    </script>

느낀점

• 사실 이번 삽질은 기술적으로 어려운 문제라기보다는, focus가 잘 동작하고 있었음에도 불구하고 화면 변화가 없어서, 동작하지 않는다고 착각했던 제 실수를 돌아보게 만든 경험이었습니다.

• 특히 일반 텍스트 타입의 input과는 달리, 라디오 버튼은 focus 되었을 때 UI에 뚜렷한 변화가 보이지 않는다는 점을 이번에 처음 알게 되었는데요. 저처럼 같은 실수를 반복하지 않으시길 바라는 마음으로 이 글을 남깁니다.

• 물론 focus가 동작하기 때문에 그냥 넘어가도 되지만, 확실히 outline을 나타내줌으로서 여기 체크 하셔야됩니다! 라고 직접적으로 표시해주는게 필수적이라는 사용자 경험에 대한 강박(?)이 있어서 한번 확인해봤습니다.

  참고

• blurEvent MDN

• focusEvent MDN

• Chat GPT

지연 평가란 지연 평가 동작원리 참고

지연 평가란

• 지연 평가(Lazy Evaluation)란 말 그대로 필요할 때까지 값을 계산하지(지연) 않는 전략입니다. 즉 사용되기 전까지 평가하지 않고, 값을 미루는 방법입니다.

• 지연 평가는 원하는 시점까지 값의 평가를 지연시켜 메모리 사용량을 줄이고, 불필요한 연산을 방지함으로써 성능을 향상시킬 수 있습니다.

지연 평가 동작원리

• 지연 평가의 동작원리는 일반 배열 자료구조를 이터레이터로 바꿔서 하나씩 값을 평가하는 방식입니다.

엄격 평가 동작원리

• 지연 평가의 동작원리 전, 비교가 되는(일반적으로 사용되는) 엄격 평가의 동작원리를 살펴보겠습니다.

  • 예를들어 모두 1씩 더한 뒤, 홀수인 값들 중, 앞에서 3개를 추출하는 조건의 경우

    1. 100개의 요소가 존재하는 배열이 존재합니다.
    2. map을 통해 모두 +1을 해줍니다.
    3. filter를 통해 홀수를 필터링 한다.
    4. slice를 통해 앞에서 3개를 추출한다.
    • 위의 경우 총 203번 순회 과정이 진행됩니다.
      1. map 배열에서 100번
      2. filter 배열에서 100번
      3. slice에서 3번

  • 만약 100개가 아닌 1억개였다면 3개를 추출하기 위해 약 2억번의 과정이 필요합니다.

지연 평가 동작 원리

• 지연평가의 경우 어떻게 동작하는지 알아보겠습니다.

• 지연 평가의 경우 1개씩 처리하는 과정으로 진행됩니다.

• 예를들어 [0,1,2,...99] 가 존재할 경우

  1. 0에 +1을 해주는 과정 1번
  2. 홀수인지 확인하는 과정 1번
  3. 홀수면 추출 하는 과정 1번, 짝수면 0번

• 위 과정을 통해 앞에서 3개 추출을 위해서는 0요소에 관해 3번(홀수이므로), 1요소에 관해 (2번), 2요소에 관해 3번(홀수이므로), ... 이런식으로 진행됩니다.

• 따라서 총 15번만 진행되고, 7이후 부터는 원하는 조건의 숫자 3개를 모두 추출했으므로, 불필요한 작업을 진행하지 않습니다.

실제 코드로 확인해보기

• 1억개의 요소를 비교해보도록 하겠습니다.

• 실제로 엄청난 속도 차이를 확인 할 수 있습니다.

• 다만 지연평가를 실제로 어떻게 적용할지는 고민을 해봐야 될 것 같습니다. 대용량 데이터를 한 번에 처리할 필요 없이 데이터를 하나씩 처리할 경우가 생긴다면 적절하지 않을까 생각을 해봅니다.

참고

• [Javascript] 지연 평가(Lazy evaluation) 를 이용한 성능 개선

• 제로초 지연평가

• chat GPT

• 페이지의 특정 위치로 이동하는 방법
• 장단점
• 개선해보기
• 참고

페이지의 특정 위치로 이동하는 방법

• HTML의 a태그와, id 속성값 2가지를 활용하여 특정 위치로 이동시킬 수 있습니다.

  1. a태그를 통해 href 속성으로 페이지를 이동시킨다.
  2. id 속성값을 통해 이동시킬 요소에 적용해준다.

• 코드적으로 보면 아래와 같습니다.

    --특정 위치로 클릭 할 버튼
    <a href="#header">header 버튼</a>

    -- 이동하여 나타낼 html 요소     
    <div id='header'>Header</div>

실제 적용 화면

• 실제 React를 사용하여 Header, Main, Footer를 나타내면 아래와 같이 나타낼 수 있습니다.

실제 코드

const list = [
  {
    id: 1,
    name: 'Header',
    bgColor: '#A76545',
  },
  {
    id: 2,
    name: 'Main',
    bgColor: '#FFA55D',
  },
  {
    id: 3,
    name: 'Footer',
    bgColor: '#FFDF88',
  },
];

function App() {
  return (
    <div className="App">
      <div>목차</div>
      <ul>
        {list.map((data) => (
          <li>
            <a href={`#${data.id}`}>{data.name}</a>
          </li>
        ))}
      </ul>

      <div>
        {list.map((data) => (
          <div
            id={data.id}
            style={{
              height: '100vh',
              fontSize: '25px',
              backgroundColor: data.bgColor,
            }}>
            {data.name}
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

장단점

장점

1. 간단하고 직관적 : 특별한 자바스크립트 코드 없이 HTML만으로 특정 위치로 스크롤을 이동할 수 있습니다
2. 브라우저 호환성 : HTML만을 사용하기 때문에 어느 브라우저든 동작 합니다.
3. SEO : HTML만을 사용하기 때문에 SEO에 유리합니다.

단점

1. 상황에 따라 다를 수 있지만, url에 #id값이 추가됩니다. 예를들어 localhost:3000/#1, localhost:3000/#2, localhost:3000/#3과 같이 나타나게 됩니다.

2. 동적 콘텐츠 처리의 어려움 페이지의 콘텐츠가 동적으로 로딩되는 경우, 예를 들어 Ajax나 API를 통해 콘텐츠를 로드할 때, 해당 id로 이동할 때 예상치 못한 결과가 발생할 수 있습니다.

3. 부드러운 스크롤 제어 부족 기본적으로 a 태그와 id를 활용한 이동은 즉시 이동하는 방식입니다. 이때 이동이 부드럽게 이루어지지 않기 때문에 사용자가 갑작스럽게 이동하는 느낌을 받을 수 있습니다.

개선방법 : CSS의 scroll-behavior: smooth 속성 적용 -> 이 경우 동작하지 않는 브라우저가 있는 경우도 있습니다. -> 따라서 js를 통해 클릭 이벤트 발생시 처리하여 개선 할 수 있습니다.

개선해보기

• React를 사용하여 부드럽게 스크롤 되도록 수정해보도록 하겠습니다.

• 코드설명

  1. useRef를 사용하여 원하는 DOM 요소에 접근
  2. 버튼 클릭시 특정 요소로 이동하도록 click Event 적용
  3. window.scrollTo를 통해 이동을 원하는 요소의 offsetTop 위치로 이동시키고, behavior: 'smooth' 속성을 통해 부드럽게 이동하도록 적용

import { useRef } from 'react';

const list = [
  {
    id: 1,
    name: 'Header',
    bgColor: '#A76545',
  },
  {
    id: 2,
    name: 'Main',
    bgColor: '#FFA55D',
  },
  {
    id: 3,
    name: 'Footer',
    bgColor: '#FFDF88',
  },
];

function App() {
  const targetRef = useRef(null);

  const handleScrollToTarget = (idx) => {
    const targetDiv = targetRef.current.querySelectorAll('div')[idx];
    window.scrollTo({ top: targetDiv.offsetTop, behavior: 'smooth' });
  };

  return (
    <div className="App">
      <div>목차</div>
      <ul>
        {list.map((data, idx) => (
          <li key={data.id}>
            <button onClick={() => handleScrollToTarget(idx)}>{data.name}</button>
          </li>
        ))}
      </ul>

      <div ref={targetRef}>
        {list.map((data) => (
          <div
            key={data.id}
            style={{
              height: '100vh',
              fontSize: '25px',
              backgroundColor: data.bgColor,
            }}>
            {data.name}
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

참고

• chat GPT
• react 공식문서 ref

• JOIN이란
• INNER JOIN
• LEFT JOIN
• RIGHT JOIN
• FULL OUTER JOIN

JOIN이란

• JOIN은 두 개 이상의 테이블을 하나로 결합하는 SQL 연산입니다.
• 관계형 데이터베이스에서는 데이터가 여러 테이블에 나뉘어 저장되므로, 이를 하나의 쿼리로 조회하려면 JOIN이 필요합니다.

왜 JOIN이 필요한가?

• 예를 들어 users 테이블에는 사용자 정보가, orders 테이블에는 주문 정보가 있을 때:
  • 한 사용자가 어떤 상품을 주문했는지 알고 싶다면?
  • 주문 정보를 불러오되, 사용자 이름까지 같이 보이게 하고 싶다면?

👉 이런 경우 JOIN을 사용하면 테이블 간의 관계를 바탕으로 관련 데이터를 연결할 수 있습니다. (쉽게 말해서 여러 테이블을 합쳐서 나타내기 위해 필요합니다)

join에 알아보기 전 이해하기 쉽도록 사진을 하나 보고 가겠습니다. 혼공시리즈 라는 카페에 잘 정리된 사진이 있어서 가져왔습니다.

사진 출처 : 혼공시리즈

INNER JOIN

• 사진출처

• INNER JOIN의 경우 2개의 테이블에 공통으로 속한 데이터만 반환합니다.

• 만약 일치하지 않는다면 결과에서 제외됩니다.

INNER JOIN 사용해보기

• inner join은 줄여서 join으로 사용할 수 있습니다.
• 아래는 Book tabel, AUTHOR table 2개가 존재합니다.
• 아래의 2개의 테이블을 INNER JOIN을 하게 되면 아래와 같이 됩니다.

-- join 쿼리문 
  SELECT *
  from BOOK bk
  JOIN (AUTHOR) au   -- inner join이 아닌 join으로 축약해서 사용 가능
  on bk.AUTHOR_ID = au.AUTHOR_ID; -- 두개의 테이블을 연결시킬 공통 key

• 아래와 같이 합쳐지게 됩니다. (위 테이블의 경우 author_id가 두 테이블 모두에 존재하므로,

LEFT JOIN

• 왼쪽 테이블의 모든 데이터를 가져오고, 오른쪽 테이블에 일치하는 데이터가 없으면 NULL을 반환합니다.
• 아래는 Book tabel, AUTHOR table 2개가 존재합니다.
• 아래의 2개의 테이블을 LEFT JOIN을 하게 되면 아래와 같이 됩니다.
• 위 inner join과 달리 이번에는 BOOK에는 존재하지만(id=3), AUTHOR에는 존재하지 않는 데이터가(id=3) 있을 경우를 살펴보겠습니다.

inner join할 경우

• 아래와 같이 BOOK에만 존재하던 id값이 3인 경우가 사라지고, 2개의 테이블에 공통을 존재하는 데이터만 나타내게 됩니다.

-- 쿼리문
SELECT *
from BOOK bk
JOIN (select * from AUTHOR where author_id !=3) au
on bk.AUTHOR_ID = au.AUTHOR_ID;

LEFT JOIN할 경우

-- 쿼리문
SELECT *
from BOOK bk
LEFT JOIN (select * from AUTHOR where author_id !=3) au
on bk.AUTHOR_ID = au.AUTHOR_ID;

• 아래의 사진처럼 왼쪽 테이블(BOOK)의 데이터를 먼저 나타내고, 오른쪽 테이블(AUTHOR)에 BOOK과 다른 데이터(id=3)인 부분은 null값으로 나타내게 됩니다.

• 따라서 한쪽 테이블의 데이터를 무조건 남기고 싶다면 inner join이 아닌 left join을 사용할 수 있습니다.

RIGHT JOIN

• LEFT JOIN은 기준이 왼쪽 테이블이라면, RIGHT JOIN은 기준이 오른쪽 테이블입니다.
• 오른쪽 테이블의 모든 데이터를 가져오고, 왼쪽 테이블에 일치하는 데이터가 없으면 NULL을 반환합니다.

-- RIGHT JOIN 쿼리문
  SELECT *
  from (select * from AUTHOR where author_id !=3) au
  RIGHT JOIN BOOK bk
  on bk.AUTHOR_ID = au.AUTHOR_ID;

FULL OUTER JOIN

• 양쪽 테이블의 모든 데이터를 가져오고, 일치하지 않는 부분은 NULL로 채웁니다.

• MY SQL의 경우 FULL OUTER JOIN을 지원하지 않습니다. 하지만 UNION을 사용하여 같은 기능을 하도록 흉내는 낼 수 있습니다.

• 아래의 2개의 테이블의 구성을 살펴보면

  • 공통 1개, 서로 다른 id값이 각각 1개씩 존재합니다.
  • BOOK : id가 1,3으로 구성
  • AUTHOR : id가 1,2로 구성

  SELECT *
  from (select * from AUTHOR where author_id !=3) au
  FULL OUTER JOIN (select * from BOOK where author_id !=2) bk
  on bk.AUTHOR_ID = au.AUTHOR_ID;

• FULL OUTER JOIN을 하게 되면 아래와 같이 모두 나타내지만, 한쪽만 존재하는 데이터에는 null 값이 채워지게 됩니다.

참고

• SQL Joins Visualizer
• 생활코딩 JOIN
• 혼공시리즈

• SQL이란
• select문 작성 방법

SQL이란

• SQL (Structured Query Language) 은 데이터베이스에서 데이터를 조회하고, 추가하고, 수정하고, 삭제(CRUD) 하기 위한 언어입니다.

• 데이터베이스를 조작하는 언어입니다.

• MySQL, PostgreSQL, Oracle등 SQL 문법은 대부분 공통이며, 일부 차이가 있습니다.

select문 작성 방법

• 아래와 같이 select문을 작성할때는 순서가 있으며 이 순서대로 코드를 작성해야합니다.
• select - from - where - group by - order by - limit을 주로 사용하는 것 같습니다.
• 출처 : MySQL 공식 홈페이지

select

• 사용방법 : SELECT 컬럼명 FROM 테이블명;

• 만약 모든 컬럼을 조회하고 싶다면 *를 사용할 수 있습니다. select * from user

• 프로그래머스 문제로 알아보겠습니다.

  • 모든 컬럼 조회

  • 특정 컬럼 조회(user_id, age)

where

• WHERE은 조건을 지정할 수 있는 키워드
• =, >, <, >=, <=, != 등 연산자를 지원
• 아래의 경우 25살 이상인 경우 조건에 만족하는 데이터 조회

group by

• GROUP BY는 데이터를 그룹으로 묶어 집계할 때 사용
• 아래의 경우 25세 이상이면서 age를 기준으로 그룹화 해서, 각 나이의 총 인원수를 조회

having by

• having by는 group by를 통해 그룹화한 데이터의 조건을 주는 쿼리문입니다.

order by

• 조회한 데이터에 대한 정렬 하는 쿼리문
• ASC: 오름차순 (기본값)
• DESC: 내림차순

limit

• 개수를 제한할때 사용

집계함수

• 이미 위에서 하나 사용했지만 COUNT(), AVG(), SUM(), MAX(), MIN() 등 다양한 집계 함수 제공

• 사용 위치는 select 컬럼명 from ... 으로 작성할때 컬럼명을 기입하는 부분에서 사용

참고

• my sql 공식홈페이지
• 생활코딩 SQL

• 마진 병합이란
• 마진 병합이 발생하는 이유
• 마진 병합이 발생하는 경우
• 마진 병합 해결 방법
• 참고

마진 병합이란

• 마진 병합(Margin Collapse)이란, 두 개의 블럭 요소의 상하 마진이 만날 때, 두 마진 중 더 큰 값 하나만 적용되는 현상을 의미합니다. 즉, 마진이 단순히 더해지지 않고 병합되어 하나의 값으로 계산됩니다.

마진 병합이 발생하는 이유

• 마진 병합이 발생하는 이유는 무엇일까요? 버그일까요?

• 마진 병합은 CSS 설계상 의도된 동작입니다. CSS는 문단 간의 자연스러운 간격이나 레이아웃 흐름을 위해 마진병합을 발생시키도록 의도했습니다.

• 레이아웃의 자연스러운 흐름을 위해 의도된 동작이지만, 상황에 따라서 잘못된 경우가 있기 때문이 이 경우 의도적으로 마진병합이 발생하지 않도록 처리 할 수 있습니다.

마진 병합이 발생하는 경우

• 형제 요소 간의 마진 병합
• 부모와 자식 요소 간의 마진 병합
• 빈 블록 요소에서의 마진 병합

1. 형제 요소 간의 마진 병합

• 두 개의 블록 요소가 수직으로 배치될 때, 아래쪽 요소의 margin-top과 위쪽 요소의 margin-bottom이 병합됩니다.

• 아래의 코드를 보면 .box1과 .box2 사이의 마진은 20px + 30px = 50px으로 예상되지만, 실제로는 30px로 병합됩니다.

    .box1 {
      margin-bottom: 20px;
    }

    .box2 {
      margin-top: 30px;
    }

• 참고로 두 개의 요소가 수직이 아닌 수평(가로)으로 배치 될 경우 병합이 발생하지 않습니다.

    .box1 {
      margin-right: 20px;
    }
  
    .box2 {
      margin-left: 30px;
    }

• 따라서 아래의 경우 서로의 마진은 20 + 30 = 50px이 됩니다.

2) 부모와 자식 요소 간의 마진 병합

• 자식 요소의 margin-top이 부모 요소의 margin-top과 병합되는 경우입니다.

  .parent {
    margin-top: 20px;
  }

  .child {
    margin-top: 30px;
  }

• 물론 부모자식 관계에서도 수평 배치는 마진병합이 발생하지 않습니다.

  .parent {
    margin-left: 20px;
  }

  .child {
    margin-left: 30px;
  }

3) 빈 블록 요소에서의 마진 병합

• 내용이 없는 블록 요소도 마진 병합이 발생할 수 있습니다.

• 30 + 40 = 40px로 마진병합이 발생합니다.

      .box1 {
        background-color: green;
        width: 200px;
        height: 200px;
        margin-bottom: 30px;
      }
      .empty {
        background-color: tomato;
        margin-top: 40px;
      }
  

![](https://velog.velcdn.com/images/rlaclghks123/post/20a9a5ff-47d2-4dd1-a72f-ac24d60d3f3a/image.jpg)

- 물론 수평일때는 발생하지 않습니다.

- 수평으로 배치 될 경우 30 + 40 = 70px의 마진이 발생합니다.
![](https://velog.velcdn.com/images/rlaclghks123/post/5c86df59-67c1-4082-ba02-96f51ad8e894/image.jpg)


---

# 마진 병합 해결 방법
- 형제간 마진병합 발생시 `빈 table 태그 추가`
- 형제간 마진병합 발생시 둘 중 하나 혹은 모두 `display 속성값을 inline-block 적용`
- 부모 - 자식간의 마진병합시 `부모 요소에 overflow:hidden 적용`
- 부모 - 자식간의 마진병합시 `부모 요소에 padding 적용`
- 부모 - 자식간의 마진병합시 `부모 요소에 border 적용`
- 부모 - 자식간의 마진병합시 `부모 요소에 내용 추가`

### 1. 형제간 마진병합 발생시 빈 table 태그 추가
- 형제간의 마진병합이 일어난 경우 형제 사이에 table 태그를 추가하면 마진병합을 방지할 수 있습니다.

<div class="wrapper">
  <div class="box1">box1</div>
  <table></table> // 사이에 table 태그 추가
  <div class="box2">box2</div>
</div>

![](https://velog.velcdn.com/images/rlaclghks123/post/c2190a51-24c9-4b68-94a5-454c28259d58/image.png)


### 2. 형제간 마진병합 발생시 둘 중 하나 혹은 모두 display 속성값을 inline-block 적용

```css
 .box1 {
        border: 1px solid black;
        background-color: blue;
        width: 200px;
        height: 200px;
        margin-bottom: 50px;
      }
 .box2 {
        border: 1px solid black;
        background-color: orange;
        display: inline-block;  // display속성 inline 적용
        width: 200px;
        height: 200px;
        margin-top: 20px;
      }

    <div class="wrapper">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
    </div>

3. 부모 - 자식간의 마진병합시 부모 요소에 overflow:hidden 적용

.parent {
        background-color: beige;
        overflow: hidden; // 부모 요소에 overflow:hidden 적용
        margin-top: 50px;
      }

.child {
        border: 1px solid black;
        background-color: blue;
        width: 200px;
        height: 200px;
        margin-top: 20px;
      }

     <div class="parent">
      <div class="child">child</div>
    </div>

4. 부모 - 자식간의 마진병합시 부모 요소에 padding 적용

.parent {
        background-color: beige;
        padding: 1px; // 부모 요소에 padding 적용
        margin-top: 50px;
      }

.child {
        border: 1px solid black;
        background-color: blue;
        width: 200px;
        height: 200px;
        margin-top: 20px;
      }

     <div class="parent">
      <div class="child">child</div>
    </div>

5. 부모 - 자식간의 마진병합시 부모 요소에 border 적용

• 이건 border가 보이기 때문에 단순히 마진병합을 없애는 용도로 사용하기엔 그닥 좋아보이진 않음

.parent {
        background-color: beige;
        border: 1px solid black; // 부모 요소에 border적용
        margin-top: 50px;
      }

.child {
        border: 1px solid black;
        background-color: blue;
        width: 200px;
        height: 200px;
        margin-top: 20px;
      }

     <div class="parent">
      <div class="child">child</div>
    </div>

6. 부모 - 자식간의 마진병합시 부모 요소에 내용 추가

• 이것 또한 부모 요소의 내용이 보이기 때문에 단순히 마진병합을 없애는 용도로 사용하기엔 그닥 좋아보이진 않음

.parent {
        background-color: beige;
        margin-top: 50px;
      }

.child {
        border: 1px solid black;
        background-color: blue;
        width: 200px;
        height: 200px;
        margin-top: 20px;
      }

     <div class="parent">
       부모 // 부모 요소에 내용 추가
      <div class="child">child</div>
    </div>

참고

• veamcamp 마진병합
• 생활코딩 마진 겹침
• CSS MDN - 여백 상쇄 정복

문득 useEffect 의존성 배열에 아래의 2가지 값을 담을 경우 어떻게 출력되는지 궁금해졌습니다.

1. 전역 변수로 선언된 경우(원시값, 참조값)
2. 지역 변수로 선언된 경우(원시값, 참조값)

데이터 타입에 따른 리렌더링 비교

• 따라서 총 테스트 할 부분은 전역변수 3가지(문자열, 배열, 객체)와 지역변수(문자열, 배열, 객체)입니다.

• 테스트 해볼 코드

  • 전역변수 : 빨간색
  • 지역변수 : 초록색
  • useEffect를 통해 리렌더링 여부 확인

• 결과는 아래와 같이 나옵니다.

  1. 처음 렌더링시 모든 값이 출력됩니다.
  2. 버튼을 클릭하여 상태값을 변경시켜 리렌더링을 발생시킵니다.
  3. 리렌더링이 발생합니다.
  4. 내부에 선언된 object 타입(객체, 배열)만 리렌더링이 발생합니다.

1. 왜 외부에 선언한 object 타입은 호출되지 않을까?
2. 왜 내부에 선언한 object 타입은 호출이 될까?
3. 왜 외부에 선언한 원시값은 호출되지 않을까?
4. 왜 내부에 선언한 원시값은 호출되지 않을까?

• 리액트의 경우 위 사진과 같이 리렌더링이 발생하면 새롭게 App 함수를 실행하게 됩니다. 이 과정에서 가상돔은 이전 App 컴포넌트와 비교해서 변경이 발생한 부분만 수정합니다.

외부에 선언한 값은 왜 호출되지 않을까?

1번과 3번의 질문인 외부에 선언한 경우 원시값이든, 참조값이든 외부 저장소에 해당값이 저장되어 있기 때문에 App 컴포넌트가 매번 새롭게 만들어지더라도, 변하지 않는 고정된 값을 가리키기 때문에 이전값과 달라지지 않아 useEffect가 실행되지 않고, 따라서 호출되지 않습니다.

내부에 선언한 원시값은 왜 호출되지 않을까?

내부에 선언된 원시값은 App 함수가 리렌더링될 때마다 새로 생성됩니다. 그러나 useEffect의 의존성 배열에 포함된 원시값은 Object.is 비교를 통해 이전 값과 동일한지 확인하고, 동일하다면 useEffect는 실행되지 않습니다. 따라서 호출되지 않습니다.

내부에 선언한 참조값은 왜 호출될까?

useEffect의 의존성 배열에 내부에 선언된 참조값을 추가할 경우, 이전값과 Object.is로 비교할때 이전값과 현재값은 동등하지만, 참조값이 달라지기 때문에 같다고 판단되지 않아 useEffect가 실행되고, 따라서 호출이 됩니다.

SSH란 SSH 접속하기 참고자료

SSH란

• SSH란 Secure Shell의 줄임말로, 원격 호스트에 접속하기 위해 사용되는 보안 프로토콜입니다

• 등장배경

  • 기존 원격 접속은 텔넷(Telnet)이라는 방식을 사용했는데, 암호화를 제공하지 않기 때문에 보안상 취약하다는 단점이 있었습니다.

  • 따라서 이를 암호화하는 SSH 기술이 등장했습니다.

  • SSH 클라이언트와 SSH 서버의 관계로 상호작용하면서 SSH 서버가 설치된 운영체제를 제어합니다.

  • 클라이언트와 서버 사이에는 강력한 암호화 방법을 통해서 연결되어 있기 때문에 데이터를 중간에서 가로채도 해석 할 수 없는 암호화된 문자만이 노출됩니다.

  

쉽게 말해서 SSH란 shell 즉 터미널을 이용해서 원격서버와 정보를 안전하게 교환할 수 있는 하나의 방법이라고 볼 수 있습니다.

SSH 접속하기

MAC에서 SSH 접속하기

• 리눅스와 Mac과 같은 Unix 계열의 운영체제는 기본적으로 SSH 클라이언트가 설치 되어 있기 때문에 SSH를 이용하기 위해서 특별한 클라이언트가 필요하지 않습니다.

• 그렇다면 어떻게 사용할까요?

  1. 터미널을 켭니다.
  2. 명령어를 통해 접속합니다. ssh 계정@IP주소 입력 (파란색 박스)
  3. 비밀번호 입력(초록색 박스)
  4. 원격 서버에 접속(노란색 박스)

WINDOW에서 SSH 접속하기

• 윈도우 운영체제에는 SSH 클라이언트가 설치되어 있지 않습니다. 따라서 SSH 클라이언트를 설치해야 윈도우에서 Unix 계열의 운영체제를 제어 할 수 있습니다.

• Xshell, Putty, mobaxterm 등 여러개 중 하나 다운받아서 사용할 수 있습니다.

• 저는 mobaxterm를 통해 진행해보겠습니다. mobaxterm 다운로드 하기

• mobaxterm를 선택한 이유는 SSH뿐 아니라 FTP, SFTP, Telnet, AWS S3 등 여러가지를 사용할 수 있기 때문에 선택했습니다.

• 사용방법
  1. SSH 툴을 실행한다.(저의 경우 mobaxterm 사용)
  2. SSH session을 킨다.
  3. SSH에 로그인한다.
  4. 원격서버에 접속

참고자료

• 생활코딩 SSH
• 가비아 라이브러리

computed 속성 method 속성 computed와 method 차이 참고

computed 속성

• vue에서 데이터 바인딩의 가장 기본 형태는 “Mustache” 구문(이중 중괄호)을 사용한 텍스트 보간을 통해 작성할 수 있습니다.

• 간단한 코드는 템플릿 내에 보간법을 사용해서 작성할 수 있지만, 코드가 비대해지면 문제점이 발생합니다.

1. 가독성 저하
2. 유지보수 어려움

• 그래서 등장한 것이 바로 computed 입니다.

    // 보간법 사용
    <div id="example">
      {{ message.split('').reverse().join('') }}
    </div>


    // computed 사용
    <div id="example">
      {{ reversecMessage }}
    </div>

method 속성

• method 속성 함수는 일반 자바스크립트 함수와 같다고 볼 수 있습니다.

• 즉 vue에서 함수를 사용하는 방법 중 하나로 method를 사용하면 됩니다.

단순히 가독성, 유지보수를 위해 코드를 분리하기 위한 방법은 method, computed 2개가 존재하는데 그럼 computed랑 어떤 차이가 있을까?? 궁금해졌습니다.

computed와 method 차이

• 가장 큰 차이점은 캐싱의 유무입니다.

• method는 캐싱이 되지 않지만, computed는 캐싱이 됩니다.

• computed는 data 변경이 없으면 컴포넌트가 리랜더링이 되어도 함수를 다시 등록하지 않습니다.

• 아래의 사진에서 상태값은 아래와 같이 관리됩니다.

  • 점수 : method
  • 이름 : computed

• 따라서 점수가 올라갈 경우 이름은 캐싱되어 렌더링 되지 않지만, 이름이 변경될 경우 이름, 점수 모두 렌더링 됩니다.

따라서 특별한 이유가 따로 있지 않다면 computed를 사용하는 것이 성능적인 측면에서 더 좋습니다.

특별한 경우

• 그럼 특별한 경우는 뭐가 있을까요?(주관적인 생각)

1. 캐싱을 원하지 않는 상황
2. 인자를 받아서 처리하는 상황
3. 반환값이 없는 경우

캐싱을 원하지 않는 상황

• 사실 이런 경우가 있지 않을까 라는 생각을 하지만, 정확히 어떤 상황인진 잘 모르겠습니다.

인자를 받아서 처리하는 상황

• 아래와 같이 index값이 짝수인 경우만 나타내려고 합니다 > 만약 computed에서 index를 인자로 받아서 처리하려고 하면 아래와 같이 에러가 발생합니다.

• 따라서 아래와 같이 method로 처리해야 됩니다.

반환값이 없는 경우

• 아래와 같이 event Handler의 경우 반환값이 없고, data값을 변경하는 경우 computed로 사용하면 많은 에러를 마주칩니다.

• 따라서 computed가 아닌 method를 사용해야 합니다.

참고

vue 공식문서

고민해보기 코드 재활용

고민해보기

• 개발자마다 좋은 코드의 기준은 다를 수 있지만, 현재 제 생각으로 좋은 코드란 변경하기 쉬운 코드라고 생각합니다. 물론 이 기준이 언제 어떻게 바뀔지는 모르겠지만, 변경하기 쉬운 코드가 나의 야근을 줄여주고, 나의 스트레스를 줄여주고, 나의 귀찮음을 줄여주기 때문입니다.

• 그래서 오늘은 변경하기 쉬운 코드를 잘 작성하기 위해 한 단계 성장하기 위해 고민해 본 부분을 적어보려고 합니다.

• 지금부터 작성하는 코드는 정말 좋은 코드가 맞는지, 굳이 이렇게? 혹은 잘못된 방향으로 작성됐을 수 있습니다. 혹시 이 글을 보신다면 피드백 적극 찬성입니다.

코드 재활용

• 똑같지는 않지만 같은 기능을 하고, 비슷한 UI를 나타내는 부분을 어떻게 재활용할 수 있을까? 고민해 보고 적용해 보려고 합니다.

• 아래의 사진과 같이 비슷하지만, 똑같지는 않은 3개의 팝업이 존재합니다.

공통점

1. 팝업창 열기
2. x버튼 클릭시 팝업창 닫기

차이점

1. 빨간색 팝업 : title이 없음, contents 내용이 다름
2. 초록색 팝업 : title 밑에 실선이 존재, contents 내용이 다름
3. 파란색 팝업 : title 밑에 점선이 존재, contents 내용이 다름

코드 작성

• 공통으로 적용할 컴포넌트에서는 아래와 같이 구성합니다.
  1. title : 선택적으로 props로 받아서 처리
  2. contents : 필수적으로 props로 받아서 처리
  3. x버튼 : ui 및 기능 고정

저는 vue2를 통해 코드를 작성했습니다. 만약 react로 작성한다면 slot 부분은 children을 사용, emit 부분은 props로 setter를 받거나, 전역 상태로 팝업창 상태로 관리하면 될 것 같습니다.

공통 컴포넌트

적용 코드

• title 부분은 css(className)과 title명을 다르게 전달했습니다.
• contents 부분은 너무 길어서 접어놨지만, 내용이 다릅니다.

결과적으로

• 만약 자료실, 자료검색, 자료탐색, 자료..1, 자료...2, 자료..30 총 30개의 팝업을 만들었고, 닫기버튼의 css를 수정해주세요! 라는 요구사항이 추가된다면 30개의 팝업을 다 수정해야하는 문제가 발생할 수 있습니다.

• 물론 엄청 대단한 코드를 작성하진 않았지만 위 코드는 최소한 공통적으로 사용되는 버튼에 관련된 부분을 수정하거나, title 및 contents 분에 공통적으로 수정해야 할 부분이 발생한다면 팝업이 30개든, 300개든, 30000개든 한 번만 수정하면 되기 때문에 많은 시간을 줄여줄 수 있을 것 같습니다.

package.json이란 package-lock.json이란 package.json과 package-lock.json의 차이 참고

오늘 지인 중 한 명이 package.json이랑 package-lock.json 차이가 뭔지 아시나요? 라고 물어보길래 버전 관리를 다르게 하는 것으로 알고 있습니다. 라고 답은 했지만, 확신이 없었습니다. 뭔가 면접 준비하면서 공부했던 것 같은데 기억이 나질 않아 오늘은 이 둘의 차이에 대해 공부해 보고자 합니다.

package.json이란

• package.json이란

• 깨알 영어공부를 위해 해석해보자면

    당신의 패키지에 package.json 파일을 추가하면 다른 사람들이 쉽게 관리하고 설치할 수 있습니다. registry(패키지 저장소)에 등록되는 패키지는 반드시 package.json 파일을 포함해야 합니다
  
    - 프로젝트가 의존하는 패키지 목록을 작성
    - 시맨틱 버전 규칙을 사용하여 당신의 프로젝트 패키지의 구체적인 버전을 명시
    - build를 reproduceible(재현 가능) 하도록 다른 개발자에게 쉽게 공유

• 즉 package.json이란 다른 사람(협업자)들이 배포한 사람이 올린 코드를 쉽게 관리하고 설치할 수 있도록 사용되는 문서입니다.

• 위 글에서 시맨틱 버전 규칙을 사용 하여 구체적인 버전을 명시하라고 했는데, 이게 무슨 의미일까요?

시맨틱 버전 규칙

• 시멘틱 버저닝 이란 패키지의 일반적인 버전의 표현 방식을 의미합니다.

• {MAJOR}.{MINOR}.{PATCH} 형식으로 표기합니다. ex) 1.3.0

  1. MAJOR: 하위호환성이 보장되지 않는 변경사항 발생시 ⇒ 매우 큰 변화, 새로운 버전급 변화 ⇒ 큰 변화가 있으므로 내 코드도 수정해야함

  2. MINOR: 하위호환성 보장 하면서 기능추가 ⇒ 새로운 기능 등 추가되는 경우 예를들어 react hook, class로도 사용 가능하지만 hook이 등장 ⇒ 하지만 현재 내 코드가 망가지진 않음

  3. PATCH: 하위호환성 보장 하면서 버그수정 → 그냥 버그 수정

tilde(~)

• PATCH 버전 내에서 버전이 업데이트 되는 방식을 말합니다.

    ~1.3.0: >= 1.3.0 < 1.4.0
    ~1.5.2: >= 1.5.2 < 1.6.0
    ~2.2: >= 2.2 < 2.3

caret(^)

• 마이너 버전 내에서 버전이 업데이트 되는 방식
• 최신 마이너 버전으로 설치

    ^1.0.2 : >=1.0.2 <2.0
    ^1.0 : >=1.0.0 <2.0
    ^1 : >=1.0.0 <2.0

package.json 확인해보기

• package.json은 위 사진과 같이 구성돼있습니다.

• 보라색 글씨(key) 내부에 { 노란색 글씨 + 버전} 형태로 구성돼있습니다.

• 간단하게 구성을 살펴보겠습니다.

  • name : 프로젝트 이름

  • version : 프로젝트 버전 정보

  • script : npm으로 실행할 수 있는 명령어 모음

  • dependencies : 프로젝트에서 필수로 필요한 패키지 목록

  • devDependencies : 프로젝트에 필수는 아니지만 개발에 도움이 되는 패키지 목록

  • 더 많은 내용은 공식문서 참고해주세요. npm docs

package-lock.json이란

• 공식문서에 아래와 같이 나타나있습니다.

• 너무 길어서 번역기의 도움을 좀 받아보겠습니다.

    package-lock.json 파일은 npm이 node_modules 트리를 수정하거나 package.json을 변경하는 모든 작업에서 자동으로 생성됩니다. 
  이 파일은 생성된 정확한 의존성 트리를 기록하여, 이후 설치 시 중간 의존성 업데이트와 관계없이 동일한 트리를 재현할 수 있도록 합니다.

    이 파일은 소스 코드 저장소에 커밋하는 것이 권장되며, 다음과 같은 목적을 가집니다:

    팀원, 배포 환경, CI(Continuous Integration)에서 동일한 의존성을 설치하도록 보장합니다.
    node_modules 디렉터리를 직접 커밋하지 않고도 이전 상태로 되돌아갈 수 있도록 합니다.
    읽기 쉬운 소스 컨트롤(diff)을 통해 의존성 트리 변경 사항을 쉽게 확인할 수 있도록 합니다.
    이전에 설치된 패키지에 대한 메타데이터 확인을 건너뛰어 설치 프로세스를 최적화합니다.
    package-lock.json 파일의 중요한 특징 중 하나는 배포(publish)할 수 없다는 점입니다. 즉, 최상위 패키지 이외의 위치에서는 무시됩니다.
    이 파일은 npm-shrinkwrap.json과 동일한 형식을 가지며, npm-shrinkwrap.json은 배포가 가능하다는 차이점이 있습니다.
    그러나 npm-shrinkwrap.json은 CLI 도구 배포 또는 프로덕션 패키지 배포와 같은 특정한 경우에만 사용하는 것이 좋습니다.

    만약 루트 디렉터리에 package-lock.json과 npm-shrinkwrap.json이 둘 다 존재하는 경우, package-lock.json은 완전히 무시됩니다.

• 위 글을 정리해보겠습니다.

1. package-lock.json 파일은 아래의 2가지 경우에 자동으로 생성됩니다.

   - node_modules 트리를 수정하는 경우
   - package.json을 변경하는 경우

2. 정확한 의존성 트리를 기록하여, 이후 설치 시 중간 의존성 업데이트와 관계없이 동일한 트리를 재현 -> 즉 구체적으로 정확한 버전을 가지고 있다. 예를들어 3.5~ 3.9버전이 아닌, 3.5.2 버전

• 정리해보면 package-lock.json은 협업하는 개발자들 간의 의존성 버전 충돌을 방지하기 위해 설치된 패키지의 정확한 버전 및 의존성을 기록하는 파일 입니다.

package.json과 package-lock.json의 차이

• 이론은 이해했고, 실제 파일이 어떻게 구성돼있는지 확인해보겠습니다.

• 다시 정리하자면 아래와 같습니다.

• package.json : 다른 사람(협업자)들이 배포한 사람이 올린 코드를 쉽게 관리하고 설치할 수 있도록 사용되는 문서

• package-lock.json : 협업하는 개발자들 간의 의존성 버전 충돌을 방지하기 위해 설치된 패키지의 정확한 버전 및 의존성을 기록하는 파일

• 아래의 사진과 같이 package-lock.json은 구체적인 2.7.16버전으로 기록되지만, package.json은 ^2.6.14 와 같이 범위로 기록된 걸 확인 할 수 있습니다.

의문

• 그럼 왜 이렇게 관리를 하는건가??? 특정 버전으로 고정시키던지, 범위만 지정하면 되지 왜 2개로 관리를 하는걸까??

이유는 -> 유연한 의존성 관리와 일관된 환경 보장이라는 두 가지 목적을 동시에 달성하기 위한 구조입니다.

• 유연한 의존성 관리 의미

1. A가 eslint를 최신 버전으로 다운 받습니다. ex) package.json - ^3.2.0, package-lock.json - 3.2.0
2. eslint에서 3.5.0으로 업그레이드 됐습니다.
3. npm i을 진행하게 되면 같은 ^3.2.0으로 관리하지만, 실제로는 3.2.0 -> 3.5.0 버전이 업그레이드 됩니다. ex) package.json - ^3.2.0, package-lock.json - 3.5.0

- 즉 npm i을 하게 되면 최신 버전을 가져올 수 있습니다.

• 일관된 환경 보장의 의미 -> package-lock.json의 존재 이유

만약 package-lock.json이 존재하지 않는다면 아래의 문제가 발생

1. A, B모두 eslint ^3.2.0 버전으로 관리 
2. eslint가 업데이트가 돼서 3.4.0 버전으로 업그레이드 됨
3. A가 코딩 중 npm i을 진행하게 됐고, 3.4.0 버전으로 사용
4. eslint가 업데이트가 돼서 3.5.0 버전으로 업그레이드 됨
5. B가 코딩 중 npm i을 진행하게 됐고, 3.5.0 버전으로 사용

A는 3.4.0버전
B는 3.5.0버전으로 서로 다른 버전으로 사용하게 된다 -> 일관적이지 않은 환경 발생

따라서 반드시 package-lock.json이 수정되면 코드저장소에 commit을 해줘야합니다.

참고

• chatGPT
• npm docs
• dev_ella

Vue 인스턴스 인스턴스 라이프사이클 훅 참고 자료

Vue 인스턴스

• 모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작합니다.

• Vue 인스턴스를 생성할 때는 options 객체를 전달해야 합니다. 전체 옵션 목록은 API reference에서 확인할 수 있습니다.

main.js

• Cli로 프로젝트를 만든 경우 main.js를 확인해보겠습니다.
  • new Vue({}) 안에 들어가는 객체를 options 객체라고 합니다.
  • 아래의 사진의 경우 render api를 활용하여 App 컴포넌트를 렌더링 하도록 구현

App.vue

• 위 사진에서 연결한 App 컴포넌트를 살펴보겠습니다.
  • Vue에서는 크게 3가지 태그로 구성합니다.
  1. template 태그로 감싼 부분에 HTML 코드를 작성합니다.
  2. script 태그로 들어간 부분에 JS 혹은 vue 코드를 작성합니다.
  3. style 태그로 들어간 부분에 style(css) 코드를 작성합니다.
• main에서 App 컴포넌트를 호출한 것처럼 HelloWorld 라는 컴포넌트를 호출해서 사용합니다.

HelloWorld.vue

• App.vue 컴포넌트와 마찬가지로 template, script, style 3가지 태그를 사용하여 나타냅니다.

Vue 인스턴스 구성

• Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성됩니다.

• 만약 ToDoList를 구성하게 된다면 아래의 사진처럼 트리를 구성할 수 있습니다.

인스턴스 라이프사이클 훅

• 위 사진은 공식문서에 나타난 인스턴스 라이프사이클에 대한 다이어그램입니다.
• 위에 나타난 라이프사이클 훅은 아래와 같습니다.
  • beforeCreate
  • created
  • beforeMount
  • mounted
  • updated
  • beforeDestroy
  • destroyed
• 하나씩 알아보도록 하겠습니다.

beforeCreate

• 컴포넌트가 생성되기 직전 (data, props, computed, methods가 아직 설정되지 않음)
• 주로 사용하지 않음 (대부분 created에서 처리 가능)

  created

• 컴포넌트가 생성된 직후 (data, props, computed, methods가 설정됨)
• 비동기 데이터 가져오기 (API 호출 등), 초기 데이터 설정, 이벤트 리스너 등록
• 주로 사용하는 곳
  • API 요청 (fetch, axios)
  • 데이터 초기화
  • 이벤트 리스너 등록 (window.addEventListener)

beforeMount

• 템플릿이 렌더링되기 직전 (DOM에 연결되기 전)
• 일반적으로 잘 사용되지 않음 (mounted에서 처리 가능)

  mounted

• 컴포넌트가 DOM에 마운트된 후 (화면에 렌더링 완료됨)
• DOM 접근이 필요할 때 (ex. querySelector), 외부 라이브러리 연동
• 주로 사용하는 곳
  • DOM 조작 (document.querySelector, this.$refs)
  • 외부 라이브러리 초기화 (예: 차트, 슬라이더)
  • setTimeout, setInterval 같은 타이머 설정

    updated

• 반응형 데이터가 변경된 후 DOM이 다시 렌더링될 때
• 데이터 변경 후 추가적인 작업이 필요할 때 사용
• 주로 사용하는 곳
  • 데이터 변경 후 특정 DOM을 조작할 때
  • 변경된 데이터를 기반으로 UI를 업데이트할 때
• 🚨 주의 : updated에서 데이터를 변경하면 무한 루프에 빠질 수 있음 → watch를 활용하는 것이 좋음

beforeDestroy

• 컴포넌트가 소멸되기 직전
• 이벤트 리스너 제거, 타이머 정리, 웹소켓 연결 해제 등
• 주로 사용하는 곳
  • setInterval, setTimeout 해제
  • window.addEventListener 제거
  • WebSocket 연결 해제

    destroyed

• 컴포넌트가 소멸된 후
• beforeDestroy에서 정리를 못 한 경우 최종 정리
• 보통 beforeDestroy에서 처리 가능하므로 잘 사용하지 않음

결론

• 크게 4가지를 주로 사용할 수 있다.
  • 데이터 초기화 & API 요청 → created
  • DOM 접근 & 외부 라이브러리 연동 → mounted
  • 데이터 변경 후 UI 업데이트 → updated
  • 이벤트 리스너 정리 & 타이머 해제 → beforeDestroy

vue 라이프 사이클 직접 사용해보기

• 크게 created, mounted, beforeDestroy 3가지만 사용해보겠습니다.

• 아래와 같이 script 태그 내부에서 사용할 수 있습니다.

• 그렇다면 출력은 어떻게 될까요?

  • create -> mounted -> beforeDestroy 순서로 출력이 예상됩니다.

• beforeDestroy는 화면에 나타나지 않습니다. 컴포넌트가 소멸되기 직전에 실행되기 때문일까요?

• 그러면 한번 더 확인해보겠습니다.

• created -> mounted -> beforeDestroy -> created -> mounted의 순서가 아닌 created -> mounted -> created -> beforeDestroy -> mounted 순서로 나타납니다.

• GPT에게 물어본 결과 비동기 렌더링 또는 최적화된 DOM 패치 방식 때문이라고 합니다.

참고 자료

• vue 공식문서
• chat GPT

Vue 시작하기 CLI와 Npm 차이 CLI의 package.json 구성

Vue 시작하기

Vue란

• 공식문서에 따르면 아래와 같습니다.

  Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다.

vue 사용하는 방법 3가지

• 시작하기 전에 vscode, npm, nodeJs는 다운로드 받아주세요.
  • vscode
  • NodeJs
• vue를 사용하는 방법은 크게 3가지가 존재합니다.

1. CDN에서 Vue 사용
2. NPM 사용
3. Vue CLI

1. CDN에서 Vue 사용

• CDN이란 Content Delivery Network의 약자로서 지리적인 제약 없이 전 세계 사용자에게 빠르고 안전하게 컨텐츠 전송을 할 수 있는 기술

• script 태그를 통해 Vue를 사용할 수 있습니다.

• CDN 사용시 장점은 CDN에서 Vue를 사용할 때는 "빌드 단계"가 없습니다. 이렇게 하면 설정이 훨씬 간단해지고 정적 HTML을 향상시키거나 백엔드 프레임워크와 통합하는 데 적합합니다.

• CDN 사용시 단점은 SFC(Single-File Component) 구문을 사용할 수 없습니다. 즉 코드를 파일별로 분리할 수 없습니다.

• 따라서 단순히 테스트 용도가 아닌 프로젝트를 구성하기 위해서는 CDN 보다는 다른 방법을 사용하는게 더 효율적으로 코드를 관리할 수 있습니다.

CDN 사용방법

1. HTML 파일을 만들어 줍니다.
2. CDN script 코드를 추가해줍니다.
3. vue를 사용합니다.

2. NPM 사용

• npm으로 vue를 다운받을 경우 CDN과 달리 단일 파일 구성 요소(SFC)를 사용할 수 있습니다.

NPM 사용 방법

1. npm으로 vue를 최신 버전을 다운받는다.
2. 여러가지 질문에 답을 하여 프로젝트를 만든다.
3. 프로젝트로 경로를 이동 후 실행한다.

• 명령어 순서

1. npm create vue@latest
2. cd your-project-name
3. npm install
4. npm run dev

3. Vue CLI

• 아마 대부분의 프로젝트는 CLI를 통해 프로젝트를 만들고 실행 할 것입니다.

• 왜냐하면 CLI를 통해 프로젝트를 생성하면 webpack 기반의 빌드 도구, 종속성, 플러그인, 프로젝트 파일 구조 등 초기 설정에 필요한 많은 부분을 미리 제공해주기 때문입니다.

• 만약 webpack이 아닌 Vite를 사용하는 등 따로 설정하는게 귀찮다. CLI로 설정된 부분으로 사용해도 큰 문제가 없다 라고 한다면 CLI를 사용해봐도 좋을 것 같습니다.

프로젝트 생성

1. cli를 다운받는다.
2. project를 생성한다.

• 명령어 순서

1. npm install -g @vue/cli
2. vue create [프로젝트명]
3. 생성한 프로젝트로 이동 후 실행

CLI와 NPM 차이

• 설치 하고 보니 NPM으로 다운 받는 것과 CLI의 큰 차이가 없는 것 같다는 생각이 듭니다.
• 아래의 vue-project는 npm방법이고, vue-projectt는 CLI입니다.

....? 뭐야 비슷한데? 라고 생각하여 좀 더 찾아봤습니다.

package.json

• coreJs 및 eslint, template-compiler 등 몇 가지가 더 설치돼있습니다.

뭐야 webpack이 설치가 안돼있는데?

• 공식 문서에는 분명 webpack이 설치돼있다는데 왜 없지?? -> 그래서 node_modules 폴더를 찾아봤습니다.

  node_modules 폴더란 프로젝트에서 사용하는 외부 라이브러리 및 패키지, 그리고 해당 패키지의 모든 종속성을 저장하는 디렉터리입니다. - 출처 : Chat GPT

• 아래와 같이 node_modules안에 존재하고 있습니다.

• webpack 뿐 아니라 CLI로 설치할 경우 babel plugin, eslint, postCSS 등 훨씬 많은 폴더들이 존재합니다.

CLI의 packagejson 구성

• NPM 혹은 CLI로 폴더를 다운받으면 아래의 사진과 같이 Vue를 사용할 수 있습니다.

• Vue를 시작하기에 앞서 package.json에 뭐가 설치돼있는지 확인해보겠습니다.

• core-js : Core-js는 여러 버전에 걸쳐 브라우저 호환성을 제공하는 JavaScript 라이브러리 입니다.

• babel : Babel은 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 코드로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스컴파일러입니다.

• eslint : 코드 품질을 개선하고 런타임에 버그가 발생하지 않도록 사전에 버그를 수정하는 데 도움이 되는 linter입니다.

• vue-template-compiler : Vue.js의 템플릿을 JavaScript 렌더링 함수로 변환하는 컴파일러입니다.

• eslintConfig : eslint 설정을 하는 코드입니다. package.json 내부 보다는 .eslintrc.js 또는 .eslintrc.json 파일로 분리해서 작성 하는 게 더 적절할 것 같습니다.

• browserslist : 프로젝트에서 지원할 브라우저의 범위를 정의하는 설정입니다. Babel, Autoprefixer, PostCSS, ESLint, Webpack, Vue CLI, React 등의 도구에서 사용되어 브라우저 호환성을 자동으로 관리하는 데 도움을 줍니다. 이 코드도 따로 .browserslistrc 파일로 분리하면 좋을 것 같습니다.

  • "> 1%" : 세계에서 사용 비율이 1% 이상인 브라우저를 지원합니다.

  • "last 2 versions" : 각 브라우저의 최신 2개 버전을 지원합니다. 예를들어 크롬 최신 버전이 120이면 120, 119가 지원됨

  • "not dead" : 공식적으로 지원이 중단된(Dead) 브라우저는 제외합니다. 여기서 Dead의 기준은 아래의 2가지입니다.

    1. 2년 이상 업데이트가 없는 브라우저
    2. 사용 비율이 0.5% 미만인 IE 10, BlackBerry, Baidu 등은 제외됨

참고 자료

• vue 공식문서
• Chat GPT
• corejs

• git stash란
• 사용 이유
• git stash 명령어 모음
• git stash 주의 사항
• 참고

git stash란

• git stash는 작업 복사본에 적용한 변경 사항을 일시적으로 저장(또는 스태시)하여 다른 작업을 하다가 다시 돌아와서 나중에 변경 사항을 다시 적용할 수 있도록 합니다. 스태시는 컨텍스트를 빠르게 전환하고 다른 작업을 수행해야 하지만, 코드 변경을 진행하고 있고 커밋할 준비는 되지 않은 경우 편리합니다.출처 ATLASSIAN

• 쉽게 말하면 현재 작업중인 코드를 일시적으로 저장하는 방법 중 하나.

사용 이유

• stash의 사용 이유는 컨텍스트를 빠르게 전환하고 다른 작업을 수행해야 하지만, 코드 변경을 진행하고 있고 커밋할 준비는 되지 않은 경우 편리합니다. 입니다.
• 말이 너무 어려운 것 같은데, 크게 2가지 상황에 자주 사용합니다.

1. 현재 작업중인 경우 다른 사람의 branch로 checkout 할 경우
2. 현재 작업중인 경우 이전 log로 checkout 할 경우

stash 사용 예시

1. 현재 코드를 작성중입니다.

2. 현재 코드 작성 중 다른 사람의 PR 혹은 여러가지 이유로 다른 브랜치로 이동하려고 하면 아래와 같은 문구가 나타납니다.

3. commit을 하기에는 현재 작성중인 코드가 완성되지 않았기에 임시 저장 용도로 stash를 사용합니다.

• stash 저장 명령어 : git stash save 'stash message'
• stash 저장 list 확인 명령어 : git stash list

4. 저장 후 다른 branch로 이동 가능합니다.

5. 다시 stash 저장된 코드 불러오는 방법

• stash 코드 불러오는 명령어 : git stash apply

git stash 명령어 모음

• stash에 저장되는 코드는 stack 자료구조로 가장 마지막에 저장된 코드가 가장 최신으로 저장됩니다.
• 아래와 같이 1, 2, 3 순서로 저장했지만, stack 자료구조로 세번째 저장된 stash 코드가 가장 최신으로 들어갑니다.

• 명령어 모음
  • git stash list : stash된 list 목록 확인
  • git stash show : stash 된 코드 미리보기
  • git stash pop : 가장 최근 stash 불러오기 && stash에서 제거
  • git stash apply : 가장 최근 stash 불러오기 && stash에 저장
  • git stash save : stash에 코드 저장
  • git stash clear : stash에 저장된 코드들 모두 제거

git stash list

• git stash list : stash된 list 목록 확인

git stash show

• 가장 최신 코드만 볼 수 있습니다.
• git stash show : stash 된 코드 미리보기
• git stash show -p : 좀 더 구체적으로 보려면 -p 옵션을 추가해줍니다.
  

git stash pop

• git stash pop : 가장 최근 stash 불러오기 && stash에서 제거

git stash apply

• git stash apply : 가장 최근 stash 불러오기 && stash에 저장

git stash save

• git stash save : stash에 코드 저장

git stash clear

• git stash clear : stash에 저장된 코드들 모두 제거

git stash 주의 사항

• stash를 사용할 때만 해당되는 내용은 아니지만, 실제로 stash 한 뒤 코드를 불러왔는데, 작업중인 코드가 사라진 경우가 있었습니다. 😭😭😭😭😭😭😭😭

• 그 문제는 바로 저장하지 않은 뒤 stash를 한 경우 입니다.

저장하지 않은 코드 stash 해버리기(코드 날려먹기)

1. 코드를 작성합니다.

2. git add . 명령어를 통해 stage area로 이동합니다.

3. git stash save '중요한 코드 저장' 명령어를 통해 stash에 저장합니다.

4. git stash apply 명령어를 통해 stash에 저장한 코드를 불러옵니다.

5. 아래와 같이 파일은 있는데 코드가 사라지는 아주 큰 문제가 발생할 수 있으니 stash 하기 전 반드시 저장했는지 여러번 확인 해야합니다.🚨

참고

• atlassian git tutorials
• git 공식문서

• JSX란
• 바벨이란
• JSX에서 자바스크립트 사용
• JSX 변환 원리

JSX란

• JSX에 대해 자세히 알 고 싶다면 여기서 확인할 수 있습니다 -> JSX
• JSX란 간단히 정리하자면 JSX는 XML과 유사한 내장형 구문이며, 자바스크립트의 확장 문법이지만 자바스크립트 표준 문법 x
• 자바스크립트 표준 문법이 아니기 때문에 Babel과 같은 트랜스파일러로 변환을 해줘야 동작합니다.

바벨이란

• 바벨 공식문서

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

Babel은 주로 ECMAScript 2015+ 코드를 현재 및 구형 브라우저 또는 환경에서 호환 가능한 JavaScript 버전으로 변환하기 위해 사용되는 도구 체인입니다. Babel이 할 수 있는 주요 작업은 다음과 같습니다:

• 간단히 요약하면 최신 JS코드를 구형 JS코드로 변환해주는 컴파일러입니다.

• 또한 Babel은 JSX 구문을 변환할 수 있습니다

• Babel 변환 코드 사이트

• 아래와 같이 변환됩니다.

jsx에서 자바스크립트 사용

• 우선 JSX에서는 중괄호({})를 작성하고 안에 자바스크립트 문법을 사용할 수 있습니다.

• 하지만 자바스크립트 문법중에서도 표현식만 사용할 수 있습니다.

• 표현식이란 값으로 평가될 수 있는 문입니다.

• 표현식 예시

      // 숫자, 문자열 등 값 자체 표현식
      5;           // 숫자 리터럴 (값: 5)
      "Hello";     // 문자열 리터럴 (값: "Hello")

      // 연산을 통해 값을 생성하는 표현식
      5 + 3;       // 산술 연산 표현식 (값: 8)
      a * 2;       // 변수와 연산자를 통한 표현식 (값: a의 값에 따라 달라짐)
      true && false; // 논리 연산 표현식 (값: false)

      // 함수 호출 표현식
      Math.max(1, 2); // 함수 호출 표현식 (값: 2)

      // 객체나 배열도 표현식으로 간주됩니다
      [1, 2, 3];      // 배열 리터럴 (값: 배열)
      { x: 1, y: 2 }; // 객체 리터럴 (값: 객체)

• 아래와 같이 표현식의 경우 변환 됩니다.

• 표현식이 아닌 경우 예시

      // 변수 선언은 표현식이 아닙니다
      let x = 10;        // 변수 선언문 (값이 아닌 선언)

      // 조건문과 반복문도 표현식이 아닙니다
      if (x > 5) {       // 조건문 (값을 생성하지 않음)
        console.log(x);
      }

      for (let i = 0; i < 5; i++) {  // 반복문 (값을 생성하지 않음)
        console.log(i);
      }

      // 함수 선언도 표현식이 아닙니다 (함수 선언문)
      function greet() { // 함수 선언문 (값을 생성하지 않음)
        return "Hello!";
      }

• 아래와 같이 표현식이 아닌경우 에러가 발생합니다.

JSX 변환 원리

• 표현식을 사용해야 하는 이유는 위 사진에 나와 있습니다.
• 변환된 코드에서 children의 key에 대한 value 위치에 중괄호{}로 감싼 코드가 JavaScript 객체의 value로 들어가기 때문에, JavaScript 객체에서는 값이 아닌 다른 것은 value로 사용할 수 없습니다.

• 예전에는 그냥 JSX문법이니까 중괄호로 감싸서 사용했었는데, 이런 원리를 알게 되니 기본기가 중요하다는 생각이 들었고, 오늘도 조금은 기본기가 튼튼해진 것 같습니다.

• 제어 컴포넌트란
• 비제어 컴포넌트란
• 참고

제어 컴포넌트란

• 제어 컴포넌트란 우선 리액트 공식페이지를 살펴보겠습니다.

Form Tag Elements

• form tag Elements(input, textarea)는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. => form tag Elements는 value attribute를 통해 자체적으로 data를 갖습니다.

• 여러 form tag Elements 중 input을 예로들어 보겠습니다.

• 아래의 사진과 같이 t, te, tes, test를 입력하면 각 입력값에 따른 상태값을 관리하고 업데이트 합니다.

• 사용자가 입력한 값을 value attribute에 저장 => value attribute는 Dom에 존재 => 즉 Input을 통해 사용자의 입력값(state)는 Dom에 저장됩니다.

신뢰 가능한 단일 출처

• 리액트 공식 문서에 나와있는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합 이라는 말이 참 어렵습니다.

• 신뢰 가능한 단일 출처란 하나의 상태는 한 곳에서만 존재해야 한다. 라는 의미입니다.

• 즉 어떤 state가 여러 컴포넌트에서 사용 될 경우에도 한곳에서만 존재해야 합니다. => 한곳에서 관리하고 props로 전달 or 전역상태로 관리(redux, recoil...)

• 그래도 어렵다구요? 코드로 예시를 보겠습니다. 아래의 코드는 리액트에서 useState로 input값을 관리하는 일반적인 방법입니다.

• 신뢰 가능한 단일 출처에 대해 알아보겠습니다.
  • 아래의 코드는 inputValue라는 useState와 e.target.value를 동기화(?) 시켜줌으로서 한곳에서만 관리하도록 합니다.

• 하지만 아래의 경우 input의 value attribute와 inputValue라는 변수, 두 곳에서 관리가 되기 때문에 신뢰 불가능한 2개의 출처 라고 할 수 있습니다.

React가 관리하는 제어 컴포넌트

• 따라서 다시 React 공식문서를 보면 React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다

• input의 value attribute값과 setState()를 통해 값을 통일시켜 항상 최신의 값으로 일치가 보장됩니다.

제어 컴포넌트의 장단점

• 매번 최신화 된 상태값을 관리할 수 있다는 장점이 있지만 상태값이 변경됨에 따라 re-rendering이 발생하므로 비용이 많이드는 단점이 있습니다.

비제어 컴포넌트란

• 비제어 컴포넌트 또한 리액트 공식페이지를 살펴보겠습니다.

• 공식 페이지에서 말했듯이 ref를 사용해서 관리하는게 일반적인 형태입니다.

• ref를 통해 Dom 자체에서 폼 데이터가 다루어집니다.

• ref의 경우 순수 javascript 객체이고, React의 마운트 시점에 ref의 current에 element를 담고, current 값이 바뀌어도 리렌더링을 하지 않는 특성이 있습니다.

• 즉 React가 Form의 입력값을 제어하지 않고, 값이 항상 일치함을 보장하지 않습니다.

제어 컴포넌트와 비제어 컴포넌트 비교

• 아래의 표를 참고하여 상황에 맞게 적절하게 사용하면 될 것 같습니다.
• 한 가지를 예로들면 input에 값을 입력 하는 것과 동시에 유효성을 나타내고 싶으면 제어컴포넌트, 제출된 후 유효성을 나타내고 싶다면 비제어 컴포넌트를 사용하면 될 것 같습니다.
• 참고로 React-Hook-Form을 사용하면 제출 전엔 비제어컴포넌트 처럼 유효성 검사를 하지 않다가 제출 이후로 제어컴포넌트 처럼 입력값에 따라 실시간으로 바뀝니다.

정리

• 제어 컴포넌트

  • 리액트가 값을 관리합니다. => React에 의해 제어됩니다.
  • 사용자의 입력이 항상 state로 push됩니다.
  • 리액트가 값이 항상 일치함을 보장합니다.
  • Re-rendering이 발생합니다.

• 비제어 컴포넌트

  • DOM이 값을 저장합니다. => React가 제어하지 않습니다.
  • 입력 값이 필요할 때, element에서 pull
  • 값이 항상 일치함을 보장하지 않음
  • Re-rendering이 발생하지 않음

참고

• 후이의 테코톡
• 세인의 테코톡
• goshacmd