티스토리

devOhzl

검색하기

블로그 홈

devOhzl

ohzlsss.tistory.com/m

Web Front-end Developers

구독자: 0

방명록 방문하기

주요 글 목록

Fortify 보안 점검 대응 : Dockerfile 보안 설정과 Trivy 활용하기 문제 상황회사 보안 점검에서 Fortify 스캔을 진행한 결과, 내가 작성한 Dockerfile에서 다음과 같은 HIGH 레벨 보안 경고가 발생했다.Default User PrivilegeHIGHDocker 컨테이너가 root 권한으로 실행됨 Fortify의 "Default User Privilege" 보안 경고는 Dockerfile 내에서 기본 사용자(root) 로 컨테이너를 실행할 경우 발생합니다. 이는 컨테이너가 해킹되거나 취약점이 발생했을 때, root 권한이 그대로 유지되므로 호스트 시스템까지 영향을 줄 수 있는 위험이 존재합니다. 따라서 root 대신 일반 사용자 권한을 사용하도록 설정하는 것이 권장됩니다. 해결 방법 및 적용 내용기존 Dockerfile에는 사용자 설정이 없어서 기본적으로 r.. 공감수 2 댓글수 1 2025. 5. 2.
XSS(Cross-Site Scripting) 취약점과 화이트리스트 기반 보안 개선하기 1. XSS(Cross‑Site Scripting)란?XSS(Cross‑Site Scripting) : 웹 애플리케이션에서 자주 등장하는 취약점으로, 공격자가 악성 스크립트를 주입해 사용자의 브라우저에서 실행시키는 기법세션·쿠키 탈취 : 악성 스크립트가 실행되면 로그인 세션 쿠키를 탈취해 계정 탈취로 이어질 수 있습니다.피싱·악성 행위 : DOM을 조작해 가짜 로그인 창을 띄우거나, 숨은 네트워크 요청으로 토큰·개인정보를 외부로 전송할 수 있습니다.연계 공격 : CSRF 등 다른 취약점과 결합해 결제·게시물 작성 등 의도치 않은 동작을 수행시키기도 합니다.발생 원인사용자 입력을 검증·필터링·인코딩 없이 그대로 HTML이나 속성(src 등)에 삽입하는 경우React, Vue 등에서 dangerouslySe.. 공감수 1 댓글수 0 2025. 4. 17.
[react-virtuoso] 대용량 리스트 렌더링 성능 개선하기 (성능 측정) 회사 내부 모니터링 대시보드에서 수천 건 이상의 카드(Card) 컴포넌트를 한 화면에 표시해야 하는 요구사항이 있었습니다. 처음에는 단순히 Array.map을 통해 모든 데이터를 렌더링했으나, 아래와 같은 문제가 발생했습니다.렌더링 지연 : 한 번에 모든 컴포넌트를 그리다 보니, 브라우저 메인 스레드가 과부하되어 화면이 뜨기까지 20~30초 걸림스크롤 성능 저하 : DOM 요소가 늘어나면서 스크롤 시 FPS가 크게 떨어지는 문제 발생사용자 경험(UX) 악화 : API는 이미 빠르게 응답했는데, 렌더링이 끝나지 않아 로딩 스피너가 바로 사라지고도 빈 화면이 한참 동안 노출문제를 해결하기 위한 방법으로 리스트 가상화를 진행해보기로 했습니다. 리스트 가상화란 ?화면에 보이는 아이템만 실제로 렌더링하고, 나머지.. 공감수 0 댓글수 0 2025. 3. 20.
[React] lazy()와 Suspense를 활용한 동적 로딩 및 로딩 페이지 구현 React에서 페이지 또는 컴포넌트를 동적 로딩할 때, React.lazy()와 Suspense를 사용하면 효율적으로 관리할 수 있습니다. lazy()를 활용한 동적 로딩(Route 정리)기본적으로 React에서는 import를 사용하여 정적인 방식으로 컴포넌트를 불러옵니다.하지만, 페이지가 많아질수록 초기 로딩 속도가 느려지는 문제가 발생합니다.👉 이를 해결하기 위해 React.lazy()를 사용하면, 필요한 순간에만 컴포넌트를 불러올 수 있습니다.이 방식은 코드 스플리팅(Code Splitting)을 적용하여 성능 최적화에도 도움을 줍니다. 정적 로딩 방식 (비효율적인 예시)이 방식은 모든 페이지가 초기 로딩 시점에 한 번에 불러와지기 때문에 초기 로딩 속도가 느려질 수 있다.import Ho.. 공감수 0 댓글수 0 2025. 2. 4.
GitLab CI/CD, Docker를 활용하여 Vite 프로젝트 Nginx 배포하기 (에러상황 해결 포함) Vite로 작성된 React 프로젝트를 GitLab CI/CD를 통해 Docker 이미지를 빌드하고, Nginx로 정적 파일을 서빙하는 과정을 정리했습니다. 최종적으로 배포 환경에서 index.html과 관련된 정적 자산(js, css, svg 등)을 Nginx로 제공하여 정상적으로 애플리케이션이 동작하도록 합니다.Nginx는 웹 서버 소프트웨어입니다. 웹 서버는 클라이언트(브라우저)에서 요청을 보내면, 이를 처리하고 파일(HTML, CSS, JS 등)을 클라이언트로 보내주는 역할을 합니다.정적 파일 배포와 프록시 기능에 최적화된 서버로, React, Vue 같은 프론트엔드 프로젝트의 빌드 결과물을 효율적으로 배포할 수 있는 도구입니다.Nginx의 기본 동작 클라이언트 요청: 사용자가 브라우저에서 ht.. 공감수 1 댓글수 1 2025. 1. 24.
[Vue] 동적 라우트 정의로 코드 개선하기 라우트 정의 시 정적으로 import하는 방식에서 동적으로 import하는 방식으로 전환하게 되었습니다.이를 위해 dynamicImportComponent라는 유틸리티 함수를 도입하여 동적으로 컴포넌트를 로드하고, 라우트 정의를 효율적으로 관리할 수 있게 되었습니다. 기존 정적 import 방식기존에는 각 라우트 모듈을 개별적으로 import하여 사용했습니다. const testView1 = from "@/views/test/test1"const testView2 = from "@/views/test/test2"const testView3 = from "@/views/test/test3"export default [ { path: "testView1", children: testView1, .. 공감수 0 댓글수 0 2025. 1. 17.
[vite-plugin-svgr] Vite와 React에서 SVG 파일을 자동으로 Import하고 사용하는 방법 React 프로젝트에서 SVG 아이콘을 효율적으로 관리하고 사용하는 방법입니다.특히, vite-plugin-svgr와 import.meta.glob을 활용하여 SVG 파일을 자동으로 불러오고 React 컴포넌트처럼 사용합니다.SVG 파일을 React에서 사용하는 이유SVG는 벡터 기반의 그래픽 형식으로 다음과 같은 장점이 있습니다:확장성: 해상도와 무관하게 선명하게 렌더링유연성: 색상, 크기, 스타일 등을 동적으로 조정 가능가벼움: 아이콘과 같은 간단한 그래픽에서 번들 크기를 최소화React에서 SVG를 사용하면 동적인 UI 구성과 함께 코드의 재사용성이 증가합니다. Vite에서 SVG를 React 컴포넌트로 변환하기1. vite-plugin-svgr 설치vite-plugin-svgr는 SVG 파일을 R.. 공감수 0 댓글수 0 2025. 1. 13.
[Zustand] Immer,Actions분리로 데이터그리드 상태 관리 리팩토링하기 데이터그리드와 같은 동적 컴포넌트를 다루기 위해 Zustand를 선택했으며, 데이터를 효율적으로 관리할 수 있습니다. 데이터그리드는 한 화면에서 두 개 이상이 들어갈 수 있으므로, 각 컴포넌트를 독립적으로 관리하기 위해 id를 활용하여 상태를 구분했습니다. 기존 코드의 문제점Zustand만으로 상태 관리를 하려면 상태를 수동으로 복사(...state)해야 합니다. 특히 데이터그리드를 한 화면에서 여러 개 사용해야 하는 경우, 각각의 컴포넌트를 구분하기 위해 id를 활용합니다. 이로 인해 상태 업데이트 로직이 더욱 복잡해지고 중복이 발생합니다.export const useDataGridStore = create((set) => ({ grids: {}, initializeGrid: (id) => s.. 공감수 0 댓글수 0 2024. 12. 24.
[React-hook-form] 사용법 / Controller의 활용과 공통 컴포넌트 재사용하기 ⭐ React-hook-formReact Hook Form은 React에서 간단하고 효율적으로 폼을 관리하기 위한 라이브러리입니다. 폼 관리 방식React Hook Form은 Uncontrolled 방식과 Controlled 방식이 있다.Uncontrolled : register 함수를 사용하고 두 번째 파라미터를 사용하여 유효성 검증이 가능하며 DOM과 직접적으로 연결되어 성능이 우수하다. Controller : Controller 컴포넌트의 rules 속성을 사용하여 유효성 검증이 가능하며 주로 외부 UI 라이브러리와 통합 시 사용한다.API : useForm Hookregister : Uncontrolled 방식으로 사용하기 위해 사용됩니다. 요소의 속성으로 전달되어야 하는 값들을 반환하는 함수입니.. 공감수 0 댓글수 0 2024. 12. 20.
[React] 폼의 입력 필드 리렌더링 최적화하기 : React.memo 활용 (+useMemo 비교) 로그인 폼을 구현하던 중, 입력 필드의 rules를 확인하여 FormHelperText를 표시하는 과정에서 리렌더링 문제가 발생했습니다. 구체적으로, ID 입력 필드에서 에러 처리를 했을 때 콘솔에 ID와 PW 필드가 모두 리렌더링되는 상황을 겪었습니다.이는 각 필드가 독립적으로 리렌더링되지 않고 모든 필드가 동시에 리렌더링되었기 때문입니다. 이러한 문제를 해결하기 위해 React.memo를 사용해 최적화를 시도했습니다. useMemo 방식과 비교하여 각각의 방식이 어떻게 성능에 영향을 주는지 예시와 함께 작성했습니다.React 리렌더링 방식React는 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트도 기본적으로 리렌더링을 시도합니다. 리렌더링 시도는 "컴포넌트를 다시 그린다"는 의미가 아니라, 변경 사항.. 공감수 0 댓글수 1 2024. 11. 28.
[HTTP] Cookie 와 Session 쿠키 (Cookie)서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로, key=value 형식의 문자열 데이터 묶음이다. 클라이언트가 문자열 데이터 조각들을 저장해놓았다가 동일한 서버에 재 요청시 쿠키 데이터를 전송할 수 있다.쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request 시에 Request Header를 넣어서 자동으로 서버에 전송한다.도메인 단위로 저장표준안 기준, 사이트당 최대 20 개 및 4KB로 제한영구 저장 불가능 📌 HTTP 쿠키 헤더1. Cookie 요청 헤더HTTP 요청 시 클라이언트에서 서버로 전달하는 쿠키 헤더 서버의 세션 상태를 담은 SessionID 혹은 각종 클라이언트 정보들을 담고 있다.2. Set-Cookie 응답 헤더서버에서 클라이언트로 전달하.. 공감수 0 댓글수 0 2024. 7. 1.
코드 스플리팅 ( Code Splitting ) - 웹 애플리케이션 성능 최적화 하기 싱글 페이지 애플리케이션(Single Page Application)은 초기 실행시에 필요한 웹 자원을 모두 다운받는다.즉, 규모가 커질수록 첫 로드의 시간이 오래걸리게 된다. 한 페이지만 로드하면 되는 첫 시작 페이지에서 필요로 하지 않는 여러 페이지(또는 프레임워크를 사용하는 경우 import한 컴포넌트 파일)를 로딩하기 때문이다. 이 때 코드 스플리팅을 사용하면 초기 로딩시에 모든 웹 자원을 다운받지 않고 필요한 시점에 다운 받아 성능상의 이점이 생기게 된다.개발 환경 조건싱글 파일 컴포넌트 체계 (.vue)웹팩 - 모듈 번들러 (2.x 이상)바벨 Syntax-dynamic-import 플러그인 코드 스플리팅 자체는 Webpack 같은 번들러에 의해 주로 처리되지만, Babel은 이 과정에서 중요.. 공감수 0 댓글수 0 2024. 6. 21.
[Vue] Props 타입 정의를 꼭 해야할까 개발하던 화면은 페이지를 넘기면서 데이터를 등록하여 그 데이터를 계속 가지고 있다가 마지막 페이지에서 저장하는 화면이었다. 나는 Vuetify를 사용하고 있었고, VWindow 컴포넌트를 사용해서 화면을 구성했다.https://vuetifyjs.com/en/components/windows/#usage Window component — VuetifyThe window component is a wrapper container that allows transitioning between content. It serves as the baseline for...vuetifyjs.com 처음에 화면에서 관리하는 데이터가 너무 많아지니 데이터들을 store에서 관리하면 어떨까 싶었지만,같이 개발하는 팀원이 st.. 공감수 0 댓글수 0 2024. 6. 14.
[React Native] Expo , UI 작성하기/스타일링 Core Components를 이용한 UI 작성하기 https://reactnative.dev/docs/components-and-apis#user-interface Core Components and APIs · React Native React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following cat reactnat.. 공감수 0 댓글수 0 2024. 1. 30.
[React Native] 개념, Expo 개발 환경 세팅/앱 구조/실행하기 리액트 네이티브란? React와 앱 플랫폼의 기본 기능을 사용하여 Android 및 iOS 애플리케이션을 빌드하기 위한 오픈 소스 프레임워크 사용자 인터페이스(UI)를 구축하기 위한 JS 라이브러리인 React를 기반으로 하지만, React는 브라우저를 대상으로 하고, React Native는 모바일 플랫폼을 대상으로 한다. 웹 개발자도 JS를 이용하여 "네이티브" 모양과 느낌을 주는 애플리케이션을 작성할 수 있다. 또한 작성하는 대부분의 코드를 플랫폼 간에 공유할 수 있기 때문에 Android와 iOS 모두에서 동시에 쉽게 개발 가능하다. 리액트 네이티브의 장점 1. 다른 플랫폼에서는 웹으로 개발 후 앱에 인베딩하여 사용하지만, React Native는 소스 코드를 작성을 하면 실제 네이티브 요소로 변.. 공감수 0 댓글수 0 2024. 1. 28.
Axios를 이용하여 Excel Download 하는법 + blob (content-disposition 접근 오류 해결) 1. api 호출 아래는 엑셀 다운로드 api를 호출하면 리턴되는 형태이다. blob 형태로 받기 위하여 responseType을 추가한다. const getList = async() => { const param = { params: { /* ... */ }, responseType: 'blob', headers: { 'Content-Type': 'application/json' } } const response = await axios.get($System.server.url + "/api/v1/account/downloadExcel", param); return response; } api를 호출하면 blob 객체로 호출이 된다. 2. response, blob 객체 생성 받은 response로 b.. 공감수 0 댓글수 0 2024. 1. 23.
[Vue 3] Global API Vue2는 인스턴스화된 애플리케이션을 지원하지 않았다. 따라서 Vue 2의 전역 API들은 생성된 모든 Vue 인스턴스들에 상태를 공유했다. 전역 컴포넌트를 만들거나, Vue.component('button-counter', { data: () => ({ count: 0 }), template: 'Clicked {{ count }} times.' }) 전역 디렉티브를 만들었다. Vue.directive('focus', { inserted: el => el.focus() }) 👉 동일한 Vue 생성자에서 생성된 모든 루트 인스턴스는 동일한 전역 구성을 공유한다. createApp createApp을 호출하면, Vue 3의 새로운 개념인 앱 인스턴스(app instance)가 반환된다. 경험상 Vue의 동작.. 공감수 0 댓글수 1 2023. 12. 15.
[Vue 3] 반응성( Reactivity ) 변수가 반응성을 가지기 위해서는 프록시로의 변환이 필요하고, 반응성을 해제하기 위해서는 프록시에서 일반 변수로의 변환이 필요하다. 반응성 관련 API reactive 객체의 속성들이 반응성을 갖게 만든다.기본적으로 변수가 반응성을 갖도록할 때는 ref 함수를 이용하는데, 객체의 속성으로 변수를 모아 reactive를 사용하면 변수의 개수가 많을 때 매우 유리하다. readonly 일반 객체나 프록시 객체를 읽기전용 프록시로 변경한다. 기본적으로 객체 모든 속성을 읽기전용으로 변경 isProxy 인자로 들어온 변수가 reactive나 readonly 등으로 만들어진 프록시 객체인지 확인해준다. isReactive reactive로 생성된 프록시 객체인지 확인해준다. isReadonly readonly로 생.. 공감수 0 댓글수 0 2023. 12. 14.
[Vue 3] Vue Composition API ⚡ Vue 3 는 Composition API가 아니다 ! Vue2에서도 동일하게 Composition API를 사용할 수 있다. Vue 2 플러그인 👉 Vue 3 API 레벨로 진화 https://vuejs.org/guide/extras/composition-api-faq.html Composition API FAQ | Vue.js Haven't migrated to Vue 3 yet? Explore Never-Ending Support for Vue 2 by HeroDevs Learn more vuejs.org ⚡ Vue vs React 1️⃣ Vue - Reactivity (반응성) 반응성을 기반으로 데이터가 변했을 때 화면을 변화시킨다. State 변화를 통해 화면을 갱신시킨다. 2️⃣ React.. 공감수 0 댓글수 1 2023. 12. 6.
[JavaScript/Vue] Vue에서 적용된 구조 분해 할당 (Destructuring) Destructuring 기존 자바스크립트에서는 특정 객체의 값을 꺼내올 때마다 일일이 변수를 하나씩 생성하고 담아줘야했다. var josh = { language: 'javascript', position: 'front-end', area: 'pangyo', hobby: 'singing', age: '102' }; var language = josh.language; var position = josh.position; var area = josh.area; var hobby = josh.hobby; var age = josh.age; 구조 분해 문법을 적용하면 훨씬 더 간편하게 꺼내올 수 있다. var josh = { language: 'javascript', position: 'front-end',.. 공감수 0 댓글수 1 2023. 12. 5.
[Vue 3] Vue 싱글 파일 컴포넌트 Vue 싱글 파일 컴포넌트 싱글 파일 컴포넌트는 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법입니다. 뷰 CLI로 프로젝트를 생성하고 나면 App.vue라는 파일을 확인할 수 있습니다. 이처럼 vue 확장자를 가진 파일을 모두 싱글 파일 컴포넌트라고 합니다. 뷰 로더에 의해 HTML, CSS, JS와 같은 웹 자원으로 분리되어 실행된다. 👉 브라우저에서는 .vue 파일을 인식할 수 없기 때문에 변환 과정을 거친다. * Loader ? https://joshua1988.github.io/webpack-guide/concepts/loader.html#loader * Vue Loader ? https://vue-loader.vuejs.org 📌 App.vue 컴포넌트는 파.. 공감수 0 댓글수 1 2023. 11. 28.
[Vue 3] Vue CLI, 프로젝트 구조 Vue CLI Vue.js 로 프로젝트를 시작할 때 주로 사용하는 프로젝트 생성 도구 * CLI (Command Line Interface) : 명령어 줄 인터페이스 글자를 입력하여 컴퓨터에 명령을 내리는 방식 https://cli.vuejs.org/ Vue CLI cli.vuejs.org 📌 vue/cli를 전역으로 설치하기 npm install -g @vue/cli 📌 vue 프로젝트 생성 vue create vue3-cli 📌 vue 프로젝트 실행 cd vue3-cli npm run serve Vue 프로젝트 폴더 구조 1️⃣ package.json 📌 dependencies - 배포용 설치 옵션에 아무 것도 넣지 않은 npm i jquery 는 packge.json의 depencies 에 등록된다.. 공감수 0 댓글수 1 2023. 11. 27.
[Vue 3] 템플릿 문법 (데이터 바인딩, 디렉티브) Vue 템플릿 문법 1️⃣ 데이터 바인딩 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법으로, 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag) 이다. {{ message }} 2️⃣ 디렉티브 화면 요소를 더 쉽게 조작하기 위한 문법으로, 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공한다. 📌 v-if / v-show v-show는 v-if 와 다르게 style="display: none" 처리가 된다. 로그인 되었습니다 로그인 하세요 로그인 "> 로그인 되었습니다 로그인 📌 v-for {{ item }} 📌 v-bind : 데이터 바인딩 거의 v-bind를 생략하고 : 만 쓴다. 클래스 바인딩 데이터 바인딩 예제 아이디 바인딩 반갑습니다. 📌 v-on 📌 .. 공감수 1 댓글수 1 2023. 11. 24.
[Vue 3] 컴포넌트와 통신 (props, emit) Vue 컴포넌트 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다. Vue 컴포넌트 등록과 표시 Vue 컴포넌트 통신 뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖습니다. 컴포넌트 간에 데이터를 주고 받기 위해서는 아래와 같은 규칙을 따른다. 데이터는 항상 위에서 아래로 흐르고, 아래에서 위로 이벤트가 올라간다. * 이벤트 : 컴포넌트 간의 메세지를 주고받기 위한 장치 📌 Props - 데이터 전달 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 속성이다. v-bind:프롭스이름 = "상위 컴포넌트의 데이터 이름" 📌 Emit - 이벤트 발생 .. 공감수 0 댓글수 0 2023. 11. 22.
[Vue 3] Vue.js 기본 개념과 문법 뷰 인스턴스 생성 📌 Vue2 : 뷰 인스턴스 // 방법 1 new Vue({ el: '#app' }) // 방법 2 new Vue({ }).$mount('#app') 📌 Vue3 : 애플리케이션 인스턴스 Vue.createApp({ data(){ return { message: '10' } } }).mount('#app'); 인스턴스 속성 컴포넌트 옵션 속성 = 인스턴스 옵션 속성 = 옵션 API 다 같은 말 📌 Vue2 new Vue({ el: , template: , data: , methods: , created: , watch: , }); 📌 Vue3 Vue.createApp({ template: , data: , methods: , created: , watch: , }); el : 인스턴스가.. 공감수 0 댓글수 0 2023. 11. 22.
[Vue 3] Vue 3 소개(vs Vue 2) , 핵심 동작 원리(Reactivity) Vue.js란 간단한 화면 UI 개발부터 라우팅, SSR 등의 애플리케이션 레벨의 개발을 지원하는 프레임워크 리액트와 더불어 실무에서 가장 많이 사용되고 있는 프론트엔드 개발 라이브러리 리액트에 비해 진입 장벽이 낮고 쉽게 배울 수 있다. 개발 생산성이 높고 자바스크립트 지식이 크게 요구되지 않는다. * SSR https://joshua1988.github.io/vue-camp/nuxt/ssr.html Server Side Rendering | Cracking Vue.js 서버 사이드 렌더링이란? 서버 사이드 렌더링이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. 뷰 싱글 페이지 애플리케이션을 서버 사이드 joshua1988.github.io * Next.j.. 공감수 0 댓글수 0 2023. 11. 22.
[Vue] scss 사용하기 (에러해결) 환경설정이 된 vue 프로젝트를 사용하다가 스터디를 하기 위해 첫 환경설정을 하는데, 생각보다 처음부터 많은 에러가 나왔다.. 하나씩 차근차근 하기로 하고 scss 설정부터 하기로 해보았지만 역시 에러가 났다. ⚡ 에러1 : Can't resolve 'sass-loader' in 'D:\FrontEnd\Project\layout' scss를 사용하기 위해서는 'sass' , 'sass-loader'를 기본적으로 설치해야한다. ⚡ 에러2 : Cannot find module 'sass' 'sass', 'sass-loader'까지 설치했는데도 에러가 떴다.추가로 'node-sass' 패키지도 설치해준다. 정리하자면 ! 1️⃣ npm 설치 npm install sass npm install sass-loade.. 공감수 0 댓글수 0 2023. 10. 25.
[HTML/Vue] iframe을 이용한 프로젝트 구성 💬 iframe(HTML Inline Frame) 이란 해당 웹 페이지 안에 다른 페이지를 불러와서 삽입할 수 있다. 📌 프로젝트 구성 방식 지금 진행하는 프로젝트는 main-proejct / dev-project 로 서비스를 나눠서 구성했다. Main Project : 로그인, 메뉴, 사용자, 각 서비스 iframe 연결을 관리하는 프로젝트 Dev Project : 개발하는 화면을 관리하는 프로젝트 (iframe안에 들어감) 📌 프로젝트 실행 Main / Dev 프로젝트를 실행하고 (npm run serve) Main Url로 접속한 후, Dev 서비스를 iframe으로 호출한다. 📌 Main Project의 Template src에 Dev 서비스의 라우트를 넣어준다. ✅ name : iframe의 n.. 공감수 0 댓글수 0 2023. 6. 27.
[ Vue ] process.env 사용시 undefined 오류 💬 개요 vue 환경변수를 사용하려고 스크립트에서 호출했는데, undefined로 호출되는 오류가 발생했다. 📌 시도한 환경설정 .env.development VUE_ROUTE_TARGET=http://localhost:8081/ .env.production VUE_ROUTE_TARGET=http://xxxx.xxxx.com/ 으로 설정을 한 후 콘솔 출력을 해보았는데, undefined 에러가 나왔다. console.log(process.env.VUE_ROUTE_TARGET) // undefined 📌해결 : VUE_APP_ 을 prefix로 사용 .env.development VUE_APP_ROUTE_TARGET=http://localhost:8081/ .env.production VUE_APP_RO.. 공감수 0 댓글수 0 2023. 6. 20.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.