루루의 우당탕탕 개발 스토리 루루의 우당탕탕 개발 스토리

vite + typescript 절대경로를 지정하기 위해서는 아래 두 파일을 건드려줘야한다. vite.config.ts, tsconfig.json 1. vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import tsconfigPaths from 'vite-tsconfig-paths'; // https://vitejs.dev/config/ export default defineConfig({ base: './', plugins: [react(), tsconfigPaths()], }); 에서 base: './'를 추가하고, vite-tsconfig-paths를 설치하여 pulgins추가해..

1. Web Storage 서버가 아닌 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다. Key-Value 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 데이터를 조회할 수 있다. Web Storage에는 영구저장소인 Local Storage와 임시저장소인 Session Storage가 있다. Web Storage는 기존 웹 환경의 Cookie와 개념이 매우 유사하다. 클라이언트에 데이터를 저장한다는 관점에서 쿠키와 매우 비슷하다. 또한 사이트의 도메인 단위로 접근이 제한된다는 점도 공통적이다. 즉, A 도메인에서 클라이언트에 저장한 데이터는 B 도메인에서도 조회할 수 없다. 차이점은 아래와 같다. - 쿠키 정보는 서버로 전송될 때마다 함께 전송된다. - 또한 쿠키는 용량과..

1. DOM(Document Object Model) 넓은 의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식이며, 좁은 의미로는 document 객체와 관련된 객체의 집합을 의미할 수 있다. DOM은 아래와 같은 트리구조로 이루어져 있고 다양한 node들이 존재한다. 일반적인 노드 유형은 아래와 같다. DOCUMENT_NODE (ex. window.document) ELEMENT_NODE (ex. , , , , , , ) ATTRIBUTE_NODE (ex. class="hi") TEXT_NODE (ex. 줄바꿈과 공백을 포함한 HTML 문서 내의 텍스트) DOCUMENT_FRAGMENT_NODE (ex. document.createDocumentFragment()) DOCUMENT_TYPE_NODE..

BFF방식의 도입은 MSA와 연관이 있다. 아래는 MSA에 관한 자세한 설명이다. https://lulu-developmentlog.tistory.com/124 MSA(Microservice Architecture) MSA와 애자일 MSA는 1개의 시스템을 독립적으로 배포 가능한 각각의 서비스로 분할한다. 각각의 서비스는 API를 통해 데이터를 주고 받으며 1개의 큰 서비스를 구성합니다. 모든 시스템의 구성요소가 한 프로젝 lulu-developmentlog.tistory.com 서비스의 규모가 커지면서 점차적으로 기업들은 MSA 방식을 채택하고 MSA에서는 각 서비스를 도메인 별로 분리시킨다. FE 관점에서 이를 바라보면, FE의 궁극적인 업무는 화면에 필요한 데이터를 렌더링하는 일이다. MSA 구조에..

1. 블록 상태 vs 논블록상태 블록상태 : 학생이 시험지를 선생에게 건넨 후 가만히 앉아 채점이 끝나 시험지를 돌려받기만을 기다린다 논블록상태: 학생이 시험지를 건넨 후 선생에게 채점이 완료되었다는 전송을 받기 전까지 다른 과목을 공부한다거나 게임을 한다거나 다른 일을 하게 되면 학생의 상태 2. 동기 vs 비동기 예를 들어, 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 동기는 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 테스크들은 블로킹(Blocking, 작업 중단)됩니다. 비동기는 서버에 데이터를 요청한 이후 서버로부터 데이터가 응답될 때까지 대기하지 않고(Non-Blocking) 즉시 다음 테스크를 계속해 수행합니다. 동기는 순차적, 직렬적으로 테스크를 수행하고 비동기는..