지도 축소/확대 버튼 추가 index 페이지와 show 페이지에 있는 지도에 축소/확대 버튼을 추가해 보자. 아래 페이지를 참고했다. https://docs.mapbox.com/mapbox-gl-js/example/navigation/ Display zoom and rotation controls | Mapbox GL JS Add zoom and rotation controls to the map. docs.mapbox.com index와 show페이지에 연결된 각각의 js 파일에 아래 코드를 추가해주면 된다. map.addControl(new mapboxgl.NavigationControl()); Home 디자인 정말 못생긴 Home 페이지 입니다. 그럴싸하게 수정해 봅시다. html YelpCamp ..
난이도: Lv.2 문제: https://school.programmers.co.kr/learn/courses/30/lessons/42578 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 알고리즘 1. 각 의상 종류가 몇 개인지 해시맵에 저장한다. 2. 해시맵의 value들을 배열에 저장한다. 이때 배열의 길이가 의상 종류의 개수를 뜻하고, 각 원소는 해당하는 의상 종류인 옷을 몇 개 가지고 있는지를 뜻한다. 3. 비트 플래그를 사용한다. 예시를 들자면 2.의 결과로 [2, 1, 3]이라는 결과가 나왔다고 해보자. 모자가 2개, 상의가 1개, 하의가 3개인..
클러스터 맵 추가 모든 캠핑장을 보여주는 index 페이지에 클러스터 맵을 추가 해보자. mapbox를 사용한다. https://docs.mapbox.com/mapbox-gl-js/example/cluster/ Create and style clusters | Mapbox GL JS Use Mapbox GL JS' built-in functions to visualize points as clusters. docs.mapbox.com 위 링크로 들어가서 필요한 코드를 붙여넣는다. 이 코드는 이미 boilerplate에 포함되어있다. clusterMap.js라는 파일을 새로 만들어서 스크립트 부분을 붙여 넣는다. 참고로 나는 맵 스타일을 light-v10 버전으로 바꿨다. mapboxgl.accessTok..
지오코딩 지오코딩은 람이 읽을 수 있는 주소를 지도상의 위치로 변환하는 과정이다. 우리가 보통 쓰는 글로 된 주소를 입력하면 위도와 경도로 변환한다. 여기서는 지오코딩 API인 Mapbox를 사용하기 때문에 Mapbox에 접속해서 회원가입을 한다. 설치 Mapbox에는 mapbox-sdk라는 Node 클라이언트가 있어서 npm으로 설치하면 된다. npm install @mapbox/mapbox-sdk 실습 환경변수 설정 회원가입하고 어카운트에 들어가면 access token이 있다. 그것을 복사해서 .env에 아래의 등호 옆에 붙여 넣는다. MAPBOX_TOKEN= Mapbox 설정 아래 코드를 boilerplate.ejs에 붙여 넣는다. mapbox api를 사용하기 위한 스크립트다. 함수를 정의해 놓..
난이도: Lv.2 문제: https://school.programmers.co.kr/learn/courses/30/lessons/42747 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 알고리즘 1. 주어진 citations 배열을 정렬한다. 2. i번 이상 인용된 논문이 몇 개인지 확인해야 한다. i번 이상 인용된 논문이 몇 번째 인덱스부터인지 확인하기 위해 findIndex 함수를 사용한다. (citations 배열의 길이 - findIndex를 통해 얻은 인덱스)가 i번 이상 인용된 논문의 개수이다. i번 이상 인용된 논문의 개수가 i개 이상이라면 ..
난이도: Lv.2 문제: https://school.programmers.co.kr/learn/courses/30/lessons/131127 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 알고리즘 1. want 배열과 number 배열로 원하는 제품의 수량이 몇 개인지에 대한 객체를 생성한다. 이 객체를 원본이라 하자. 2. 객체의 원본을 깊은 복사한 객체를 생성한다. 3. discount 배열에서 연속된 10개의 항목을 순회하며 항목이 객체의 키 값으로 존재하는지 확인한다. 3-1. 하나의 항목이라도 객체의 키 값으로 존재하지 않으면 원하는 제품을 모두..
이미지 추가 캠핑장 편집 버튼을 누르면 이미지를 추가 할 수 있게 바꿔보자. 1. edit.ejs에서 form에 enctype="multiplart/form-data"를 추가한다. 여러 개의 이미지를 입력받을 수 있게 하기 위해서다. 2. 파일 선택기를 추가한다. Add Images 3. 라우트의 put에 upload.array('image') 미들웨어를 추가한다. 4. 캠핑장 편집을 수행하는 controller에 위치한 editCampground 함수에 아래 코드를 추가한다. const imgs = req.files.map(f => ({ url: f.path, filename: f.filename })); camp.images.push(...imgs); await camp.save(); 이미지 삭제 편..
Cloudinary 캠핑장을 생성할 때 이미지 파일을 입력받고 입력받은 이미지는 cloudinary라는 클라우드에 저장한다. cloud name, api key, api secret을 사용할 예정이다. 패키지 설치 npm i multer dotenv cloudinary multer-storage-cloudinary new 페이지의 form에 enctype="multipart/form-data"를 추가한다. multipart/form-data는 모든 문자를 인코딩하지 않음을 나명시한다. 파일이나 이미지를 서버로 전송할 때 사용한다. 서버에서 req.body를 출력해보면 body가 비어있는데, 이는 multipart/form-data를 파싱하지 않았기 때문이다. 파싱하기 위해 미들웨어 multer을 사용한다..
난이도: Lv.2 문제: https://school.programmers.co.kr/learn/courses/30/lessons/87390 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 알고리즘 빨간색 칸이 left에 해당하는 칸이고 파란색 칸이 right에 해당하는 칸이다. 첫 번째 for문에서는 left가 위치한 행에 있는 원소 중 left 위치의 열부터 행의 끝까지 push 한다. 두 번째 for문에서는 행 안에 있는 모든 원소를 push 한다. 세 번째 for문에서는 right가 위치한 행의 첫 원소부터 right 위치의 열까지 push 한다. 위..
난이도: Lv.2 문제: https://school.programmers.co.kr/learn/courses/30/lessons/76502 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 알고리즘 1. 모든 종류의 여는 괄호는 stack에 push한다. 2. 닫는 괄호가 나오면 stack의 맨 윗 원소의 괄호 종류와 일치하는지 확인한다. 종류가 일치하지 않으면 올바른 괄호 문자열이 아니기 때문에 false를 반환하고, 종류가 일치하다면 stack 맨 윗 원소를 pop한다. 예를 들자면 stack에 "[({"가 있다. 이번 괄호가 ')'라면 틀린 괄호 문자열..
