스파르타 코딩(웹 개발 종합)[1주차] - 스파르타피디아

bootstrap 기반으로 만든 페이지

완성 사이트

정리

CDN(Content Delivery Network)

bootstrap 사용시에 CDN을 통하여 css, js 파일을 가져옵니다.

별도 다운로드 없이 CDN을 통해서 가져오면 인터넷 상에서 해당 파일을 가져올 수 있습니다.

CDN 경로를 보시면 jsdeliver를 보실 수 있는데 해당 기능을 통해 네트워크상 가장 가까운 경로에 캐시된 파일을

가져올 수 있으므로 특정 서버에 있는 파일을 가져오는 것 보다 성능적으로 이점이 있습니다.

<!-- bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>

 

bootstrap

강의와 함께 bootstrap 본격적?으로 써봤던것 같습니다. (과거 학생 때 써본기억이 드문드문 있네요...ㅎ)

css, js가 미리정의 되어있고 example html이 작성되어 있어 복사/붙여넣기 로도 꽤나 괜찮은 디자인을 만들 수 있습니다.

물론 쓰면서 느꼈지만 기본적인 HTML, CSS, JS 지식을 보유해야 제대로 쓸 수 있을것 같네요.

뭐든지 기초가 중요한것 같습니다! 하지만 실전과 학습은 병행되어야 하므로 적절하게 조율하는게 좋을것 같애요

IDE(통합 개발 환경) : Pycharm

개발을 좀 해보신 분들이라면 보통 자기가 사용해본 IDE들이 하나씩 있을거에요.

제가 학생일 떄는 Eclipse와 Visual Studio를 많이 썼었습니다.

이번 기회에 Pycharm을 처음 사용해보았는데 기능이 너무 좋아서 반했네요 ㅎㅎ (왜 유료인지 알겠...)

js code 자동완성기능 뿐만 아니라 html, css도 잘 되고 color 선택시 팔레트 기능도 있네요.

또 변수에 할당된 값에 따라 자동완성 제안이 거기에 맞게 뜨더라구요. 

SI 개발 2년동안 eclipse 밖에 사용안했는데 참...다르네요 ㅎㅎ.

앞으로 많은 기능이 있을텐데 하나씩 알아가는것도 재밌을것 같네요 ㅎㅎ

 

 

단축키 설정

저는 요근래 회사에 나와서 개인 프로젝트를 시작했는데, 이때 IDE 도구로 Visual Studio Code를 사용했습니다. 

개인 프로젝트는 저걸로 진행하다보니 단축키가 달라 많이 불편하더라구요... 각 IDE에 맞게 단축키를

다 외울수도 없더라구요.

그래서 단축키를 바꾸는 작업을 했습니다.

Ctrl + Alt + S # 설정 창 열기

위 화면과 같이 기능을 검색해서 단축키를 내가 원하는것으로 지정하면 됩니다. 내가 원하는 단축키가 다른 기능에 설정

되어있으면 과감히 바꿔주세요 ㅎㅎ 저는 그랬습니다.

 

My Cinema : JS 기능 추가

수업에서는 화면만 만들고 끝이 났는데, 저는 기록하기 기능을 구현해보았습니다.

기록하기 기능

 

구현하면서 힘들었던점

1.영화 제목 선택시 이미지 url, 제목, 줄거리 설정 기능

DB가 구현이 안되었기 때문에 수동으로 5개정도의 샘플 데이터를 만들었습니다.

그리고 샘플 데이터를 조회하는 함수를 하나 구현했구요.

기록하기 버튼 클릭시 샘플 데이터 조회 함수를 통해 영화 정보들을 가져와서 설정했습니다.

 

2.새로운 영화 카드 생성

기존 Element block을 복제해서 만들지 아니면 html을 문자열로 작성해서 만들지 선택해야 했습니다.

저는 기존것을 복제해서 값을 변경하여 만들기로 했습니다.

여기서 복제할때 좀 어려움이 있었는데, 아래와 같습니다.

// 처음에 생각했던 복사 시나리오, Element를 조회하여 바로 append 할려고 함
let divCardCntr = document.querySelector("#cardCntr");
let divCard = document.querySelector("#cardCntr > .col");
divCardCntr.append(divCard);

조회한 Element는 객체이기 때문에 append를 하여도 한개가 더생기지 않습니다. 이미 해당 구역에 존재하니깐요.

조회한 Element도 고유성이 있는 객체라는 사실을 인지하지 못했습니다.

그래서 복제하기위해 document.importNode 함수를 사용했습니다.

인자값에 true를 주면 하위 element도 같이 복사가 됩니다.

// 해결코드
let divCardCntr = document.querySelector("#cardCntr");
let divCard = document.querySelector("#cardCntr > .col");

let newCard = document.importNode(divCard, true);   // card 복사, deep copy

divCardCntr.append(newCard);

 

마치며...

저는 개발자로 일하면서 기초적인 토대가 부족하다고 느꼈습니다.

프로젝트에서는 DBA, AA, Publisher, Designer 등등 업무가 세분화 되있고 저는 그중에 개발 일부분만 맡았으니까요.

이번 기회에 하나의 프로젝트를 온전히 스스로 구현해볼수 있는 기회로 삼아 기초적인 토대를 쌓을수 있으면 좋겠네요 ㅎ

 

 

관련파일

MyCinema.html, css/cinema.js, js/cinema.css

 

GIT 주소

https://github.com/banhyungil/sparta