그린그린티라떼

DOM과 Virtual DOM을 설명해주세요. 우선 DOM은 Document Object Model의 약자로 HTML문서의 구조적인 표현이다. 웹페이지의 실제 구조이다. 반면 Virtual DOM은 react와 같은 JS 라이브러리가 관리하는 Real DOM의 가상 표현이다. React는 Vurtual DOM의 상태 변경을 업데이트한 다음 React DOM과 동기화한다. Virtual DOM의 성능이 더 빠른 것은 처리 속도 자체가 빨라지는 것이 아니라 변경된 정보의 양이 적기 때문이다. 전체 페이지를 업데이트하는 데 시간을 낭비하지 않고 필요한 업데이트가 필요한 부분만을 상호 작용한다. 리액트의 특징을 설명해주세요. react는 UI를 만들기 위한 js library(재사용이 용이한 컴포넌트 단위로 U..

# 1 개발하고 있는 쇼핑 웹 사이트가 있다. 현재 기능 firebase google login, cloudinary image 올리기 기능까지 완성이 되어 있다. 전반적인 UI작업을 이번 주 내내 할 것 같다. 금방 완성할 듯! 여기에 카카오톡 로그인, 네이버 로그인, firebase adbmob까지 연동시켜보는 것이 이 프로젝트의 최종적인 마무리이다. 물론 배포도 깔끔하게 할 것이다. 이렇게 기록해두는 이유는 이 프로젝트를 정성들여서 마무리하라는 스스로에 대한 공개적인 압박이다. #2 그리고 openAI를 이용한 웹 사이트를 하나 개발하고 배포하는 게 목표다. prompt 엔지니어링으로 시간복잡도를 계산해주는 사이트를 하나 만들어보려 한다. 이 사이트는 꼼꼼하게 배포하고 admob까지 붙여서 출시하는..

더 늦기 전에 flutter 개발에 탑승하기 위해 Dart를 학습하기로 마음먹었다. flutter를 배우기 전에 Dart를 배우는 것이 중요한 이유는 나중에 결국 2가지 다 공부해야되기 때문이다. Dart의 주요 특징으로는 1) 정적 타입 언어 변수의 데이터 타입을 명시적으로 선언하고 컴파일할 때 타입 검사를 수행한다. 빠른 버그 픽스 가능. 2) 객체 지향 프로그래밍 클래스, 상속 사용 지원 3) JIT 및 AOT 컴파일러 Dart는 Just-In-Time(JIT)컴파일러와 Ahead-Of-Time(AOT)컴파일러를 지원한다. JIT컴파일러는 개발자를 위한 빠른 개발과 디버깅을 가은하게 한다. AOT컴파일러는 프로덕션 환경에서 빠른 실행 성능을 제공한다. 4) 빠른 실행 속도 Dart는 빠른 실행 속도..

'Record[]' 형식은 'Post[]' 형식에 할당할 수 없습니다.ts(2322) {/* @ts-expect-error Async Server Component */} https://nextjs.org/docs/app/building-your-application/configuring/typescript#async-server-component-typescript-error

Directus는 "Headless CMS"(Headless Content Management System) 중 하나로, 개발자와 콘텐츠 제작자가 웹사이트, 앱, 또는 다른 플랫폼에서 콘텐츠를 관리하고 배포할 수 있도록 도와주는 소프트웨어입니다. "Headless"라는 표현은 Directus가 프론트엔드(즉, 사용자 인터페이스)를 갖고 있지 않는다는 것을 의미합니다. 이로 인해 개발자는 자유롭게 원하는 프론트엔드 프레임워크나 라이브러리를 선택하여 사용할 수 있습니다. 주요 기능 API 제공: Directus는 RESTful API와 GraphQL API를 제공하여, 개발자가 쉽게 다른 시스템과 연결할 수 있게 해줍니다. 다양한 데이터베이스 지원: MySQL, PostgreSQL 등 다양한 데이터베이스를 ..

Windows 기기에서 스크롤바 숨기기 Windows에서 작업할 경우, vw를 추가하면 스크롤바가 나타나는 것을 경험했을 것입니다. 스크롤바가 포함되지 않은 Windows에서 vw를 사용할 때 일어나는 현상입니다. - vw: 100 = 뷰포트 너비의 100% + 스크롤바 Mac에서는 문제가 없지만, Windows에서는 스크롤바가 자동으로 표시되는 문제가 발생합니다. 스크롤바를 표시하고 싶지 않은 경우, 다음 방법 중 하나를 활용하시면 됩니다. - 너비(width) 활용: vw: 100 대신 100% 사용하기 - shared.css 파일에서 body 선택자에 overflow-x: hidden을 추가해 가로 스크롤바 숨기기 (세로 스크롤바를 숨기려면 overflow-y: hidden 추가) ::-webkit..

✔️ Vite에 대해 간단히 정리 npm package를 활용한 웹 개발 시 의존성 있는 패키지 소스코드를 esbuild를 사용해서 빠르게 pre-bundling해 준다 es6 modules, HMR을 이용해 실시간 미리보기(npm run build) 기능 제공 JSX, CSS module 번들링도 잘 되는 build tool 웹팩처럼 plugin 사용 가능, cli를 이용한 프로토타이핑 쉬움 ✔️ 문제? npm을 이용한 라이브러리 다운로드(node_modules 용량 매우 큼) 친화적이지 않은 import / require 문법 ✔️ 이에 대한 해결책? Static ASSETS bundling을 통해 모든 JS파일을 하나로 합쳐서 사용하기 ✔️ 결론적으로 VITE 사용 이유? 1. 빠른 빌드 빠른 es..