2. Front-end

JS - [ CSV 파일 파싱 - 카카오 맵 API에 CGV 좌표 표시 ]

우선 CGV의 좌표를 가져오기 위해 영화관 시설 데이터가 담긴 CSV 파일을 다운로드 https://www.culture.go.kr/bigdata/user/data_market/detail.do?id=54331f17-d090-4b91-bc8c-95ccb134303f 문화 빅데이터 - 포털- 전체 상품 www.culture.go.kr 카카오 맵 API를 이용해 화면에 지도를 출력 후, CSV파일에서 CGV의 데이터만 파싱 후 지점명, 주소, 도로명 주소, 위도 경도를 가져와 뿌려주었다. d3.csv 메서드를 이용할 때 두 번째 함수가 비동기로 실행되어서 여기서 애를 많이 먹었다... 처음엔 아래처럼 코드를 작성했다. let test = []; d3.csv("cgvList.csv", function (dat..

JS - [ CSV 파일 불러오기 ]

CSV 파일 불러오기 - d3 라이브러리 이용 https://d3js.org/ D3에서 CSV파일을 로딩하면 data변수에 객체 배열로 로딩한다. 참고로 두 번째 매개변수로 들어가는 function은 비동기로 실행된다. 참조 더보기 https://curryyou.tistory.com/252 [자바스크립트] CSV to JSON 변환 출력 방법+샘플예제코드(node.js 파일 처리 포함) | 자바스크립트로 CSV를 JSON으로 변환하는 방법 CSV는 Comma Seperated Values의 약자로, 콤마( , )로 구분된 문자열을 말합니다. 행의 항목(컬럼)들은 콤마로 구분되며, 각 행은 줄바꿈으로 구분됩니다. curryyou.tistory.com https://continuous-development...

JS - [좌석 만들기]

const seatContainer = document.querySelector('.select-seat .seat-container'); let test = []; let selectedSeats =[]; // 선택되어있는 '좌석번호' 담음 let selectedSeatsMap = []; let clicked = ""; // 선택되어있는 좌석 '태그' 담음 let div = ""; for (let i = 0; i < 7; i++) { div = document.createElement("div"); seatContainer.append(div); for (let j = 0; j < 10; j++) { const input = document.createElement('input'); // 좌석이 될 요..

JS - [ 오늘부터 14일간 날짜 출력 ]

date__mont에는 이번 달 연도/달, date__list에는 오늘 부터 14일 출력. 이번 달을 넘어가면 나머지는 다음 달에 출력! (date__nextMonth에는 다음 달 연도/달, date__nextList에는 다음 달 일 출력) // 날짜 출력하기 - 14일 const dateMonth = document.querySelector('.date-container .date__month'); const dateList = document.querySelector(".date__list"); const dateNextMonth = document.querySelector('.date-container .date__nextMonth'); const dateNextList = document.quer..

CSS - [ text-overflow ... 처리 ]

아래와 같이 코드 작성하면 width: ~~px; // 너비 설정 overflow: hidden; // 넘칠경우 overflow 숨김 설정 text-overflow: ellipsis; // 글자가 설정한 너비를 넘을 경우 생략부호를 표시함 white-space: nowrap; // 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 텍스트가 width를 넘어설 경우 ... 처리된다. a태그에 적용하려 했는데 안되어 확인해보니 dispaly: block; 으로 변경해주니 잘 된다! 테이블의 경우에는 table 요소에 table-layout: fixed; 속성 추가해주기 2줄 넘었을 때 ... 처리하고 싶은 경우 width: 100%; overflow: hidden; text-overflow: ell..

CSS - [ Bootstrap ]

부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다 https://getbootstrap.com/ 참조 메인 화면에서 Get started 클릭 부트스트랩을 사용하려면 미리 만들어져있는 css와 js 파일이 필요하다. CSS는 CDN 방식으로 연결하면 되고, js는 Bundle과 Seperate 2가지 방식이 있다. 부트스트랩은 외부에서 Popper js라는 패키지를 가지고와서 활용하고 있다. Bundle은 Popper 패키지를 부트스트랩과 묶어서 제공하는 것이고, Seperate는 분리해서 제공하는 것이다. 만약 Popper js를 이미 프로젝트에서 사용하고 있다면 Bund..