개발/Frontend 5

Next.js 서버 실행시 host가 private ip로 bind되는 경우

문제Next.js는 애플리케이션을 실행(next start)하면 host가 127.0.0.1로 bind된다. 따라서 브라우저에 http://127.0.0.1을 입력하면 내가 만든 프론트 페이지로 이동할 수 있다. 또는 /etc/hosts에 localhost가 등록되어 있다면 http://localhost로 접속하는 것도 가능하다.그런데 Next.js 특정버전 이상부터 (v13.4.7 이상으로 추정) 애플리케이션 실행 시 host가 192.168.x.x과 같은 private ip로 bind되는 문제가 발생한다. 내부적으로 서버 실행 시 hostname 가져오는 방법이 달라진 것 같다. (소스 찾아봤는데 까먹음) 로컬에서 개발할 때야 http://192.168.0.x..로 접속해서 한다 쳐도 운영환경에서는 ..

개발/Frontend 2024.06.27

(React) proxy기반의 반응형데이터 관리

React 반응형 데이터 React에서는 반응형 데이터를위해 setState를 이용한다. 그런데 클래스 인스턴스로 데이터를 관리하고싶은 경우 인스턴스 자체의 변경점이 지정되며, 인스턴스내의 데이터를 변경 하고싶은경우 spread방식을 이용하기때문에 불편하다. React에서 proxy기반의 상태(반응형)관리 해주는 Valtio라는 라이브러리를 발견했다. 해당 방법을 이용하면 쉽게 클래스 인스턴스를 관리 할 수 있다. Vue3에서 reactive (or ref)와 비슷한 느낌인것 같다. 그러면 아래와같이 직관적으로 반응형 데이터를 만들어줄 수 있고 변경또한 객체에 메시지를 전달하여 해결할 수 있다. 예제코드 import React, {useEffect, useState} from "react"; import..

개발/Frontend 2022.07.08

typescript, babel, jest 모듈 환경 구성

타입스크립트, 바벨 npm 설정 패키지 설치 테스트 관련 $ npm install --save-dev jest @types/jest 타입스크립트, 바벨관련 $ npm install --save-dev typescript NPM 셋업 설정파일 생성 설치 중간에 test command를 입력하라는 prompt가 나오면 jest로 입력한다. npm run test 명령어를 통해 테스트를 수행 할 수 있게 만들기 위한 부분이다. $ npm init 스크립트 추가 package.json { "name": "class-enum", "version": "0.0.1", "description": "class enum", "main": "index.js", "scripts": { "test": "jest", "compi..

개발/Frontend 2022.04.23

Vue.js 간단한 플러그인 만들기

Vue.js 플러그인 페이지의 로딩바를 보여주는 플러그인을 만들려고 한다. 요구사항 페이지 로딩 element는 1개만 관리하며 show/remove 한다. 페이지를 떠날때는 (뒤로가기 버튼 등) 로딩 상태를 remove 한다. (이 전 페이지로 갔는데 여전히 로딩중이면 이상하니깐~) element ui에서 제공하는 로딩 element를 이용한다. 결과물 로딩 클래스 /src/plugin/elloading/ElLoading.ts import * as $ from "jquery" export default class ElLoading { private readonly loadingElement: string private readonly elementId: string private readonly loa..

개발/Frontend 2020.11.20

webpack에서 splitChunks 무시하기 (Vue.js)

문제 npm run build를 실행하면 js, css 한 개씩 번들링이 되는게 아니라 chunk되어 생성된다. 이렇게 되면 index.html head에 들어가는 파일명이 매번 바뀌게 된다. 그러면 배포시 계획에 차질이 생기므로 반드시 해결해야 하는 문제였다. 그리고 내가 이쪽 지식이 없는게 문제였다. 현재 버젼 webpack: 4.41.2 vue-cli: 4.0.5 삽질 vue.config.js에 뭔 짓을 하면 될것 같은데? 라는 생각으로 찾아보기 시작했다. module.exports = { chainWebpack: (config) => { config.optimization.delete('splitChunks') }, webpack에 optimization 설정을 무시하려는건데 아무튼..

개발/Frontend 2019.11.27