Racon

React + Vite프로젝트 구조my-vite-app/├── node_modules/ # 설치된 의존성├── public/ # 정적 파일 (favicon, 이미지 등)│ └── vite.svg # Vite 기본 로고├── src/ # 소스 코드│ ├── assets/ # 이미지, 스타일 등 정적 파일│ ├── components/ # React 컴포넌트 폴더│ ├── App.css # 메인 CSS 파일│ ├── App.jsx # App 컴포넌트│ ├── main.jsx # React DOM 렌더링 진입점│ ├── index.css # ..

이미지를 웹에서 빠르게 노출하기 위한 최적화 방법: WEBP와 AVIF웹 사이트에서 이미지를 빠르게 로드하기 위해, 많은 개발자들이 이미지 파일을 최적화하고 있습니다. 특히 WEBP와 같은 이미지 포맷은 높은 압축률과 뛰어난 품질로 널리 사용되고 있습니다. 하지만 최근 프로젝트에서 WEBP 이미지가 일부 회전된 상태로 노출되는 문제가 발견되었고, 이를 해결하기 위해 다양한 방법을 탐구한 경험을 공유합니다.문제 상황: WEBP 이미지의 회전 이슈이미지 최적화를 위해 기존 JPEG나 PNG 이미지를 WEBP로 변환하여 사용하고 있었습니다. 하지만 몇몇 이미지를 확인해보니, 웹 페이지에서 정상적으로 표시되지 않고 회전된 상태로 노출되는 문제가 있었습니다.문제를 분석한 결과, 이와 같은 현상은 사진에 포함된 회..

개요 Toast UI Editor은 기본적은로 MarkDown 기반의 Editor이다. 그래서 Image를 추가 하게 되면 MarkDown 형식으로 저장이 되는데 이러면 Image의 align을 셋팅을 할수 가 없다. 마크다운을 div Tag 로 덮은다음 align을 설정해도 원하는데로 적용이 되질 않았다. 그래서 Button 커스텀을 하였다. 기존의 이미지 업로드 버튼을 제거 하고 새로 비슷하게 만들어 버튼을 추가해 주었다. 코드

뷰 템플릿 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼수있는 형태의 HTML로 변환해 주는 속성 템플릿 속성을 사용하는 방법 ES5에서 뷰인스턴스의 template 속성 사용 ``` ``` !Tip render() 사용자가 볼수 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환합니다. 변환된 render() 함수는 최종적으로 사용잦가 볼 수 있는 화면을 그리는 역할을 합니다. 그리고 변환 과정에서 뷰의 반응성이 화면에 더해집니다. 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법 템플릿에서 사용하는 뷰의 속성과 문법 데이터 바인딩 HTML 화면 요소를 뷰 인스..

메소드 안에서 Vue2 Component 추가 하기 Vue2를 접한지 3개월 될때 하나의 프로젝트를 하였습니다. 여러 위치에(3군데) 여러개의 버튼을 사용자 취향에 맞게 배치 하는 작업이였는데 이전까지 Javascript나 Jquery로 만 FrontEnd를 작업 하였기에 똑같은 생각으로 작업을 시작 하였습니다. 하지만 Component를 읽고 그안에 prop를 입력하여 배치 하는것은 Methods 안에서는 생각 보다 방식이 많이 달랐습니다. 그래서 그 당시에는 각 위치에(3군데)버튼을 다 Component를 추가 하였고 v-if로 컨트롤 하였습니다. 다행이 테스트 및 실사용에 있어서 무리가 없었지만 이 찝찝한 코드는 수정해야할 필요가 있었고 여러 문서를 찾고 나서야 Methods안에서 Component..

상시 업데이트 예정 기능 axios 비동기 통신 (Jquery의 'Ajax'와 같은 동작) Axios Document core-js JavaScript용 모듈식 표준 라이브러리. 2021년까지 ECMAScript용 폴리필 포함: promises, symbols, collections, iterators, typed arrays, many other features, ECMAScript 제안, 일부 교차 플랫폼 WHATWG/W3C 기능 및 URL과 같은 제안. 필요한 기능만 로드하거나 전역 네임스페이스 오염 없이 사용할 수 있습니다. Core-js Document lodash Array, Object, Json 등 다양한 함수 제공 Lodash Document vue-daum-postcode..

Vue.js 프로젝트 생성 Vue-CLI 프로젝트 생성 Vue-cli 설치 npm install -g @vue/cli 버전 확인 vue --version 프로젝트 생성 vue create frontend 'frontend' : 프로젝트 이름 현재 Default(Vue3) 선택 후 설치 프로젝트 이동 cd frontend 프로젝트 실행 npm run serve Vue3 + TypeScript를 사용시 Vue3 프로젝트 생성후 "vue add typescript" 명령어를 입력 하고 절차에 따르면된다. 1.번 절차를 따르면 ts로 자동으로 변환 되어 사용가능하다 GiT Push Vue.js 설치시 Git File이 생성 되므로 현재와 같이 모듈로서 Vue.js를 사용할 경우 Vue.js에서 Git 숨긴 파일..

뷰 라우터 ; 선행 개념 라우팅 웹 페이지 간의 이동 방법을 뜻한다. 라우팅은 현대 웹 앱 형태중 하나인 "싱글 페이지 애플리케이션" 에서 주로 사용한다. 장점 화면간의 전환이 매끄럽다. 애플리케이션의 사용자 경험을 향상 시킬수 있다. 화면 깜박거림이 없다 "싱글 페이지 애플리케이션" : 페이지를 이동할 떄마다 서버에 웹페이지를 요청하여 새로 갱신 하는것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱산하는 패턴을 적용한 애플리케이션 뷰 라우터 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리 뷰 특수 태그와 기능 태그 설명 페이지 이동태그. 화면에서는 로 표시 되며 클릭하면 to에 이정한 URL로 이동합니다. 페이지 표시 태그. 변경되는 ..

참고 문서 do it vue.js 컴포넌트란? 조합하여 화면을 구성할 수 있는 블록(화면의 특정영역)을 의미한다. 특징 컴퓨넌트를 활용하면 화면을 빠르게 구조화 하여 일괄적인 패턴으로 개발 할 수 있다. 쪼개서 사용하므로 재사용이 쉽다. 남이 작성한 코드를 직관적으로 이해 할 수있다. 컴포넌트를 이해 하기 위하 예제 구조 설명 뷰 에서는 웹화면을 구성할 때 흔히 사용하는 네비게이션바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리 합니다. Tree 형식으로 구조화 되어 있다. Root Header Content Aside List Footer 컴포넌트 등록 전역(global)) 여러 인스턴스에서 공통으로 사용한다. 뷰로 접근 가능한 모든 범위에서 사용할수있다. 지..

참고 문서 do it vue.js Vue.js란? 웹페이지 화면을 개발하기 위한 Frontend 프레임워크이다. 기존 웹 개발자 뿐 아니라 HTML, CSS, Javascript 기초만 알아도 개발하기 쉬운 Frontend 프레임워크이다. 창시자 에반 유(Evan You) 설명 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할수 있는 형태로도 제공됩ㄴ다. 즉. 라이브러리 역할 뿐 아니라 프레임워크 역할도 할수있다. 장점 배우기가 쉽다. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다. Vue 제작팀에서 리액트와 앵귤러를 가지고 같은 테스트 케이스에서 성능을 비교한 결과 vue가 가장 빨랐다. 리액트의 장점과 앵귤..