KodeVvon's World

개발에서 API 요청과 결과를 쉽게 확인하기 위해 사용하는 Postman은 개발 생산성을 올려줄 수 있으나 근래에는 제법 무거운 녀석이 되었다는 말들이 많다. 초창기 단순 API테스트를 목적으로 사용되었던 것에 다른 기능들이 추가되면서 점차 규모가 커진 것 같다 Visual studio code(VS Code)에서 확장 클라이언트로 Thunder Client를 추천받아 사용해보니 vs code에서 바로 테스트를 할 수 있다는 것이 장점으로 다가왔다 가벼운 것 또한 장점이라 한다 설치 https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client Thunder Client - Visual Studio Marketplace E..

체력관리를 잘하자 못하면 똥망된다.. 흑흑

//webpack.config.js module.exports = { //... resolve: { // 편의를 위해 생략할 확장자 extensions: [".js", ".json"], // 모듈 불러오는 경로의 별칭 설정 alias: { '~': `${__dirname}/src`, '@': `${__dirname}/src`, }, //... } 웹팩으로 프로젝트 작업 전, 웹팩 설정에서 resolve의 alias에 원하는 별칭을 설정해두면 import/export할 때마다 조금 더 단축(?)시켜 사용가능하기 때문에 생각보다 편하다 원하는 확장자를 extensions에 넣으면 확장자 명시 없이도 웹팩이 자동으로 확인하기 때문에 편리하다. .js, .vue같은 것들을 넣으면 좋다 :D

Vue의 Prop과 Emit Vue가 가진 컴포넌트 통신 구조의 기본으로 prop과 emit이 있다. 다른 방법도 있긴 하지만 일단 기본 중의 기본(?)인 이 방법을 먼저 알아보자. props는 상위 -> 하위로 무언가를 내려보내는 것, emits는 하위 -> 상위로 무언가를 올려보내는 것 이라고 간단하게 생각할 수 있다 props로는 기본적으로 자식에게 data를 전달하고 emit으로는 특정 이벤트 발생 시 부모에게 신호를 보내는 방식이다 아래 그림을 참고하면 조금 더 이해가 쉽다 :) Vue는 왜 굳이 자식에게는 props data만 주고, 부모한테는 events emit만 보내줄까? 그것은 Vue가 기본적으로 이전의 MVC(model–view–controller, MVC)패턴의 문제점을 개선하기 위..

https://fontawesome.com/icons font awesome 은 svg 아이콘을 사용할 수 있도록 해주는 곳이다 제공되는 아이콘이 글자처럼 쉽게 크기 조절, 색 변경 등이 가능하기 때문에 유용하다 아이콘 사이즈 조절은 font-size, 색상 변경은 color속성을 사용하면 된다 :) html에 cdn으로 넣어서 적용하는 방법도 있고, npm으로 설치도 가능하다. 웹폰트 + CSS스타일로 적용하거나, svg + Javascript쪽으로 적용할 수 있다. 간단히 두 유형의 차이점을 정리하자면 1. 웹폰트 + CSS스타일 - html, css를 이용해 간단히 추가/수정이 가능 - 아이콘을 유니코드 값으로 참조하는 방식 - 일부 고급 기능(?) 이용에 제약이 있다 - 자바스크립트 없이 손쉽게,..

Uncaught ReferenceError: process is not defined solution 1. npm i process install process 2. add plugin setting in webpack.config.js const webpack = require('webpack') ... module.exports = { ... plugin:[ ... new webpack.ProvidePlugin({ process: 'process/browser', }) ] }

티스토리 파비콘 제작 + 설정 1. 포토샵이나 이미지 제작/수정 프로그램으로 192*192 픽셀 이미지를 만든다. 확장자는 jpg나 png 2. www.favicon-generator.org 접속 3. 만든 이미지를 첨부하고 [Create Favicon]버튼 클릭. 옵션은 기본으로 두면 된다 4. [Download the generated favicon] 을 클릭해 파비콘 파일들을 다운받는다 5. 다운 받은 파일의 압축을 풀어 이미지들을 확인 파일을 열어보면 파비콘 이미지가 다양한 사이즈로 제작되어 있다. 이 파일들을 티스토리 파비콘으로 적용할 것이다. 6. 티스토리 관리 -> 꾸미기 메뉴의 '스킨 편집'에 들어가 [HTML 편집] 버튼을 누른다 7. 파일 업로드 영역으로 가서 아까 받은 파비콘 파일을 ..

NPM 웹팩(WebPack) 번들러 시작하기 1 NPM으로 웹팩(WebPack) 번들러 개발서버(dev server) 구축하기 웹팩 번들러 시작하기 1 에서 진행했던 것은 main.js를 entry, output으로 적용하는 것으로 간단히 build만 하면 문제없었다. 그러나 개발서버를 이용하면서 작업하려면 브라우저가 읽을 수 있는 html파일,css 등이 필요하다 웹팩이 이 파일들을 읽고, output으로 뽑아낼 수 있도록 하는 추가 설정이 필요한 것이다 1. npm i -D html-webpack-plugin html plugin을 개발용 패키지로 설치한다 2. webpack.config.js에서 플러그인 추가 webpack.config.js에서 node_modules에 새로 설치한 패키지를 가져와 ..

NPM으로 웹팩(WebPack) 번들러 기본 세팅하기 웹팩은 워낙 범위가 크고 다양해 세세한 설정이 필요하지만, 프로젝트 규모가 커질 때 그 진가를 발휘한다 프로젝트 시작하기 1. npm init -y 폴더 생성 후 cli로 들어가서 npm init -y 입력 package.json 파일이 생긴다 2. npm i -D webpack webpack-cli webpack-dev-server@next 모듈 번들러의 대명사답게 웹팩은 기본적으로(?) 3개부터 설치하고 시작한다 webpack, webpack-cli, webpack-dev-server@next dev-server설치에서 @next는 cli와 버전을 일치시키기 위한 추가 키워드 3. package.json에 scripts 추가 과정1에서 생겼던 pa..

vue에서 파일 절대경로 설정하기 vue에서 프로젝트 진행 중 절대경로를 src로 설정해두면 import/export할 때 여러모로 편하다! 프로젝트의 최상위 root폴더에 jsconfig.json파일 생성 후 아래 코드를 입력해 설정을 적용하자 { "compilerOptions": { "baseUrl": ".", "paths": { "~/*": [ "./*" ], "@/*": [ "./src/*" ], } }, "exclude": [ "node_modules", "dist" ] }