전체보기
HTML
CSS
JAVASCRIPT
PYTHON
REACT
VueJS
JQUERY
LINUX
PHP
DATABASE
LODASH
WEBDEVETC
ETC
Search
JSON Pretty
Close
CATEGORIES
JSON Pretty
HTML
CSS
React
VueJS
Javascript
jQuery
Lodash
Python
Database
Linux
WEBDEVETC
ETC
Search
Contact Us
LATEST POSTs
최근 등록된 포스팅 목록
최신순
인기순
webdevetc
[CORS] Cross Origin Resource Sharing 이해하기, 에러 및 처리 방법
아래는 클라이언트 측인 브라우저에서 발생하는 CORS(Cross Origin Resource Sharing)에 대하여 간단하게 이해 및 정리한 내용입니다.! 골치 아픈 에러 CORS... 언제 그리고 왜?API를 사용하는 경우 누구나 한 번은 <span data-cus
View :
44
/
2021-04-18
css
[scss] if else 조건문 사용하는 방법 및 예제
스타일을 사용하기 위한 방법으로 SCSS에서 if 조건문을 사용하는 방법에 대하여 알아보려고 합니다. 아래는 간단한 문법입니다.@if 조건 { 적용할 스타일}SCSS는 if 조건문을 사용하여 스타일을 적용하는 것이 가능합니다. 이 경우 일반적으로 @mixin, @include와 함께 많이 사용되는데 @in
View :
29
/
2021-04-14
db
MongoDB 사용 안 하는 컬럼, 필드 삭제하기, deprecated column
MongoDB를 사용하는 경우 만약 불필요한 컬럼이 존재할 수 있습니다. 예전에는 사용했었지만 현재는 사용하지 않는 경우의 필드가 그런 경우가 되겠죠.이 경우 더 이상 필요없는 컬럼은 바로 삭제하는 것이 좋을 것입니다. 그렇다면 어떻게 하면 MongoDB의 컬럼을 삭제할 수 있을까요? 아래에서 알아봅니다.<span dat
View :
43
/
2021-04-11
js
자바스크립트 문자열을 역순으로 반환하기, reverse string
자바스크립트에서 문자열을 거꾸로 반환하는 방법을 알아보려고 합니다. 예를들어 아래와 같이 말이죠.변경 전 문자열) 'abcde'변경 후 문자열) 'edcba'어떻게 하면 문자열 역순 변환이 가능할까요? 아래에서 자세히 알아보세요.# 자바스크립트 문자열 역순으로 변환 후 반환하기</spa
View :
79
/
2021-04-01
js
자바스크립트의 메모리 관리와 가비지 컬렉션(Garbage Collection)
자바스크립트 언어는 C나 비슷한 언어와 달리 추상화가 상대적으로 높은 언어입니다. 그리하여 메모리 관리 및 방법들이 거의 자동으로 이루어진다 할 수 있죠. 그렇다면 자바스크립트는 어떻게 메모리를 사용하고 관리할까요? 또한 자바스크립트를 사용하면서 효과적인 메모리 관리의 방법이 있다면 무엇인지 알아볼려고 합니다.# 자바스크립트의 메모리 관리자바스크립트는 다른 언어와 비슷한 메모리 관리 프로세스를 가지고 있습니다. 즉 아래와 같이 크
View :
137
/
2021-03-22
js
[자바스크립트] in 연산자 사용하는 방법과 응용
자바스크립트의 in 연산자(operator)의 쓰임과 활용에 대하여 간략하게 알아보려고 합니다.# 자바스크립트 in 연산자 알아보기먼저 in연산자는 아래와 같이 사용됩니다.in 연산자// 객체
View :
143
/
2021-03-21
js
[자바스크립트] 상위 태그 및 부모 태그 제거하기, strip parent tag
자바스크립트를 사용하여 상위 또는 부모 태그를 제외하는 방법에 대하여 알아보려고 합니다. 예를들어 아래와 같이 <b>Hello</b>라는 태그가 존재하는 경우 상위에 있는 태그(부모 태그)인 span을 제외하고 Hello 텍스트 노드만 반환하는 방법입니다.// 변경 전<b>Hello</b>// 변경 후Hello! 상위 또는 부모 태
View :
108
/
2021-03-19
python
Python jinja2에서 외부 파일 추가하는 방법
jinja에서도 다른 파일을 템플릿(template) 내부에 추가할 수 있는 다양한 방법을 제공하고 있습니다. include를 비롯해 import, macro 등이 있는데요 ~ 그 중에서도 include 역시 많이 쓰이는 방법입니다.# jinja 템플릿에 include를 사용하여 파일 추가하기아래는 include를 사용하여 외부의 파일을 템플릿 안에 추가하는
View :
137
/
2021-02-20
python
Python jinja 템플릿 for 루프 사용시 cycle 메서드 사용하기
Jinja에서 반복문을 사용해야 하는 경우 for문을 사용합니다. 이때 loop.index를 사용하여 순서값인 인덱스(index)를 얻는 방법이 많이 사용되지만 이 외에 cycle() 메서드가 존재합니다.jinja 루프문에 loop.cycle()은 어떤 일을 할까요? 루프 안에서 반복하여 특정 텍스트를 출력해야한다면 바로 cycle()을 사용하는 방법이 가장 쉽고 편리한 방법입니다. 간단하게 아래와 같이 반복해서 텍스트를 출력해야한
View :
137
/
2021-02-20
python
Python 딕셔너리(Dictionary) 타입에서 프로퍼티 삭제하기
파이썬(python)의 타입 중 하나인 딕셔너리(Dictionary)에서 원하는 프로퍼티만 삭제하는 방법을 알아보려고 합니다.# 파이썬 프로퍼티 삭제하기딕셔너리 타입의 프로퍼티를 삭제할 수 있도록 내장함수
View :
218
/
2021-02-16
webdevetc
브라우저 쿠키 사이즈 에러 400 이슈 해결하기
웹브라우저를 사용하는 경우 쿠키 사이즈 관련 에러(Cookie size large)가 발생할 수 있습니다. 이 경우 어떻게 해결할 수 있는지 알아봅니다.# 쿠키 사이즈 에러 해결하기브라우저의 쿠키 에러는 브라우저 창에 에러 메시지로 확인이 가능합니다. 보시는 것처럼 400 에러가 발생하고 나타나는 메시지는 '페이지가
View :
401
/
2021-01-26
js
자바스크립트에서 쿼리스트링을 객체, object로 변환하기
자바스크립트를 사용하여 URL 주소로 입력된 쿼리스트링 값을 객체로 변환하는 방법에 대하여 알아보려고 합니다.# 자바스크립트 쿼리스트링 객체 변환하기쿼리스트링은 주소창에 입력된 파라미터 값으로 ?keyword=webisfree와 같이 사용된 문자열을 말합니다.
View :
491
/
2021-01-25
lodash
lodsah trim() 함수 사용 방법 및 예제
lodash를 사용하여 문자열의 공백을 제거하는 방법 중 하나인 trim()의 사용 방법에 대하여 알아봅니다.# lodash trim() 메소드는?trim()은 문자열에 적용하는 메소드입니다. 일반적으로 trim() 함수의 경우 매우 자주 사용되죠. trim()
View :
425
/
2021-01-14
webdevetc
웹사이트에 카카오 공유하기 버튼 연동 및 개발 방법 알아보기
웹사이트에 카카오 공유하기 기능을 추가하는 방법을 알아보려고 합니다. 만약 카카오 공유하기 버튼을 만드려면 어떻게 해야할까요?# 카카오 공유하기 기능은?여러가지 SNS 플랫폼이 존재합니다. Facebook, Twitter 이 외에도 카카오 역시 많이 사용되
View :
784
/
2021-01-12
life
커피필터로 아메리카노 한 번 더 여과해 드립커피처럼 먹는 방법
때는 겨울이지만 커피는 사계절 떠날 수 없는 것 같습니다. 오늘은 커피 관련 이야기를 해보려고 합니다.현대 일상에서 커피는 떼려야 뗄 수 없는 존재 아닌가요? 하루의 일상을 시작하고 나른한 오후를 변화시키기 위해서 한 모금의 커피 한 잔을 청하기도 합니다. 매일 또 자주 마시는 커피 ~ 우리 몸에 장점과 단점이 있겠지요. 잘 알려진 항산화 기능이 대표적인 장점이라면 단점은 무엇일가요? 개인적으로 콜레스트롤이 가장 큰
View :
385
/
2021-01-06
js
[자바스크립트] 배열의 맨 앞에 추가하거나 삭제하기, shift, unshift
자바스크립의 배열에 값을 추가하는 방법은 여러가지가 있습니다. 만약 배열의 맨 앞에 값을 추가하거나 삭제하는 방법을 알아보려고 합니다.# 자바스크립트 배열의 맨 앞 또는 맨 뒤에 값을 추가하기자바스크립트의 배열에는 다양한 내장 함수가 존재하며 이 중에서 배열 맨 앞에 사용하는 함수가 존재합니다. 바로 <span data-c
View :
802
/
2021-01-06
react
React에서 string, 텍스트, 문자열로 html 코드를 추가하는 방법
React 앱에서 태그 요소에 텍스트나 문자열을 사용하여 html을 생성, 추가하는 방법을 알아보려고 합니다. 어떻게 하면 될까요?# React에서 html 텍스트를 추가하기자바스크립트는 DOM에 innerHTML을 사용할 수 있습니다. inner
View :
782
/
2020-12-30
js
자바스크립트 배열 값 순서 바꾸기, 변경하기
자바스크립트 배열이 여러 개의 값을 가지고 있을 때 만약 배열 값의 순서를 바꾸려면 어떻게 하는지 알아봅니다.# 자바스크립트 배열의 값 순서 바꾸기자바스크립트의 배열은 순서대로 정렬되어 저장됩니다. 즉 원하는 순서대로 배열 값을 위치시키는 것이 가능하다는 뜻입니다. 만약 기존의 배열 순서를 다른 순서로 변경해야
View :
2637
/
2020-12-22
js
자바스크립트 Canvas에 백그라운드 배경을 추가하는 방법
자바스크립트를 사용하여 canvas(캔버스) 영역 전체에 원하는 배경색(백그라운드색)을 적용하려고 합니다. 어떻게하면 될지 방법을 알아봅니다.# 캔버스(Canvas)에 배경색 칠하기canvas에 배경색(전경색)을 어떻게 적용하면 될까요? 가장 많이 쓰이는 방법으로 캔버스와 동일한 크기의 원하는 색상의 사각형을
View :
803
/
2020-12-22
etc
포토샵으로 사진, 이미지에 불투명, 반투명 효과 적용하기
포토샵을 사용하여 사진이나 일러스트 작업물에 불투명(또는 반투명) 효과를 구현하고자 합니다. 어떻게 하면 되는지 아래에서 간단하게 알아봅니다.# 포토샵 불투명, 반투명 효과 만들기, gradient아래 예제는 최근 포스팅한 글에 사용한 실제 이미지 작업의 결과입니다.
View :
1247
/
2020-12-20
react
antd Table 컴포넌트 체크박스 사용 방법 및 예제
antd 라이브러리의 Table 컴포넌트를 사용하면 리스트 형태의 데이터를 테이블로 출력할 수 있습니다. 만약 테이블에 체크박스를 사용하려면 어떻게 하는지 방법을 알아봅니다.추가로 체크박스를 사용하여 전체 선택 및 전체 해제 방법도 함께 알아봅니다.# antd Table 컴포넌트 체크박스 사용하기테이블에 체크박스를
View :
803
/
2020-12-18
app
디지털 빌딩 거래앱 카사 매수, 매도 거래 및 방법 정보
2020년 12월 18일 금일 빌딩거래 신규 플랫폼으로 알려진 카사가 드디어 첫 상장을 시작하였습니다. 상장은 금일 09시부터 시작되었으며 장 마감 시간은 17시까지입니다. 현재 시간 기준으로 약 1% ~ 2% 정도의 상승의 괜찮은 스타트를 보여주고 있네요. 앞으로가 더 기대됩니다.아래는 카사앱을 사용하여 빌딩 거래
View :
612
/
2020-12-18
game
[고전 오락실 게임] 퍼즐버블 게임, puzzle bobble
최근 오락실 고전 게임을 지속적으로 소개하고 있는데요 이번에 소개할 게임은 바로 퍼즐버블입니다.퍼즐버블은 매우 잘 알려진 버블보블(보글보글)의 IP를 활용한 퍼즐 타입의 게임입니다. 버블보글은 너무나 유명해서 달리 설명할 필요가 없을 정도로 다 아시는 국민게임이였죠!사진) 추
View :
1288
/
2020-12-17
tech
구글 애드센스의 링크 타입 광고가 사라진다
구글은 애드센스의 광고 타입 중 하나인 링크 타입(Link ads)이 곧 중단 될 예정이라고 알렸습니다.! 링크 타입 광고는?애드센스는 다양한 광고 타입을 선택할 수 있으며 링크 타입, 이미지 타입, 검색 등의 광고가 존재합니다. 최근에는 반응형 광고 및 자동 광
View :
489
/
2020-12-17
etc
따듯한 겨울나기! 방한 귀마개 정보
겨울철이 다가오면 추위에 대한 걱정이 우선이죠. 어떻게 하면 올해를 더 따뜻하게 지낼 수 있을까? 이런 생각 한 번 쯤은 해보셨죠?! 따뜻한 겨울을 위한 용품은 무엇이 있을까?추춘 겨울을 따뜻하게 보내기 위해서 겨울옷만으로는 뭔가가 부족합니다. 바로 겨울 전용 용품들을 준비해야 할 시기가 온 것이죠!! 수 많은 용품들중 <span data-c
View :
454
/
2020-12-17
css
[CSS] box-shadow 효과를 아래 또는 위 한 방향만 적용하는 방법
CSS의 box-shadow 스타일 속성을 사용하여 그림자 효과를 만들어보려고 합니다. 또 아래, 위, 좌, 우 한 방향으로만 그림자 효과를 적용하는 방법도 함께 알아봅니다.# CSS 그림자 효과를 한 방향으로 만들기그림자 효과를 만들기 위해서는 아래와 같이 세 가지 방법을 생각할 수 있습니다.[ 하나 ] t
View :
1842
/
2020-12-16
etc
윈도우 10 부팅 usb 만들기
윈도우(windows) 10을 설치하려면 윈도우 10 설치용 usb가 필요합니다. 요즘 나오는 pc는 윈도우 설치 제품과 미설치 제품(OS 미포함)으로 나뉘는데요 만약 미설치 제품인 경우 설치용 usb를 사용하여 윈도우 설치가 필요하죠.아래는 윈도우 10 설치를 위한 usb를 만든는 방법에 대하여 알아보려고 합니다.# 윈도우 10 설치 usb 만들기</sp
View :
864
/
2020-12-15
food
견과류 먹는 습관은 건강해지는 습관
요즘은 매일 견과류를 드시는 분들이 많은 것 같습니다. 견과류를 먹으면 왜 좋을까요?# 견과류를 먹으면 좋은 점참고로, 견과류는 딱딱한 껍
View :
380
/
2020-12-15
life
겨울철 정전기 어떻게 하면 벗어날 수 있을까
정전기 때문에 겨울이 무섭다고 생각하신 적이 있나요? 특히 겨울이 되면 더 심해지는 정전기... 정전기 때문에 쉽게 뭔가를 만지지 못한다면 이 글이 도움이 되었으면 좋겠습니다.# 겨울철 정전기정전기는 겨울에 특히 심하게 나타납니다. 또 사람마다 차이가
View :
429
/
2020-12-10
react
antd Input 태그에 focus 이벤트 사용하기
React 앱에서 antd의 Input 컴포넌트를 사용하고 있을 경우 만약 특정 시점에 Input 컴포넌트에 focus 되어 커서가 위치하게 하려고 합니다. 예를들어 검색 버튼을 클릭하는 경우 검색 Input 컴포넌트에 커서가 focus되어 타이핑이 바로 가능하도록 구현하려고 합니다. 어떻게 하면 될까요?먼저 실패한 케이스를 알아봅니다.
View :
838
/
2020-12-10
First
1
2
3
4
5
6
7
...
Next
Last