외곈 World 👽🌏

리액트 프로젝트에서 CSS 방식, dangerouslySetInnerHTML, 별도의 컴포넌트 방식 등으로 문자열 데이터의 줄바꿈 처리를 구현 할 수 있다.

최종적으로 권장하는 방식은 별도의 컴포넌트 방식이다. 이 방법은 다음과 같은 이유로 가장 적합하다:

• 재사용성: 같은 줄바꿈 로직을 여러 컴포넌트에서 재사용할 수 있다.
• 유지보수: 메시지 포매팅 로직을 한 곳에서 관리할 수 있어, 변경사항이 있을 때 모든 컴포넌트에 일관되게 적용하기 쉽다.
• 확장성: 추후에 메시지 처리 로직에 추가적인 변환 로직(예: 특정 단어에 스타일 적용)이 필요할 때 이 컴포넌트를 확장하기 쉽다.

이 방법은 보안적으로 안전하며, dangerouslySetInnerHTML의 보안 취약점 없이 유사한 유연성을 제공한다. CSS 방식은 매우 단순하지만, 메시지 처리에 있어 다른 HTML 태그 적용이 불가능하다는 단점이 있어 복잡한 요구사항에는 적합하지 않다.

1. CSS 사용 - 가장 간단

가장 간단하고 직관적인 방법이다. CSS의 white-space: pre-line; 속성을 사용해 문자열 내의 줄바꿈(\n)을 HTML에서 인식할 수 있도록 한다.

interface Props {
  message: string;
}

export default function Intro({ message }: Props) {
  return (
    <div style={{ whiteSpace: 'pre-line' }}>
      {message}
    </div>
  );
}

2. dangerouslySetInnerHTML 방식 - 권장되지 않음

dangerouslySetInnerHTML를 사용하여 HTML로 메시지를 직접 렌더링하는 방법이다. XSS 공격에 취약할 수 있으므로 사용할 때 주의가 필요하다.

interface Props {
  message: string;
}

export default function Intro({ message }: Props) {
  const formattedMessage = { __html: message.replace(/\n/g, '<br>') };
  return (
    <div dangerouslySetInnerHTML={formattedMessage} />
  );
}

3. 별도의 컴포넌트 방식 ⭐권장

메시지 내의 \n을 <br /> 태그로 변환하여 렌더링하는 별도의 컴포넌트를 사용하는 방법이다. 가장 유연하고 재사용성이 높은 방법이다.

interface Props {
  message: string;
}

export default function Intro({ message }: Props) {
  const formattedMessage = message.split('\n').map((part, index, array) => (
    <React.Fragment key={index}>
      {part}{index !== array.length - 1 && <br />}
    </React.Fragment>
  ));

  return (
    <div>
      {formattedMessage}
    </div>
  );
}

🎈 dangerouslySetInnerHTML

dangerouslySetInnerHTML은 React에서 HTML을 직접적으로 DOM에 삽입할 때 사용하는 속성이다. 이 이름에 dangerously라는 단어가 들어간 이유는 HTML을 직접 조작할 때 보안 위험이 있을 수 있음을 강조하기 위해서다.

사용법

dangerouslySetInnerHTML은 객체를 속성 값으로 받고, 이 객체는 __html 키를 포함해야 한다. 이 키의 값으로는 HTML 문자열이 들어간다. 외부에서 가져온 HTML을 삽입할 때 주로 사용되는데, React는 기본적으로 직접적인 HTML 삽입을 방지해서 XSS 공격을 막으려고 하기 때문에, 이를 우회하기 위해 사용된다.

function MyComponent() {
  return <div dangerouslySetInnerHTML={{ __html: '<strong>안녕하세요</strong>' }} />;
}

장점

• 직접적인 HTML 삽입: 기존 HTML 문자열을 DOM에 바로 삽입할 수 있어서, 서버나 외부에서 가져온 마크업을 그대로 렌더링할 때 유용하다.
• 유연성: 특정 라이브러리나 도구에서 생성된 HTML을 React 컴포넌트와 통합할 수 있다.

단점

• 보안 위험: XSS 공격에 취약하다. 외부에서 가져온 데이터가 검증되지 않으면 악의적인 스크립트가 포함될 수 있다.
• SEO 최적화: 정적인 페이지 생성에는 적합하지 않다. 크롤러가 JavaScript를 실행하기 전에 페이지의 내용을 인식하지 못할 수도 있다.
• 성능 문제: React의 가상 DOM과의 동기화 문제로 인해 성능이 저하될 수 있다.

대체 방법

• React 컴포넌트 사용: HTML을 React 컴포넌트로 변환해서 사용한다. 이 방법은 XSS 공격의 위험을 줄이고, React의 성능 최적화를 유지할 수 있다.
• DOMPurify와 같은 라이브러리 사용: 외부 HTML을 삽입하기 전에 클린업하고 안전하게 만든다. 이 방법은 위험한 태그와 속성을 제거하여 안전한 HTML만 삽입되도록 한다.
• Markdown 라이브러리 사용: 사용자가 입력한 Markdown 텍스트를 안전하게 HTML로 변환할 수 있다. 이 방법은 블로그 게시물이나 코멘트 시스템에 유용하다.

dangerouslySetInnerHTML을 사용할 때는 보안을 특히 주의해야 하고, 가능하면 안전한 대체 방법을 사용하는 편이 좋다.

🎈 date-fns

date-fns는 날짜와 시간 데이터를 다루기 위해 자바스크립트에서 유용하게 사용할 수 있는 경량화된 라이브러리이다.

✅ 라이브러리 설치

yarn add date-fns

✅ date-fns 장점

1. 단순성: date-fns는 필요한 기능만을 가져와 사용할 수 있어서 복잡성을 줄이고 필요 없는 코드를 포함하지 않는다.
2. 모듈화: 모든 함수가 독립적이므로 특정 기능만 사용하려면 필요한 모듈만 가져오면 된다.
3. 일관된 API: 날짜와 시간 처리를 위한 다양한 함수들이 통일된 방식으로 사용된다.
4. 타임존 지원 및 확장성: date-fns는 복잡한 타임존 변환 등을 지원하며, Date 객체의 복잡성을 간소화해준다.
5. 퍼포먼스: Moment.js와 비교해 가볍고 빠르게 동작하며, 번들 크기도 더 작다.

✅ date-fns 주요 사용 예시

1. parseISO()

문자열로 된 ISO 날짜를 Date 객체로 변환하는 함수.

const weddingDate = parseISO(date);

date는 ISO 8601 포맷(예: "2024-11-12T12:30:00")인 문자열로 전달되며, 이를 Date 객체로 변환해 다양한 날짜 연산에 사용된다.

2. format()

• 날짜 객체를 특정 형식으로 변환하여 문자열로 출력.
  

  format(weddingDate, 'yy.MM.dd')

  weddingDate를 yy.MM.dd 포맷(예: "24.11.12")으로 포맷팅한다.

3. getDay()

• 주어진 Date 객체에서 요일을 숫자(0~6)로 반환한다. (0은 일요일, 6은 토요일)
  

  const dayIndex = getDay(weddingDate);

  DAYS[dayIndex]와 함께 사용하여 해당 요일을 문자열로 변환할 수 있다.
  
        <div className={cx('txt-day')}>{DAYS[dayIndex]}</div>

왜 date-fns를 사용하는가?

1. 날짜 연산의 복잡성: 기본 Date 객체로 날짜 연산을 처리하려면 복잡하고 에러가 발생하기 쉬운 코드가 되기 쉽다. date-fns는 이러한 작업을 훨씬 간결하고 읽기 쉽게 만들어준다.
2. 가독성 향상: 날짜를 포맷하거나 변환하는 코드를 직접 작성하는 것보다 format() 같은 유틸리티 함수가 코드의 가독성을 높인다.
3. 유지 보수성: 내장 Date 객체 메서드는 브라우저 간 일관성이 부족할 수 있지만, date-fns는 모든 환경에서 일관되게 동작한다.

🎈 JSON Server 사용하기

1. REST / REST API / Json Server

• REST: 웹의 기본 프로토콜인 HTTP 를 기반으로 구현되며 , HTTP 메서드와 URL 을 이용하여 자원과 하고자하는 행동을 표현함.
• REST API: REST 한 방식으로 설계된 API.
• Json Server: JSON 파일을 이용하여 Rest API 서버를 빠르고 간단하게 생성 하기 위한 도구. 
  ex) (GET) http://example.com/wedding/1 : 1번 id 청첩장 가져오기

2. JSON Server 사용하기

https://github.com/typicode/json-server

01. JSON Server 설치

yarn add -D json-server

• 루트경로에 db.json 생성

{
  "posts": [
    { "id": "1", "title": "a title", "views": 100 },
    { "id": "2", "title": "another title", "views": 200 },
    { "id": "3", "title": "json-server", "views": 200 }

  ],
  "comments": [
    { "id": "1", "text": "a comment about post 1", "postId": "1" },
    { "id": "2", "text": "another comment about post 1", "postId": "1" }
  ],
  "profile": {
    "name": "typicode"
  }
}

• package.json에 아래 내용 추가

"dev:db": "json-server --watch db.json --port=8888" 
// watch옵션을 주면 db.json의 변경사항을 개발서버에 실시간 반영해준다.

• 실행

yarn dev:db

02. 동작 test (https://github.com/typicode/json-server?tab=readme-ov-file)

• Filter
  

  

  •  title이 json-server인 데이터 불러오기 테스트
    http://localhost:8888/posts?title=json-server
• 실행결과 
  

  

  
  
• Paginate
  Use _page and optionally _limit to paginate returned data. In the Link header you'll get first, prev, next and last links.
  

  GET /posts?_page=7   
  ​

  • _page=7 : 일곱 번째 페이지를 요청한다.
  • _limit 파라미터가 명시되지 않았으므로, json-server는 기본적으로 페이지당 10개의 항목을 반환한다.
  • 결과 : 기본 페이지당 10개 항목을 사용해 61~70번째 데이터를 반환한다.

  GET /posts?_page=7&_limit=20
  

  • _page=7: _page=7으로 일곱 번째 페이지를 요청한다.
  • _limit: _limit=20을 지정하여 페이지당 20개의 항목을 가져온다.
  • 일곱 번째 페이지에서 20개의 항목을 반환한다. 따라서, posts 데이터 중 121번째에서 140번째 항목까지를 반환한다. 
• Sort
  _sort=f1,f2
  데이터를 특정 필드를 기준으로 정렬할 수 있다. 정렬할 때는 쿼리 파라미터 _sort를 사용하고, 정렬 순서는 기본적으로 오름차순이며, 내림차순으로 설정하려면 필드 앞에 -를 붙인다.
  

  GET /posts?_sort=id,-views

  1. GET /posts?_sort=id
  • id 필드를 기준으로 오름차순 정렬
  • posts 데이터가 id 값이 작은 순서대로 정렬되어 반환 된다.
  2. GET /posts?_sort=-views
  • views 필드를 기준으로 내림차순 정렬합니다.
  • posts 데이터가 views 값이 큰 순서대로 정렬되어 반환 된다.
  3. 다중 정렬 예시: GET /posts?_sort=id,-views
  • 여러 개의 필드를 정렬 기준으로 사용할 수 있으며, id 필드를 오름차순으로 먼저 정렬한 다음, 동일한 id 값이 있을 경우 views 필드를 기준으로 내림차순 정렬한다.
  • 우선 id 값이 작은 순서대로 정렬되며, 같은 id 값을 가진 항목들은 views 값이 큰 순서대로 정렬된다.

👿 에러상황

eslint prettier 줄바꿈 에러 왕창………

ERROR in [eslint]
src\\App.tsx
  Line 1:26:   Delete `␍`  prettier/prettier
  Line 2:30:   Delete `␍`  prettier/prettier
  Line 3:19:   Delete `␍`  prettier/prettier
  Line 4:1:    Delete `␍`  prettier/prettier
  Line 5:41:   Delete `␍`  prettier/prettier
  Line 6:39:   Delete `␍`  prettier/prettier
  Line 7:1:    Delete `␍`  prettier/prettier
  Line 8:35:   Delete `␍`  prettier/prettier
  Line 9:17:   Delete `␍`  prettier/prettier
  Line 10:11:  Delete `␍`  prettier/prettier
  Line 11:38:  Delete `␍`  prettier/prettier
  Line 12:38:  Delete `␍`  prettier/prettier
  Line 13:59:  Delete `␍`  prettier/prettier
  Line 14:12:  Delete `␍`  prettier/prettier
  Line 15:60:  Delete `␍`  prettier/prettier
  Line 16:13:  Delete `␍`  prettier/prettier
  Line 17:11:  Delete `␍`  prettier/prettier
  Line 18:31:  Delete `␍`  prettier/prettier
  Line 19:37:  Delete `␍`  prettier/prettier
  Line 20:26:  Delete `␍`  prettier/prettier
  Line 21:36:  Delete `␍`  prettier/prettier
  Line 22:10:  Delete `␍`  prettier/prettier
Failed to compile.

🧐 에러 원인

Git 설정과 VSCode 설정이 서로 충돌했기 때문에 에러 발생. "files.eol": "\n" 설정이 이미 VSCode에 있었지만, Git이 줄 바꿈 형식을 자동으로 변환하는 설정(core.autocrlf)이 활성화된 상태였기 때문에 발생한 문제

✨ 에러 해결

✅ Git 설정 업데이트

Windows에서 CRLF가 기본 줄 바꿈이 되지 않도록 다음 명령어로 Git 설정을 업데이트합니다.

# 프로젝트 로컬에서 실행
git config core.autocrlf false

# 글로벌 설정을 업데이트하는 경우
git config --global core.autocrlf false

• 모든 파일 LF로 변환

# Windows 환경에서 Git Bash 또는 WSL 사용 시
git ls-files -z | xargs -0 dos2unix

::참고:: 

Prettier 및 ESLint 강제 적용

npx prettier --write .
yarn eslint --fix .

VSCode에서 줄 바꿈 일괄 변경

• 명령 팔레트(Ctrl+Shift+P)에서 “Change All End Of Line Sequence”를 선택하고, LF로 변경

👿 에러 상황

Compiled with problems:
ERROR
[eslint] Invalid Options: - Unknown options: extensions, resolvePluginsRelativeTo - 'extensions' has been removed. - 'resolvePluginsRelativeTo' has been removed.

🧐 에러 원인

ESLint 9 버전 문제로 발생

✨ 에러 해결

• eslint 9버전 제거

yarn remove eslint

• 다운그레이드

yarn add -D eslint@8.57.0

• yarn berry zero install - sdk 업데이트

yarn dlx @yarnpkg/sdks vscode

출처: https://mariais.tistory.com/entry/Eslint-error-해결-방법-extensions-has-been-removed-resolvepluginsrelativeto-has-been-removed

👿Yarn Berry 프로젝트 환경 설정 중 .yarn/cache 생성되지 않는 문제

Yarn Berry 프로젝트 환경 설정 중 .yarn/cache 생성되지 않는 문제. yarn install을 아무리 시도해도 캐시폴더가 생성되지 않음..

🧐 에러 원인

• 이전에는 enableGlobalCache의 기본값이 false였기 때문에, 각 프로젝트가 로컬 .yarn/cache 폴더에 의존성을 저장하도록 되어 있었다.
• 하지만 최근 업데이트에서 enableGlobalCache의 기본값을 true로 변경하여, 전역 캐시 사용을 기본 설정으로 적용하게 되었다.
• 따라서 Yarn의 최신 버전에서는 enableGlobalCache: false 설정을 .yarnrc.yml에 직접 추가해야만 로컬 캐시가 생성된다. 설정 파일에 해당 옵션을 직접 추가하지 않으면, Yarn은 전역 캐시를 사용하므로 .yarn/cache 폴더가 생성되지 않기 때문에 문제가 발생 했던 것!

✨ 에러 해결

• .yarnrc.yml 파일에 enableGlobalCache: false 설정 추가
  

  //.yarnrc.yml 
  nodeLinker: pnp
  enableGlobalCache: false
  ​

• 설정 변경 후 프로젝트 의존성 재설치
  

  yarn install

드디어 cache파일이 생성되었다!!

프로젝트 환경설정

🍀 ES Lint / Prettier 설정

1. eslint, prettier 패키지 설치
   • yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-config-react-app
2. Config 설정 분리
   • package.json의 "eslintConfig”부분을 별도의 .eslintrc.json파일로 분리 후 추가 설정 작성
     

     //.eslintrc.json
     
     {
         "extends": [
             "react-app",
             "react-app/jest",
             "plugin:prettier/recommended"
         ],
         "plugins":["prettier"],
         "rules":{
             "prettier/prettier":"error"
         }
     }
     ​

   • .prettierrc 파일 생성
     

     //prettierrc 
     
     {
         "useTabs": false,
         "printWidth": 80,
         "tabWidth": 2,
         "singleQuote": true,
         "trailingComma": "all",
         "endOfLine": "lf",  // 파일의 줄 끝(Line Ending) 형식을 지정
         "semi": false,
         "arrowParens": "always"
         }
     ​

3. setting.json 파일에 아래 코드 추가
   • Ctrl + Shift + P를 눌러 명령 팔레트를 열기 → "Preferences: Open Settings (JSON)"을 입력하고 선택

     // 수정 후 저장할 때 eslint로 autofix 실행
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "true"
     },
     // 파일의 줄 끝(Line Ending) 형식을 지정. 앞으로 생성되는 파일들은 lf(mac)로 생성됨
     "files.eol":"\\n",
   

   ✅ 파일의 줄 끝 형식 :: mac vs window
   "files.eol": "\n": 파일의 줄 끝을 유닉스/리눅스 스타일인 LF (Line Feed) 형식으로 지정
   "files.eol": "\r\n" : 파일의 줄 끝을 Windows 시스템의 기본 형식인 CRLF 형식으로 지정
   
   
4. vscode에 적용
   

   yarn dlx @yarnpkg/sdks vscode
   

5. prettier에서 세미콜론 제거 설정했기 때문에 package.json에 아래 코드 추가
   

   //package.json
       "lint": "eslint \\"src/**/*/{js,jsx,ts,tsx}\\"",
       "lint:fix": "eslint \\"src/**/*/{js,jsx,ts,tsx}\\""
   
   

   • 적용

   yarn lint:fix
   

6. Craco Alias 설정
   • 설치
     

     yarn add -D @craco/craco craco-alias

   • tsconfig.paths.json 정의
     

     // tsconfig.paths.json
     {
         "compilerOptions":{
             "baseUrl":".",
             "paths":{
                 "@/*": ["src/*"],
                 "@components/*":["src/components/*"]
             }
         }
     }

   • craco.config.js 정의
     

     // craco.config.js
     module.exports = {
       plugins: [
         {
           plugin: CracoAlias,
           options: {
             source: 'tsconfig',
             tsConfigPath: 'tsconfig.paths.json',
           },
         },
       ],
     }

   • Tsconfig에 tsconfig.paths.json extends 시키기
     

     // tsconfig.json
     {
       "extends": "./tsconfig.paths.json",
       "compilerOptions": {
         "target": "es5",
         "lib": ["dom", "dom.iterable", "esnext"],
         "allowJs": true,
         "skipLibCheck": true,
         "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,
         "strict": true,
         "forceConsistentCasingInFileNames": true,
         "noFallthroughCasesInSwitch": true,
         "module": "esnext",
         "moduleResolution": "node",
         "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
         "jsx": "react-jsx"
       },
       "include": ["src", "tsconfig.paths.json"]
     }
     
     ​

🍀 scss 설정

yarn add classnames sass

• global.scss 생성
• App.module.scss 생성
• src\App.tsx

import classNames from 'classnames/bind'
import styles from './App.module.scss'

const cx = classNames.bind(styles)

//    <div className={cx('container')}> 이런식으로 사용!