1. NAVER CLOUD PLATFORM로부터 어플리케이션 등록 오른쪽 상단에 보시면 로그인이 있습니다. (저는 로그인한 상태라 로그아웃으로 보입니다) 여기서 네이버 클라우드 플랫폼 전용 아이디를 회원가입 해줍니다. 계정이 없으면 로그인 한 뒤, NCP콘솔로 이동합니다. NCP콘솔에서 아래 사진에 있는 AI-NAVER API -> Application 탭을 눌러줍니다. 아래 사진에 보이는 파란색 어플리케이션 등록 버튼을 눌러줍니다. 버튼을 누르고 들어간 뒤, 아래 3가지 항목을 입력 및 선택해주면 됩니다. 사용할 어플리케이션 이름 원하는 이름으로 지어주면 됩니다! 사용할 서비스 선택 여러가지 선택항목들이 있을텐데 우리는 2개만 선택하면 됩니다! Web Dynamic Map: 지도서비스를 만들기 위해 기본 네이버 지도형태 import Geocoding: 백엔드에서 실제 주소를 기반으로 위, 경도 뽑아내기 서비스 환경 등록 만들고자하는 어플리케이션이 사용될 웹 URL을 …

개요 최근에 웹 구현관련 코딩테스트 문제에서 시맨틱태그를 다루는 걸 접했는데, 생각보다 의미론적이나, 사용형태에서 몰랐던 부분이 여럿 있었습니다. 또한 여러 회사의 프론트엔드 채용공고에서도 시맨틱태그 관련 사항들을 왕왕 접하게 되어 시맨틱태그를 디테일하게 사용해보면 어떨까해서 포스팅하게 되었습니다. 시맨틱 태그란? 시맨틱 태그란 말그대로 의미의(semantic) 태그(tag)입니다. 즉, div, span처럼 여타 다른 태그들과 달리 태그만 보고도 이게 뭐에 쓰인 태그인지 알 수 있는 태그를 말합니다. 흔히 볼 수 있는 시맨틱 태그 레이아웃 이미지 왜 써야할까? 시맨틱 태그를 왜 써야할까요? 일반적으로 HTML태그로 레이아웃을 잡을 때, div태그로 나누면서 해도 코드레벨에서 전혀 문제가 되지 않습니다. 또한 div태그로 작성하면 내리 블록형태로 코드를 작성해나가면서, 레이아웃 형태에 큰 고민없이도 뷰를 보일 수 있죠. 하지만 시맨틱 태그를 사용하면 크게 2가지 이점이 있습니…

1. 크롤링 시나리오 크롬 브라우저를 열어 네이버 지도 으로 이동한다. 장소 검색에 “연세대학교 맛집”을 검색한다. 검색된 매장리스트에서 매장별 정보(ex. 매장명, 주소 등)를 추출하여 csv파일에 저장한다. 현재 페이지에 있는 매장별 정보를 전부 얻었다면 다음페이지로 이동한다. 다음 페이지가 존재하지 않으면 크롤링을 종료하며, 브라우저를 닫는다. 2. 프로젝트 구조 list.csv: 크롤링된 매장정보를 저장할 파일 naver_crawl.py: 크롤링에 필요한 모듈들을 정의한 파일 app.py: 앱의 시작점 requirements.txt: 프로젝트에 사용되는 라이브러리를 한 곳에 작성해둔 파일 3. 함수 기능 설명 에 크롤링에 필요한 여러 모듈들이 정의되어 있습니다. 해당 파일에는 크롤링에 이용되는 여러 함수들이 선언되어 있으며 하나하나 뜯어봅시다. get_driver (크롬브라우저 실행) 장소 검색 함수(search_place) 페이지 이동 및 마지막 페이지 체크 함수(nex…

안녕하세요:) 이번 포스팅에서는 파이썬 라이브러리인 플라스크에서 동작하는 네이버 지도 크롤링 서버 환경을 구축해보려고 합니다. 또한 지난 소개(1탄) 포스팅에서 말씀드린 것처럼, 크롤링 진행시 고려해보면 좋은 덕목과 크롤러 시점에서 본 네이버 지도의 특징을 소개해보려고 합니다. 1. 크롤링 서버환경 구축 (이 포스팅 시리즈는 mac os를 기준으로 작성되었습니다.) 먼저, 파이썬이 설치되어 있지 않으면 파이썬을 설치해줍니다. (침고 링크: https://programmers.co.kr/learn/courses/2/lessons/48) 파이썬 버전확인(3.4이상 필요) 파이썬 가상환경 구축 해당 프로젝트에서만 귀속되게 라이브러리를 설치하기 위해 venv가상환경을 구축해 줍니다. 필요한 라이브러리 설치 크롤링에 필요한 라이브러리 목록입니다. 현재는 필요한 라이브러리가 몇가지 없어 직접 pip install명령어를 통해 설치를 진행하지만 db연결, 스케줄러 설정 등이 추가된다면 설치해…

배경 네이버 지도를 기반으로 지도 서비스를 개발 하시려는 분들께 도움을 드리고자 글을 써보려고합니다! 현재 구글에 지도 서비스 만들기 로 검색 했을 때, 카카오 지도 크롤링 관련해서는 어느정도 검색결과가 나오는 편이지만, 네이버 지도는 검색결과가 적어 정보를 얻기 힘듭니다. 또한 리액트에서 네이버 지도 연동과정에서 주로 다뤄지는 react-naver-maps는 간단한 기능으로 구성되는 지도서비스를 만들기에는 나쁘지 않은 라이브러리일 수 있지만, 지도에 다양한 기능(커스텀 클러스터, 지도 이벤트 핸들링)이 있어야 할때는 javascript 기반 네이버 지도 API를 사용해야 합니다. 그래서 데이터 크롤링과 지도를 표시해줄 프론트 모두 네이버 지도를 기반으로 한 사이드 프로젝트를 진행하며 여러 회차에 걸쳐 포스팅해보려고합니다:) 1. 진행해볼 사이드 프로젝트 설명 연세대학교 신촌캠퍼스 맛집 지도 🗺 네이버 지도(v5)에 ‘연세대학교 신촌캠퍼스 맛집’을 검색하고 데이터를 추출하는 플라스…