New 병아리 개발자

# Xampp MySQL shutdown unexpectedly 에러...

## 해결방법 1

• 보통은 Ctrl + Alt + Del키 누른 후 작업관리자에서 mysql.exe 종료 후 xampp 재실행 후 mysql start를 하면 해결된다.

## 해결방법 2

• 포트가 사용중일 경우에도 위 증상이 나타날 수 있는데, 이땐 xampp > mysql의 Config에서 my.ini 실행 후 포트를 변경하는 방법이 있다.
• [client] 의 port=3306 과 [mysqld] 의 port=3306 을 3308 등 임의로 변경 후 재 실행하면 해결된다.

## 해결방법 3

• xampp > mysql의 Config에서 Browse > data에서 master ~~ 로 시작되는 파일들과 mysql-relay ~~ 로 시작되는 파일을 삭제 후 재실행 하면 해결된다.

## 해결방법 4

• 삭제 후 재설치

# 홈페이지 방문자 통계 설정하기

## 구글 애널리틱스 (Google Analytics)

• 구글 애널리틱스에 통계 정보등을 얻고자 하는 사이트를 등록하면 실시간 방문자, 누적방문자, 접속 국가 등을 쉽게 확인 가능하다.
• 등록은 아래 구글 애널리틱스 사이트에 접속하여 진행하면된다. www.google.com/analytics/

## 설치방법

영상 참고

www.youtube.com/watch?v=agbNPdjWl5A&t=869s

## 홈페이지에 방문자 통계 넣기 (Google Analytics Report API)

• 위에서 구글 애널리틱스로 통계를 얻고자 하는 홈페이지를 설정하였는데, 해당 내용을 구글 애널리틱스에 접속하여 직접 확인하는 것이 아닌 해당 통계 데이터를 가져와서 홈페이지에서 보여주기 위해서는 Google Analytics Report API 를 사용해야 한다.
• https://developers.google.com/analytics/devguides/reporting/core/v4/quickstart/web-js Google Analytics Report API 사이트 왼쪽 Overview에서 사용할 용도에 맞게 선택 후, 클릭하면 나오는 내용 중간에 Enable the API 부분의 Create credentials의 내용대로 진행하면된다.
• 처음에 https://console.developers.google.com/projectselector2/apis/credentials?pli=1&supportedpurview=project로 진입 후 상단에 '프로젝트 선택' 클릭 후 새 프로젝트를 생성해준다.
• '사용자 인증정보'(추후 Google Analytics 콘솔에서 데이터조회 권한을 부여할 때 사용)에서 하단에 '서비스 계정관리'를 클릭하여 프로젝트 서비스계정을 발급하는 페이지로 이동 후 서비스 계정 발급을 진행 한다. (발급 과정 중 마지막에 '작업'의 키 만들기를 클릭하여 json파일 유형의 키를 잘 보관해놓고 있어야 한다.) 그리고 서비스 계정 생성 시 발급되는 이메일 주소를 복사하여 

## 홈페이지 추가방법

• 왼쪽 하단 톱니바퀴(관리) 클릭
• 가운데 속성 우측 속성 만들기 클릭 
• 웹 / 앱 선택
• 본인 사이트 이름, 웹사이트 주소, 업종, 시간대(대한민국) 선택 
• 나온 코드 복사 후 홈페이지 head에 코드 삽입

# 쿠키, 세션, 캐시

## 쿠키 ( Cookie )

• 사이트를 방문, 이용할 때 브라우저에 저장되는 내용
• 브라우저에 존재하여 내가 갖고 있는것과 같다.
• 임의로 수정, 삭제가 가능하고, 제 3자가 훔쳐보거나 탈취할 가능성이 있다.
• 즉, 로그인창의 아이디 자동완성, 공지 메시지 하루 안 보기, 쇼핑몰 사이트 등에서 로그인 안 한 상태로 물건을 장바구니에 담는 등의 지워지거나 조작되거나 3자에게 노출되더라도 큰 일이 없는 수준의 정보들을 브라우저에 저장하는데 사용한다.

## 세션 ( Session )

• 세션을 사용하는 사이트 접속 시 이용자들의 중요 정보를 총괄
• 서버에서 사용자를 구분하기 위한 기한이 짧은 임시키를 제공, 해당 키를 브라우저에 보내 쿠키로 저장한다.
• 임시키를 지닌 사용자가 사이트를 이용할 때 사용자의 중요 정보는 해당 사이트의 서버 메모리나 데이터베이스에 저장된다. (쿠키에서 다루기 민감한 정보를 다룬다.)
• 브라우저가 사이트의 페이지들에 접속 시 http 요청에 제공받은 임시키를 함께 전송, 서버는 해당 키를 통해 사용자를 식별, 인식하여 해당 사용자에 대한 정보를 가공해서 응답으로 보내준다.
• 네이버를 예로 들면 네이버 로그인 후 네이버의 다른 페이지 등을 이용 시 매번 새로 로그인 할 필요가 없는것도 쿠키와 세션의 조합 덕분이다.
• 즉, 제3자에게 노출되어서는 안되는, 서비스 제공자가 직접 관리해야 할 정보를 다룬다.

## 캐시 ( Cache )

• 가져오는데 비용이 드는 데이터를 한 번 가져온 뒤 임시로 저장해 두는 것.
• 웹 캐시의 경우 이미지 등의 정보를 불러올 때 데이터 사용량이 발생하고 시간도 들기 때문에 사용자가 자주 방문할 것 같은 사이트의 경우 한 번 받아온 데이터를 사용자의 컴퓨터 또는 중간 역할을 하는 서버에 저장해둔다.
• 웹, 컴퓨터 메모리, 안드로이드 등 다양한 부분에서 쓰인다.

## 참고

• 유튜브 : 얄코 쿠키, 세션, 캐시가 뭔가요?
• https://www.youtube.com/watch?v=OpoVuwxGRDI

# input type="file" 관련

• type="file" : 웹페이지에서 사용자의 로컬 파일을 입력받기 위한 것.

 <input type="file" accept="image/*,.txt" multiple required capture='user' onchange='aaa'/>

## file 타입의 속성

### accept 속성

• accept="" : 사용자로부터 로컬 파일을 입력받을 때 입력받을 파일의 유형을 설정하는 것, 확장자 명을 넣어준다. (단, 해당 속성은 정해진 파일 이외의 파일을 입력받을 수 없도록 제한 하는것은 아니다.)
• MIME 타입 ( text/plain, image/jpeg, audio/mpeg, image/* 등의 확장자 명을 넣어준다.

<input type="file" accept=".jpg, .png, .gif, .mp4"/>

### multiple

• ctrl / shift 키를 사용, 한번에 여러개의 파일을 선택 가능하게 할지 또는 하나의 파일만 선택 가능하게 할지 결정하는 것으로 boolean 값을 가진다.

// Shift/Ctrl 키를 이용하여 다중 파일 선택 가능
<input type="file" multiple/>

// 단일 파일 선택
<input type="file"/>

### required

• form이 submit 될 때 파일이 반드시 선택되어야 하는지 여부를 결정하는 것으로 boolean 값을 가진다.
• 해당 속성이 지정되어 있는 경우 파일을 선택하지 않고 업로드 하면 파일을 선택하라는 메세지가 나온다.

<input type="file" required/>
<input type="submit">

### capture

• 모바일 디바이스에 적용되는 속성 값으로, accept 속성에 이미지 또는 비디오를 입력받는 경우에 기기의 어떤 카메라를 이용할지 지정하는 것
• capture="user" : 기기의 전면 카메라
• capture="environment " : 기기의 후면 카메라