[TIL] 0814 개발일지

💡오늘의 계획

• 공공데이터 API 사용법 익히기

• 날씨관련 데이터를 받으려다가 데이터를 보니까 생활기상지수가 있었는데 어짜피 날씨는 다들 네이버나 시리와 같이 일상적으로 잘 확인하기 때문에 해당 앱에서는 다른 정보를 보여주면 좋을 것이라고 생각

• https://data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15043583

• 체감온도, 더위체감지수, 자외선지수, (겨울) 동파가능지수, 불쾌지수

공공데이터 API 사용하기

https://data.go.kr 공공데이터포털에서 [생활기상지수 조회서비스] 오픈 api를 받았다. JSON과 XML의 데이터 포맷을 가지고 있고 request, get 방식을 이용해서 필요한 데이터를 받아볼 수 있는 듯 했다.

1. 인증키를 받았으나 오류가 뜸
   • 해당 문서에 있는 요청주소로 처음에 코드를 짰더니 serviceKey가 없다는 에러가 떴다. 그래서 찾아보니 service key도 개인별로 받으면 그것을 주소에 적고, 뒤에 필수 인자들을 &로 구분해야 된다고 한다. 필수 인자들도 다 넣고 홈페이지에서 인증키도 받아서 넣었는데 또 에러가 떴다.
2. 왜 그럴까?
   • https://hun-developer.tistory.com/m/28
   • SERVICE_KEY - > URL 인코딩을 진행 - > 사용
   • 하지만 서비스키를 android studio에서 파라미터로 전달할 경우 unsafe characters인 %가 포함되어 있기 때문에 SERVICE_KEY가 변경되기 때문에 디코딩 작업이 필요하다. 그래서 또..해봤는데..안된다.
   • 아직 인증키가 등록이 되지 않은 것일수도 있다(?) 라고 해서... 기다렸더니 나온 결과는 "결과 없음" ... 인증은 되었는데 그냥 데이터가 이상한가보다.

API 사용법을 익힐 새도 없이 자꾸 초반부터 에러가 뜨니까 짜증이 나서 그냥 레이아웃부터 만들어 놓기로 했다👻

---

레이아웃 만들기

• 원래 기존에 구글링해서 찾은 css template를 사용하려고 했는데, 그 안에 각종 묶여있는 파일들이 정말 많고 내가 알 수 없는 (개발자만 아는) 요소들이 많다는 것이 매우 큰 단점이었다. 디자인은 좋고 반응성도 좋지만 오히려 내가 원하는 대로 바꾸다가 역효과가 나기 쉬워보였다.. 그래서 많이 고민하다가 그냥 내가 처음부터 (디자인의 퀄리티가 조금 떨어지더라도) 만들어 봐야겠다고 결심했다.
• 뭐 어떻게든 되겠지!🥺

✅Bootstrap Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

• 프론트 페이지에서 메인 화면에 크게 사진이 넘어가면서 문구가 나오면 좋겠다는 생각이 들어서 부트스트랩 홈페이지와 구글에서 이런저런 예시들을 찾아보다가 carousel 코드가 적용하기도 괜찮을 것 같아서 코드를 찾아왔다.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

• 내가 사용한 코드는 정해진 시간에 따라서 단순히 사진이 넘어가는 carousel이다. 처음에 시간 설정하는 방법을 몰라서 마냥 사진 넘어갈 때까지 기다렸는데 bootstrap carousel 페이지 하단에 보니 다양한 option들을 알려주고 있었다.

<div class="carousel-inner" data-interval="2000">

• 기본 interval이 "5000"으로 설정되어 있어서 조금 더 짧게 2000으로 설정해 주었다. (만족!)

• 사진 위에 글씨를 쓰니 글씨가 보이기는 하는데 아무래도 사진이 있어 선명하게 보이지 않아 위에 커버를 살짝 씌워줬다. 다음과 같은 코드를 css 파일에 넣어주니 아래 사진과 같이 만들어 졌다! (gradient 너무 예뻐..💕)

• (tmi) 내가 찍은 필름 사진들로 만드니까 너무 ... 좋은 거 있지!

.carousel-inner {
    background-image: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%);
    overflow: hidden;
}

.carousel-inner img {
    object-fit: cover;
    opacity: 0.5;
}

• 글씨체는 나중에 마지막에 바꿀 예정!

✅Bootstrap Navbar 만들기

상단 메뉴에 해당하는 navbar를 만드는 데에 있어서 다양한 supported contents가 있는데 각각의 요소를 알고 나니까 코드 짜는 게 한결 쉬웠다.

---

.navbar-brand for your company, product, or project name.
.navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
.navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.
.form-inline for any form controls and actions.
.navbar-text for adding vertically centered strings of text.
.collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.

---

처음에는 정말 딱 간단한 디자인으로 제대로 기능만 되는 navbar를 만들었다. 만들면서 내가 알게 된 몇 가지 코드, class와 같은 것들이 있는데 다음과 같다.

<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-custom-2">

• 여러가지 class 중에서 fixed-top을 사용하면 페이지를 아무리 스크롤해도 navbar는 상단에 고정된다.
• bg-custom-2는 navbar에 linear gradient 색을 넣고 싶어서 일단 class로 넣어두었다. 아래와 같이 css 파일에 코드를 추가해주면 navbar의 색이 짜자잔- 바뀌지롱!
  

.bg-custom-2 {
    background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
}

• css파일에 @media 로 시작하는 코드를 넣으면 '반응형'이라고 해서 화면의 width가 변하는 것에 따라서 웹사이트를 보기 좋게 바꿔준다. 아래와 같이 화면의 너비가 줄어들면 오른쪽에 있던 메뉴들이 collapse 되어 버튼이 생긴다.
  
• 해당 화면을 만들기 위해서는 다음과 같은 코드를 넣어주면 된다.

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
    
@media (min-width: 800px) and (max-width: 850px) {
    .navbar:not(.top-nav-collapse) {
        background: slategray !important;
    }
}

• 또한 메뉴를 클릭할 때 새 창에서 열 것인지 현재 창에서 열지 맞춰서 코드를 짤 수 있는데, 나는 현재 창에서 열기 위해서 다음과 같이 코드를 적었다.
  (새 창에서 열고 싶으면 target="_blank")

 href="#" target="_self"

✅Dropdown Menu 만들기

상위 태그 <ul class="navbar-nav ml-auto"></ul>

안에 일반적으로 클릭해서 바로 새로운 페이지가 연결되도록 할 때는 아래와 같이 써주면 메뉴 글씨가 생성된다.

<li class="nav-item">
    <a class="nav-link" href="#">배달음식</a>
</li>

내가 만들고자 하는 것은 상위 메뉴안에 여러 가지 목록이 뜨도록 하는 dropdown menu!
다음과 같이 index.html 문서에 코드를 적었다.

<li class="nav-item dropdown">
	<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" target="_self" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">공원별정보</a>
	<div class="dropdown-menu" aria-labelledby="navbarDropdown">
		<a class="dropdown-item" href="#">강서</a>
        <a class="dropdown-item" href="#">광나루</a>
        <a class="dropdown-item" href="#">난지</a>
        <a class="dropdown-item" href="#">뚝섬</a>
        <a class="dropdown-item" href="#">망원</a>
        <a class="dropdown-item" href="#">반포</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">양화</a>
        <a class="dropdown-item" href="#">여의도</a>
        <a class="dropdown-item" href="#">이촌</a>
        <a class="dropdown-item" href="#">잠실</a>
        <a class="dropdown-item" href="#">잠원</a>			</div>
</li>

• class="dropdown-divider"를 넣어서 목록 안에서도 위 아래 구분되도록 했다. 아직 제대로 만들지는 않았는데 한강공원 11개를 강남/강북으로 나눠서 divider를 효율적으로 사용할 계획이다!

✅menu에 효과/디자인 추가하기

• 또 욕심이 생긴 나는 다음과 같은 디테일을 넣어보고 싶었다.

  • dropdown 메뉴 또한 마우스를 대면 바로 목록이 뜬다. (클릭x)
  • navbar의 메뉴 목록에 마우스 커서를 가져다 대면 밑줄이 생긴다.
  • Bootstrap에서 알려준 기본 코드로는 목록이 직사각형의 매우 밋밋한 dropdown 박스가 뜨는데 조금 모서리를 깎아서 있어보이게(?) 만들기

• 위의 기능들을 만들기 위해 추가한 css 코드는 다음과 같다.

.navbar-collapse ul li a.nav-link:before {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    content: '';
    opacity: 0;
    -ms-transition: opacity 0.3s, -webkit-transform 0.3s;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -ms-transform: translateY(10px);
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}

.navbar-collapse ul li:hover a.nav-link:before {
    opacity: 1;
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    bottom: 0px;
    background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}

.dropdown-item:hover, .dropdown-item:focus {
    color: #FCF0E7;
    text-decoration: none;
    background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}

.dropdown-menu {
    border: 0px;
}

• 그리고 아래와 같은 javascript 코드를 넣어주게 되면 내가 하는 동작에 따라서 원하는 대로 화면 상에 보여지게 된다.

<script>
        $(document).ready(function () {
            $('#navbarDropdown').mouseenter(function () {
                $('.dropdown-menu').slideToggle(300, "linear");
            });

            $('.dropdown-menu').mouseleave(function () {
                $(this).slideToggle(300, "linear");
            });
        });
    </script>

이렇게 여기까지 다 하면! 다음과 같이 짜자잔~!!~!

✅Article card를 이용하기

• codepen.io 에 되게 유용하게 부분적으로 가져다 쓸 수 있는 코드들이 많다. 개인적으로 처음에 전체적으로 받았던 template zip 파일은 내가 코드를 해석하기가 어려우니 사용하는 것이 무리였는데 여기는 html/css/js 별로 코드를 확인하고 쓸 수 있어서 편하다.

• 아래 링크를 통해 받아서 내가 필요한 대로 수정했다. 내가 찾고자 하는 디자인이어서 바로 보자마자 사용했지-!👻
  https://codepen.io/trishrecuero/pen/geVWMa

• 완성된 모습은 다음과 같다. (글꼴은 아직!)
  

✅footer도 어디 한 번 멋지게 꾸며볼까?

• 마찬가지로 구글링하다가 codepen.io에서 발견했고 완성한 모습은 아래와 같다.
• 나는 개발자(=나..^^)의 인스타그램 / velog 로 연결되게 설정했고 그 아래는 내가 참고한 서울한강사업본부 홈페이지와 기상청, 그리고 스파르타 코딩클럽의 홈페이지로 연결되도록 만들었다.
  

(물보라가 치는데 진짜..코드 보니까 개발자는 정말...리스펙이다)

✅참고한 사이트들

https://m.blog.naver.com/PostView.nhn?blogId=mia8692&logNo=220239773874&proxyReferer=https:%2F%2Fwww.google.com%2F
https://getbootstrap.com/docs/4.0/components/navbar/
https://stackoverflow.com/questions/16453537/bootstrap-transparent-navbar
https://mdbootstrap.com/snippets/jquery/ascensus/1727054#html-tab-view
http://tcpschool.com/css/css_advanced_navigation

✏️To do list (08/15)

• 공공데이터에서 다른 데이터를 찾거나 열린데이터광장에서 찾아보기
• api 사용하는 거 꼭 연습하기!
• 레이아웃은 필수적인 부분은 다 했으니 페이지 별로 어떤 기능들을 넣을지 (get, post, db화 등) 자세하게 생각해서 적어보기