더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
LATEST POSTs
최근 등록된 포스팅 목록 최신순
인기순
- 시스템 리부팅시 pm2 스크립트 자동 실행 방법 예기치 못한 상황으로 웹호스팅 서비스가 리부팅되었음을 알리는 메일이 왔다고 생각해봅니다. 서버를 재시작하기 위해서 pm2 스크립트 재시작이 필요한데 하필 외부에 오래 머물러야 한다면? 이 경우 어떻게 서비스를 재가동
- wsl local dev 환경에서 port 1000 이하 사용 불가 해결하기 최근 윈도우 하위 리눅스인 WSL 2에서 로컬 앱의 포트를 80으로 설정하려고 했더니 에러가 발생했습니다. 확인해보니 WSL은 기본적으로 1000 포트 보다 낮은 포트의 사용이 기본적으로 막혀있습니다. 아무래도 보안
- [자바스크립트] 카멜 케이스, 파스칼케이스, 스네이크 케이스를 케밥 케이스로 변경하기, toKebabCase 변수 등의 텍스트 네이밍에 여러가지 케이스가 사용될 수 있습니다. 예를들어 대표적인 카멜 케이스 외에도 파스칼 케이스, 케밥 케이스, 스네이크 케이스 등등이 있죠."모두 케밥 케이스로 변경해보자!"만약 자바스크립트를
View Count : 79 Created : 2023-01-28 - yarnl.lock package-lock.json 파일 서로 변환하는 방법 노드 패키지 npm 또는 yarn을 사용할 때 package-lock.json 또는 yarn.lock 파일이 자동으로 생성됩니다. 그런데 만약 yarn.lock을 package-json.lock으로... 아니면 반대View Count : 55 Created : 2023-01-24
- [CSS] css 속성 clip-path 배우기. 원, 타원, 다각형 CSS 스타일 속성 중에서 사용하면 매우 유용하지만 예전에는 잘 사용하지 않던 속성 중 하나인 clip-path에 대하여 알아봅니다. 예전에는 브라우저 지원 관련하여 잘 사용되지 않았습니다. 하지만 최근의 메이저 브
- [IDE] intellij 터미널에서 vi, vim 편집시 esc키 사용하는 방법 웹개발 에디터 intellij(또는 webstorm)을 사용할 때 terminal의 vi 또는 vim을 사용하여 파일 편집 기능을 사용하는 경우가 있을 수 있습니다. 이 경우 편집을 위해서 insert 모드에서 변경
- 자바스크립트 웹페이지 공유하기 기능 추가. navigator.share() 특정 웹페이지를 다른 어플리케이션 및 Social, 카카오톡 등으로 공유하는 방법에 대하여 알아보려고 합니다. 어떻게 하면 쉽게 공유하도록 만들 수 있는지 알아보세요.# 웹사이트 다른 앱 등으로 공유하기예전에는 현재
View Count : 104 Created : 2023-01-21 - ChatGPT를 처음 사용해보다. 단순 텍스트 검색의 시작일까? 얼마 전 서비스를 시작한 ChatGPT를 사용해보았습니다. 주변에서 사용한 경험을 들어봤을 때 앞으로 얼마나 큰 변화가 있을 지 그리고 어느 정도까지 해낼 수 있는지 ~ 또 Chat을 통한 커뮤니케이션으로 원하는 정
- css 속성 position: fixed 사용시 부모 요소에 relative 이슈 해결 CSS의 position 스타일 속성에서 fixed를 사용하면 부모 요소가 아닌 웹문서(Document)의 root 영역인 뷰포트를 기준으로 정렬이 가능하게 됩니다. 다만 예외적인 케이스가 있는데요 ~ 이 경우 어떻
- Vue2 텔레포트 기능 구현하기, Teleport, portal-vue Vue 3에서 기본으로 제공되는 기능 중 하나인 텔레포트(Teleport)를 Vue2에서 사용하려고 합니다. 어떻게 하면 가능할 지 아래에서 알아봅니다.# Vue2 텔레포트 기능, portal-vuevue2에서는 &
- [자바스크립트] 배열 filter 메소드, 조건에 맞는 값만 얻는 방법 자바스크립트의 Array 메소드 filter()에 대하여 알아봅니다.# 자바스크립트 Array filter() 메소드배열 내장 메소드는 매우 다양한데 그 중에서도 많이 사용되는 메소드를 선택하라면 map(), fil
- [lodash] get 메소드 알아보기 오늘은 lodash의 get() 메소드에 대하여 자세히 알아봅니다.# Lodash get() 메소드get()은 객체에 사용하는 메소드로 객체가 가진 프로퍼티의 값을 구할 때 사용할 수 있습니다. 물론 프로퍼
- Nuxt 3 stable 버전 소식, nuxt3 announced Nuxt의 새로운 소식을 알려드립니다. 몇일 전인 2022년 11월 16일 Nuxt 3의 stable 버전을 공식적으로 알렸습니다.출처) Nuxt 공식 웹사이트Nuxt 3의 stable 버전을 기다리는 분들이 많았을
- [lodash] compact 메소드 알아보기 오늘은 lodash compact() 메소드에 대하여 알아보려고 합니다. 개인적으로 lodash와 관련된 모든 정보들을 올리는 것이 목표입니다. 최근들어 lodash 관련 포스팅을 꾸준히 올리고 있으로 앞으로도 계속
- lodash 모든 값들이 조건 일치여부 결과 반환, every() 메소드 lodash의 every()는 collection에 사용하는 메소드로 컬렉션의 모든 값을 조회하여 특정 조건을 모두 만족하는지 확인하여 결과를 불리언으로 반환하는 메소드입니다. 비슷한 메소드로 _.some()이 있는View Count : 346 Created : 2022-11-14
- [lodash] chunk 알아보기 lodash 배열 메소드 중 하나인 _.chunk()에 대하여 알아봅니다.# lodash chunk 메소드chunk의 사전적 의미를 먼저 살펴보면 아래와 같이 나타납니다.chunk n. 덩어리,
- [VueJS] 커스텀 디렉티브 v-visible 만들기. visibility VueJS를 사용한다면 v-if와 v-show를 많이 사용합니다. 이 둘을 사용하면서 왜 v-visible은 없을까? visibility: hidden을 사용하면 참 좋을텐데... 라는 생각을 할 수 있죠. 그래서
View Count : 396 Created : 2022-11-12 - [Javascript] Array flat() 메소드 알아보기 자바스크립트 배열의 flat() 메소드에 대하여 알아봅니다.# 자바스크립트 배열 flat() 메소드배열에 사용하는 메소드 flat()은 평평하다는 사전적 의미를 가지고 있습니다. 이처럼 배열을 평평하게 만들
- [NuxtJS] axios timeout 기본값 설정하는 방법 NuxtJS에서 네트워크 통신을 위해 axios를 사용하는 경우 axios의 timeout 기본값을 설정하는 방법에 대하여 알아봅니다.[ 잠깐 ] axios의 timeout 기본값을 설정해야 하는 이유는?axios의View Count : 660 Created : 2022-11-10
- [WSL] 윈도우 하위 리눅스 재부팅, 재시작 방법 윈도우 하위 리눅스(WSL or WSL 2)의 재시작, 리부트 방법에 대하여 알아봅니다. 간략하게 방법만 알아보려고 합니다. 가장 쉽고 빠른 재시작 방법은 무엇일까요?# WSL 재시작 하기, Reboot몇 가지 방법
