IT
IT 및 일상을 공유합니다.
[Nuxt] Vuetify 설치 방법 및 Material icon 설정
Nuxt2 환경에서 Cli 명령어로 간단하게 Nuxt 프로젝트와 Vuetify 설치를 진행을 해보고 Material icon을 설정하는 방법을 알아보도록 하겠습니다. Nuxt2 설치 cli 명령어로 나오는 밑에 단계들 진행 # nuxt2 프로젝트 생성 cli 명령어 npx create-nuxt-app NuxtTest # 1. 프로젝트 이름 설정 create-nuxt-app v5.0.0 ✨ Generating Nuxt.js project in . ? Project name: (NuxtTest) # 2. 언어 설정 ? Programming language: (Use arrow keys) > JavaScript TypeScript # 3. package manager 설정 ? Package manager: (..
[JS] 자바스크립트 이벤트 흐름 (버블링, 캡쳐링)
이벤트 전파 (Event Propagation) 이벤트 전파(Event Propagation) 란. HTML 요소에서 이벤트가 발생했을 때 연쇄적인 흐름이 일어나게 되는데 이러한 현상을 이벤트 전파(Event Propagation) 라고 하며, 전파 방향에 따라서 버블링과 캡쳐링으로 구분 짓는다. 이벤트 버블링(Bubbling) HTML 요소에서 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 바깥 부모 요소의 핸들러가 작동되며 끝으로 최상단 부모 요소까지 반복되어 핸들러가 작동된다. 즉 자식 요소에서 발생한 이벤트 핸들러가 최상단 부모요소까지 전파되는 것이다. FORM DIV P 가장 안쪽 p 태그를 클릭하면 버블링 원리로 p 태그부터 최상단까지 onclick 이벤트 핸들러가 동작합니다...
[Nuxt] Axios interceptors 사용하기
Nuxt2로 프로젝트를 진행하면서 백엔드 서버와의 통신할 때 제가 Axios Interceptors 설정과 처리하는 방식을 한번 작성해보려고 합니다. Axios Interceptors 란? request와 response가 then 또는 catch로 처리되기 전에 가로챌 수 있게 해주는 axios 라이브러리입니다. 정리하면 Http Request , Response가 then catch 처리되기 전에 부가적인 처리 작업을 할 수 있습니다. Request Interceptors? config 옵션 설정 headers 설정 jwt 인증이나 관련 부분 처리 -> 헤더에 담아서 보낼 때 로딩 관련 로그 작업 Response Interceptors? 에러 핸들링 -> statusCode 별로 에러 처리나, 에러 ..
[WebGL] Unity WebGL Brotli 압축에 대한 Nginx 서버 설정
Unity WebGL 프로젝트 파일을 웹 브라우저에서 실행하면서 성능을 최대한 내기 위해 배포된 서버에서 Brotli 설정하는 방법을 소개합니다. 그러나 이러한 압축방식으로 최적화를 하고싶지 않다면 유니티에서 빌드할 때 gzip으로 설정하면 됩니다. ● 이전 포스팅에서 Unity WebGL 프로젝트를 웹 브라우저(Nuxt)에서 실행하는 방법을 참고하시고 진행하시면 됩니다. 느린 개발자 프론트엔드 백엔드 학습정리 및 정보공유 블로그입니다. stack94.tistory.com Brotli 이란? Brotli 압축 방식은 Gzip 보다 나은 압축률을 제공하는 손실 없는 압축 알고리즘입니다. 그러나 아직 모든 웹 서버나 모든 브라우저에서 지원 되는 것은 아니기 때문에 호환성 체크가 필요합니다. 보통 IE에서는 ..
[Prettier] eslint: delete `␍`(prettier/prettier) 에러
회사에서 프로젝트 환경을 구성하는 도중 맥 OS 환경에서 또는 윈도우 환경에서 협업을 할 때 맥북에서 작업하던 코드는 분명 이상이 없었는데, 윈도우 환경에서 Pull 받아 작성하니 코드 끝마다 에러를 발생하는 문제가 생겼습니다. eslint를 적용했을때 이런 문제가 생겨서 발생한 원인과 에러를 정리해 봤습니다. 원인 eslintrc.js 에서 설정한 부분 중. endOfLine에서 설정한 LF에 문제였습니다. LF: Line Feed(\n) CR: Carriage Return(\r) 설명하자면 각각 새로운 줄 바꿈을 바꾸는 방식에 대한 설정값입니다. LF에 경우 현재 커서의 위치에서 한 줄을 커서의 위치 변화 없이 아래로 내리는 방식이고, CR은 현재 줄에서 커서의 위치를 맨 앞으로 옮기는 방식입니다....
[docker] 도커 파일(Dockerfile)의 문법 및 작성 예시
❗ 이번 포스팅에서는 "DockerFile"에 대해 한번 정리해보고자 합니다. 빌드하는 관정 및 다양한 옵션과 주요 지시자에 관한 내용이므로 참고하시기 바랍니다. DockerFile 이란? Docker Image를 생성하기 위한 설정 파일입니다. 파일 내 작성된 구문으로 Docker Image가 만들어집니다. DockerFile 문법 주요 지시자 종류 구문 설명 # 코멘트 FROM 베이스 이미지(Base Image) 지정 MAINTAINER 이미지를 생성한 사람의 이름 및 정보 LABEL Key-value 형식으로 작성된 메타 데이터 RUN 컨테이너 빌드를 위한 실행 Commands COPY 컨테이너 빌드시 호스트 파일을 복사 ADD 컨테이너 빌드시 호스트의 (tar,url)을 복사 WORKDIR 컨테이..
[docker] 도커 정상 동작 확인 - 기본 명령어
[docker] 도커란 무엇인가? - windows 설치 방법 이번 포스팅에서는 도커에 관한 설명과 윈도우 환경에서 별도의 가상 머신(VM) 없이 "Docker Desktop" 으로 설치하는 방법을 정리하겠습니다. Docker 란? 리눅스 응용 프로그램을 소프트웨어 컨테이너 stack94.tistory.com 이전 포스팅에서 토커에 대한 기본적인 개념과 Windows에서 설치하는 방법을 정리해 봤습니다. 이번 포스팅에서는 도커 설치에 이어서 도커가 정상 동작하는지 확인하는 간단한 기본 명령어를 정리해보고자 합니다. 도커 정상 동작 확인 docker login (도커 계정 로그인) UserName , Password 입력 Docker Desktop에 로그인이 되어있으면 "docker login" 입력만으로..
[docker] 도커란 무엇인가? - windows 설치 방법
이번 포스팅에서는 도커에 관한 설명과 윈도우 환경에서 별도의 가상 머신(VM) 없이 "Docker Desktop" 으로 설치하는 방법을 정리하겠습니다. Docker 란? 리눅스 응용 프로그램을 소프트웨어 컨테이너 안에 배치하는 일을 해주는 자동화 오픈 소스입니다. 도커는 일반적으로 도커 엔진 혹은 도커에 관련된 모든 프로젝트를 말합니다. Docker Engine 이란? Docker Engine은 컨테이너를 생성하고 관리하며 제어할 수 있게 다양한 기능을 제공하는 도커의 프로젝트입니다. Docker Daemon, REST API, API를 통해 도커 데몬과 통신하는 CLI로 모듈식으로 구성되어 있습니다. Docker Container (도커 컨테이너) 도커를 사용하면 애플리케이션을 모든 종속성과 함께 컨테..
[WebGL] 웹 브라우저 환경(Nuxt,React) 에서 WebGl 연결 - 3
[WebGL] 웹 브라우저 환경(Nuxt,React) 에서 WebGl 연결 - 2 [WebGL] 웹 브라우저 환경(Nuxt,React) 에서 WebGl 연결 - 1 Unity WebGL 이란? Unity 콘텐츠를 HTML5 기술과 WebGL 렌더링 API를 사용하여 웹 브라우저에서 실행하는 기술. 간단하게 Unity 빌드 옵션을 사용하여 java stack94.tistory.com 이전 포스팅에 이어서 Nuxt 유니티에 대한 양방향 통신에 대해서 설명을 이어가겠습니다. Nuxt 에서 Unity 이벤트(함수) 실행하기 이전 포스팅에서 만들어준 EditorViewer 컴포넌트를 다시 확인해서 버튼과 화면을 같이 보기 위해 canvas width 값을 줄여줍니다. 1900px -> 800px Web(Nuxt)..
[Nuxt] Axios 와 Proxy 사용 방법 (CORS)
이번 포스팅은 NuxtJS에서 Axios 구성과 Proxy 설정 방법에 대해서 설명해보려고 합니다. 회사에서 백엔드와 작업할때 CORS 문제와 API 작업에서 삽질했던 부분을 정리하고자 합니다. CORS 란? Cross Origin Resource Sharing의 약자로, 현재 웹페이지 도메인에서 다른 웹페이지 도메인으로 리소스가 요청되는 경우를 말한다. HTTP , HTTPS 와 같은 프로토콜이 다른경우 domainA.com과 domainB.com처럼 도메인이 다른 경우 8080 포트와 3000 포트처럼 다른 경우 이처럼 Cross-Origin 이란 위 3가지 중 한 가지라도 다른 경우를 말합니다. CORS가 없이 모든 곳에서 데이터를 요청할 수 있으면, 다른 사이트에서 본인이 개발한 사이트를 흉내 낼..
[WebGL] 웹 브라우저 환경(Nuxt,React) 에서 WebGl 연결 - 2
[WebGL] 웹 브라우저 환경(Nuxt,React) 에서 WebGl 연결 - 1 Unity WebGL 이란? Unity 콘텐츠를 HTML5 기술과 WebGL 렌더링 API를 사용하여 웹 브라우저에서 실행하는 기술. 간단하게 Unity 빌드 옵션을 사용하여 javascript 프로그램으로 퍼블리싱 할 수 있다. WebGL에서 stack94.tistory.com 이전 포스팅에 이어서 WebGL 프로젝트 빌드와 Nuxt 프로젝트 페이지 화면에 띄우는 방법을 설명하겠습니다. WebGL 프로젝트 빌드 파일 구성 Build 폴더 파일 구성 [ExampleBuild]는 타깃 빌드 폴더의 이름을 나타냅니다. 글자색으로 채워진 Build 파일로 웹브라우저에 연결합니다. (나머지 파일은 일단 사용하지 않음) 파일 이름 ..
[WebGL] 웹 브라우저 환경(Nuxt,React) 에서 WebGl 연결 - 1
Unity WebGL 이란? Unity 콘텐츠를 HTML5 기술과 WebGL 렌더링 API를 사용하여 웹 브라우저에서 실행하는 기술. 간단하게 Unity 빌드 옵션을 사용하여 javascript 프로그램으로 퍼블리싱 할 수 있다. WebGL에서 실행하려면 모든 코드가 javascript여야 하며, 콘텐츠 대부분이 주요 데스크톱 브라우저의 최신 버전에서 지원됩니다. 각 브라우저에서 제공하는 지원 수준의 차이 가 있고, 현재 모바일 디바이스를 지원하지 않습니다. Unity가 설치되어 있는 가정하에 Nuxt 프레임워크 환경에서 Unity Webgl 콘텐츠를 띄워보는 것을 설명드리겠습니다. React도 환경이 잘 구축되어 있기 때문에 React에서도 간단하게 보여드리겠습니다. 1. 환경구성 이름 버전 Nuxt ..