Component-Driven Development(CDD)는 UI 컴포넌트 단위로 설계·개발·검증하는 개발 방식을 말한다.

화면을 먼저 만들고, 나중에 쪼개는 방식 ❌ 작은 UI 컴포넌트를 먼저 만들고 조합해서 화면을 구성하는 방식 ✅

마치 레고 블록을 하나씩 조립해서 거대한 성을 만드는 것

CDD 를 사용했을때 장점은 ?

• 재사용성 : 중복 코드 최소화
• 독립적 개발 : 데이터가 준비되어있지 않아도 UI를 미리 만들고 테스트가 가능
• 유지보수 용이 : 특정 요소의 스타일을 바꾸어야 할때, 해당 컴포넌트만 수정하여 전체 서비스에 적용

기존방식(Page-Driven) vs CDD 방식

기존방식 코드

// MainDashboard.jsx (페이지 중심)
function MainDashboard() {
  return (
    <div className="dashboard-container">
      {/* 검색 바 영역: 페이지 안에서 직접 정의 */}
      <header style={{ display: 'flex', padding: '10px' }}>
        <input type="text" placeholder="검색어를 입력하세요" style={{ border: '1px solid gray' }} />
        <button style={{ backgroundColor: 'blue', color: 'white' }}>검색</button>
      </header>

      {/* 컨텐츠 영역 */}
      <main>
        <h1>대시보드 메인</h1>
        <p>환영합니다!</p>
      </main>
    </div>
  );
}

CDD 방식의 코드 (Atomic 방식)

1. 가장 작은 단위(Atoms)

// src/components/atoms/Button.jsx
export const Button = ({ label, color }) => (
  <button style={{ backgroundColor: color, color: 'white' }}>{label}</button>
);

// src/components/atoms/Input.jsx
export const Input = ({ placeholder }) => (
  <input type="text" placeholder={placeholder} style={{ border: '1px solid gray' }} />
);

2.원자요소 (Molecules)

// src/components/molecules/SearchBar.jsx
import { Button } from '../atoms/Button';
import { Input } from '../atoms/Input';

export const SearchBar = () => (
  <div style={{ display: 'flex', gap: '5px' }}>
    <Input placeholder="검색어를 입력하세요" />
    <Button label="검색" color="blue" />
  </div>
);

3.Page 에서의 조합

// src/pages/MainDashboard.jsx
import { SearchBar } from '../components/molecules/SearchBar';

function MainDashboard() {
  return (
    <div className="dashboard-container">
      <header>
        <SearchBar /> {/* 조립만 하면 끝! */}
      </header>
      <main>
        <h1>대시보드 메인</h1>
      </main>
    </div>
  );
}

실전 사용 예시: Atomic Design 패턴

저는 CDD를 실천하기 위해 아토믹 디자인(Atomic Design) 패턴을 주로 사용합니다. 이 패턴은 UI를 화학적 단위로 쪼개어 관리합니다.

1. Atoms(원자): 버튼, 입력창, 라벨처럼 더 이상 쪼갤 수 없는 최소 단위
2. Molecules(분자): 원자들을 조합한 기능 단위 (예: 검색창 = 입력창 + 버튼)
3. Organisms(유기체): 분자와 원자를 조합한 복잡한 섹션 (예: 헤더, 내비게이션 바)
4. Templates(템플릿): 데이터가 없는 레이아웃 구조
5. Pages(페이지): 실제 데이터가 주입되어 완성된 최종 화면

저는 프로젝트를 진행할 때 Templates까지를 순수한 UI 레벨로 두려고 노력합니다. 예외도 있지만..😂 Templates: 데이터가 어떻게 보여야 하는지, 컴포넌트들이 어디에 배치되어야 하는지 등 'UI 구조'만을 담당합니다. (Props로 데이터를 받기만 함) Pages: 실제 API 호출, 상태 관리(State), 데이터 가공 등의 '비즈니스 로직'을 담당하여 그 결과를 Template으로 전달합니다.

마무리

요즘은 AI 도구를 활용한 '바이브 코딩(Vibe Coding)'이 대세가 되면서, 명령어 한 줄로 페이지 전체를 뚝딱 만들어낼 수 있는 시대가 되었습니다. 저 또한 AI에 의존하다 보니, 어느덧 차근차근 컴포넌트를 설계하던 CDD의 원칙을 조금씩 소홀히 하고 있지는 않았나 하는 반성을 하게 됩니다..😭 AI는 당장 돌아가는 '통코드'를 짜주는 데는 능숙하지만, 그 코드가 우리 프로젝트의 구조에 맞는지, 재사용성이 고려되었는지까지 완벽하게 챙겨주지는 못합니다. 결국 AI로 작업할수록 결과물은 빠르게 나오지만, 역설적으로 컴포넌트 간의 경계가 모호해지고 유지보수가 어려워지는 '기술 부채'가 쌓이는 기분도 듭니다.

이번 포스팅을 정리하며 다시금 다짐해 봅니다.

"AI는 강력한 엔진이지만, 설계도(CDD/Atomic Design)를 그리는 것은 여전히 개발자의 몫이다."

그래서 앞으로는 AI와 협업할 때 나만의 'CDD 가이드라인'을 더 명확히 전달해 보려 합니다. 예를 들어, AI에게 코딩 룰을 설정할 때 "모든 UI는 아토믹 패턴에 따라 구현해 줘"라거나 "Templates와 Pages의 책임을 엄격히 분리해 줘" 같은 프롬프트를 활용하는 것이죠

속도에 매몰되어 CDD의 본질을 놓치기보다, AI를 활용해 더 정교한 컴포넌트를 더 빠르게 만드는 방식으로 나아가야 할 것 같습니다.

CDD를 정리하다보니 Storyboo이라는 도구를 알게되었습니다. 이것도 한번 사용해보고, 포스팅을 해보고자 합니다.

+탭도 하나 구매했는데 탭으로도 개발 작업 할 수 있으면 편하겠다 싶었다..

Gitpod 알아보기!

Gitpod은 GitHub, GitLab, Bitbucket 등 Git 기반의 모든 저장소(Repository)를 클릭 한 번으로 완벽하게 구성된 개발 환경으로 만들어주는 서비스이다. 웹 브라우저만 있다면 언제 어디서든 코드를 작성하고 실행하며 협업할 수 있도록 돕는다.

1. 왜 Gitpod이 필요한가? (등장 배경 및 해결하는 문제)

전통적인 개발 환경은 다음과 같은 문제점들을 가지고 있었다:

• 환경 설정의 번거로움: 새로운 프로젝트를 시작할 때마다 필요한 도구, 라이브러리, 의존성 등을 일일이 설치하고 설정해야 했다. 이는 많은 시간과 노력을 소모하며, 때로는 예상치 못한 오류를 유발한다.
• "내 컴퓨터에서는 잘 되는데?" (환경 불일치): 팀원마다 다른 운영체제나 개발 도구 버전을 사용하면서 발생하는 환경 불일치 문제는 디버깅을 어렵게 하고 생산성을 저해한다.
• 자원 제약: 고사양의 개발 환경이 필요할 경우 개인 컴퓨터의 성능 제약에 부딪히곤 한다.
• 이동성의 한계: 특정 컴퓨터에 개발 환경이 종속되어 있어 다른 장소나 기기에서는 작업하기 어려웠다.

Gitpod은 이러한 문제들을 '클라우드 기반의 일관된 개발 환경'을 제공함으로써 해결한다.

2. Gitpod의 핵심 기능 및 특징

• 클릭 한 번으로 즉시 시작하는 개발 환경 (Instant Dev Environments):
  • 어떤 Git 저장소든 URL 앞에 gitpod.io/#를 붙이거나 Gitpod 대시보드를 통해 클릭 한 번이면, 해당 프로젝트에 필요한 모든 도구와 의존성이 미리 설정된 개발 환경이 몇 초 내에 준비된다.
• 사전 빌드 (Prebuilds):
  • .gitpod.yml 파일에 워크스페이스 설정(의존성 설치, 빌드 명령 등)을 정의하면, Gitpod은 코드가 변경될 때마다(예: Git Push) 워크스페이스를 미리 빌드해 놓는다. 덕분에 개발자가 환경을 열자마자 코딩을 시작할 수 있다.
• 일시적인(Disposable) 워크스페이스:
  • 각 워크스페이스는 독립적이며, 작업이 끝나면 쉽게 버릴 수 있다. "깨끗한 상태"에서 다시 시작하거나, 여러 기능을 동시에 개발할 때 각기 다른 환경을 활용하기 용이하다.
• 브라우저 기반의 VS Code IDE:
  • Gitpod은 강력한 VS Code를 웹 브라우저에서 사용할 수 있도록 제공한다. 익숙한 단축키, 확장 프로그램, 터미널 등을 웹에서 그대로 경험할 수 있다.
• 협업 기능:
  • 팀원들과 동일한 개발 환경을 공유하고, 실시간으로 함께 코드를 편집하며 페어 프로그래밍을 할 수 있다.

3. Gitpod을 사용하면 좋은 점

• 설정 시간 제로: 더 이상 개발 환경 설정에 시간을 낭비하지 않고, 바로 코드 작성에 집중할 수 있다.
• "Works on my machine" 문제 해결: 모든 팀원이 동일하고 일관된 클라우드 개발 환경에서 작업하므로 환경 불일치로 인한 문제가 사라진다.
• 어디서든 개발 가능: 웹 브라우저만 있다면 어떤 컴퓨터(저사양 노트북, 태블릿 등)에서도 모든 기능을 갖춘 개발 환경을 이용할 수 있다.
• 강력한 클라우드 자원 활용: 필요에 따라 고성능의 CPU와 RAM이 할당되므로, 복잡한 빌드나 테스트도 빠르게 처리할 수 있다.
• 온보딩 가속화: 새로운 팀원이 프로젝트에 합류할 때, 복잡한 환경 설정 가이드 없이 Gitpod 워크스페이스만 공유하면 바로 개발을 시작할 수 있다.

Gitpod 적용해보기 !

1. Gitpod 접속후 Dashboard 를 누른뒤 접속

작업중인 Repository 를 연결하고, 나는 Vscode 로 설정했다

사양을 선택하고 Continue 를 통ㅇ해 생성 하면..

_쉽게는 안된다..😩 _

2. 권한 부여

권한문제인것 같은데 메일을 확인해보니 third-part 를 허용해줘야된다고한다 링크를 들어가서 Request 버튼 딸깍 하니 문제가 해결되었다

3. 접속

Workspace를 보면 연결된 목록이나오고 접속해보면 브라우저에서 vscode 화면이 나온다 👍

4. 테스트

// helloworld.js
import express from 'express';
import dotenv from 'dotenv'; // .env 파일에서 환경 변수를 로드하기 위해 사용

dotenv.config();

const app = express();
const port = process.env.PORT || 3000;

// JSON 요청 본문을 파싱하기 위한 미들웨어
app.use(express.json());
// URL-encoded 요청 본문을 파싱하기 위한 미들웨어
app.use(express.urlencoded({ extended: true }));

// 기본 경로 (루트)에 대한 GET 요청 처리
app.get('/', (req, res) => {
  res.send('Hello World! This is the root of the sanner_worker.');
});

// /helloworld 경로에 대한 GET 요청 처리
app.get('/helloworld', (req, res) => {
  res.send('Hello World from /helloworld API!');
});

// 서버 시작
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
  console.log(`Access it at: http://localhost:${port}`);
  console.log(`Or via Gitpod URL once exposed.`);
});

대충 hello world 코드를 작성해서

pm2 start helloworld.js

실행을 해보면

잘실행이 된다👏👏👏

.gitpod.yml

Gitpod 워크스페이스에서 웹 서버나 API 서버 등을 실행할 때, 이 서버에 외부에서 접속하려면 포트를 적절히 설정해야 한다. .gitpod.yml 파일의 ports 섹션은 워크스페이스 내에서 열리는 포트들을 Gitpod이 어떻게 다룰지 정의한다.

1. ports 설정 예시

ports:
  - port: 3000          # 필수: 서버가 사용하는 포트 번호를 명시한다. (예: Node.js 앱)
    onOpen: open-browser # 선택: 워크스페이스 시작 시 이 포트에 대해 Gitpod이 취할 동작을 지정한다.
    visibility: public  # 선택: 이 포트로 열리는 URL의 접근 권한을 설정한다. (기본값은 'private')

  - port: 8080          # 다른 서버(예: 개발용 프론트엔드 서버)가 사용하는 포트
    onOpen: open-preview # IDE 내에서 미리보기 패널로 연다.
    visibility: private # Gitpod에 로그인한 사용자만 접근을 허용한다.

2. ports 옵션 상세 설명

ports 섹션 아래 각 포트는 여러 옵션을 가질 수 있다.

• port (필수)

  • 설명: 워크스페이스 내에서 실행되는 애플리케이션이 실제로 사용하는 포트 번호를 지정한다. Gitpod은 이 번호를 통해 내부 포트를 외부 URL과 연결한다.
  • 예시: 3000, 8080, 5173 등.

• onOpen (선택)

  • 설명: 워크스페이스가 열릴 때 Gitpod이 해당 포트에 대해 어떤 동작을 할지 지정하는 옵션이다.
  • 사용 가능한 값:
    • open-browser: 새 웹 브라우저 탭을 열어 해당 포트의 URL로 접속시킨다. (기본값)
    • open-preview: Gitpod IDE 내부에 분할 화면으로 미리보기 패널을 열어준다. 간단한 웹 앱 미리보기에 유용하다.
    • notify: 포트가 열렸다는 알림만 표시한다. 사용자가 직접 클릭하여 접속할 수 있다.
    • ignore: 아무런 동작도 하지 않는다. 포트는 열리지만, Gitpod이 자동으로 사용자에게 보여주거나 알리지 않는다.

• visibility (선택)

  • 설명: 이 포트로 생성되는 외부 URL의 접근 권한을 설정한다.
  • 사용 가능한 값:
    • public: 인터넷상의 누구나 이 포트의 URL에 접근할 수 있다. (예: https://3000-워크스페이스ID.gitpod.io) 디버깅이나 외부 테스트를 위해 일시적으로 사용된다.
    • private: Gitpod에 로그인한 사용자만 이 포트의 URL에 접근할 수 있다. 보안상 더 권장되는 설정이며, 팀원 간 공유에 적합하다. (기본값)
    • private-internal: 워크스페이스 내부에서만 접근 가능하다. 외부로 노출되지 않는다. 주로 내부 서비스 간 통신이나 백그라운드 프로세스에 사용된다.

이 설정들을 통해 Gitpod 워크스페이스의 네트워크 환경을 유연하게 제어할 수 있다. 특히 visibility 옵션은 보안과 직접적으로 연관되므로 신중하게 선택하는 것이 중요하다.

마치며

Gitpod 연결해야지 해야지 했었는데... 막상 해보니 금방하기도 했고 재미있고 유익했던것 같다 시간이되면 Github Action 같은것도 같이 연동해서 환경을 자동적으로 세팅할 수 있게 해봐야겠다

자바스크립트 변수 네이밍 규칙에 대하여 정리해보자 !

변수(variable)

자바스크립트에서 사용하는 변수에는 var,let,const 가 있다. 각 변수 선언 방식에는 범위(Scope), 재할당 가능 여부, 호이스팅(Hoisting) 등의 차이가 있다.

var

• ES6 이전에 사용되었던 변수 선언방식으로 현재는 더이상 사용하는 것을 권장하지 않는다.

비권장이유

1. 변수를 선언하기도 전에 값이 저장이 가능하다. 아래의 코드로 예시를 들어보겠다.

        console.log(name) // undefined
        var name ='DongEun';
   
        console.log(name) // ReferenceError 출력
        let name = 'DongEun';
   

   위와 같이 난타나는 이유는 호이스팅(Hoisting)으로 인해 변수 선언이 최상단으로 올라가기 때문이다. 반면 let을 사용하면 호이스팅은 발생하지만 초기화되지 않은 상태(TDZ, Temporal Dead Zone)에 있기 때문에 ReferenceError 가 발생한다. 이처럼 var는 예상하지 못한 동작을 유발할 수 있기 때문에 사용을 지양하는 것이 좋다.호이스팅(Hoisting)에 대해서는 나중에 다시 다뤄 보도록 하겠다.

2. 블록 스코프(Block Scope)를 무시한다.

    {
        var name = 'DoongEun';
    }
    console.log(name) // DongEun"

    {
      let name = 'DongEun';
    }
    console.log(name) // ReferenceError: name is not defined

var로 선언한 변수는 블록 스코프를 따르지 않고 함수 스코프를 따른다. 즉, {}(중괄호) 내부에서 선언해도 해당 블록을 벗어나 접근 가능하므로 예상치 못한 값이 출력될 수 있다. 반면 let을 사용하면 블록 스코프가 적용되어 {} 내부에서만 변수를 사용할 수 있어 보다 안전한 코드 작성이 가능하다.

앞서 설명한 두 가지 이유(호이스팅으로 인한 예상치 못한 동작, 블록 스코프 무시)로 인해 현대적인 자바스크립트 개발에서는 var를 사용하지 않는 것이 일반적이다.

ES6를 사용하는 환경인데도 불구하고, var로 변수를 선언한다면 혼줄을 ...

let

• 블록 스코프(Block Scope) 적용 → {} 내부에서만 접근 가능하다.
• 재할당이 가능
• 중복 선언이 불가능하다.
• 호이스팅이 발생하지만 초기화 되지 않는다.

  let name = "Dongeun";
  console.log(name); // "Dongeun"
  

name = "DongEunLee"; // 재할당 가능 console.log(name); // "DongEunLee"

let name = "Foo"; // SyntaxError (중복 선언 불가)

```js
{
    let currentYear = 2025;
    console.log(currentYear); // 2025 (블록 내부에서 접근 가능)
}
console.log(currentYear); // ReferenceError (블록 외부에서 접근 불가능)

const

• 블록 스코프(Block Scope) 적용 → {} 내부에서만 접근 가능
• 재할당 불가능
• 선언과 동시에 초기화 필수이다.
• 객체(Object)와 배열(Array)의 경우에는 내부 값 변경 가능하다. (단, 참조 주소 변경 불가능)

const TEST_NUMBER = 3;
console.log(TEST_NUMBER) // 3
TEST_NUMBER = 10; // TypeError 재할당 불가

const user = { name: "Foo", age: 25 };

// 객체의 속성 변경 가능
user.age = 30; 
console.log(user); // { name: "Foo", age: 30 }

// user = { name: "Bar" }; // TypeError (객체 자체 재할당 불가능)

변수 선언 규칙

선언 규칙

1. 영문, 숫자, _(언더스코어), $(달러)만 사용 가능

    let name, _name, $name; ✅

2. 숫자로 시작할 수 없다

    let 1stUser = "foo"; ❌ Error 발생

3. 자바스크립트 예약어(Reserved Words)는 변수명으로 사용 할 수 없다.

    let let = "test"; ❌ Error 발생
    let const = "helloConst"; ❌ Error 발생

4. Kebab-case는 선언할 수없다.

    let my-name = "Dongeun"; //  ❌ 연산자로 해석된다

네이밍 컨벤션(Naming Convention) 이란?

네이밍 컨벤션(Naming Convention)이란 코드에서 변수, 함수, 클래스 등의 이름을 정하는 일관된 규칙을 의미한다.
일관된 네이밍 규칙을 따르면 가독성, 유지보수성, 협업 효율성이 향상된다.

자바스크립트에서 사용하는 주요 네이밍 컨벤션

camelCase (자바스크립트에서 기본적으로 사용)

• 첫 단어는 소문자로 시작하고, 이후 단어의 첫 글자는 대문자로 작성
• 변수명, 함수명에서 주로 사용
• 권장 ✅

이번 주제로 포스팅하는 이유 중 하나가 camelCase가 권장되고 뒤에 설명할 SnakeCase는 비권장한다는 것을 보고 SnakeCase보다 camelCase 사용을 지향하기위해서이다.

let userName = "Dongeun";  // 변수
function getUserData() {...} // 함수

PascalCase(클래스 및 생성자 함수)

• 모든 단어의 첫 글자를 대문자로 작성.
• 클래스명, 생성자 함수명에서 주로 사용.
• 권장 ✅

  class UserAccount {}  // 클래스
  function CreateUser() {}  // 생성자 함수 (잘 사용되지 않음)

  UPPER_SNAKE_CASE(상수)

• 모든 글자를 대문자로 작성하고, 단어를 _(언더스코어)로 구분.
• 변하지 않는 상수 값에 사용.
• 권장 ✅

const MAX_VALUE = 100;
const API_URL = "https://api.example.com";

snake_case (자바스크립트에서는 사용하지 않음)

• 모든 글자를 소문자로 작성하고, 단어를 _(언더스코어)로 구분.
• Python, SQL에서는 일반적이지만, JavaScript에서는 잘 사용되지 않음.
• 비권장 ❌

let user_name = "dong_eun"; // JS에서는 사용을 권장하지 않는다.

최근 책을 보다가 지오해시에 대해 언급이 되어 정리하는 시간을 가져본다

지오해시(GeoHash)

지오해시(Geohash)는 공간 인덱싱(spatial indexing) 기법으로, 지리적 좌표(위도와 경도)를 이진수로 변환한 후, 다시 문자열로 인코딩하는 방식을 말한다. 이 방식은 위치 정보를 효율적으로 저장하고 검색할 수 있게 해주며, 특정한 패턴을 통해 근처 위치를 쉽게 식별할 수 있게 한다.

주요특징

1. 위도와 경도의 압축: 위도와 경도를 짧은 문자열로 압축하여 저장하거나 검색할 때 사용하기에 용이하다.

2. 공간적 근접성 유지: 지오해시의 문자열 앞부분이 동일하다면, 해당 위치들이 가까운 지역에 있음을 나타낸다.

3. 계층적 구조: 지오해시 문자열의 길이에 따라 위치의 정확도가 달지게된다 따라서 문자열이 길수록 더 세밀한 지역을 나타내고, 짧을수록 더 넓은 범위를 나타낸다.

• Level 1: 지오해시의 첫 글자에 해당하는 부분으로, 지구 전체를 대략적으로 4개의 큰 구역으로 나눈다.

• Level 2: 두 번째 글자가 추가되면서 각 구역이 더 작은 16개의 구역으로 세분화된다.

• Level 3: 세 번째 글자가 추가되면 더 작은 구역으로 나뉘며, 점점 더 구체적인 위치를 나타내게 된다. ... 지오해시는 12단계 (level) 의 정밀도를 가지게되는데, 레벨에 따라 격자 크기를 결정하게된다.

  Geohash 레벨	Geohash 문자열 길이	격자 너비 (동서 방향)	격자 높이 (남북 방향)
  1	1	5,000 km	5,000 km
  2	2	1,250 km	625 km
  3	3	156 km	156 km
  4	4	39.1 km	19.5 km
  5	5	4.89 km	4.89 km
  6	6	1.22 km	0.61 km
  7	7	153 m	153 m
  8	8	38.2 m	19.1 m
  9	9	4.77 m	4.77 m
  10	10	1.19 m	0.597 m
  11	11	149 mm	149 mm
  12	12	37.2 mm	18.6 mm

지오해시 작동원리에서 좀더 상세하게 다뤄보자

4. 빠른 검색 성능: 특정 지역 내의 위치를 찾거나, 범위 검색을 할 때 효율적으로 사용할 수 있다. ex) 인접한 지오해시 값을 사용하여 근처 지역을 쉽게 검색할 수 있다.

작동원리

1. 위도와 경도를 분리해 이진수로 변환

   위도와 경도는 어떻게 이진수로 변환하지?

   • 위도는 절반을 나누었을때 왼쪽이면 0 오른쪽이면 1 로 표기.
   • 경도는 절반을 나누었을때 위쪽이면 1 아래쪽이면 0 로 표기.
   • 순서는 위도 -> 경도 순서로 번갈아 가면서 표기합니다.

     이미지 출처: Velog[사진속의 램프]

2. 위도와 경도의 이진값을 교차 결합

3. 결합된 이진수를 Base32로 인코딩

   이진수	Base32 문자
   00000	A
   00001	B
   00010	C
   00011	D
   00100	E
   00101	F
   00110	G
   00111	H
   01000	J
   01001	K
   01010	M
   01011	N
   01100	P
   01101	Q
   01110	R
   01111	S
   10000	T
   10001	V
   10010	W
   10011	X
   10100	Y
   10101	Z
   10110	2
   10111	3
   11000	4
   11001	5
   11010	6
   11011	7
   11100	8
   11101	9

   서울로 위치로 예시를 들어보자

   서울의 대략적인 위치를 위도와 경도로 표기하였을때 위도: 37.5665° 경도: 126.9780°

    위도는 -90 ~ +90 경도는 -180에서 +180 사이의 값이다. 위도값으로 범의를 좁혀 보겠다.

   처음 범위는 [-90, +90]입니다. 중간값은 0으로, 서울의 위도는 0보다 크기 때문에 1을 할당하고, 범위를 [0, +90]으로 축소합니다. [0, 90]에서 중간값은 45입니다. 37.5665는 45보다 작으므로 0을 할당하고, 범위를 [0, 45]로 축소합니다. [0, 45]에서 중간값은 22.5입니다. 37.5665는 22.5보다 크므로 1을 할당하고, 범위를 [22.5, 45]로 축소합니다. 이 과정을 반복하여 위도의 이진값을 점차 좁혀 나갑니다. 이렇게 단계별로 위도 값을 이진수로 변환할 수 있으며, 경도도 유사한 방식으로 처리된다.

   level6 까지 구하였을 때 위도 : 101101010110110, 경도 111001111001100 위도와 경도의 이진수의 교차결합 = 1110011110011001001110100110110 위도와 경도의 이진수 값을 5비트로 나눌경우 11100,11110,01100,10011,01001,10110 wy이를 Base32로 변환 하였을때 wydm9q

Movalbe-type.co.kr

마치며

다시 한번 정리를 해보면서 어떻게 해시값을 구하고 세분화 하는지 정리해보는 시간을 가질 수 있었고, 지오해시관련 라이브러리를 사용해보거나 직접 한번 코드로 구현해보는 시간도 가져보면 좋겠다는 생각도 들었다. 또 시간을 내서 균등격자방식이나 쿼드트리 등 다른 위치를 식별하는 방법에 대해 다뤄볼 생각이다.

react 16.8이 나오기 전까지는 컴포넌트가 클래스로 작성이 되어 있다고 한다. 현재는 함수형태의 컴포너트를 작성하고있고, 종종 클래스형태로 작성된 컴포넌트들을 마주치는 경험도 있다. 이번 시간에는 자바스크립트의 클래스가 어떤식으로 동작하고 있는지 정리를 해보려고한다.

클래스(Class)란?

자바스크립트의 클래스란? 특정한 객체를 만들기 위한 일종의 템플릿과 같은 개념으로 볼 수 있다. 즉, 특정한 형태의 객체를 반복적으로 만들어내기 위해 사용하는 틀이라고 생각해 볼수 있다.

//클래스 객체의 선언 ex) Person 이라는 클래스를 선언     
class Person {
  //`constructor`는 생성자다. 최초에 생성할 때 어떤 인수를 받을지 결정이가능하고 객체를 초기화하는 용도로 사용
  constructor(name) {
    this.name = name;
  }


  // 객체에서 메서드를 정의할 때 사용하던 문법을 그대로 사용하면, 메소드가 자동으로 `Person.prototype`에 저장됩니다.
  introduce() {
    return `안녕하세요, 제 이름은 ${this.name}입니다.`;
  }
}
// 정적메서드
static hello{
    console.log('안녕하세요.');
}
// setter 
set age(value){
    this.age = value;
}

// getter
get age(){
    return this.age;
}
// 클래스를 활용하여 Person 객체 생성
const dongeun = new Person('dongeun');

//메서드 호출
dongeun.introduce(); // 안녕하세요, 제 이름은 dongeun 입니다.

// 정적 메서드는 클래스에서 직접호출한다.
Person.hello(); // 안녕하세요.

// 정적 메서드는 클래스로 만든 객체에서는 호출할 수 없다.
dongeun.hello(); //Uncaught TypeError: dongeun.hello is not a function

// setter를 통해 값을 할당할 수 있다.
dongeun.age = 28;

// getter를 통해 값을 가져올 수 있다.
console.log(dongeun.age); // 28

constructor란?

constructor는 생성자로 , 객체를 생성하는데 사용되는 메서드이며, 여러개가 존재할수 없고 별다르게 수행할 작업이 없다면 생략도 가능하다.

// X
class Person {
  constructor(name) {
    this.name = name;
  }
  // SyntaxError: A class may only have one constructor
  constructor(name) {
    this.name = name;
  }
}

// O
class Person {
}

프로퍼티(property)란?

property란 클래스로 인스턴스를 생성할 때 내부에 정의할 수 있는 속성값으로 일반적으로 내부 변수와 그 변수에 접근하는 메소드(getter 및 setter)로 구성되며, 이를 통해 외부에서 해당 프로퍼티에 접근할 때 특정 로직을 실행하거나 값을 검증할 수 있다.

getter

클래스에서 무언가 값을 가져올때 사용되고, 사용하기 위해서 get이라는 키워드를 앞에 붙여야하고, 뒤이어서 getter의 이름을 선언한다.

setter

클래스 필드에 값을 할당할때 사용한다. set 이라는 키워드를 선언하고, 그 뒤에 이름을 붙인다.

class Person {
    constructor(name, age) {
        // 프로퍼티 정의
        this._name = name; // private 프로퍼티 (관례적으로 _를 사용)
        this._age = age; // private 프로퍼티
    }

    // Getter와 Setter 메소드
    get name() {
        return this._name;
    }

    set name(newName) {
        this._name = newName;
    }

    get age() {
        return this._age;
    }

    set age(newAge) {
        if (newAge > 0) { // 나이는 음수가 될 수 없도록 설정
            this._age = newAge;
        } else {
            console.log("나이는 음수가 될 수 없습니다.");
        }
    }
}

// 예시 사용
const dongeun = new Person('dongeun', 28);
console.log(dongeun.name); // 출력: dongeun
console.log(dongeun.age); // 출력: 28

dongeun.age = -5; // 음수 나이를 설정하려고 하면 에러 메시지 출력
console.log(dongeun.age); // 출력: 28 (변경되지 않음)

dongeun.age = 35; // 올바른 나이를 설정
console.log(dongeun.age); // 출력: 35

처음에 예시로 작성했던 코드와 비교를 해보았을때 name 프로퍼티를 선언할때 _name으로 선언한것을 볼 수 있다. _name과 같은 네이밍 컨벤션은 자바스크립트에서 private 프로퍼티를 나타내는데 일반적으로 사용되는 관례하고 한다고 한다. 이는 명시적으로 private 프로퍼티를 지원하는 것이 아니라, 개발자들 사이에 널리 사용되는 약속이며, 주로 다른 개발자들이 private 프로퍼티임을 파악할 수 있도록 돕기 위한 목적으로 사용된다.

상속(extends)

상속은 기존의 클래스를 상속받아서 자식 클래스에서 부모클래스를 상속 받는 개념이다. React에서 클래스형 컴포넌트를 만들기위해서 extends React.component 나 extends React.PuerComponent 를 선언한 것을 예시로 들 수 있다.

class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }

    get name() {
        return this._name;
    }

    set name(newName) {
        this._name = newName;
    }

    get age() {
        return this._age;
    }

    set age(newAge) {
        if (newAge > 0) {
            this._age = newAge;
        } else {
            console.log("나이는 음수가 될 수 없습니다.");
        }
    }
}

class Employee extends Person {
    constructor(name, age, position, salary) {
        super(name, age); // 부모 클래스의 생성자 호출
        this._position = position;
        this._salary = salary;
    }

    get position() {
        return this._position;
    }

    set position(newPosition) {
        this._position = newPosition;
    }

    get salary() {
        return this._salary;
    }

    set salary(newSalary) {
        this._salary = newSalary;
    }
}

// 예시 사용
const employee1 = new Employee('dongeun', 28, 'Front-end Engineer', 60000);
console.log(employee1.name); // 출력: dongeun
console.log(employee1.age); // 출력: 28
console.log(employee1.position); // 출력: Front-end Engineer
console.log(employee1.salary); // 출력: 60000

리액트의 가상 DOM 과 실제 DOM 의 비교, 리액트 컴포넌트가 렌더링을할지를 판단하는 방법, 변수나 함수의 메모제이션 등 모든 작업은 작업은 자바스크립트의 동등 비교를 기반으로 하게되는데 자바스크립트의 데이터 타입은 어떤것이 있고 동등비교란 무엇인지 정리해보자

자바스크립트의 데이터 타입

• 원시타입(Primitive) JavaScript에서, 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드 또는 속성도 가지지 않는 데이터라고 정의를 한다. 출처:Mdn web doc 간단하게 자크립트에서의 원시타입이란 객체가 아닌 다른 모든 타입을 의미한다라고 생각을 하면 되겠다.

  1. boolean 참(true)과 거짓(false)만을 가질 수 있는 데이터 타입 주로 조건문에서 많이 쓰이는 데이터 타입이다. boolan형의 값 외에도 조건문에서 true,false 처럼 취급되는 trthy,falsy값이 존재한다.

     falsey 값정리

     조건문 내부에서 false 취급되는 값.

     값	타입	설명
     false	Boolean	false는 대표적인 falsly 값이다
     0,-0,0n,0x0n	Number,BigInt	0은 부호나 소수점 유무에 상관없이 falsy 한 값이다.
     NaN	Number	Number가 아니라는 것을 뜻하는 NaN(Not a Number)
     '',"",``	String	공백이 없는 빈 문자일때
     null	null	-
     undefined	undefined	-

     trthy

     조건문 내부에서 true로 취급되는 값. falsy로 취급되는 값외에는 모두true로 취급 객체와 배열은 내부에 값이 존재하는지 여부와 상관없이 trthy로 취급된다.

2. null 아직 값이 없거나 비어있는 값을 표현할때 사용 null는 null라는 값만 가질수있다. null은 다른 원시값들이랑 다르게 typeof로 null을 확인 했을때 해당 타입이 object라는 결과가 반환된다.

   typeof null === 'object' // true 가 출력된다.

3. undefined 선언후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당된값 undefined는 undefined라는 값만 가질수있다.

   let test;
   type of test === 'undefiend' // true
   function add_hello(hello){
      return hello
   }
   type of add_hello() === 'undefiend' // true

4. number -(2⁵³ -1)$ 과 2⁵³-1 사이의 값을 저장 할 수 있다.

5. string 텍스트 타입의 데이터를 저장하기 위해 사용되며, 작은따옴표(') 큰따옴표(") 또는 백틱(`) 으로 감싸 표현한다. 백틱으로 표현하는 문자열은 템플릿 리터널(template literal)이라고 하는데, 같은 문자열을 반환하지만 줄바꿈이 가능하고, 문자열 내부에 표현식을 쓸 수 있다. 자바스크립트 string은 문자열이 원시타입이며, 변경이 불가능하다.(한번 문자열이 생성되면 그문자열을 변경할수 없음을 의미)

   //'\n안녕하세요.\n'
   const literaltext = `
   안녕하세요.
   `;
   // Uncaught SyntaxError: Invalid or unexpected token
   const text = "
   안녕하세요
   ";
   const text2 = "hello";
   console.log(text2[0]) // 'h'
   text2[0] = 't';
   console.log(text2) //hello가 출력

6. symbol ES6에서 새롭게 추가된 7번째 타입으로, 중복되지 않는 어떠한 고유값을 나타내기 위해 만들어졌다.

   //Symbol() 함수를 사용해서 만들어진다.
   const key = Symbol('key');
   const key2 = Symbol('key');
   
   key===key2 // false
   
   //동일한 값을 사용하기 위해서는 for 함수를 사용한다
   Symbol.for('test') === Symbol.for('test') // true

7. bigint number가 다룰 수 있는 숫자 크기의 제한을 극복하기 위해 ES2020에서 새롭게 나온것으로,2⁵³-1 를넘어서 더 큰숫자를 저장할 수 있게 해준다.

   9007199254740992 === 9007199254740993 // 더이상 다룰 수 없는 크기이기 때문에 true로 출력
   const bigInt1 = 9007199254740995n // 끝에 n을 붙이거나
   const bigInt2 = BigInt(9007199254740995) // 끝에 BigInt함수를 사용

• 객체타입(object/reference type)

  객체타입이란

  • 일반적으로 컴퓨터 과학에서 객체는 식별자로 참조할 수 있는 메모리 상의 값을 말한다.
  • 객체는 데이터와 그 데이터 관련한 동작을 모두 포함하는 개념적 존재

    javascript에서 객체타입

    원시타입 7가지 이외의 배열, 함수, 정규 표현식 등 객체타입(object type)은 참조를 전달한다고 해서 참조타입(reference type)이라고도 불린다.

동등비교

객체 타입의 동등 비교는 언어에 따라 다르지만, 여러 언어에서는 주로 두 가지 개념으로 나눌 수 있습니다: 참조 동등성(Reference Equality)과 값 동등성(Value Equality) 이다

• 참조 동등성

  • 참조 동등성은 객체가 동일한 메모리 위치를 참조하는지 여부에 기반한다.
  • 두 변수나 객체가 동일한 인스턴스를 가리키는 경우에 참이 된다.
  • 주로 언어에서는 이를 확인하기 위해 == 또는 === 연산자를 사용한다.

  const obj1 = { key: 'value' };
   const obj2 = { key: 'value' };
  
   const obj3 = obj1;
  
   console.log(obj1 === obj2);  // false (참조가 다름)
   console.log(obj1 === obj3);  // true (참조가 동일)

• 값 동용성(Value Equality)

  • 값 동등성은 객체가 동일한 값 또는 내용을 가지는지 여부에 기반한다.
  • 두 객체의 내용이 동일하면 두 객체는 값 동등하다고 간주된다.
  • 객체의 내용을 비교하기 위해서는 객체의 속성을 하나씩 비교하거나, 언어에 따라 제공되는 특별한 메서드를 사용할 수 있다.

    const obj1 = { key: 'value' };
    const obj2 = { key: 'value' };
    console.log(Object.is(obj1, obj2));  // false (값 동등성 비교)
    console.log(JSON.stringify(obj1) === JSON.stringify(obj2));  // true (값 동등성 비교)

자료 참고 [자바스크립트 원시타입과 객체 타입] (https://velog.io/@forlecture1013/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9B%90%EC%8B%9C%ED%83%80%EC%9E%85%EA%B3%BC-%EA%B0%9D%EC%B2%B4-%ED%83%80%EC%9E%85) 모던 리액트 Deep Dive

개발자인 친구랑 이야기를 하다가 npm , yarn을 이용하여 패키지를 설치할때 생성되는 package.json , package-lock.json 파일에 대해 질문을 듣고 이참에 정리하고 알아보는 시간을 가져보려고 합니다.

Package Manager란 ?

• 패키지 매니저는 소프트웨어 개발 프로젝트에서 필요한 패키지(라이브러리, 모듈 등)를 관리하고 설치하는 도구를 말합니다.

• 대표적인 패키지 매니저로는 Node.js의 npm(Node Package Manager), Python의 pip, Ruby의 RubyGems 등이 있고 해당 포스팅에서는 Node.js 기준으로 작성을 해보려고합니다.

Package.json 이란 무엇일까?

출처: npm doc npm doc 에서 설명하고 있는 package.json문서의 한부분이다. 위의 영문을 번역하면..

패키지에 package.json 파일을 추가하여 다른 사용자가 쉽게 관리하고 설치할 수 있도록 할 수 있습니다. 레지스트리에 발행된 패키지는 반드시 package.json 파일을 포함해야 합니다.

package.json 파일은 다음을 수행합니다.

• 프로젝트가 의존하는 패키지 목록을 나열합니다.
• 시맨틱 버전 규칙을 사용하여 프로젝트가 사용할 수 있는 패키지 버전을 지정합니다.
• 빌드를 재현 가능하게 하여, 다른 개발자들과 쉽게 공유할 수 있습니다.

참고: 패키지를 npm 웹사이트에서 쉽게 찾을 수 있게 만들기 위해, package.json 파일에 사용자 정의 설명을 포함하는 것을 권장합니다.

GPT를 이용하여서 package.json 에 대하여 설명을 해달라고 했을때 아래와 같이 답변한 것도 같이 참고해보았다.

• package.json 파일은 프로젝트의 메타데이터 및 종속성(dependency) 정보를 담고 있는 파일입니다.
• 프로젝트 정보(프로젝트명, 버전, 설명 등)와 함께 필요한 패키지의 목록과 버전 정보가 기록됩니다.
• 이 파일을 통해 프로젝트의 종속성을 다른 개발자와 공유하고, 프로젝트를 배포하거나 다시 설치할 때 사용됩니다.

즉, npm에서 오픈소스(패키지)를 설치하기 위해 사용하거나, 프로젝트의 의존성 관리를 하거나,배포를 위한 파일이구나라는 결론을 지어보았다.

package.json 구성요소 및 구조

npm init -y

을 통해 package.json을 생성할 수 있다.

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My project description",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "mocha"
  }
   "dependencies": {
    "express": "^4.17.1",
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "mocha": "^9.0.0"
  }
  "keywords": [],
  "author": "",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/username/my-project.git"
  }
}

package.json 파일은 Node.js 프로젝트의 루트 디렉토리에 위치하며, 프로젝트의 구성과 의존성을 기술하는 JSON 형식의 파일이다.

name

• 프로젝트의 이름을 나타내며, 필수 항목이다.
• 다른 패키지와 구별되도록 유일해야 합니다.

version

• 프로젝트의 현재 버전을 나타내며, 필수항목이다.
• 버전의 경우 semantic versioning guidelines를 따르며, x.x.x의 형태로 작성해야한다.

description

• 프로젝트에 대한 설명

main

• 프로젝트의 진입점(main entry point)을 지정한다.

scripts

• 프로젝트에서 사용할 수 있는 스크립트 명령어를 정의

다른 개발자분의 블로그를 참고하여, 예시를 가져와 보았다.

facebook/create-react-app/package.json

{
  "scripts": {
    "build": "cd packages/react-scripts && node bin/react-scripts.js build",
    "changelog": "lerna-changelog",
    "create-react-app": "node tasks/cra.js",
    "e2e": "tasks/e2e-simple.sh",
    "e2e:docker": "tasks/local-test.sh",
    "postinstall": "npm run build:prod -w react-error-overlay",
    "publish": "tasks/publish.sh",
    "start": "cd packages/react-scripts && node bin/react-scripts.js start"
    // ...
  }
}

value로 일련의 command(명령어)를 정의해 두고 key로 지정한 alias를 이용해 간편하게 호출 할 수 있다.

ex) npm start , npm create-react-app ..

출처:알고쓰자 package.json

dependencies및 evDependencies

• 프로젝트가 의존하는 패키지와 그 버전을 나타냅니다
• dependencies: 프로젝트가 실행될 때 필요한 핵심 의존성
• devDependencies: 개발 중에만 필요한 의존성

버전을 작성할때는 Semantic Versioning (SemVer)규칙에 기반하여 작성한다. _ Semantic Versioning (SemVer) 은 나중에 정리를 해보려고 한다.._

license

• 프로젝트에 적용된 라이선스를 나타낸다

repository

• 프로젝트의 소스 코드 저장소를 지정한다

package.json 작성규칙

• must be lowercase, 소문자로 작성되어야 한다.
• must be one word, 한 단어로 작성되어야 한다.
• may contain hyphens and underscore, -(하이픈)이나 _(언더스코어)를 포함할 수 있다.

Package-lock.json 이란 무엇일까?

• package-lock.json 파일은 npm 버전 5부터 사용되기 시작한 파일로, 의존성 트리를 정확하게 기록합니다.
• package-lock.json 파일은 패키지 매니저가 패키지를 설치할 때, 각 패키지의 정확한 버전과 의존성을 고정시켜주는 역할을 합니다.
• 다른 환경이나 다른 개발자가 동일한 패키지를 설치할 때, package-lock.json 파일이 있다면 정확한 의존성 버전을 사용하여 설치하게 됩니다.

자료를 찾아서 정리를 해보니 위와 같았지만 크게 와닿진 않았다.. 자료를 찾던 중 예시를 통해 설명해주는 글을 보았다.

• https://hyunjun19.github.io/2018/03/23/package-lock-why-need/

예시와 함께보니 나도 비슷하게 개발중인 프로젝트에서 package를 추가하고, package.json 만 커밋했던 기억이났었는데 이제야 이유를 알았다는 것이 놀라웠다....

package-lock.json 구성요소 및 구조

package-lock.json은 npm install 명령어를 사용하여 패키지를 설치할때 생성된다.

{
  "name": "my-project",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "dependencies": {
    "express": {
      "version": "4.17.1",
      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
      "integrity": "sha512-...",
      "dev": true,
      "dependencies": {
        // Express 패키지의 의존성 정보
      }
    },
    "lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-...",
      "dev": true
    },
    // 다른 패키지들의 의존성 정보
  }
}

lockfileVersion

• package-lock.json 파일의 버전을 나타냅니다. 현재는 1이 가장 일반적으로 사용되고 있다

requires

• 현재 package-lock.json 파일이 생성된 npm 버전을 나타냅니다.

dependencies

• 프로젝트에 설치된 각 패키지의 정보가 여기에 포함된다.

  "dependencies": {
  "express": {
    "version": "4.17.1",
    "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
    "integrity": "sha512-...",
    "dev": true,
    "dependencies": {
      // Express 패키지의 의존성 정보
    }
  },
  "lodash": {
    "version": "4.17.21",
    "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
    "integrity": "sha512-...",
    "dev": true
  },
  }

• version: 패키지의 정확한 버전을 나타냅니다.
• resolved: 패키지가 실제로 위치한 경로 또는 URL입니다.
• integrity: 패키지의 무결성 체크를 위한 해시값입니다.
• dev: 패키지가 dependencies 또는 devDependencies에 속하는지 여부를 나타냅니다.
• dependencies: 패키지의 의존성 정보가 있을 경우, 해당 의존성 정보도 포함됩니다.

** 결론: package.json은 패키지 설치, 배포, 의존성 등에 대한 정보를 가지고 있으며, package-lock.json은 패키지의 정확한 버전과 의존성 트리를 정확하게 기록한 파일이다 !**

react를 사용하여 개발하면서 react 말고도 vue,angular 등 여러 Front-end 프레임워크들이 있음에도 불구하고 'react가 떠오르는 이유가 무엇일까?'라는 생각을 가지고 모던리액트 deep dive 책을 읽고 정리를 해보는 시간을 가져보려고 한다.

왜 리액트인가 ?

2011년 페이스북의 뉴스티드 페이지에서 처음선보인 react는 출시된지 10년이 넘은 라이브러이다.Front-end 채용시장만 보더라도 리액트의 대한 개발 경험을 요구하고 있는 곳도 많이 보이는것만봐도 Front-end 개발자에게 필수적인 기술로 자리잡은 것으로 판단할 수 있다.

아래의 그림은 스텍오버플로우에서 설문 조사 '지난 한 해 동안 광범위한 개발 작업을 수행한 웹 프레임워크 및 웹 기술은 무엇 이며, 내년에는 어떤 작업을 수행하고 싶습니까?' 에 대한 응답을 정리한것이다.

출처:스텍오버플로우 설문조사

왜 리액트가 개발자들이 선호하는 라이브러리가 될수 있었을까?

• 명시적인상태변화 : 리액트는 단방향 바인딩만 지원한다.

단방향 바인딩이란 데이터의 흐름이 한쪽으로만 간다는것이다. 이와 반대되는 내용은 Angular의 양뱡향 바인딩이다. 양방향 바인딩의 경우 뷰의 변화가 컴포넌트에 영향을 미칠수도,반대로 컴포넌트의 상태가 변경되면 뷰의 상태도 변화할 수 있는 편리함이 있지만, 상태변화가 무엇으로 인해 일어났는지 파악하기 어려워진다. 코드의 규모가 커질수록 이 같은 상태의 변화가 무엇으로 일어났는지 파악하기 힘들어지기 때문에 단방향 바인딩의 경우 간단함과 유연함을 제공해주게 된다.

//angular의 상태변화 예제.
import {Component} from "@angular/core"
@Component({
    selector:'app-root',
      template:`<input type ="text" [ngModel]="name">`,
})
export class Appcomponent {
    name=''
}
// name이 변경된 이유를 파악하려면 template나 class 내부에서 name을 변경하는 곳을 찾아야된다.

//react의 상태변화 예제.
function App(){
    const [name,setName] = useState('');

      function onChange(e){
         setName(e.target.value);
    }
  return <input type="text" value={name}/>
}
// name이 변경된 이유를 파악하려면 'setName'을 호출하는 곳을 찾으면된다.

• JSX(JavaScript XML) angular는 view를 표현하기 위해 문자열 템플릿(string template)를 사용하고, angular 디렉티브라고 해서 ngif처럼 angular의 전용문법을 익혀야 했다. react의 경우 기존의 자바스크립트 문법에서 HTML을 약간 가미한 수준이고 자바스크립트 문법을{}으로 감싸야된다.와 같은 고유의 몇가지 특징만 이해한다면 손쉽게 JSX를 구현할 수 있다.

  //자바스크립트 문법을 {} 감싸야된다는 것의 예시코드.
  {content? <div>content text </div> : null }
  

- **비교적 배우기 쉽고 간결하다.**
- **강력한 커뮤니티**
---

### 리액트등장과 역사
- **2010년대 Front-end 개발 환경을 향한 페이스북의 도전**
페이스북의 타임라인에서는 자신의 상태를 업로드할 수 있고, 여기에 다른 사람들의 댓글이 추가되는 것을 실시간으로 확인할 수 있다. 만약 이러한 작업이 모두 서버에서 렌더링 된다고하면 매번 새로운 페이지를 보여주기 위해 서버에서 렌더링하고,다시 로딩되는 과정을 반복하게 될 것이고,사용자는 매번 깜빡이거나 느리게 작동하는 것처럼 보일것이다. 이러한 문제를 해결하기 위해 페이스북은 **어떤 데이터가 변할 때마다 어떤 변화를 주는 것이 아니라 기존 뷰를 날려 버리고 처음부터 새로 렌더링하는 방식을 고안했다.** 
시간이 흘러 JSConf US 2013에서 공개된 리액트에 대한 반응은 그다지 좋지 못했다.대부분의 개발자들은 JSX구문의 특징과 자바스크립트 코드 내에 HTML을 추가한다는 것을 그다지 좋아하지 않았다고 한다. HTML과 JS는 항상 다른 파일에 존해했고,이를 컴퓨터 공학에서 말하는 `관심사 분리 원칙`을 지키기 위한 기초적인 사실로 받아 들여졌기 때문에 HTML과 JS가 같이 존재하는 JSX는 말도 안되는 것으로 비쳤다.

---

### 최초 버전의 리액트에서 컴포넌트를 렌더링 하는 방식
```javascript
var TextBoxList = React.createClass({
    getInitialState: function(){
        return {count:1}
    },
      add : function(){
        this.setState({count:this.state.count +!})
    },
    render : function(){
        var items=[];
        for(var i=0; i<this.state.count; i++){
            items.push(
                <li key={i}>
                      <input type='text'/>
                <li>
            )
        }
      return (
          <ul>
            {items}
            <input type="button" value ='add an item' onClick={this.add}/>
        </ul>
      )
    }, 
})
ReactDOM.render(
    <div>
          <TextBoxList/>
      </div>,
      ...
)

위의 예제 코드에서 배열(items)에 새로운 텍스트를 추가하게 되면,리액트는 전체 배열을 새로 렌더링 하지만 기존의 Input 내용에 있던 것은 그대로 유지된다.기존의 모든 DOM요소를 초기화하지 않고, 새로운 text를 추가하는 방식으로 작동하였다.

현재(2023)

2013년도 5월에 최초 공개된 리액트의 버전은 0.3.0 이고, 현재 글을 작성하고 있는 2023년 11월 기준 최신버전은 18.2.0 이다. facebook/react github 의 releases를 보다보면 0.14.7이후로 버전이 껑충 뛰어 15.0.0 으로 넘어갔다는 것이 궁금하기도 하고 인상깊었다.

리액트와 함께 사용할 수 있는 다양한 라이브러리는 예시는 아래와 같이 정리해 보았다

• 상태관리 : Redux , Zustand, Recoil 등
• 서버 사이드 렌더링 : Next.js,Remix, Hydrogen 등
• 폼 : React Hook Form, Formik, React Final Form 등

마치며

모던리액트 책을 한번 읽고 정리하는 한다 생각하고 글을 적으며 정리를 해보았다. 다시 적어보면서 페이스북 깃허브에 들어가서 내용을 참고하고, 스텍오버플로우 설문 조사를 직접 찾아보면서 다시 한번 리액트가 정말 인정받고 있구나 싶었다. 또 요즘 많이 사용한다는 Next.js를 공부해서 하루 빨리 프로젝트를 개발해보고 싶다는 생각이 들었다 ! 또 앞으로도 책을 읽어보고 내용을 정리하는 시간을 가져볼수 있도록 해야겠다.

마크다운(Markdown)은 텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다. 특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다.

Eelemets(block)

제목(title) h1텍스트부터 h6을 이용해서 제목을 표현할 수 있다.

💻Code

# title h1..
## title h2..
### title h3..
#### title h4..
##### title h5..
###### title h6..

✔Result

title h1..

title h2..

title h3..

title h4..

title h5..

title h6..

인용문(Blockquotes)

본문 안에서 인용된 내용을 표시하고자 할 때 사용한다.

💻Code

> ## title1
 text
 text
>> ## title2
text
text
>>> ### title3
text

✔Result

title1

text text

title2

text text

title3

text

목록(List)

* + - 중 아무 기호나 사용하여 표현을 하거나 1. 2. 순차적인 목록을 나타내기도 한다.

💻Code

* LIST
+ LIST
- LIST
1. LIST1
2. LIST2
3. LIST3

✔Result

• LIST
• LIST
• LIST

1. LIST1
2. LIST2
3. LIST3

코드(Code Block)

tab 키를 이용하여 한줄로된 코드 블록을 만들거나 여러줄의 코드 블록의 경우 백틱(`) 3개로 감싸서 작성한다.

💻Code

function helloworld(){
    console.log('Hello World !');
}

코드블럭 시작점에 사용하는 언어를 선언하면 Syntax Highlighting이 가능하다.

출처: 마크다운 왕초보 코드블록 사용가능한 언어 목록

*선 삽입 *

가로선을 넣어서 맥락을 구분해줄 수 있다.

💻Code

* * *
***
*****
- - -
---
-----
_ _ _
___
_____

✔Result

Eelemets(Inline)

링크(HyperLinkText)

인라인 링크, url 링크, 참조 링크 3가지 방식으로 링크를 나타낼 수 있다.

💻Code

인라인 링크
[인라인 링크](https://velog.io/)

url 링크
<https://velog.io/>

참조 링크
[velog]:https://velog.io/ --> 선언을 해두고

[velog] --> 호출하여 사용

✔Result

인라인 링크

https://velog.io/

velog

Style TEXT

볼드, 이탤릭, 취소선

💻Code

*이탤릭*
_이탤릭_
**볼드**
__볼드__
~~취소선~~

✔Result

이탤릭 이탤릭 볼드 볼드 취소선

이미지 삽입(Images)

링크 삽입 방식과 유사하나, 맨 앞에 !를 붙여불러온다.

1. 일반 이미지 삽입하기: ![대체 텍스트](이미지 링크)
예시: ![PlaceHolder](https://via.placeholder.com/200x200)

2. 이미지에 설명 삽입하기: ![대체 텍스트](이미지 링크 "이미지 설명 문구")
예시: ![PlaceHolder](https://via.placeholder.com/200x200"이미지 예시입니다.")
** 참고: 이미지에 마우스를 올렸을 때 나타나는 설명을 의미함

3. 이미지에 링크 걸기: [![대체 텍스트](이미지 링크)](연결할 url "url 설명 문구")
예시: [![CloudScape]((https://via.placeholder.com/200x200)](https://via.placeholder.com "Via Image")

1. 일반 이미지 삽입하기:  예시:

2. 이미지에 설명 삽입하기:  예시:

** 참고: 이미지에 마우스를 올렸을 때 나타나는 설명을 의미함

3. 이미지에 링크 걸기: [](연결할 url "url 설명 문구") 예시:

** 기호 표시(Backslash Escapes)**

마크다운 문법에 있는 기호를 그대로 출력하고 싶다면, 역방향 슬래시를 앞에 붙여주면 된다.

💻Code

\*
\_
\()
\{}
\[]
\#
\+
\-
\.
\!
\\

✔Result

* _ () {} [] # + - . ! \

테이블(Table)

수직선 기호(|)로 열을 구분할 수 있다 하이픈 기호(-)를 여러 개 붙여서 th와 tr을 구분할 수 있다. 콜론 기호(:)로 정렬을 표현할 수 있다.

💻Code

|    |left |center|right
|----|:----|:----:|----:
|row1|l1   |  c1  |   r1
|row2|l2   |  c2  |   r2
|row3|l3   |  c3  |   r3

✔Result

END

벨로그를 잘 작성해보자는 의미로 마크다운언어를 정리해보았다. 업무할때 구글 체팅을 이용하여 사내에서 체팅을 사용하고 있는데 구글 체팅에서도 사용이가능 했었다. 알아두면 참 요긴하게 쓸 것으로 보인다 !

참고 사이트

내가 보려고 정리한 Velog(벨로그) 사용법 튜토리얼