CodeHoon

values / style.xml

style.xml 파일을 하나 만들어주세요.

<?xml version="1.0" encoding="utf-8"?>
<resources>

<!-- Base application theme. -->
    <style name="ThemeActionBar"
        parent="Widget.AppCompat.Light.ActionBar.Solid">
        <item name="android:background">@null</item>
        <!-- Support library compatibility -->
        <item name="background">@null</item>
    </style>
</resources>

해당 내용을 작성합니다. 

@null 로 처리하여 없애버립니다(투명하게)

2. themes / themes.xml 

<!-- Customize your theme here --> 아래에 작성해주세요

<!-- actionbar -->
        <item name="android:actionBarStyle">@style/ThemeActionBar</item>
        <item name="android:windowActionBarOverlay">true</item>
        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/ThemeActionBar</item>
        <item name="windowActionBarOverlay">true</item>

Avd 재구동! ( 에뮬레이터 )

원래는 있던 ActionBar가 사라진 것을 알 수 있습니다.

이전 모습 비교:

감사합니다.

참고

mainActivity.kt

val videoUri = Uri.parse("android.resource://" + packageName + "/" + R.raw.first );
        binding.videoView.setVideoURI(videoUri);
        binding.videoView.start();
        binding.videoView.setOnCompletionListener {
            binding.videoView.start();
        }

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <VideoView
        android:id="@+id/videoView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"

        />
</RelativeLayout>

ConstraintLayout -> RelativeLayout으로 변경.

VideoView를 삽입하고, 해당 내용을 작성한다.

=> VideoView Layout 아래부터 코드를 작성하면 동영상 레이아웃이 가장 하단에 쌓여,

z-index가 가장 낮은 순위가 된다.

포토샵으로 보자면, 동영상 레이아웃을 가장 아래에 놓고 위에 다른 레이아웃들을 쌓는 형태이다.

java.lang.NullPointerException: Attempt to invoke virtual method 
'android.view.WindowInsetsController com.android.internal.policy.DecorView
.getWindowInsetsController()'on a null object reference

전체화면 적용 중에 

해당되는 에러가 발생하였다.

이 이유는 onCreate() 안에서 setContentView가 선언되기 전에 전체화면 적용하는 코드를 작성하였기 때문이다.

이와 같이 setContentView(binding.root) 가 끝난 후에 해당 내용을 작성해주는 것으로 이동시키면 해결.

// 상태바 및 액션바 제거
        @Suppress("DEPRECATION")
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.R){
            window.insetsController?.hide(WindowInsets.Type.statusBars())
        }else{
            window.setFlags(
                WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN
            )
        }

해당 내용을 onCreate() 안에 작성해줍니다.

안녕하세요 상훈입니다.

Vue.js cli 를 이용하여 클론코딩을 하였습니다.

유튜버 분께서 타자가 엄청 빠르시니 적당히 멈추시면서 하세요!
(내용이 아주 좋습니다. 요점을 잘 잡고 간단하게 구현해주었습니다. )

$ vue create vue-weatherapp

으로 Vue 3 프로젝트를 생성해주었습니다.

그리고 바로 $ npm run serve 를 통하여 구동!

Component를 만들지 않고 오로지 App.vue에서 해당 내용을 작성하였습니다.

<template>

<template>
  <div id="App" :class="typeof weather.main != 'undefined' && weather.main.temp > 16 ? 'warm' : '' ">
    <main>
      <div class="search-box">
        <input 
          type="text" 
          class="search-bar" 
          placeholder="Search..."
          v-model="query" 
          @keypress="fetchWeather" 
        />
      </div>

      <div class="weather-wrap" v-if="typeof weather.main != 'undefined'">
        <div class="location-box">
          <div class="location">{{ weather.name }}, {{ weather.sys.country }}</div>
          <div class="date">{{ dateBuilder() }}</div>
        </div>

        <div class="weather-box">
          <div class="temp">{{ Math.round(weather.main.temp) }}</div>
          <div class="weather">{{ weather.weather[0].main }}</div>
        </div>

      </div>
    </main>
  </div>
</template>

<script>

<script>
export default {
  name: 'App',
  data() {
    return {
      api_key : 'd5297dac23efd490788f837861e52f62',
      url_base: 'https://api.openweathermap.org/data/2.5/',
      query: '',
      weather: {},
    }
  },
  methods: {
    fetchWeather (e) {
      if (e.key == "Enter") {
        fetch(`${this.url_base}weather?q=${this.query}&units=metric&APPID=${this.api_key}`)
          .then(res => {
            return res.json();
          }).then(this.setResults);
      }
    },
    setResults (results) {
      this.weather = results;
    },
    dateBuilder () {
      let d = new Date()
      let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
      let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]

      let day = days[d.getDay()];
      let date = d.getDate();
      let month = months[d.getMonth()-1];
      let year = d.getFullYear();

      return `${day} ${date} ${month} ${year}`;
    }
  }
  
}
</script>

<style>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-family: 'montserrat', sans-serif;
}

#App{
  background-image: url('./assets/cold-bg.jpg');
  background-color: aquamarine;
  background-size: cover;
  background-position: bottom;
  transition: 0.4s;
}

#App.warm {
  background-image: url('./assets/warm-bg.jpg');
}

main{
  min-height: 100vh;
  padding: 25px;

  background-image: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.75));
}

.search-box{
  width: 100%;
  margin-bottom: 30px;
}

.search-box .search-bar {
  display:block;
  width: 100%;
  padding: 15px;

  color: #313131;
  font-size:20px;

  appearance: none;
  border: none;
  outline: none;
  background: none;

  box-shadow: 0px 0px 8px rgba(0,0,0,0.25);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0px 16px;
  transition: 0.4s;
}

.search-box .search-bar:focus{
  box-shadow: 0px 0px 16px rgba(0,0,0,0.25);
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 16px 0px;
}

.location-box .location {
  color: #FFF;
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  text-shadow: 1px 3px rgba(0,0,0,0.25);
}

.location-box .date {
  color: #FFF;
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  text-align: center;
}

.weather-box {
  text-align: center;
}

.weather-box .temp{
  display: inline-block;
  padding: 10px 25px;
  color: #FFF;
  font-size: 102px;
  font-weight: 900;

  text-shadow: 3px 6px rgba(0,0,0,0.25);
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 16px;
  margin: 30px 0px;

  box-shadow: 3px 6px rgba(0,0,0,0.25);
}

.weather-box .weather {
  color: #FFF;
  font-size: 48px;
  font-weight: 700;
  font-style: italic;
  text-shadow: 3px 6px rgba(255, 255, 255, 0.25);
}
</style>

결과물입니다.

도시명을 작성하면 해당되는 api를 가져와 띄워줍니다.

이상입니다.

무료 기상 API 주소 입니다. 개발 공부에 참고하세요!!

안녕하세요 상훈입니다.

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Vue.js , API, Fetch(), 비동기 통신 간에 에러가 발생하였습니다. 

이 에러가 처음에는 제가 오타를 내서 발생한 에러인줄 알았으나(근데 오타도 있었음), 

오타의 문제가 아니었습니다.

1. F12 -> Network 를 확인해주세요.

2. api를 가져올 때 주소를 잘못 작성한 것을 저는 확인하였습니다. 

그리고 다시 url_base를 사용하니 원활히 출력되었습니다!

주소 주의하세욤..

이상입니다.

참고

form
HTML5이후로 action을 작성하지 않아도 된다.
GET 방식과 POST방식이 있다.

====================
input : file

form에 enctype : multipart/form-data 를 무조건 추가.
=> 
form의 method = 무조건 post.
=> contents 를 주소로 보낼 수 없음

HTMLInputElement.files 속성은 선택한 파일(File) 목록을 FileList 객체로 반환합니다.

FileList는 배열처럼 행동하므로, 
length 속성을 사용해 현재 선택한 파일의 수를 알 수 있습니다.

name
파일 이름.
lastModified
파일을 마지막으로 수정한 시각을 나타내는 숫자. UNIX 표준시(1970년 1월 1일 자정)으로부터 지난 시간을 밀리초 단위로 나타낸 값입니다.
lastModifiedDate 
파일을 마지막으로 수정한 시각을 나타내는 Date 객체. 더 이상 사용하지 않아야 합니다. lastModified를 대신 사용하세요.
size
파일의 크기를 바이트 단위로 나타낸 값.
type
파일의 MIME 유형.
webkitRelativePath 
webkitdirectory 특성을 사용한 경우, 기준 디렉토리에 대한 파일의 상대적인 경로. 비표준 특성이므로 사용에 주의가 필요합니다.

accept 특성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<style>
    #drop_zone {
  border: 5px solid blue;
  width:  400px;
  height: 300px;
}
</style>
<body>
    <h1>How to Drag&Drop File Upload</h1>
    <form method="post" enctype="multipart/form-data">
        <input type="file" id="file" name="file" multiple >
        <div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
            <p id="drop_zone_item_name_list" class="text-center">파일을 이곳에 끌어다 놓아주세요</p>
        </div>
        <button type="button" onclick="checkForm()" class="btn btn-primary">submit</button>
    </form>
    
<script>
    const dropZone = document.querySelector('#drop_zone')
    let formData = new FormData()   // formData library

    // 들어왔을 때 배경 색 변경
    dropZone.addEventListener('dragover', () => {
        dropZone.style.backgroundColor = 'gray'
    })

    // 나갔을 때 배경 색 복원
    dropZone.addEventListener('dragleave', () => {
        dropZone.style.backgroundColor = 'white'
    })


    function dragOverHandler(ev) {
        console.log('File(s) in drop zone');

        // Prevent default behavior (Prevent file from being opened)
        ev.preventDefault();
    }

    function dropHandler(ev) {
        console.log('File(s) dropped');
        ev.preventDefault();

        if (ev.dataTransfer.items) {
            let drop_zone_item_name_list = document.querySelector('#drop_zone_item_name_list')
            drop_zone_item_name_list.innerHTML = ""

            
            for (let i = 0; i < ev.dataTransfer.items.length; i++) {
                // If dropped items aren't files, reject them
                if (ev.dataTransfer.items[i].kind === 'file') {
                    const file = ev.dataTransfer.items[i].getAsFile();
                    // console.log('... file[' + i + '].name = ' + file.name);
                    drop_zone_item_name_list.innerHTML += file.name + "<br>"    // 리스트에 출력
                    console.log(file)   
                    formData.append('files',file[i]) // formData 에 data 삽입
                }else{
                    console.log('it is not a file')
                }
            }
            console.log('file loop is end')
        } else {
            console.log('use interface')
            // Use DataTransfer interface to access the file(s)
            for (let i = 0; i < ev.dataTransfer.files.length; i++) {
            console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
            }
        }
        dropZone.style.backgroundColor = 'white'
    }

    function checkForm() {
        if(formData) {
            $.ajax({
                data: checkForm,
                method: 'post',
                dataType: false,

            })
            .success( console.log('no error'))
            .fail(console.log('fail'))
        }
    }
</script>



</body>
</html>