React) JSX

JSX란?`React` 문서에 따르면 아래와 같습니다React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 쉽게 말하면 `JavaScript`에서 `HTML` 태그를 작성 가능하게 하여 하나의 `JS` 파일에서 모든 내용을 작성 가능하게 한 기술을 말합니다.  JSX의 특징위의 설명과 같이 `JS`문법과 태그를 같이 사용이 가능합니다 `JSX`도 `JavaScript`에서 인식하는 객체이므로 함수를 호출 할 수 있습니다. function formatName(user) { return user.firstName + ' ' + user.lastName;}const user = { firstNa..

  • format_list_bulleted Frontend/React
  • · 2024. 5. 5.
  • textsms

[Next.js] 왜 두 번 렌더링 되는 것일까?

개요 이번에 회사에 사용되는 기술인 Next.js를 공부를 하면서 처음으로 궁금해 했던 문제가 왜 두 번의 렌더링을 수행하는 가? 였습니다. 매번 콘솔 로그가 두번씩 찍히는 모습이 마치 개발자가 잘 못 해서 그런 것 아닐까 라는 생각을 들게 했고 이러한 현상이 왜 발생하는지에 대해 공부해봤습니다. React Stric Mode 먼저 기술에 대한 이해를 하기전에 알아야 하는 것은 StricMode가 무엇인가를 알아야 합니다. StricMode 란 개발자가 애플리케이션에서 잠재적인 문제를 더 쉽게 발견할 수 있도록 만들어진 기능입니다. 이 모드는 개발 과정에서만 활성화되어, 성능 저하, 안전하지 않은 생면주기 메서드 사용, 레거시 API의 사용 등을 포함한 다양한 문제를 감지하는 도움을 줍니다. 두 번의 렌..

  • format_list_bulleted Frontend/Next.js
  • · 2024. 2. 28.
  • textsms
SSE(Server-Sent Event)

SSE(Server-Sent Event)

개요 백엔드를 주 개발을 하면서 뷰까지 개발하게 되면 `SSR`을 사용하게 되는데, 이러한 `SSR`을 사용하게 되면 문제는 실시간으로 반영되는 데이터를 유저에게 보여줄 수 없다는 것입니다. 그렇다면 유저는 당연하게도 원하는 데이터를 화면에서 보기 위해서 페이지 새로고침을 해야 한다는 것입니다. 이러한 문제를 해결하기 위해서 사용되는 방식은 `SSE`와 웹소켓인데 이번 그 중에서 `SSE`를 `Nest.js`로 구현하면서 이해 해보고자합니다. SSE vs Web Socket 기술을 사용하기 전에 실시간 통신을 하기위해 사용되는 `SSE`와 `Web Socket`은 어떠한 차이가 있는지 알아 보고자 합니다. SSE `단방향 통신` : SSE는 오로지 서버에서 클라이언트 쪽 서버로만 데이터를 보낼 수 있는 ..

  • format_list_bulleted Backend/Nest.js
  • · 2024. 2. 2.
  • textsms
Node.js child_process

Node.js child_process

Node.js에서 child_process 모듈은 자식 프로세스를 생성하고 관리하는 데 사용됩니다. 이 모듈은 다양한 기능을 제공하여 다른 요구 사항을 충족시킵니다. 주요 함수로는 `spawn()`, `fork()`, `exec()`, `execFile()` 및 이들의 동기 버전이 있습니다. 각각에 대한 간략한 개요는 다음과 같습니다. spawn() 사용법: `child_process.spawn(command, [args], [options])` 목적: 길고 지속적인 프로세스에 적합하며, 많은 양의 데이터를 처리하는 데 사용됩니다. 명령을 실행하기 위해 쉘을 생성하지 않아 조금 더 효율적입니다. 데이터 처리: `stdout`과 `stderr`를 통해 데이터를 스트림합니다. `child_process`를 ..

  • format_list_bulleted Backend/Node.js
  • · 2024. 1. 8.
  • textsms
Node.js Event Architecture

Node.js Event Architecture

콜백과 이벤트 핸들링의 진화 `Node.js` 개발자들에게 익숙한 콜백은, 과거 `Node`에서 이벤트 처리의 핵심이었습니다. `JavaScript`가 일급 객체를 지원하므로 콜백을 자유롭게 전달할 수 있었죠. 하지만 시간이 흐르면서, 프로미스(Promise)와 `async/await` 구문이 등장하여 비동기 코드 처리 방식이 크게 달라졌습니다. ES6 이전의 동기와 비동기 코드 `ES6` 이전에는 비동기 및 동기 코드를 혼합해 사용하는 것이 일반적이지 않았습니다. 예를 들어, `fileSize` 함수는 문자열 인수를 받고, 비동기 `fs.stat`을 사용해 파일 크기를 반환합니다. 하지만 동기적 에러 처리(예: 잘못된 인수 타입)와 비동기적 에러 처리가 혼합되어 있어 이해하기 어려운 코드가 되곤 했습니..

  • format_list_bulleted Backend/Node.js
  • · 2023. 12. 14.
  • textsms
Nest.js Bull

Nest.js Bull

`Nest.js`는 강력한 백엔드 프레임워크로서, 복잡한 비즈니스 로직과 백그라운드 작업을 효과적으로 관리해야 할 때 사용할 수 있는 다양한 도구와 라이브러리를 제공합니다. 이 중에서도 `Bull.js`는 백그라운드 작업을 처리하기 위한 강력한 큐 라이브러리 중 하나로, `Nest.js`와 함께 사용하면 효율적인 작업 관리가 가능해집니다. Bull.js란? `Bull.js`는 `Node.js` 기반의 큐 라이브러리로, 백그라운드 작업을 비동기적으로 처리할 때 사용됩니다. `Bull.js`는 안정성과 성능을 중시하며, 다양한 기능과 옵션을 제공하여 다양한 상황에 적용할 수 있습니다. Task `Bull.js`에서 `task`는 큐(Queue)에 추가된 개별 작업을 나타냅니다. 이 작업은 비동기적으로 백그라..

  • format_list_bulleted Backend/Nest.js
  • · 2023. 12. 5.
  • textsms