LATEST POSTs 가장 최근에 등록된 포스팅 목록입니다.

• 
  webdevetc블로그 또는 웹사이트 글을 Facebook에 올리기 웹사이트 또는 블로그를 운영하는 경우 방문자 유입률을 올리는 많은 방법들이 존재합니다. 그 중에서 다양한 유입 채널을 만드는 것도 매우 중요하죠!페이스북 페이지를 만들자!페이스북 페이지를 키우기 위한 목적도 있겠지만 콘텐츠를 올릴때 <span data-custom-style=

  View : 2730 / Created : 2017-11-20
• webdevetcAWS Lambda를 사용한 외부 url 요청, request 예제보기 AWS를 사용하는 경우 Lambda를 사용하여 여러가지 다양한 함수를 실행할 수 있습니다. 오늘은 Lambda 함수를 사용하여 외부 url을 invoking, request 요청을 수행해보려합니다. # AWS Lambda를 사용한 외부 url request,

  View : 2844 / Created : 2017-11-18
• 
  webdevetcRedis를 사용한 View count, 방문자 수 관리하는 효과적인 방법은? Python에 redis cache를 적용하면서 view count... 방문자가 올때 카운트 값을 1을 늘리기위해 데이터베이스를 업데이트하는 일이 너무 비효율적으로 보였다. 뭔가 방법이 없을까?만약 방문자의 일일 페이지뷰가 100만명이라면 최소 100만번의 데이터베이스 콜과 업데이트가 이루어지게된다... 아무리 적은 데이터라도 데이터베이스에 이렇게 많은 콜 request는 매우 비효율적일 것이다. 좋은 방법이 없을까 고민하면서 캐쉬서버 redis를

  View : 2304 / Created : 2017-11-13
• 
  webdevetcubuntu에 redis-cli 설치하려면? redis-cli는 redis를 우분투 쉘에서 직접 컨트롤 할 수 있는 Command Line Interface로 많이 사용됩니다. 만약 redis는 이미 설치되었으나 redis-cli가 없는 경우 이를 사용하려면 어떻게 할까요?제 경우 python flask에서 사용되는 <span data-custom-style="

  View : 3219 / Created : 2017-11-07
• webdevetc코드의 변수나 함수 등에 _ 언더바를 사용하는 이유는? 개발 언어의 클래스 및 함수를 보면 _ 언더바를 사용한 코드를 쉽게 볼 서 있습니다. 왜 이렇게 이름 앞에 _ 기호를 추가할까요? 그 이유 및 목적에 대하여 간단히 알아봅니다.가장 큰 목적은 스코프 구분에 따른 표시입니다. 개발언어는 해당 콘텍스트에 선언하여 사용되는 고유의 스코프영역(scope)을 가지고 있습니다.

  View : 5534 / Created : 2017-11-06
• webdevetcSafari Mobile에서 클릭을 두 번 해야만 동작하는 문제 모바일 웹페이지를 퍼블리싱하다가 이슈가 발생하였습니다. 이슈 내용은 다른 브라우저의 경우 클릭이 잘되는데 유독 아이폰의 모바일 사파리에서는 처음 클릭이 동작하지 않는 점입니다...결국 해결은 하였는데 문제의 원인 및 해결방법에 대하여 적어봅니다. 앞으로는 아이폰 사용자를 위해서 모바일 페이지 구현시 유의해야겠습니다.# 아이폰 사파리(safari) 브라우저&nb

  View : 4654 / Created : 2017-11-02
• webdevetcapmsetup 설치 및 사용방법 알아보기 누구나 php를 다뤄보셨다면 apmsetup을 한번쯤은 들어보셨을거라 생각합니다. 아직도 많이 사용되는 웹어플리케이션 구동 방법 중 하나로 설치만으로 서버 및 데이터베이스 환경이 구축되죠. apm은 각각 apache, php, mysql입니다.현재 과거에 사용되던 apmsetup에 접속하면 다른 페이지로 url이 넘

  View : 3590 / Created : 2017-11-02
• webdevetclinux 설치된 node uninstall 삭제하는 방법 설치된 node에 문제가 생긴 경우 지우고 다시 인스톨해야합니다. 윈도우에 사용하기 위해 node를 apt-get으로 설치했는데 어떤 문제인지 동작하지 않아 재설치가 필요하였습니다.(node의 정상 동작 여부는 쉽게 버전 확인으로 가능합니다. node -v)# linux에서 설치된 node 제거하기만약 apt-get

  View : 1940 / Created : 2017-10-30
• 
  webdevetcnodejs로 간단한 웹서버 구축하는 방법 및 예제보기 만약 웹서버(Web Server)를 쉽고 빠르게 구축할 필요가 있는 경우 어떤 방법이 있을까요? 많이 사용되는 Nodejs 웹서버 구축 방법에 대하여 알아봅니다.제 경우는 급하데 프로젝트를 진행해야해서 퍼블리싱이 필요했습

  View : 11221 / Created : 2017-10-30
• 
  webdevetcHTML 자바스크립트로 로딩중 메시지 만들기 방문자가 사이트에 접속해서 뭔가를 누르거나 액션을 취합니다. 이때 페이지가 현재 로딩중이라는 메시지를 보여주려면 어떻게 할까요? 페이지를 비동기식, ajax로 호출하는 경우 방문자에게 현재 페이지가 로딩중이라는 메시지를 정확히 보여주는 것이 좋을 것입니다. 아래는 이를 구현하는 스크립트를 만들어 실행해보는 예제입니다.

  View : 9125 / Created : 2017-10-17
• webdevetcLESS에서 ::after 및 ::before 그리고 :hover 사용하는 방법 LESS에서 pre-processor는 요즘 많이 사용됩니다. CSS를 사용하는데 매우 편리한 기능들을 제공하며 뛰어난 언어처럼 다양한 기능을 제공하죠.아래는 LESS 사용시 가상클래스(pseudo-class) 선택자인 ::before, ::after, ::hover 등을 적용하는 방법에 대하여 알아봅니다. LESS에서 가상선택자 클래스를 적용할 경우 어떻게 할까요?<br

  View : 1447 / Created : 2017-08-21
• webdevetcPuTTY ssh, telnet 접속하는 방법 ip주소나 사이트 주소로 접속하는 방법 중 SSH를 사용하여 특정 사이트(또는 Machine)에 접근할 수 있습니다. 이때 많이 사용하는 방법으로 PuTTY가 사용됩니다. 아래에서는 Putty의 설치 및 사용방법에 대하여 알아봅니다.# PuTTY란 무엇인가?PuTTY를 간략하게 알아봅니

  View : 2247 / Created : 2017-08-03
• webdevetc프론트엔드 개발자로 일하는 것은 어렵다? 요즘 프론트엔드 개발자에 대한 시장의 니즈가 높아보입니다. 여기저기 프론트엔드 개발자를 충원하기 때문입니다. 이에 따라 프론트엔드 직무에 대한 이런저런 얘기들이 많은데 일부는 맞으나 아닌 부분도 있어보입니다. 얘기들을 모아보면 어려움을 겪는 현실적인 내용이 많군요... 이를 대략 요약하면 다음과 같습니다.! 프론트엔드 분야가 어려운 이유실력있는 개발자를 상사로 만나기 어렵다알아야하는 것이 너무 많다<l

  View : 1831 / Created : 2017-07-07
• webdevetc모듈과 컴포넌트의 이해 모듈과 컴포넌트는 매우 중요한 개념이며 최근의 개발 디자인 패턴을 따르기 위해 반드시 이해해야만 합니다. 이 둘은 매우 비슷하지만 같지 않기 때문에 잘못 이해할 경우 혼동을 줄 수 있습니다.모듈과 컴포넌트의 공통적인 부분은 어떤 서비스의 공통화를 하기 위한 목적을 가지며 하나의 단위로 구분될 수 있습니다. 여기서 모듈은 개별 단위가 동작할 수 있는 기본 단위가 될 수 있다는 점이라면 컴포넌트의 경우 하나의 기능 역시 컴포넌트 단위로 나뉠 수 있습니다. 이런 이유로 모듈과 컴포넌트는 1:1 이 될 수도 있지만 1

  View : 1912 / Created : 2017-07-05
• webdevetcnginx 웹서버 config 설정시 conflicting server name 에러 발생하는 경우 nginx를 사용하기 위하여 웹서버를 설치한 이후 config를 설정해야합니다. 이때 설정 후 에러가 나타나는 경우 설정 파일의 오류 여부를 먼저 확인하는 것이 중요합니다. 그래서 nginx 테스트를 수행하도록 합니다.! nginx 테스트 방법아래는 nginx 테스트 방법입니다. 현재 에러가 나타나고 있으므로 테스트 수행해도 당연히  conflicting server name 에 따른 에러가 발생할 수 있습니다.<div clas

  View : 2010 / Created : 2017-07-04
• 
  webdevetclinux 환경에서 nginx 웹서버 설치 및 실행하기 리눅스 환경에서 nginx를 사용하여 웹서버를 구축하는 방법에 대하여 알아봅니다. nginx는 잘 알려진 apache와 같이 서버를 구동하는데 많이 사용되는 웹엔진입니다. 일단 자신의 개발 환경에 nginx를 설치합니다. 그리고 맨 아래에는 미들웨어로 사용된 uwsgi에 대하여도 설정 및

  View : 13840 / Created : 2017-07-04
• webdevetcAmazon Linux yum에 git 설치하는 방법 아마존 리눅스(Amazon Linux)를 사용하는 경우 apt-get, apt과는 달리 yum을 사용하여 패키지를 관리하고 설치할 수 있습니다.아래는 yum을 사용하여 amazon linux 환경에 git을 설치하는 방법입니다. yum을 사용하여 설치하는 것 외에는 모두 동일합니다.sudo yum install git위 커맨드를 수행하면 Y / N 가 나옵니다. yes를 누르면 인스톨이 수행됩니다.<div data-cke-hidden-sel="1"

  View : 4675 / Created : 2017-06-22
• webdevetcAWS Amazon 리눅스에 python Tornado 설치하기 및 에러 해결 AWS의 Amazon 리눅스 환경에는 Python 및 pip가 설치되어 있습니다. 이때 Tornado를 설치하기 위하여 아래와 같이 pip를 python package를 사용할 수 있죠.pip install tornado-aws이 경우 에러가 발생한다면 $PATH 경로에 대한 환경변수의 오류일 수 있습니다. 이를 수정하기 위하여 아래와 같이 입력하여 수행합니다.sudo env "PATH=$PATH" pip instal

  View : 1178 / Created : 2017-06-21
• webdevetcAWS 인스턴스에 MongoDB 인스톨하는 방법 만약 AWS 환경에 아마존 리눅스를 사용하는 경우 MongoDB를 인스톨하는 경우 아래와 같이 수행합니다.먼저 Amazon Linux의 경우 기본적인 프로그램들이 미리 설치되어 있을 것입니다. 여기에 yum을 사용하여 MongoDB를 설치합니다. 먼저 리눅스 환경에 repository 설정을 완료하여야합니다./etc/yum.repos.d/mongod

  View : 1732 / Created : 2017-06-21
• webdevetcAWS에서 sudo apt-get 동작 안하는 경우 해결방법 만약 AWS에서 인스턴스 생성 후 apt-get 커맨드를 입력시 찾을 수 없다는 에러가 발생할 수 있습니다. 이때 원인 및해결할 수 있는 방법은 무엇일까요?! 아래처럼 에러가 나타나는 경우(Not found)sudo: apt-get: command not found여기서 설치된 Linux OS에 따른 문제가 원인일 수 있습니다. 이 경우 패키지 설치시 사

  View : 8170 / Created : 2017-06-21
• webdevetc아마존 웹서버 AWS에서 instance 생성시 key pair 사용을 하지 않으면 어떻게되나요? 아마존 웹서버 AWS에서 instance 생성시 key pair 사용을 하지 않으면 어떻게될까요?AWS에서 instance를 생성할 때 키를 사용할 수 있도록 설정할 수 있습니다. 일반적으로 키를 사용할 경우 보안상 더 안전하기 때문에 key pair를 추가 인증 도구로 사용합니다.하지만 키가 없다 하더라도 접속은 가능합니다. 대신에 인스턴스에 대한 접속 인증처리가 Key base가 아닌 패스워드로 설정됩니다. 그래서 ssh 접속시 key가 아닌 패스워드를 사용하여 접속이 가능합니다.

  View : 844 / Created : 2017-06-21
• webdevetc프로젝트 아키텍트의 역할은? 소프트웨어 분야에서 아키텍트의 역할은 날로 커지는 것 같습니다. 아래는 아키텍트(Architect)가 어떤 역할을 수행하고 어떤 자질이 필요한지 알아봅니다.# 아키텍트아키텍트는 아키텍처의 운영을 하는 사람으로 이를 이해하고 나아갈 목적과 방향에 맞는 가장 적합한 아키텍처를 선택 및 운영하느냐가 필요합니다. 

  View : 559 / Created : 2017-06-21
• webdevetc윈도우즈 10에 설치된 bash shell의 디렉토리에 접근하는 방법은? 윈도우즈 10(Windows 10)에 리눅스(Bash shell)를 설치한 경우 설치된 리눅스의 경로, 이곳의 디렉토리를 찾는 방법(접근하는 방법)을 알아보겠습니다. 어디에서 해당 파일을 찾을 수 있을까요?윈도우즈에 설치된 리눅스 bash shell의 경로, 루트는 아래에서 확인 가능합니다.# 윈도우즈 10에 설치된 ubuntu 리눅스의 경로 찾기c드라이브의 Us

  View : 12521 / Created : 2017-06-09
• webdevetc부트스트랩 모달창 세로정렬 방법 부트스트랩(Bootstrap)을 사용하여 모달창을 만드는 경우 세로정렬하는 방법에 대하여 알아봅니다. 부트스트랩 창을 띄우면 위쪽 영역에 모달창이 나타납니다. 이를 세로방향의 가운데로 위치시키는 방법입니다.만약 모달창의 id 값이 myModal이라면 아래와 같이 css style을 설정합니다.<div id="#myModal" class="modal fade">  Vertical align for bootstrap modal.</di

  View : 2614 / Created : 2017-06-07
• webdevetcGulp는 무엇이고 왜 사용하는지 알아보기 웹서버 운영, 설치에 사용되는 빌드툴 걸프(Gulp)는 무엇이고 왜 사용하는지 알아보려고 합니다. # Gulp란? 자바스크립트에서 반복적이고 자주 사용되는 일은 자동화해주는 매우 유용한 툴로 빌드시스템이라고 불리기도 합니다. 이를 사용하면 시간을 줄일 수 있고 생산성 향상에 큰

  View : 4606 / Created : 2017-05-29
• webdevetcPostman을 사용한 서버 API 통신방법 알아보기 API를 사용한 웹개발에서 반복되는 API 테스트를 수행하는 것이 여간 어려운 점이 아닙니다. 아래는 API 테스트에 많이 사용되는 POSTMAN(포스트맨)에 대하여 알아보려고 합니다. 아마 많은 분들이 postman을 사용해봤거나 사용하고 있을 것입니다.<img data-cke-saved-src="/static/uploads/2017/55ac_8e8a8939.jpg" src="/static/up

  View : 4012 / Created : 2017-05-26
• 
  webdevetc홈페이지에 필요한 적절한 favicon 사이즈는? 홈페이지를 구축할때 favicon 정보를 입력하게 됩니다. 먼저 favicon은 무엇일까요? 아래에서 알아보세요.! favicon이란favicon은 어플리케이션의 대표 아이콘인 이미지를 의미하며 브라우저나 디바이스에서 해당 어플리케이션을 표시하는데 사용됩니다. 아이콘 목적

  View : 10403 / Created : 2017-05-23
• webdevetcAWS 누구나 쉽게 만들고 사용하기 아마존 웹서비스 AWS를 처음 사용하는 분들에게 도움이 되었으면합니다. 아래는 AWS를 처음 만들고 실행하는 분들을 위해 만들었습니다.먼저 AWS를 생각하신다면 좀 더 효과적인 웹호스팅의 필요를 느끼신 분들이 많을거라 생각합니다. 저 역시 국내 대부분의 웹호스팅을 거쳐 해외 호스팅을 사용하다가 뭔가 더 필요한 부분들을 채울 수 있을꺼란 기대감으로 AWS를 시작하였습니다. 대부분의 대형 웹서비스에서 아마존 웹서비스인 AWS를 생각했기 때문입니다.<h4

  View : 940 / Created : 2017-05-20
• webdevetc아마존 웹서버 AWS 가격 정책 알아보기 아마존 웹서버 AWS 가격 정책에 대한 정보입니다.아마존 웹서비스인 AWS는 사용한 만큼 비용이 발생하는 방식의 요금제입니다. 사용된 Gbyte, 기가 바이트에 요금이 책정되거나 사용 시간당 요금이 과금됩니다. 이런 요금 방식은 불필요한 리소스를 최대한 줄일 수 있어 매월 일정한 트래픽이 발생하는 기업에게 가장 효과적입니다. 그럼 아래는 가장 많이 사용되는 EC2 그리고 S3의 가격 정보입니다.<

  View : 1322 / Created : 2017-05-18
• webdevetc[실전] 검색창 UI 만들기 웹퍼블리싱 배우기. 이번에는 키워드를 찾아 검색할 수 있는 기능을 웹에 추가하기 위하여 검색창을 만드는 방법을 알아보겠습니다.# 검색창은 무엇이고 언제 사용되나요검색창은 방문자에게 원하는 웹사이트의 콘텐츠를 좀 더 찾기 쉽도록 도와주는 역할을 합니다. 예를 들어 css에 관련된 블로그 글을 찾는 경우 간단하게 검색창에 css를 타이핑하여 검색결과

  View : 14294 / Created : 2017-05-18