분류 전체보기

Ettopia의 주요 기능 - AJAX

1. Why AJAX? Ettopia에서 AJAX를 사용하기로 결정한 이유는 '새로고침을 사용하지 않는 기능'을 구현하기 위해서였다. 대표적으로는 코멘트 기능과 like 기능이 있었는데, 이러한 기능들은 새로고침이 있을 경우 사용자에게 굉장한 불편함을 초래할 수 있다. 따라서 새로운 URL로 routing하던 기존의 방식은 '사용자의 편의성 증대'를 목표로 삼고 있는 Ettopia에 적합하지 않았기 때문에, 비동기 방식으로 데이터를 업로드하고 불러오는 AJAX가 필요했다. 2. About AJAX 먼저 AJAX란 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것으로, 페이지를 리로딩하지 않고도 일부 페이지의 데이터를 업데이트할 수 있는 '비동기 방식'을 가진 자바스크립트와 XML이다. ..

Ettopia의 주요 기능 - 지도 API

대부분의 개발자들이 거대한 데이터베이스나 기술 체계를 구축하기란 어려운 일이다. 카카오, 네이버, 구글 등의 회사들에서는 이런 개발자들을 위해 자신의 데이터베이스를 비롯한 다양한 기술들을 빌려쓸 수 있는 API를 제공하고 있다. 사용 횟수 또는 플랫폼 등에 따라 유료, 무료가 나뉘어지기도 하는데 본 펜타애플 팀은 비용, 사용 편의성, 접근성 등을 감안하여 카카오 API 를 선택하였다. 참고로 카카오 API 는 카카오 계정 로그인, 검색 엔진 등 다양한 서비스를 제공하고 있는데, 우리는 그 중에서도 지도 API를 중점적으로 사용하였다. API란? API는 개발자가 소프트웨어 상의 여러 가지 처리를 할 수 있도록 그 사이에서 도와주는 일종의 프로그램 인터페이스다. 예를 들어, 우리가 C언어로 printf("..

Ettopia 개발 과정 - 설계

모든 프로젝트의 시작은 프로젝트 설계로 시작한다. 클라이언트의 요구사항에 맞추어 어떠한 방식으로 프로그램을 만들 지 설계하고 해당 설계에 대한 실현 가능성과 경제성, 타사 프로그램과의 경쟁력 등을 꼼꼼하게 비교한 후, 최종 결정된 설계에 따라 유의사항과 어떠한 방식으로 기능적인 부분을 구현할 지 간단하게 다이어그램으로 확인하며 개발에 사용할 소프트웨어를 결정하고 나면 드디어 프로그램 개발을 위한 전체적인 설계 과정이 완료된다. 실제 코드 구현에 들어가기 전까지 계속해서 점검하는 설계 과정은 본격적인 코드 작성 과정에서의 길을 알려주는 척도와 다름 없기 때문에 중요하다고 할 수 있다. 이번 개발을 진행하며 펜타애플 팀 내에서 작성했던 여러 설계 산출물을 순서대로 설명하며 프로젝트 설계의 전반적인 과정을 자..

구름IDE를 통해 Flask 개발 환경을 구축해보자!

Ettopia 서비스 프론트엔드 단계까지의 개발은 Visual Studio Code와 Github을 이용하며 진행되었다. 백엔드 단계의 개발이 시작되면서, 웹 서버 구동이 필요했고 이를 위해 구름 IDE 개발 환경을 구축하게 되었다. 우리 펜타애플 팀은 공용으로 사용할 구글 계정 하나를 새롭게 만들어 함께 사용하였다. 📌구름 IDE 란? 구름IDE는 Python, JavaScript, C, C++ 등 다양한 언어를 지원하고 네트워크만 연결되어 있다면 자신에게 필요한 설정을 통해 손쉬운 개발 환경을 제공한다. 또한 오픈 소스 프로젝트 진행을 위해 강력한 협업 환경을 제공한다. 구글, 페이스북, 카카오톡, 네이버, GitHub, Bitbucket, 페이코 계정 등의 소셜계정을 이용하거나 이메일 주소를 이용해..

프론트엔드 관련 팁 & 디버깅

1. TIP: Flexbox의 이해-반응형 웹페이지 만들기 웹 페이지의 레이아웃을 구현할 때는 일반적으로 display, float, position과 같은 CSS의 속성을 활용한다. 그런데 이러한 방식은 구현하기 어렵고 반응형 웹페이지를 만드는 데 한계가 있다. flexbox는 이러한 한계를 극복하기 위해 만들어진 display 방식으로, 해당 속성을 활용하면 뷰포트가 동적으로 변할 때도 유연하게 레이아웃을 구성할 수 있다. 📌참고: float를 사용한 레이아웃 float는 텍스트와 이미지들을 배치하기 위해서 사용된다. 아래 그림은 각각 float: left, float: center, float: right를 나타낸 것이다. display: flex를 활용하면 위의 레이아웃을 쉽게 짤 수 있을 뿐만 ..

웹 프레임워크_'Flask'란?

📌 웹 프레임워크(Web Framework)란? Web(웹 서비스를 만들기 위해) + Frame(틀 속에서) + Work(작업) 프레임워크(Framework)는 구조화된 스크립트를 통해 개발자의 스크립트 패턴을 정형화 할 수 있도록 개발 표준이 정의되어 있는 환경을 뜻한다. 반복되는 공통부분 코드를 최소화 할 수 있도록 설계되었기에 개발자들은 원활한 작업과 협업이 가능해진다. 웹 프레임워크(Web Framework)는 간단히 말해 개발자가 웹 서비스를 구축하는데 사용하는 틀, 환경이다. 대표적인 예시로 CLI 기반의 ASP.NET, PHP 기반의 라라벨(Laravel), JAVA 기반의 스프링(Spring), Javascript 기반의 Node.js, Python 기반의 Django, Ruby 기반의 R..