728x90 반응형 전체 글114 2025년 React 라이브러리 생태계 정리 | Full-Stack React Tech Stack 개요리액트는 2012년에 배포된 이후, 2025년 현재 가장 인기 있는 UI 개발 라이브러리로 자리 잡았다.10년 이상 오랜 기간 동안 사용되면서 React만의 라이브러리 생태계가 형성되었다.이번 포스팅에서는 2025년 대규모 애플리케이션 개발에 필수적인 리액트 라이브러리를 알아보고자 한다. React 라이브러리React 프로젝트 시작하기Vite : React 프로젝트를 설정하는 가장 인기 있는 도구. 빠른 빌드 속도와 간편한 TypeScript 지원 제공Next.js :React 기반 메타 프레임워크로 서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원파일 기반 라우팅, API 라우트, 캐싱, React Server Components(RSC) 등 다양한 기능 제공서버 컴포넌트 및 서버 함수.. 2025. 3. 17. React 파일 업로드, 드래그 앤 드랍, 미리보기 기능 구현하기 file 요소란?file 유형의 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 제출해 서버로 전송하거나, File API를 사용한 JavaScript 코드로 조작할 수 있습니다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/input/file#accept 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 제출해 서버로 전송하거나, File API를 사용한 JavaScript 코드로 조작할 수 있습니다." data-og-title=" - HTML: Hypertext Markup Language | MDN" data-og-type="website" data-ke-align="al.. 2025. 2. 28. JavaScript 모듈 시스템 | CJS, AMD, UMD, ESM 모듈화 방식CommonJS : exports 키워드로 모듈을 생성, require() 함수로 임포트하는 방식장점 : 모든 파일을 로컬에 저장하고 동기적으로 동작하여 전역변수와 지역변수를 분리할 수 있게 되었다.단점 : 필요한 모듈을 가져오는데 대기하게 됨.AMD(Asynchronous Module Definition): CommonJS를 비동기적으로 사용할 수있는 도구ESM : import, 와 export 로 임포트하는 방식(ES6가 도입 이후)장점 : 키워드 만으로 모듈화 가능단점 : 모듈별로 을 네트워크 통신을 통해 가져오면서 비용과 시간 소요 https://beomy.github.io/tech/javascript/cjs-amd-umd-esm/#%ED%8A%B9%EC%A7%95-%EB%B9%84%.. 2025. 2. 13. CSS 확장 / Sass에만 존재하는 기능이 CSS에 통합 되다 ! 개요스타일 개발을 효율적으로 할 수 있게 지원해주는 기능이 많다는 것은 많은 사람들이 Sass를 사용하게 만들었습니다. 하지만 여전히 Sass를 설치하고 컴파일하는 과정이 존재한다는 것은 대체 가능한 도구를 찾게 되는 이유 중 하나입니다. 아직까지 Sass 고유 기능rem으로 변환하는 함수와 믹스인(Mixins)반복문 CSS 확장 기능1. 변수 지정CSS에서도 Sass와 유사한 방식으로 변수를 정의할 수 있습니다. 중요한 차이점은 Sass 변수는 전처리기 컨텍스트 내에서만 존재하지만, CSS 변수는 브라우저에서 사용될 수 있으며 자바스크립트를 통해 동적으로 덮어쓸 수도 있다는 점이 다르다.:root { --button-padding: 10px 20px; --button-bg-color: #007b.. 2025. 2. 12. 웹개발 아키텍처 스타일 | Model 1, Model 2 개요웹 개발에서 모델1(Model 1)과 모델2(Model 2)은 흔히 사용되는 아키텍처 스타일입니다. 두 모델은 웹 애플리케이션을 설계하는 방식에 큰 차이를 보이며, 각각의 장점과 단점이 존재합니다. 이 포스팅에서는 모델1과 모델2의 차이점, 특징, 그리고 어떤 상황에서 각각을 사용하는 것이 좋은지에 대해 알아보겠습니다. 모델1 (Model 1)모델1은 초기 웹 애플리케이션 개발에서 자주 사용되었던 아키텍처입니다. 주로 JSP와 서블릿을 사용하여 모든 처리를 하나의 페이지에서 처리하는 방식입니다.Model 1 특징단일 페이지 처리: 모델1에서는 모든 요청 처리와 응답을 하나의 JSP 페이지 또는 서블릿에서 처리합니다. 즉, 클라이언트의 요청이 들어오면 서블릿이 직접 비즈니스 로직을 처리하고 결과를 JS.. 2025. 2. 10. 웹 성능 분석 및 INP 최적화 | Lighthouse INP (Interaction to Next Paint, 페인트에 대한 상호작용)웹 성능 지표 중 하나로, 사용자가 웹페이지와 상호작용(클릭, 키보드 입력 등)한 후 브라우저가 그에 반응하여 콘텐츠를 화면에 렌더링하는 데 걸리는 시간을 측정합니다. DOM (Document Object Model, 문서 객체 모델)HTML 문서 구조를 반영해서 만든 객체입니다.DOM의 계층은 트리 자료 구조로 구축돼요. 트리 자료 구조는 하나의 최상위 노드(Node)에서 다른 자식 노드들이 뻗어나가는 구조를 가지고 있습니다. DOM은 HTML로 구성된 웹 페이지와 스크립트 및 프로그래밍 언어를 연결시켜주는 역할을 해요. DOM 생성되는 순서HTML 웹 페이지는 HTML 파서에 의해 DOM으로 변환됩니다.여기서 파서가 .. 2025. 2. 10. [Git] Git tag tag 란?branch와 tag는 매우 비슷tag = commit_idbranch = checkout한 브랜치의 최신 commit_id 를 가리킨다. 태그 조회 CLI 모든 태그 조회$ git tag 태그 조건 검색-l 또는 --list 옵션 및 와일드카드(*) 패턴 활용-l 혹은 --list옵션으로 태그명 기준의 검색 조건을 줄 수 있습니다. 태그명에는 예를 들어 “v1.0*“처럼 *로 와일드카드를 붙여 유연한 처리$ git tag -l {태그 이름}$ git tag -l v1.1.* 태그 상세 내용 확인$ git show {태그 이름} 태그 생성 tag를 지정할 때 태그이름 뒤에 커밋 ID(체크섬, checksum)을 명시하지 않으면 현재 HEAD가 가리키는 최신 커밋에 태그가 붙게 됩니다. .. 2025. 1. 15. [Git] git .md 마크업 문서 (e.g. CHANGELOG.md / README.md) 개요Git 저장소를 관리하고 프로젝트의 품질을 높이기 위해 README.md와 CHANGELOG.md 파일은 필수적입니다. 이 블로그에서는 각 파일의 역할과 작성 요령에 대해 알아보겠습니다. README.md란?README.md는 프로젝트의 첫인상을 결정짓는 파일입니다.주로 프로젝트의 개요와 사용법을 설명하며 GitHub, GitLab과 같은 플랫폼에서는 저장소의 메인 페이지에 README.md의 내용이 바로 표시됩니다. README.md 주요 작성 내용프로젝트 개요: 프로젝트의 목적과 기능 설명설치 방법: 사용자 환경에 프로젝트를 설치하는 방법사용 예제: 주요 기능을 간단히 시연하는 코드나 설명기여 가이드: 다른 개발자가 프로젝트에 기여할 수 있는 방법라이선스: 프로젝트 사용 시 적용되는 라이선스 정.. 2025. 1. 15. JavaScript window 객체: 주요 속성, 메서드, 이벤트 알아보기 개요window 객체는 JavaScript에서 전역 객체(global object)로, 브라우저 환경에서 제공하는 다양한 기능과 속성을 제공합니다. 브라우저의 전체 창(window)에 대한 정보를 제공하며, 전역 범위에서 접근 가능합니다. Node.js에서는 window 객체 대신 global 객체를 사용합니다. window 객체는 웹 개발에서 핵심적인 역할을 하며, DOM, 브라우저 상태, 이벤트 관리 등 다양한 작업에 사용됩니다. 다만, 전역 네임스페이스를 오염시킬 수 있으므로 과도한 사용은 피하는 것이 좋습니다. window 객체의 대표적인 속성1. document현재 로드된 HTML 문서를 나타내는 객체.DOM 트리 조작 및 HTML 요소 접근 가능.2. location현재 페이지의 URL .. 2024. 11. 22. 이전 1 2 3 4 ··· 13 다음 728x90 반응형
