함께 나누는 웹개발 커뮤니티 블로그. webisfree.com

webdevetc nextjs robots.txt 페이지 설정하기 nextjs 앱에서 robots.txt 파일을 설정하는 방법에 대하여 알아봅니다.# nextjs에서 robots.txt 추가하기nextjs 환경에서 웹크롤러의 크롤링여부를 설정하는 robots.txt 파일을 추가하는 방법입니다.nextjs의 root에는 /public/ 이름의 디렉토리가 존

View : 7 / Created : 2020-09-19

webdevetc nginx proxy redirect 프록시 서버 설정하기 nginx에서 프록시 서버 사용을 위해 다른 호스트, 머신으로 이동시키는 설정 방법을 알아봅니다.! 프록시 서버(Proxy server)란?클라이언트와 서버 사이에 존재하는 서버로 클라이언트의 요청을 받아 Reverse에 위치한 서버에 전달하는 상호 중계 목적의 서버를 말합니다. 프락시 서버가 사용되는 이유는 보안이나 트래픽 분산 등의 <span data-custo

View : 10 / Created : 2020-09-19

webdevetc 엑셀에서 json 파일 불러오기 테이블로 변환하기 엑셀 프로그램에서 json 파일을 불러오는 방법에 대하여 알아봅니다.# 엑셀로 json 파일 불러오기이 전에 한 가지 알아두셔야 할 사항이 있습니다. 엑셀 버전에 따라 조금씩 차이가 있을 수 있습니다. 즉 office 신규버전 또는 2013, 2010, 2007 버전 등에 따라 메뉴가 다르거나 없는 기능이 있을 수 있으니 참고하세요. 그럼 아래에서 알아봅니다.!

View : 23 / Created : 2020-09-19

lodash lodash uniqBy() 메소드 알아보기 lodash 메소드 중 하나인 uniqBy() 메소드에 대하여 알아봅니다.# lodash uniqBy() 알아보기uniqBy()는 lodash 신규 업데이트를 통해 기존의 unique()에서 분리된&n

View : 31 / Created : 2020-09-17

webdevetc 윈도우 하위 리눅스 wsl 2 업데이트 이 후 차이점 및 장점 윈도우 하위 리눅스 wsl을 wsl2로 업데이트 한 이 후 문제점 및 장점 등에 대하여 적어보았습니다.# 윈도우 10 하위 리눅스 2 업데이트윈도우 10의 2004 업데이트 이 후 가능한 윈도우 하위 리눅스를 새로운 버전인 wsl 2로 업데이트를 진

View : 35 / Created : 2020-09-17

lodash lodash 메소드 uniq() 알아보기 lodash 메소드 중 배열의 고유한 값(unique)만 남길 수 있는 uniq()에 대하여 알아봅니다._.uniq(데이터)간단한 문법은 위와 같습니다. 그렇다면 uniq() 메소드는 언제 어떻게 사용할까요?<span dat

View : 42 / Created : 2020-09-15

lodash lodash union 메소드, unique값으로 병합하기 자바스크립트 라이브러리 lodash의 union() 메소드에 대하여 알아봅니다._.union([arrayA, arrayB, ...])간단한 문법은 위와 같습니다. union()에 대하여 아래에서 더 자세히 알아봅니다. # lodash union() 메소드는?

View : 28 / Created : 2020-09-15

lodash lodash 정보 및 npm 설치하기, installation 자바스크립트 라이브러리 lodash에 대하여 알아봅니다.# lodash란?lodash는 자바스크립트 라이브러리로 underscore 또는 lodash는 한 번 정도 들어봤을 정도로 많이 사용되는 필수 라이브러리 중 하나 입니다. lodash는 여러가지 유용한 유틸리티 기능을 제공하며 특히 컬렉션

View : 44 / Created : 2020-09-11

db MongoDB 날짜 쿼리문 gte, 크거나 작은 값 MongoDB에서 날짜 값을 기준으로 크거나 작은 값으로 쿼리문을 작성하는 방법을 알아봅니다.# MongoDB 날짜 값 비교하는 쿼리문 작성만약 특정 날짜 보다 큰 데이터만 불러오거나 반대로 특정 날짜보다 작은 데이터만 가져와야 할 경우가 있겠죠. 이 경우에는 NoSQL MongoDB에서는 아래와 같은 키워드를 사용하여 쿼리문을 작성할 수 있습니다.<p class="text text

View : 41 / Created : 2020-09-10

linux [리눅스] 저장장치 용량 등 정보 확인하기, df 리눅스의 저장장치 용량을 확인할 수 있는 명령어 df에 대하여 알아봅니다.# 리눅스 df 명령어 알아보기df는 disk filesystem의 줄임발로 디스크 파일 시스템에 대하여 정보를 알려줍니다. 특히 사용 중인 공간과 남은 공간을 확

View : 38 / Created : 2020-09-10

react [react] antd table 컴포넌트 정보 및 예제 React UI 라이브러리 antd의 Table 컴포넌트에 대하여 알아봅니다. antd의 Table 컴포넌트는 테이블 형태의 Layout을 구현하는데 사용됩니다.<Table />그럼 간단한 사용 방법 및 예제를 먼저 알아봅니다.# antd Table 컴포넌트 정보 및 예

View : 34 / Created : 2020-09-10

js 자바스크립트 history 객체 페이지 갱신 없이 페이지 전환, pushstate 자바스크립트를 사용하여 현재 페이지를 새로고침, 갱신하지 않으면서 다른 주소로 변경하는 방법을 알아봅니다.# 자바스크립트 현재 페이지 주소창 url 변경하기현재의 주소창의 url을 다른 것으로 변경하고자 합니다. 이때 페이지는 그대로 유지하고 싶다면 어떻게 할까요? 이 때 사용 가능한 방법이 바로 <span data-custom

View : 61 / Created : 2020-09-10

js 자바스크립트 배열값 0으로 초기화 방법 자바스크립트를 사용하여 배열값을 0으로 모두 초기화하는 방법을 알아봅니다.# 자바스크립트 배열값 모두 0으로 초기화하는 방법배열은 수 많은 값들을 시퀀스로 이루어져 있습니다. 만약 배열의 값들이 아래와 같이 모두 임의의 값이라고 가정합니다.let nums = [1, 3,

View : 58 / Created : 2020-09-09

js 자바스크립트 객체 프로퍼티의 이름 변경, 바꾸는 방법 자바스크립트의 객체의 프로퍼티 이름을 변경하는 방법을 알아봅니다.! 객체 내부의 프로퍼티 이름 변경하기, change property name가장 간단한 방법은 새롭게 만들고 기존 값을 삭제하는 방법입니다. 순서는 아래와 같습니다.<ul class="po

View : 57 / Created : 2020-09-08

react react onClick 파라미터 값 전달하는 방법 React에서 onClick property를 사용하여 클릭 이벤트 발생시 파라미터를 전달하는 방법에 대하여 알아봅니다.# React onClick 파라미터 전달하기, pass parametersonClick은 리액트 앱에서 클릭 이벤트가 발생 할

View : 85 / Created : 2020-09-02

webdevetc nextjs custom 404 페이지 만들기 React 프레임워크 nextjs에서 커스텀 404(custom 404) 페이지를 만드는 방법을 알아봅니다.! Custom 404 페이지란?없는 페이지를 주소창에 입력할 경우 '404 not fo

View : 76 / Created : 2020-08-31

react [React] setState 비동기식 async 사용하는 방법 React의 state 상태 관리를 변경하기 위해서 setState를 사용할 수 있습니다. 이때 비동기, async로 setState를 호출하려면 어떻게 해야 하는지 알아봅니다.# 비동기로 setState() 호출하기, async먼저 비동기 setState()<

View : 66 / Created : 2020-08-28

react nextjs 페이지 이동하는 방법 및 예제, router React 프레임워크 nextjs에서 페이지 이동하는 다양한 방법과 예제를 알아봅니다.# nextjs 페이지 이동하는 방법nextjs에는 SSR(Server Side Rendering)을 목적으로 많이 사용되므로 링크 이동시 두 가지 방법이 사용됩니다.state 변경의 비동기 이동 방식</l

View : 82 / Created : 2020-08-28

linux [Linux] pam_tally2 로그인 횟수 계정 잠금 설정 리눅스(linux) 서버에 외부로 부터 접속을 반복해서 수행하는 누군가가 있다고 생각해봅니다. 로그인 시도가 계속해서 틀리는 경우 만약에 해커라면? 이런 경우를 대비하여 어떻게 해야 할까요?# 리눅스 최대 로그인 횟수 설정하기, pam_tally2무한정으로 로그인 시도를 할 수 있다면? 언젠가는 보안이 풀릴

View : 92 / Created : 2020-08-27

react [React] 리액트 요소 검증하기, isValidElement React 앱에서 제공하는 API 중 리액트 요소를 검증하는 isValidElement() API에 대하여 알아봅니다.! React API isValidElement()리액트 엘리먼트를 검증하고 확인하기 위해서 다음의 API를 사용할 수 있습니다.React.isValidElement(targe

View : 69 / Created : 2020-08-26

react React antd 라이브러리 Datepicker 컴포넌트 React UI 라이브러리 antd에서 날짜 및 시간을 입력할 수 있는 컴포넌트 <DatePicker />에 대하여 알아봅니다.<DatePicker /><DatePicker />는 방문자로부터 날짜와 시간을 입력 받을 수 있는 antd의 컴포넌트입니다. 날짜를 입력 받을 경우 텍스트로 입력 받을 수도 있지만 사용자 입장에서는

View : 71 / Created : 2020-08-25

seo [SEO] 검색엔진 최적화를 위한 head 영역 meta 태그 설정하기 검색엔진 최적화 중 가장 중요한 부분은 무엇일까요? 생각해보면 여러가지가 있습니다. 그 중에서 가장 먼저 떠오르는 것은 사이트맵(Sitemap) 그리고 메타 태그 정보(Meta)입니다.# SEO를 위한 메타 태그

View : 90 / Created : 2020-08-25

python [Python] 임의의 숫자 만들기, random Python에서 임의의 수(난수), random number를 얻으려고 합니다. 어떻게 하면 될까요? 아래에서 자세히 알아봅니다.# Python 임의의 수 생성하기, random파이썬에서 임의의 수를 생성하기 위해 random 모듈을 사용할 수 있습니다.<span data-custom-style="ct

View : 65 / Created : 2020-08-24

webdevetc 개발자에게 맥북, Mac 장비가 필요할까? 요즘 많은 회사들 ... 특히 스타트업, 신생 기업일 수록 개발 장비로 맥북 지급을 크게 내세우는 경우가 많습니다. 그렇다면 개발자에게 Mac이 반드시 필요한 걸까요? 맥을 사용해야만 생산성이 늘어날까요?물론 장비의 선택은 매우 중요하고 생산성에도 큰 영향을 줄 수 있습니다. 다만 Mac이 아닌 다른 것도 될 수 있으므로...!

View : 139 / Created : 2020-08-24

webdevetc 윈도우 파일 탐색기 파일 확장자 보기 윈도우의 파일 탐색기에서 파일의 확장자를 보는 방법을 알아보겠습니다.# 윈도우 파일 탐색기에서 파일 확장자 보여주기윈도우즈의 파일 탐색기를 열면 저장된 파일과 경로가 나타납니다. 이때 파일의 경우 확장자를 제외 한 파일명만 보일 수 있습니다. 자주 사용되는 파일 확장자의 경우 아이콘으로 나타나기도 하지만 그 외의 경우에는 파일의 확장자를 확인하기가 어

View : 111 / Created : 2020-08-24

webdevetc apt 설치된 패키지 모듈 확인하거나 찾기 apt 또는 apt-get을 사용하여 설치된 패키지를 확인하는 방법을 알아봅니다. 예를들어 현재 mongodb가 설치되었는지 어떻게 알 수 있을까요?# apt 설치된 패키지 리스트 알아내기만약 어떤 패키지가 apt을 통해 설치되었는지 확인하려면 아래의 명령어를 사용할 수 있습니다.apt list --installaed이 명

View : 79 / Created : 2020-08-23

webdevetc 브라우저 에러 net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK) 해결하기 브라우저에서 아래와 같은 에러가 발생할 수 있습니다. 아래 에러는 크롬 브라우저의 콘솔에 출력되는 에러 메시지입니다.net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)위와 같은 문제의 원인은 무엇이고 언제 그리고 어떻게 해결하였는지 알아보겠습니다.# 언제 CONTENT_LENGTH_MISMATCH 200 에러가 발생?서

View : 140 / Created : 2020-08-23

python [Python] MongoDB 커서를 파이썬 리스트로 바꾸는 방법 Python 앱에서 MongoDB를 사용하는 경우 불러온 커서 객체를 리스트 타입(배열)으로 변경하는 방법을 알아봅니다.! MongoDB 커서 리스트로 바꾸기먼저 리스트 타입으로 변경하는 이유는 무엇일까요? MongoDB의 레코드를 find() 등을 사용하여 여러 개로 불러오면 커서 객체가 반환됩니다. 그런데 이 값을 파이썬에서 변경하거나 json 등의 형태로 반환하기 위해서 리스트로 타입 변경을 하게 됩니다.<

View : 84 / Created : 2020-08-22

linux 리눅스 ssh 포트 변경하기 리눅스(Linux)의 ssh 접속시 포트를 변경하는 방법을 알아봅니다.! 포트를 변경하는 이유는?사용하기 편리함의 목적보다도 보안상의 이유가 크다고 할 수 있습니다. 즉 외부에서 ssh로 서버에 접속 가능한 계정 정보가 혹시 노출되더라도 <span data

View : 127 / Created : 2020-08-21

react [React] antd 라이브러리 Button 컴포넌트 알아보기 최근 react에 사용하는 antd UI 라이브러리 업데이트를 계속해서 포스트중입니다. 오늘 내용은 antd의 Button 컴포넌트에 대하여 알아봅니다.# antd Button 컴포넌트react 앱에서 버튼의 기능과 화면 구현을 목적으로 antd의 <span data-custom-style="ct

View : 105 / Created : 2020-08-21

CATEGORIES

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