계발하는 개발자

[JS] 구조 분해 할당 | 객체, 배열 구조 분해

dev_genie — Sat, 2 Dec 2023 01:36:37 +0900

오픈소스를 보다보면 구조 분해 할당된 코드를 심심치 않게 볼 수 있다.

내 경우 평소에 잘 써보지 않은 문법이라 이번에 맘 먹고 정리해보기로 했다!

구조분해할당(Destructuring assignment)

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

개발을 하다 보면 객체나 배열에 저장된 일부 데이터에 접근해야 하는 경우가 생기기 마련이다.

이럴 때 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법인 구조 분해 할당을 사용할 수 있다.

1. 객체 분해

객체 분해의 경우 아래처럼 내가 원하는 특정 값을 변수에 담을 수 있다.

기본 변수 할당

객체 구조분해 변수에 값을 할당하는 기본 방법은 다음과 같다.

const obj = {
    id: 1,
    name: 'ppororo',
    age: 3,
    habit: 'cook',
};

const { id, habit } = obj;

console.log(id) // 1
console.log(habit) // 'cook'

선언에서 분리한 할당

변수 선언과 할당을 분리하여 객체 구조분해 할당을 할 수 있다.

var { a, b } = { a:1, b:2 };

console.log(a); // 1
console.log(b); // 2

새로운 변수 이름에 할당

다음과 같이 새로운 변수 이름에 값을 할당받을 수도 있다.

var a = { p: 30, q: true };
var { p: foo, q: bar } = a;

console.log(foo); // 30
console.log(bar); // true

중첩된 객체와 배열 구조분해

다음의 복잡한 객체, 배열의 구조에도 구조 분해하여 값을 참조할 수 있다.

var helloWorld = {
  title: 'shepherd',
  detail: [
    {
      language: 'ko',
      place: [],
      last_edit: '2014-04-14T08:43:37',
      url: '../data/utils/happyHouse',
      title: 'cute dog',
    },
  ],
  url: '../docs/desc/pat',
};

var {
  title: Mydog,
  detail: [{ title: mvTitle }],
} = helloWorld;
console.log(Mydog); // "shepherd"
console.log(mvTitle); // "cute dog"

매개변수에서 구조분해

많이 보이는 유형이다. 구조분해한 값을 매개변수로 참조할 수도 있다.

var movie = {
  rank: 3,
  title: 'lalaland',
  cast: { miya: 'emma', sebastian: 'lion' },
};

function awards({ rank }) {
  return rank;
}

console.log(awards(movie)); // 3

2. 배열 분해

할당하고자 하는 변수의 개수가 분해하고자 하는 배열의 길이보다 크더라도 에러가 발생하지 않는다. 할당할 값이 없으면 undefined로 취급된다.

객체 분해와 다르게 배열 분해의 경우는 내가 필요로 하는 값만 특정해서 꺼낼 수는 없다.

기본 변수 할당

배열 구조분해 변수에 값을 할당하는 기본 방법은 다음과 같다.

const arr = [1, 'abc', 3];
const [ar1, ar2, ar3] = arr;

console.log(ar1) // 1
console.log(ar2) // 'abc'
console.log(ar3) // 3

선언에서 분리한 할당

변수 선언과 할당을 분리하여 배열 구조분해 할당을 할 수 있다.

var a, b;

[a, b] = [1, 2];
console.log(a) // 1
console.log(b) // 2

기본값 설정

배열 구조분해는 기본값 설정이 가능하다.

var a, b;

[a = 2, b = 10] = [7];
console.log(a) // 7 (배열에서 받아온 값)
console.log(b) // 10 (기본값)

a에는 7이 할당되었고, b에는 값이 할당되지 않았기 때문에 기본값인 10이 할당되었다.

값 교환

두 개의 값 교환을 배열 구조분해를 사용하면 한 줄로 표현이 가능하다.

var [a, b] = [10, 7];

[a, b] = [b, a];
console.log(a); // 7
console.log(b); // 10

함수의 반환된 배열

함수에서 반환된 배열로도 구조분해 할당이 가능하다.

function foo() {
  return [3, 4];
}

var [a, b] = foo();
console.log(a); // 3
console.log(b); // 4

값 무시하기

배열에서 필요하지 않은 값을 변수에 할당해야 하는 경우에 사용할 수 있다.

function foo() {
  return [3, 4, 5];
}
var [a, , b] = foo();
console.log(a); // 3
console.log(b); // 5

[a, , b] = [4, 5, 6];
console.log(a); // 4
console.log(b); // 6

// 또는 아래같이 모든 값을 무시하는 것도 가능
[,,] = [1, 2, 3, 4, 5];

전개 연산자를 이용한 저장

...(전개 연산자)를 이용해 나머지 배열을 변수에 할당이 가능하다.

var [a, ...b] = [1, 2, 3];

console.log(a); // 1
console.log(b); // [2, 3]

* 이해에 도움이 됐던 자료 참고 :

[React 에러] 폰트어썸 regular 아이콘 사용시 에러 해결 | 'IconDefinition' 형식은 'IconProp' 형식에 할당할 수 없습니다.

dev_genie — Fri, 1 Dec 2023 14:34:35 +0900

참고

https://github.com/FortAwesome/react-fontawesome/issues/366

에러

폰트어썸 regular 아이콘을 사용하려고 했을 때 아래같은 에러가 발생했다.

원인

스택오버플로우를 쭉 살펴보니까 패키지 버전 호환으로 인한 에러라고들 했다.

이러한 버전 호환성 에러는 fontawesome-svg-core 패키지가 Font Awesome의 다른 패키지와 버전 호환성이 없을 경우 발생할 수 있는데 난 애초에 svg-core 패키지를 설치하지 않아서 그런듯..

해결

fortawesome/fontawesome-svg-core 패키지를 추가로 설치해줬고, 에러가 사라졌다.

// before
"@fortawesome/free-regular-svg-icons": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.0",
"@fortawesome/react-fontawesome": "^0.2.0",

// after
"@fortawesome/fontawesome-svg-core": "^6.5.1",
"@fortawesome/free-regular-svg-icons": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.0",
"@fortawesome/react-fontawesome": "^0.2.0",

리액트에서 폰트어썸을 사용하려면 아래 3가지 유형의 패키지들을 설치해줘야 한다는 걸 알게 됐다.

@fortawesome/fontawesome-svg-core: 아이콘 사용시 필요한 핵심 도구와 기능을 제공하는 패키지
@fortawesome/free-solid-svg-icons, @fortawesome/free-regular-svg-icons, 등: 각각의 아이콘 패키지
@fortawesome/react-fontawesome: React에서 아이콘을 사용할 수 있게 해주는 패키지

[React] 리액트에서 폰트어썸 아이콘 사용하는 방법

dev_genie — Thu, 30 Nov 2023 18:13:51 +0900

리액트에서 오랜만에 폰트어썸 아이콘을 사용하려고하니 공식문서를 보면서도 조금 헤맸다.

그래서 따로 정리하는 포스팅..!

다운로드

npm install --save @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons

스크립트

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';

사용 방법

<FontAwesomeIcon icon={faChevronLeft}/>
<FontAwesomeIcon icon={faChevronRight}/>

사용하려는 아이콘을 선택해서 React 탭 > 아이콘 이름 부분을 파스칼케이스 방식으로

위와 가팅 icon 속성에 적어주면 해당 아이콘이 삽입되게 된다.

전체코드

import React from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
import "./Header.css";

const Header = () => {
    return (
        <header>
            <div className="header-container">
                <div className="header_focus-date">
                    <FontAwesomeIcon icon={faChevronLeft}/>
                    <div className="header_focus-month">월</div>
                    <div className="header_focus-year"></div>
                    <FontAwesomeIcon icon={faChevronRight}/>
                </div>
            </div>
        </header>
    );
};

export default Header;

그럼 이제 아래처럼 아이콘이 브라우저에 나타난다!

[React 에러] fontawesome 버전 충돌로 설치 안되는 에러 해결

dev_genie — Thu, 30 Nov 2023 17:51:25 +0900

에러

react 에서 폰트어썸 아이콘을 사용하려고 패키지 설치하려고 했을 때 아래같은 에러가 떴다.

c:\Users\LG\Desktop\my_project\cashbook\frontend>npm i --save @fortawesome/react-fontawesome@latest
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-scripts@5.0.1
npm ERR! Found: typescript@5.3.2
npm ERR! node_modules/typescript
npm ERR!   peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3
npm ERR!   node_modules/fork-ts-checker-webpack-plugin       
npm ERR!     fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
npm ERR!     node_modules/react-dev-utils
npm ERR!       react-dev-utils@"^12.0.1" from react-scripts@5.0.1
npm ERR!       node_modules/react-scripts
npm ERR!         react-scripts@"5.0.1" from the root project 
npm ERR!   peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" from tsutils@3.21.0
npm ERR!   node_modules/tsutils
npm ERR!     tsutils@"^3.21.0" from @typescript-eslint/eslint-plugin@5.62.0
npm ERR!     node_modules/@typescript-eslint/eslint-plugin   
npm ERR!       @typescript-eslint/eslint-plugin@"^5.5.0" from
 eslint-config-react-app@7.0.1
npm ERR!       node_modules/eslint-config-react-app
npm ERR!         eslint-config-react-app@"^7.0.1" from react-scripts@5.0.1
npm ERR!         node_modules/react-scripts
npm ERR!       1 more (eslint-plugin-jest)
npm ERR!     tsutils@"^3.21.0" from @typescript-eslint/type-utils@5.62.0
npm ERR!     node_modules/@typescript-eslint/type-utils      
npm ERR!       @typescript-eslint/type-utils@"5.62.0" from @typescript-eslint/eslint-plugin@5.62.0
npm ERR!       node_modules/@typescript-eslint/eslint-plugin 
npm ERR!         @typescript-eslint/eslint-plugin@"^5.5.0" from eslint-config-react-app@7.0.1
npm ERR!         node_modules/eslint-config-react-app        
npm ERR!         1 more (eslint-plugin-jest)
npm ERR!     1 more (@typescript-eslint/typescript-estree)   
npm ERR!   1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"5.0.1" from the root project       
npm ERR!
npm ERR! Conflicting peer dependency: typescript@4.9.5       
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"5.0.1" from the root project     
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry      
npm ERR! this command with --force or --legacy-peer-deps     
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\LG\AppData\Local\npm-cache\_logs\2023-11-30T07_58_08_395Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\LG\AppData\Local\npm-cache\_logs\2023-11-30T07_58_08_395Z-debug-0.log

원인

길어서 무슨 에러인지 한 번에 파악은 안됐는데, 마지막 줄의 다음 이미지 부분을 보고

typescript랑 react-scripts 종속성 간의 버전 충돌로 인한 에러라는 걸 알았다.

에러메시지를 자세히 보면 권고사항도 나와있는데, react-scripts 패키지가 최소한 "^3.2.1 || ^4" 버전의 TypeScript를 필요로 하는데, 현재 설치된 TypeScript 버전이 달라서 에러가 발생한다는 내용이 있었다.

(=> 즉 호환되는 typescript 버전으로 변경하라는 소리)

해결

1. react-scripts 버전 업데이트 또는 typescript 버전 변경

npm install react-scripts@latest
// or
npm install typescript@^4 // 또는 3.2.1 버전

2. --force 또는 --legacy-peer-deps 플래그 사용하여 설치

npm i --save @fortawesome/react-fontawesome@latest --legacy-peer-deps
// or
npm i --save @fortawesome/react-fontawesome@latest --force

이중 에러메시지에서 제안해준 해결 방법인 --legacy-peer-deps 플래그를 추가해서 패키지를 다시 설치해줬고, 성공적으로 패키지 설치가 되는 것을 확인할 수 있었다 :)

[React 에러] Cannot find module 'react-dom/client 에러 해결

dev_genie — Thu, 30 Nov 2023 13:56:15 +0900

에러

React v18 환경에서 v17으로 다운그레이드 하고나니까 아래 같은 에러가 발생했다.

[에러 코드]

Cannot find module 'react-dom/client'

원인

index.js 파일에서 react-dom/client 모듈을 찾을 수 없어서 발생한 문제다.

react-dom/client는 v18에서 새로 추가된 모듈이다.

React v18 부터는 이 모듈을 이용해 DOM을 렌더링한다.

반면 React v18 이전 버전은 다른 모듈(react-dom)을 사용하여 렌더링한다.

따라서 이걸 회귀시켜주면 된다.

해결

이전 방식의 react-dom을 사용하여 DOM을 렌더링 해주면 된다.

1. ReactDOM을 react-dom 에서 import 해준다.

// import ReactDOM from 'react-dom/client'; // react v18 버전용
import ReactDOM from 'react-dom';  // react v17 버전용

2. DOM 렌더링 코드를 수정해준다.

// react v 18 버전 용
// const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
// root.render(<App />);

// react v 17 버전용
ReactDOM.render(
  <React.StrictMode>
        <App />
  </React.StrictMode>,
  document.getElementById('root')
);

이와 같은 문제를 피하기 위해선

버전별 업데이트된 사항을 잘 숙지하고, 공식문서를 평소 탐독하는 것이 중요할 것 같다.

[JS/라이브러리] chart.js - 차트 라이브러리 사용법

dev_genie — Wed, 29 Nov 2023 19:30:57 +0900

chart.js란?

canvas를 이용하여 다양한 종류의 차트를 생성할 수 있는 데이터 시각화 라이브러리다.

이 라이브러리를 사용하면 쉽고 간단하게 데이터 기반의 반응형 차트를 생성할 수 있다.

Getting Started | Chart.js

Getting Started Let's get started with Chart.js! Alternatively, see the example below or check samples. Create a Chart In this example, we create a bar chart for a single dataset and render it on an HTML page. Add this code snippet to your page: You should

www.chartjs.org

사용법

1. 다운로드

// cdn
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

// npm
npm install chart.js

2. 기본 구성

<body>
    <!-- 차트 표시할 엘리먼트 -->
    <div class="container text-center">
        <div class="row">
            <div class="col-md-12">
                <canvas id="chart-container"></canvas>
            </div>
        </div>
    </div>
    <script>
        const chartEl = document.getElementById('chart-container').getContext('2d');
        const barChart = new Chart(chartEl, {
            type: 'line',
            data: {
                labels: ['1월', '2월', '3월', '4월'],
                datasets: [{
                    label: '월별 매출액',
                    borderWidth: 3,
                    data: [
                        30000000,
                        80000000,
                        120000000,
                        300000000
                    ]
                }]
            },
        });
    </script>
</body>

3. 설정 옵션

type: 차트의 유형
datasets: 차트에 표시되는 데이터 정의
label: 데이터셋의 레이블
data: 차트에 표시할 실제 데이터값
labels: 차트의 각 데이터 포인트에 대한 레이블

이외에도 범례 설정을 위한 legend 등 다양한 옵션들이 있다.

결과 화면

차트 종류로는 아래같은 'bar', 'doughnut', 'line', 'radar', 'pie', 'polarArea', 'bubble' 등이 있다.

type에 단어를 넣어주면 원하는 차트 유형으로 변경할 수 있다.

① type: 'bar' - 막대 차트

② type: 'doughnut' - 도넛 차트

③ type: 'line' - 선형 차트

④ type: 'radar' - 레이더 차트

⑤ type: 'pie' - 파이 차트

⑥ type: ' polarArea ' - 원형 영역 차트

⑦ type: ' bubble ' - 버블 차트

이외 추가적으로 기존 차트에 데이터 레이블을 추가하려면 아래의 datalabels 라는 플러그인을 추가로 설치해줘야 한다.

Getting Started | chartjs-plugin-datalabels

Getting Started Installation npm (opens new window) (opens new window) CDN (opens new window) (opens new window) By default, https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels returns the latest (minified) version, however it's highly recommended (open

chartjs-plugin-datalabels.netlify.app

[Vue3 에러] Component name should always be multi-word 에러 해결

dev_genie — Wed, 29 Nov 2023 16:39:47 +0900

참고

https://eslint.vuejs.org/rules/multi-word-component-names.html#vue-multi-word-component-names

에러

보통 컴포넌트 파일 이름을 지을 때 xxComp.vue 라고 하는 편인데

이번엔 'Comp' 는 빼고 그냥 xx.vue 형식으로 파일 이름을 지었더니 아래같은 에러가 발생했다.

컴포넌트 이름은 항상 여러 단어로 이루어져있어야 된다는 뜻의 에러인데..

왜 Vue 컴포넌트의 이름은 항상 여러 단어여야 하는걸까? 궁금해서 찾아보았다.

원인

eslint-plugin-vue 공식문서에서 vue/multi-word-component-names 규칙에 관해 찾아보았다.

단일 단어로 구성된 HTML 엘리먼트와의 충돌을 방지하기 위해 vue에서 제공하는 빌트인 컴포넌트를 제외한 컴포넌트의 이름은 항상 여러 단어로 구성되어야 한다고 한다.

해결

아래처럼 다중 단어로 이뤄진 이름을 사용하면 에러가 깔끔하게 해결된다!

vue/multi-word-component-names 규칙을 꺼두는 것으로도 해결할 수 있었겠지만,

가급적이면 규칙을 따르고자 그냥 이름을 바꿔줬다.

웹 접근성과 시맨틱 마크업 | 검색엔진(SEO) 최적화

dev_genie — Tue, 28 Nov 2023 23:14:11 +0900

시맨틱 마크업(Semantic Markup)

시맨틱(Semantic) 이란 "의미론적인"의 뜻을 가지며, 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서 시맨틱 마크업이란, 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.

시맨틱 마크업은 다음과 같이 표현할 수 있다.

작성 방법

시맨틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 한다.

예를들어 다음과 같이.

- 헤더/푸터에 <header>와 <footer> 사용

- 메인 컨텐츠에 <main>과 <section> 사용

- 독립적인 컨텐츠에 <article> 사용

- 최상위 제목으로 <h1> 사용

- 순서가 없는 목록으로 <ul>과 <li> 사용

- 네비게이션에 <nav> 사용

이런 식의 태그가 가지고 있는 의미에 맞게 사용하는 것을 말하는데,

이런 점 외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류라 할 수 있다. 즉, 태그가 가지는 의미 자체가 스타일이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않다.

예를 들어, 동일한 효과를 부여하는 <strong>과 <b> 태그가 있다.

둘은 동일하게 글자색을 진하게 하는 기능을 하지만 <b> 태그의 경우는 그 자체가 "bold"의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다. 하지만 <strong>의 경우에는 "그 안의 내용이 다른 내용보다 더 강조되어야 한다"라는 의미를 가지기 때문에 시맨틱 마크업에 더 적합하다.

특징

검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에, 검색엔진 최적화(SEO)에 유리하다.
웹 접근성 측면에서, 시각장애가 있는 사용자가 스크린리더를 통해 의미를 더 잘 파악할 수 있다.
- 스크린리더가 strong 태그를 만나면 조금 더 강하게 말해준다. 예를 들어 p태그 안에 "볼드체" 라는 텍스트가 있다고 해보자. p태그의 font-weight 안의 text는 그냥 일반적인 톤으로 "볼드체"라고 읽는다면, strong 태그 안의 text는 강조된 톤으로 " p태그안의↗ strong태그↗ 입니다↗" 로 읽는다. 그러면 시각장애인은 해당 음성만 듣고도 페이지에서 중요한 부분이 어디에 있는지를 인식할 수 있게 된다.
단순히 div, span으로 둘러싸인 요소들보다 코드의 가독성이 좋다.

시맨틱 마크업 HTML

1. <title>과 <h>태그

<head>에 위치한 title과 h태그(제목태그)는 현재 페이지의 주제를 알려줄 수 있는 태그이기 때문에 각 페이지마다 신경써서 작성해야 한다.

회사명이나 사이트명 등 해당 페이지의 주제를 효과적으로 전달할 수 있는 제목을 title태그에 정확하게 작성해야 하며 각 페이지별로 다르게 작성하는 것이 좋다. 타이틀의 경우 ‘제목 없음’이나 ‘새 페이지’와 같은 의미없는 타이틀을 넣지 않도록 하며, 불필요한 키워드나 너무 긴 텍스트를 사용하지 않는 것이 좋다.

<h> 제목 태그의 경우 중요한 텍스트를 강조하거나 콘텐츠의 계층 구조를 만들어 사용자가 문서를 더 쉽게 탐색할 수 있도로 한다. 너무 긴 제목과 한페이지내에 과도한 사용을 지양해야 한다. 따라서 꼭 필요한 경우에만 사용하고 단순히 디자인적으로 강조가 필요할때는 제목태그 대신 <em>이나 <strong>같은 태그를 사용하는 것이 좋다.

2. 메타 설명 태그 <meta name=“description” content=“페이지 설명”>

메타 설명태그는 <head>에 위치하는 태그로 검색엔진에 페이지의 내용을 요약하여 제공하며 길이 제한은 없지만 한두 문장 또는 짧은 단락 정도로 작성한다. 메타 설명태그는 구글Google 검색 결과에서 페이지의 스니펫으로 사용할 수 있기 때문에 이 태그를 잘 작성하면 구글봇뿐만 아니라 사용자가 해당 페이지의 내용을 이해하는데 도움이 된다.

위 이미지에서 vibe 라는 타이틀 아래 짧은 한줄의 스니펫이 들어가있는 걸 볼 수 있는데

vibe 사이트 개발자모드를 확인하면 바로 아래같이 메타 설명태그에 작성한 내용이 스니펫으로 들어가있다는 걸 확인할 수 있다.

3. 시각자료는 텍스트로 설명한다.

컴퓨터는 이미지나 영상같은 시각자료에 대한 정보를 텍스트로 알 수 있기때문에 이에 대한 설명을 반드시 추가해줘야 한다. 이미지의 경우 대체텍스트 alt를 단순히 파일 제목으로 하기보다는 간단하게라도 이미지에 대해 설명하는 글을 넣어주는 것이 좋다. 이는 시각장애인들이 사용하는 스크린 리더기가 이미지를 읽는 방법이기도 하고 이미지에 링크를 사용할 경우 앵커텍스트로써의 역할도 한다.

4. 페이지, 콘텐츠별 고유한 URL

이해하기 쉬운 url을 통해 구글봇과 사용자에게 콘텐츠의 내용을 전달할 수 있다. 여러개의 하위 카테고리나 메뉴가 있을 경우 디렉토리 구조를 최대한 단순하게 만들고 의미없는 id나 암호화된 문자보다는 홈페이지(메인페이지)를 기반으로 탐색경로나 카테고리가 반영된 url을 사용하는 것이 좋다. 아래 LG전자의 경우 url만 봐도 사용자가 현재 어떤 카테고리에서 어떤 상품을 보고 있는지 알 수 있기때문에 사이트를 탐색하기 편리하다.

5. CSR과 SSR (vue와 nuxt)

대부분의 웹 크롤러들은 HTML에서 컨텐츠를 수집하는데 CSR 방식의 경우 서버는 단지 json파일만 보내주고 HTML을 그리는 역할은 클라이언트에서 js로 수행하기때문에 CSR방식으로 개발된 페이지를 빈페이지로 인식할수도 있다. 반면 SSR 방식은 View를 서버에서 전부 렌더링하기 때문에 HTML에 모든 컨텐츠가 저장되어 있어 SEO를 사용하는데 문제가 없다. 현재 구글봇의 경우 자바스크립트도 지원하고 있어 CSR 방식의 사이트도 크롤링이 가능하다고 하지만 vue보다는 SSR방식을 사용하는 nuxt가 검색엔진 최적화에 적합하다고 할 수 있다.

검색엔진(SEO) 최적화

검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전 세계의 웹사이트 정보를 수집한다. (이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.) 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)인덱스를 생성할 때 사용되는 정보는 검색로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다. 검색엔진 봇은 작성된 HTML 구조와 그 안에 담긴 텍스트를 분석함으로써 정보를 획득하고 종합하여 검색결과 상위에 노출될 수 있도록 최적화한다.

웹 접근성(Web Accessibility)

웹 접근성이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 대해 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 말한다.

웹 접근성 자가 진단 평가 도구

https://www.tpgi.com/color-contrast-checker/%EF%BB%BF : 웹 접근성 진단 서비스
https://www.tpgi.com/color-contrast-checker/ : 명도 대기 확인 서비스
https://jigsaw.w3.org/css-validator/ : 마크업, 웹 접근성 오류를 확인하고 웹 표준 검사할 수 있는 서비스

웹 접근성 가이드 참고

https://www.wah.or.kr:444/ : 웹접근성 연구소
https://news.seoul.go.kr/gov/archives/47485 : 서울시 웹접근성 및 웹표준 준수 가이드

검색엔진 상위노출 가이드

https://minsoftk.tistory.com/68 : 구글 검색센터 SEO
https://searchadvisor.naver.com/guide/seo-help : 네이버 서치어드바이저

정적/동적 웹페이지 특징 및 장단점

dev_genie — Tue, 28 Nov 2023 20:07:26 +0900

인터넷을 이용하면서 접속하게 되는 웹페이지는 크게 둘로 나뉜다.

마치 컴퓨터에 저장된 메모장 파일을 열어보듯 그대로 보는 정적 웹페이지,

다른 변수들에 의해 변경되어 보이는 동적 웹페이지.

정적 웹페이지 특징

출처: 위키백과

웹서버에 이미 저장된 html 문서를 클라이언트에게 전송하는 웹페이지
사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹페이지를 보게 된다.
모든 사용자는 같은 결과의 웹 페이지를 서버에 요청하고 응답 받는다.
Ex) 회사소개 페이지, 음식메뉴, 백과사전 등 내용이 변하지 않고 고정적인 페이지

case1. 나무위키 검색결과페이지

case2. 회사 소개페이지

동적 웹페이지 특징

출처: 위키백과

요청 정보를 처리한 후에 제작된 HTML 문서를 클라이언트에게 전송하는 웹페이지
사용자는 상황, 시간, 요청 등에 따라 달라지는 웹페이지를 보게 된다.
같은 페이지라도 사용자마다 다른 결과의 웹페이지를 서버에 요청하고 받을 수 있다.
우리가 보는 대부분의 웹페이지는 동적 웹페이지다.
Ex) 계속해서 다른 화면을 큐레이션해서 보여줘야 하는 유튜브, 인스타 페이지

case1. 스크롤 down시 계속 새로운 영상이 나타나는 유튜브

case2. 보고 있는 위치에 출력 결과와 url이 계속 변하는 네이버 지도

정적 웹페이지 장/단점

장점

1. 빠르다 : 요청에 대한 파일만 전송하면 되기 때문에 추가적인 작업이 필요없다.

2. 적은 비용 : 웹 서버만 구축하면 되기 때문에 비용이 적게 든다.

단점

1. 한정적인 서비스 : 저장된 정보만 보여줄 수 있다.

2. 어려운 관리 : 추가, 수정, 삭제 작업 모두 수동으로 이뤄져야 한다.

동적 웹페이지 장/단점

장점

1. 다양한 서비스 : 다양한 정보를 조합하여 동적인 페이지 제공이 가능하다.

2. 쉬운 관리 : 웹사이트 구조에 따라서 추가, 수정, 삭제 등의 작업이 용이하다.

단점

1. 느린 속도 : 사용자에게 웹페이지를 전달하기 전에 처리하는 작업이 필요하다.

2. 추가 비용이 듦 : 웹서버 외 추가적으로 처리를 위한 애플리케이션 서버가 필요하다.

동기/비동기 개념과 프로세스와 스레드

dev_genie — Tue, 28 Nov 2023 13:32:07 +0900

동기(Synchronous)

작업을 다른 스레드로 보낸 후, 그 작업이 끝나길 기다렸다가 다음 일을 진행한다 (직렬적으로 진행)
다른 스레드로 보낸 작업이 끝날 때까지 작업 중단(blocking)이 일어난다.
시작 시점과 끝나는 시점이 일치한다.
한 스레드에서 여러 요청을 동시에 처리할 수 없다.

비동기(Asynchronous)

작업을 다른 스레드로 보낸 후, 그 작업이 끝나길 안 기다리고 다음 일을 진행한다 (병렬적으로 진행)
여러 스레드에서 요청을 동시에 처리할 수 있다.
작업이 언제 끝날지 예측하기 힘들기 때문에, 보통 시간이 많이 걸리는 작업을 요청할 때 쓰인다.

직렬(Serial)

메인스레드에서 다른 스레드로 분산처리 시킨 작업을 오직 하나의 스레드에서만 순차적으로 처리하는 것을 말한다.

즉 1번 스레드에서 4개의 작업을 분산처리 시켰는데, 이를 2번 스레드에서만 처리하는 것이다.

동시(Concurrent)

메인스레드에서 다른 여러 개 스레드로 작업을 분산시켜 동시에 처리하는 것을 말한다.

작업들이 각자 독립적이지만 유사한 작업들일 경우 유용한 처리 방식이다.

여기서 드는 의문..

1. 동시랑 비동기는 같은 개념인가?

2. 직렬은 왜 사용하지? 동시가 더 좋아보인다.

비동기가 동시는 비슷해보이나, 아예 다른 개념이다.

동기와 비동기는 메인 스레드의 대기열을 어떤 방식으로 처리할지를 정하는 것.

직렬과 동시는 어떤 대기열을 사용할 지를 정하는 것(한 개 or 여러 개 스레드).

작동되는 개념이 비슷하다고 혼용해서 생각하지 말자! 아예 다른 개념이다.

직렬을 사용하는 이유

작업의 '순서'가 중요할 때 직렬이 사용된다.

동시는 여러 개 스레드에서 분산 처리하기 때문에 순서에 상관하지 않고 스레드에 할당된 작업은 각 스레드가 모조리 처리하는 특징이 있다. 이 때문에 만약 어떤 작업이 꼭 먼저 이뤄져야 하는 경우라면, 그럴 때는 직렬을 사용하는 것이 좋다.

프로세스(Process)

실행 중인 프로그램을 나타낸다. 하나의 프로세스는 여러 개의 스레드를 가진다.

스레드(Thread)

프로세스 내에서 실행되는 작업의 단위를 가리킨다. 스레드는 프로세스 내의 메모리 공간을 공유하기

때문에, 같은 프로세스 내에서 실행되는 스레드들은 서로 간에 데이터를 공유할 수 있다.

작업관리자에서 프로세스를 자세히 보면 몇 개의 스레드가 돌아가고 있는지 확인이 가능하다.

멀티스레딩(Multi-Thread)

하나의 프로세스 내에서 여러 개의 스레드를 동시에 실행하는 것을 말한다.

대표적으로는 Java가 이러한 멀티 스레딩 방식을 채택하고 있다.

멀티스레딩의 한계

일반적으로 클라이언트의 요청마다 스레드를 발생시킨다.

동시 접속자 수가 많다는 것은, 그만큼 스레드가 많이 발생한다는 의미이며 따라서 메모리 자원도 많이 소모되게 된다. 그러나 서버의 자원은 제한되서 일정 수 이상의 스레드를 발생시킬 수 없다.

이러한 근본적인 문제들로, 서버를 업그레이드 하거나 로드 밸런싱(Load-Balancing) 으로 분산처리 해야하며

또한 스레드 간의 데이터 공유나 동기화 문제 등을 해결해야 하는 복잡한 작업들이 필요하다.

이로 인해 개발이 어려워지고, 복잡한 애플리케이션에서는 교착 상태나 경합 조건과 같은 문제가 발생하기도 한다.

이때 Node의 장점이 있는데, Node는 내부적으로는 멀티 스레드를 사용하지만, 개발자가 직접 스레드를 조작하거나 생성할 필요가 없이 주요 작업은 싱글 스레드에서 실행된다. 따라서 복잡한 동기화 문제를 해결할 필요가 없어 개발이 간편해지고, 작업 처리 속도가 빨라지게 된다. 또한 이벤트 루프를 통해 비동기 작업을 처리함으로써, 자원 사용량이 최소화되며 확장성도 높아진다는 장점이 있다.