사전캠프 1주차

사전 캠프 시작!

왜 내일배움캠프를 수강신청 하게 되었는가, 어떤 자세로 임하는 지는 따로 포스팅 하기로 하고..

2주간 사전캠프에서 수강하는 웹개발 종합반은 풀스택을 가볍게 맛볼 수 있는! 그런 강의다.

이미 알고 있었던 부분을 제외하고, 새롭게 알게된 부분을 정리해본다.

이번 강의에서는 웹개발종합반 1,2주차 내용이 주를 이룬다.

 

 

모바일을 위한 설정

CSS에서 max-width로 최대치를 설정해두고, width를 퍼센트 값으로 주면 모바일에서도 유동적으로 보인다.

 

 

 

 

팬명록 만들기

누구로 할까 고민하다가 얼마전 새 앨범이 나온 아이들 노래에 꽂혀서.. 🤭

부트스트랩을 이용해서 뚝딱뚝딱 만들었다.

 

부트스트랩

부트스트랩은 오픈소스 CSS 프레임워크다. 반응형과 깔끔한 UI를 지원하지만 이미 정해져있는 디자인이라는 한계가 있기도!
하지만 적용방법이 어렵지 않고 편의성이 높은 편이라 여전히 많이 사용되고 있다.
기존의 부트스트랩에서는 jQuery가 많이 사용되었던 것으로 아는데, 가장 최근 출시된 부트스트랩 5에서 달라진 점들이 있는 것 같아 몇가지를 간단하게 정리해본다.

• jQuery 관련
  • 부트스트랩 5에서는 기존 플러그인의 jQuery 코드들을 바닐라 자바스크립트로 변경되었다.
• CSS 커스텀 지원
  • 부트스트랩 5부터 IE 지원이 더 이상 없기 때문에, CSS 변수들을 커스터마이징하여 사용할 수 있다. 더불어서 Sass로도 커스터마이징이 가능하다.
• 다양한 색상 팔레트 지원
  • 이전 버전보다 더 많은 색상을 적용할 수 있다.
• SVG 아이콘 라이브러리 지원
  • 어느 프로젝트에서나 사용할 수 있는 1500여개의 SVG 아이콘 라이브러리를 지원한다. (살짝 보니 깔끔하고 좋다)
  • https://icons.getbootstrap.com/

 

 

부트스트랩은 npm 패키지로 설치하거나 스크립트를 추가하여 사용할 수 있다.

$ npm install bootstrap@5.2.2

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

 

 

 

JSON View

크롬 브라우저에서 JSON 데이터를 좀 더 보기 좋게 볼 수 있는 플러그인을 알게 됐다.

https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko 

JSONView

 

기존 JSON 데이터를 이런 방식으로 보았다면,

이런 식으로 가독성 좋게 파악할 수 있다.

 

 

1주차 숙제였던 팬명록에 서울시 날씨 API를 연동해서 현재 기온까지 추가!

 

 

 

 

 

아직은 그래도 수월한 느낌 👀

3주차부터 파이썬으로 백엔드를 다뤄본다!

mongoDB는 처음 써봐서 기대된다.