LATEST POSTs 최근 등록된 포스팅 목록 최신순

---

인기순

• vuejs [VueJS] scoped css를 이해하기 및 예제보기 VueJS에 CSS를 스타일을 적용하는 방법 중 편리한 Scoped CSS 기능에 대하여 알아보고 관련된 예제를 만들어 봅니다.! VueJS에서 Scoped CSS는?Vue를 사용하는 프로젝트는 다수의 컴포넌트를 사용하여 하나의 앱을 구현하게 됩니다. 이 경우 각각의 컴포넌트에 선언된 스타일이 의도하지 않거나 실수에 의하여 다른 컴포넌트에 영향을 줄 수 있겠죠. 이

  View : 259 / 2021-10-19
• git git commit에서 특정 사용자의 커밋 내용만 찾기, 검색하기, log Git을 사용하여 커밋하는 경우 다양한 정보를 남기게 됩니다. 이 후 어떤 내용으로 커밋했는지... 커밋을 누가 또는 어떤 부분을 변경하였는지 확인 할 때 아래처럼 git log를 사용하여 확인할 수 있죠.> git log그런데 만약 특정 사용자의 커밋 목록만 보고 싶다면 어떻게 할까요? 아래에서 알아봅니다.# git 특정 사용자의 커밋만 확인하기특정 사용자의 커밋만

  View : 190 / 2021-10-18
• python Python에서 url 주소를 확인하는 방법, localhost 포함 이 전 글에서는 Python Flask에서 현재 주소나 전체 경로 등을 알아내는 방법에 대하여 아래와 같이 포스팅하였습니다.관련 링크 바로가기 >https://webisfree.com/2017-09-2

  View : 234 / 2021-09-23
• webdevetc Mac에 npm, node 설치하기 Mac에 node, npm을 설치하는 방법입니다.# Mac에 node, npm 노드를 설치하려면?리눅스나 윈도우 유저의 경우 apt 또는 apt-get 아니면 설치 프로그램을 실행해서 사용합니다. Mac도 비슷한데 node, npm 설치를 위해서는 Mac에서 가장 많이 쓰이는 패키지 매니저 <spa

  View : 196 / 2021-09-04
• git [Git] git 커밋 메시지 검색으로 커밋 해시 찾기 Git에서 원하는 커밋 해시(Commit Hash)를 찾아야 할 경우가 있겠죠. 예를들어...하나. 특정 커밋의 변경 내용 등을 확인할 때둘. 체리픽으로 해당 커밋을 다른 브랜치에 적용할 때위의 경우들처럼 git에서 커밋 메시지를 검색해서 찾으려면 어떻게 하면 될까요? 아래에서 자세히 알아봅니다.# Git 커밋 해

  View : 373 / 2021-09-01
• git git 인증시 ssh key를 여러 개 등록하여 사용하는 방법 git을 사용하는 경우 인증이 필요하죠. 이 때 인증 방법으로 ssh 인증키를 생성하여 등록 후 사용하는 방법이 있습니다. 그런데 만약 "이미 등록된 키를 사용중"이라는 에러 메시지가 나타난다면 어떻게 할까요?위와 같은 에러는 하나의 컴퓨터에 등록된 키를 다른 계정으로 중복하여 사용하는 경우 나타날 수 있습니다. 다시 말하면 이미 등록된 키 이므로 해당 계정에서 사용

  View : 211 / 2021-08-30
• js 특정 엘리먼트로 스크롤을 천천히 이동시키는 방법, scrollIntoView smooth 웹사이트의 특정 영역으로 스크롤을 이동시키는 방법 중 하나인 scrollIntoView()에 대하여 알아봅니다.! [잠깐] 스크롤을 특정 엘리먼트로 이동시키는 방법은 뭐가 있을까?원하는 위치로 스크롤을 이동하는 방법은 몇 가지가 존재합니다. 위 방법을 알아보기에

  View : 1428 / 2021-08-19
  
• webdevetc 크롬 브라우저에서 웹사이트 전체 스크린샷 이미지 캡처 방법 가끔 웹사이트를 방문할 때 특정 웹페이지의 스크린샷이 필요한 경우가 있습니다. 특히 전체 스크린샷이 필요할 수도 있습니다. 이 경우 전체 스크린샷을 얻기 위해서 스크린샷을 여러 번 찍은 후 연결하는 방법이 있고 아니면 크롬 확장 앱을 설치하는 방법을 사용할 수 있습니다. 이보다 더 간단한 방법은 없을까요?# 크롬 브라우저에서 간단하게 전체 스크린샷 찍기, ful

  View : 466 / 2021-08-17
  
• vuejs [VueJS] v-slot을 사용하여 컴포넌트에 템플릿 추가하는 방법과 slot exist 확인하기 VueJS에서 하위 컴포넌트로 데이터를 전달하는 방법도 있지만 원하는 템플릿, 태그 등을 추가하는 것도 가능합니다. 이 경우 잘 알려진 방법으로 slot을 사용하는 방법이 있습니다. 아래는 VueJS에서 slot을 사용하는 방법에 대하여 알아보려고 합니다.# VueJS에서 하위 컴포넌트에 태그 전달하기공식 웹사이트를 찾아보니 기존의 slot을 사용하는 방법식

  View : 876 / 2021-07-27
• webdevetc npm install 에러 발생, rename no such file or directory 해결하가 npm을 사용하는 초기 단계에서 rename 관련 에러가 발생하였습니다. 관련 메시지는 아래와 같습니다.npm ERR! syscall rename...npm ERR! enoent ENOENT: no such file or directory, rename이를 해결하기 위해서 기본적으로 node_modules를 다시 지우고 재설치를 시도했습니다. 하지만 동일한 에러가 발생하였습니다. 아무래도 버전 문제일 수 있을 것 같아 nvm을 사용하여 최신

  View : 847 / 2021-07-15
• webdevetc WSL2 외부 remote ip 접속 가능하도록 설정하기, 방화벽 해제 윈도우 하위 리눅스인 WSL2를 사용하면 리눅스 기반의 로컬 개발 환경을 구축하는데 매우 편리한 것 같습니다. 서버 환경이 리눅스라면 윈도우에서도 동일한 환경 구축이 가능하다는 점이 큰 장점이죠.그런데 WSL2를 사용하면서 내 로컬 개발 서버를 외부에 공유하려고 할 때 문제가 발생하였습니다. 외부에서 ip를 통한 접속이 안되는 문제였죠. 아래는 이를 어떻게 해결했는지의 과정입니다.<span data-custom-sty

  View : 1927 / 2021-07-14
• db MySQL에서 테이블 컬럼의 타입 변경하기, text 관계형 데이터베이스인 MySQL을 사용하다가 다음과 같은 문제가 발생하였습니다. 바로 텍스트 저장시 일부 내용이 이 잘리는 이슈입니다.! MySQL 저장할 때 일부 내용 잘리는 경우 해결하기Admin을 사용해서 컨텐츠를 저장해야 되는데 내용의 일부가 계속 저장이 되지 않더군요. 이

  View : 488 / 2021-07-13
  
• php [PHP] 파일 업로드 에러 발생시 확인할 부분 php 프레임워크인 codeigniter를 사용하는 중에 파일업로드 허용 용량을 초과하였다는 에러가 발생하였습니다. 이 경우 해결 과정에 대한 방법과 접근 과정입니다.! codeigniter 업로드시 에러 발생php의 codeigniter는 너무 잘 알려진 프레임워크입니다. 이 프레임워크를 사용하면서 파일 업로드 기능을 수행중에 파일 업로드 용량을

  View : 419 / 2021-07-12
• js [자바스크립트] 버튼 클릭으로 특정 엘리먼트를 클립보드에 복사하기 자바스크립트에서 버튼을 클릭할 경우 원하는 텍스트를 복사하는 방법은 비교적 간단합니다. 하지만 만약 DOM 엘리먼트 자체를 복사하려면 어떻게 하면 될까요? 아래에서 자세히 알아봅니다.@ 그런데 엘리먼트까지 복사할 필요가 있을까?사실 엘리먼트 자체를 복사할 필요는 대부분 없습니다. 다만 일부 필요한 경우가 있을 수도 있는데 특히 위지윅 에디터를 사용하는

  View : 706 / 2021-07-07
• git [git] github two factor 보안 인증 설정하기 Github에서 보안 인증 설정 방법으로 Two Factor Authentication을 설정하는 방법에 대하여 알아보려고 합니다. # Github Two Factor Authentication(TFA) 설정하는 방법얼마 전 부터 github에서 계속해서 메일이 왔습니다. 메일 제목은 다음과 같았습니다.<p class="text text--cent

  View : 712 / 2021-07-05
• php php에서 http header 403 에러를 리턴하는 방법 PHP 웹서버 환경에서 403에러를 리턴하고자 합니다. 어떻게 하면 될까요?php 개발을 하다가 서버로 전송된 토큰을 확인한 후 만약 정상적인 token값이 아닌 경우 접근을 금지할 필요가 생겼습니다. 단순하게 에러 표시나 접근을 막을 수는 있겠지만 인증에 대한 오류를 명확히 전달하기 위해서 가급적 헤더(header)에 403 에러를 리

  View : 670 / 2021-07-02
  
• python Python 텍스트 문자 바꾸기, 치환 방법, replace() Python(파이썬)에서 가장 간단하고 중요한 문자 치환(replace)방법과 내용을 정리한 내용입니다. 아래에서 간략하게 알아봅니다.# Python 언어에서 문자를 치환, 바꾸는 방법Python에서는 문자를 바꾸기 위한 방법으로 <span data-custom-style=

  View : 1103 / 2021-06-30
  
• python Python 소문자 대문자 변환하는 방법 간단하지만 꼭 필요한 Python(파이썬)에서 대소문자를 변경하는 방법에 대하여 알아봅니다. 어떻게하면 파이썬에서 대소문자 변경이 가능할까요?[ 참고 ]만약 html Template에서 대소문자를 변경해야한다면? 아래 링크의 Jinja2의 대소문자 변경 방법을 확인하시기 바랍니다.관련 링크 바로가기 ><a title="https://webisfr

  View : 2459 / 2021-06-30
  
• js 자바스크립트 숫자 값을 binary로 변환하기 자바스크립트에서 숫자를 더하거나 빼는 연산을 수행할 경우 엔진에서 binary64로 변환하는 과정을 거치게 됩니다. 이 방법은 다른 언어에서도 많이 사용되며 IEEE754를 기반으로 숫자를 표현하고 연산하기 때문이죠.그렇다면 자바

  View : 754 / 2021-06-29
  
• tech 아이패드 프로 5세대 12.9인치 모델에 이 전 세대 매직키보드 사용 경험기 아이패드 프로 5세대 12.9인치를 구매하면서 키보드가 꼭 필요할까... 45만원을 지불 할 가치가 있을까 하는 고민이 있었습니다 ~ 물론 많이 사용하고 활용한다면 당연히 그럴 가치가 충분하겠지만 항상 사용하는 것도 아니고 하루 1시간 이내 사용하기 때문에 그 필요성을 딱히 느끼지는 못했죠~그렇게 미루다가 주변에서 매직키보드를 사용하는 것을 보니 더 이상 구매를 미루기가 점점 힘들어지더군요 ~ 그래서 구매한게 바로 이 전 세대의 <span data-c

  View : 414 / 2021-06-29
  
• webdevetc 윈도우 하위 리눅스인 wsl에서 hosts 파일 변경이 동작 안하는 경우 해결 방법 윈도우 하위 리눅스(wsl) 환경에서 hosts 파일을 변경하여 로컬 서버를 동작 시키려고 합니다. 이 경우 windows 어플리케이션 환경에서는 잘 동작하지만 wsl을 사용하는 경우 hosts에 설정한 것과 달리 동작하지 않을 수 있습니다. 왜 안되는지 그 원인과 해결방법을 알아봅니다.! wsl에서 hosts 문제 원인과 방법은?먼저 원인은 윈도우 환경에서 설정된 ho

  View : 480 / 2021-06-29
• webdevetc AWS 멀티 팩터 인증(MFA) 사용하는 방법, 보안 강화 AWS를 사용하는 경우 멀티 팩터 인증(MFA)을 설정하는 방법을 자세히 알아봅니다.! 멀티 팩터 인증(MFA)이란일반적으로 로그인을 필요로 하는 다양한 어플리케이션에서는 이와 멀티 팩터 인증(MFA)을 지원하며 설정이 가능합니다. AWS도 그렇지만 보안이 중요한 github이나 다른 클라우드 등도 멀티 팩터 인증을 사용할 수 있는데 기존의 로그인을 더 강화하기 위한 방

  View : 643 / 2021-06-27
  
• js 자바스크립트 배열의 map() 함수 알아보기 자바스크립트의 배열에 사용되는 빌트인 메소드 중에서 가장 잘 알려진 map()에 대하여 알아봅니다.# 자바스크립트 map()은?built-in 메소드인 map() 메소드는 배열에 사용하는 메소드로 배열의 모든 값들을 순환 후 새로운 배열을 반환하기 위해 사용됩니다. 기본적으로 아래와 같은 특징이 있습니다.- 배열을 사용하여 모든 값을 순환하기 가장 간단하다

  View : 1048 / 2021-06-23
• webdevetc 크롬 브라우저에서 input 태그 placeholder에 적용된 스타일 확인 방법 css에 적용된 스타일을 확인하거나 변경할 때 유용하게 사용되는 툴이 바로 크롬 브라우저의 개발자 도구(F12)입니다. 개발자 도구를 사용하면 손쉽게 어떤 스타일이 적용되었는지 확인할 수 있죠."input 태그의 placeholder 스타일을 볼 수 없다?"그런데 개발자 도구를 사용해도 볼 수 없는 스타일이 존재하였습니다. 바로 css의 pseudo class(가상 선택자 또는 의사

  View : 696 / 2021-06-22
  
• js 자바스크립트 ES6의 const 상수 조금 더 알아보기 예전에 써 두었던 글을 보니 너무 오래되었고 부족한 부분도 많아 좀 더 정리하고자 적게 되었습니다.# 상수는 무엇인가?프로그래밍 언어에서 상수는 영어로는 constant, 사전적의미는 끊임없이 계속된다는 뜻으로 즉 같은 값이 계속 유지된다로 생각할 수 있습니다. 이와같이 같은 값이 계속 유지되기 때문에 상수로 값을 선언하는

  View : 526 / 2021-06-21
  
• linux [리눅스] linux history 명령어 알아보기 리눅스 history 명령어에 대하여 알아보겠습니다. history는 언제 그리고 어떻게 사용할 수 있을까요?# 리눅스(linux) history 명령어리눅스에서 history 명령어는 매우 자주 사용

  View : 498 / 2021-06-08
  
• tech [아이패드] iPad Pro 5세대 12.9인치 언박싱 5월 마지막 주 ~ 드디어 기다리던 아이패드 프로 5세대 사전 예약이 시작되었고 오늘에서 제품이 도착해서 언박싱 리뷰를 남기게 되었습니다... 고대하던 제품의 언박싱 이 전에 간략하게 이번 iPad Pro 12.9인치 5세대 제품의 특징에 대하여 간략하게 알아보려고합니다.사진) 아이패드 프로 12.9인치 제품과 애플 펜슬 그리고 종이질감 필름<sp

  View : 616 / 2021-06-02
  
• css [CSS] 변수 선언 및 사용하는 방법, var() CSS에서 변수를 선언하여 사용하는 방법에 대하여 알아보려고 합니다.# CSS에서 변수 사용하기전처리기 sass, scss를 사용하는 경우 변수 사용이 가능하지만 단지 css만 사용하는 경우 변수를 선언하고 사용하는 것이 가능할까요? 물론 가능합니다. 다만 예전에는 IE를 지원하지 않았기 때문에 널리 사용되지 않았지만 현재는 IE를 제외한 대부분의 메이저 브라우저에 지원하므로 많이 사용되고 있습니다.그럼 먼저

  View : 748 / 2021-06-01
• vuejs [VueJS] provide, inject 사용하는 방법 알아보기 VueJS에서 컴포넌트 사이의 데이터를 전달하는 방법중 하나인 Provide / Inject 방법에 대하여 알아봅니다.# VueJS Provide와 Inject 사용하기VueJS에는 다양한 성격의 데이터들이 존재하는데요 ~ 이 데이터들을 각각의 컴포넌트 사이에 주고 받기 위한 방법으로 props를 사용하는 방법이 대표적입니다. 예를들어 name prop에 "abc" 값을 전달하기 위해서 아래처럼 사용합니다.<div clas

  View : 640 / 2021-05-07
• vuejs [VueJS] 드래그앤드랍 구현 라이브러리, vuedraggable VueJS를 사용하는 프로젝트에서 드래그앤 드랍 구현이 필요한 경우 많이 사용되는 라이브러리, 패키지인 vuedraggable에 대하여 알아봅니다.! vuedraggable을 사용하는 이유는?

  View : 1403 / 2021-05-07