들어가며 혹시 WordPress REST API를 활용하여 앱이나 웹사이트를 만들 계획이 있으신가요? 그렇다면 이번 아티클은 당신에게 큰 행운이 될 겁니다. 삽질하는 시간을 대폭(4시간 이상) 줄여줄 꿀팁이 들어있으니깐요. WordPress는 단순 블로그뿐만 아니라 쇼핑몰로도 활용이 가능합니다. 이렇게 점차 쓰임이 많아지면서 WordPress를 주축으로 서비스를 하는 경우가 많은데요. 예를 들어, 온라인 쇼핑몰을 WordPress로 사용하고 매출이 크게 늘어 모바일 플랫폼(안드로이드/ IOS)으로 확장을 할 수도 있겠죠. 이런 경우 WordPress를 백엔드로 REST API를 커스텀해가며 개발을 진행해야 합니다. 시작하자마자 문제가 될 가능성이 높은 부분이 바로 사용자 인증 부분이죠. 보통 모바일 플랫..

Postman을 활용하면 HTTP Request를 빠르고 효율적으로 보낼 수 있습니다. API 테스트에 최적화되어있다고 생각하시면 되는데요 HTTP Request를 보낼 때 Body에 어떤 정보를 담느냐에 따라 타입을 선택할 수 있습니다. Postman에서는 6가지를 지원하는데요. 각각 어떤 것이고, 언제 사용하는지 알아보도록 하겠습니다 None : 기본세팅이 None으로 되어있습니다. GET 요청을 보낼 때처럼 굳이 Body에 아무 값도 보낼 게 없을 때 사용합니다. form-data : Multipart Form을 의미합니다. ASCII 문자값과 함께 바이너리 데이터(예를 들면 이미지나 영상 파일)를 전송할 때 사용합니다. 쉽게 얘기해서, HTTP Request에 텍스트와 함께 파일을 첨부할 때 쓰입..

웹 개발을 시작하게 되면 가장 먼저 배우는 것이 바로 HTML입니다. HTML은 Hyper Text MarkUp Language로 우리가 아는 웹사이트 문서를 나타내는 방식이죠. 영어도 말을 하려면 최소한 기본 문장 구조는 알아야 합니다. 프로그래밍 언어도 "언어"이기 때문에 기본적인 구조를 이해해야 웹사이트던 페이지던 만들 수 있죠! 오늘은 웹 개발의 가장 기본이 되는 HTML 문서 구조에 대해서 알아보겠습니다. 각 부분에 대해서 좀 더 자세하게 설명을 드릴게요. 먼저 많은 분들이 간과하시는 Document Type부터 설명을 드릴게요. 은 웹문서가 어떤 버전의 HTML 언어로 작성되었는지 결정하는 기능입니다. 현재 HTML5까지 나와있는데요. 브라우저에서 이 선언을 통해 버전에 맞는 HTML기술로 웹..

반응형이란 무엇인가? 웹은 사용자가 편하게 드나들 수 있는 플랫폼입니다. 스마트폰에서도, Window에서도, Mac에서도, 태블릿에서도 별다른 설치나 설정없이 브라우저만 있으면 접근할 수 있기 때문입니다. 이러한 장점을 가지고 있는 웹이지만 웹 페이지 혹은 웹 사이트를 개발하는 개발자 입장에서는 매우 난감한 상황이 벌어질 수 있습니다. 바로 우리가 사용하는 모니터, 스마트폰, 태블릿등 기기들의 화면 크기가 모두 다르다는 사실 때문이죠. 상상이 되시나요? 그 모든 기기들의 크기에 따라 웹 페이지가 다르게 보여야한다면 대체 얼마나 많은 코드가 존재해야 할까요? 반응형(Responsive)라는 말은 이런 문제를 극복하고자 나오게 된 개념입니다. 즉, 기기의 너비(width)와 높이(height)에 따라 웹 페..

Ajax는 뭐죠? 웹 어플리케이션을 만들 때 번거로운 부분을 생각해보면 아마 서버와의 데이터 통신 부분이 손에 꼽힐겁니다. 보통 HTTP 통신으로 클라이언트(웹)가 서버에 요청을 보내면 서버에서는 클라이언트가 요청한 페이지 혹은 데이터를 보내주게 되죠. 그러면 HTTP 응답으로 온 HTML 문서 혹은 JSON 데이터등을 클라이언트에서 처리해서 사용자에게 보여주게 되는거죠. 자, 이때 매우 비효율적인 부분이 발생하는데요. 게시판을 예로 한번 들어보죠. 게시판에는 많은 글들이 있습니다. 흔히 페이징이라고 하는 기법으로 구현이 되어있죠. 위의 페이지 번호들을 생각하시면 이해가 빠르실 겁니다. 저 번호를 누를 때마다 알맞은 데이터들을 가져오는 방식이죠. 자 이때, 게시글을 제외한 나머지 영역들은 변하지 않습니다..

Javascript는 프로토 타입 기반입니다. 따라서 클래스가 존재하지 않습니다. 아, 물론 최근 표준인 ES6에서는 class가 추가되었죠. 하지만 이전에 프로토 타입을 이용한 클래스 만들기를 먼저 알아보겠습니다. 프로토타입이 무엇인가? 그리고 왜 쓰는 것인가? 이는 매우 길어질 수 있는 내용이라 다음번에 다루도록 하겠습니다. 오늘은 클래스가 아닌, 프로토 타입 기반으로 클래스 느낌 나도록(?) 한번 만들어 보죠. ajax HTTP 요청 클래스 구현하기 /* Ajax를 사용한 HTTP POST 요청을 보내는 클래스 * * 성공시 콜백함수 인자값 -> function(data, textStatus, response) 서버로부터 받은 데이터, HTTP 요청결과 - 성공했으면 success, HTTP 응답이..