//1. split() method를 사용한 location 방법
window.location = window.location.href.split("?")[0];

//2. pathname 을사용한 location 방법
window.location = window.location.pathname;

위의 코드는 같은 동작을 하며, GET 파마리터 를 제거한 현재의 URL주소로 페이지를 새로고침하게된다.

 

 

//(event.keyCode == 78 || event.keyCode == 82) : ctrl+N , ctrl+R
//(event.keyCode == 116) : f5
//F5, 새로고침 , Ctrl + R, Ctrl + N ==> 키보드 이벤트 적용
if((event.ctrlKey == true && (event.keyCode == 78 || event.keyCode == 82)) || (event.keyCode == 116))
{
	myscript();
}

이런식으로 버튼식 초기화로 구현하던가, 새로고침 버튼 key값을 이용하여 새로고침시 자동으로 적용되도록 하면 될것같다.

//새로고침 방지
// Ctrl+R, Ctrl+N, F5 키 막음 
function doNotReload(){
    if(    (event.ctrlKey == true && (event.keyCode == 78 || event.keyCode == 82)) //ctrl+N , ctrl+R 
        || (event.keyCode == 116) // function F5
    {
      event.keyCode = 0;
      event.cancelBubble = true;
      event.returnValue = false;
    }
}
document.onkeydown = doNotReload;


//F5키를 막는 방법은 아래와 같습니다.

//마우스 오른쪽 클릭으로 새로고침하는 것을 방지

출처: https://yehza.tistory.com/346 [yehza]

'JAVASCRIPT' 카테고리의 다른 글

체크박스 선택시 배열 추가 push  (0) 2022.03.03
페이지 새로고침 시 GET 파라미터 제거  (0) 2022.02.23
input type='file' multiple 업로드 미리보기  (0) 2022.02.02
class와 object  (0) 2022.01.30
parameters  (0) 2022.01.24
<?
	  $ch = curl_init();
	  curl_setopt($ch, CURLOPT_URL, $url);
	  curl_setopt($ch, CURLOPT_POST, $is_post);
	  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	  $headers = array();
	  $response = curl_exec ($ch);
      
      //json 형식으로 넘어온 $response를 decode하기
      $obj=json_decode($response,true);
  	  $token = $obj['access_token']; //$response에서 access_token만 꺼내쓰기
  	  echo $token;
?>

1. working directory // 작업하는 중인

2. staging area // 작업하다가 버전 히스토리에 저장할 준비가 되어있는 파일을 옮겨놓는

3. .git directory //버전 히스토리를 가지고 있는 

1 -> 2 (어느정도 완성된 파일을 add 를 통해 이동)

2 -> 3 (commit 을 통해 저장)

git directory 에서 checkout을 통해 working directory 로 꺼내올 수 있음

위의 작업은 local 에만 저장이 된다.

위의 작업을 통해 git directory 에 있던 버전을 push 명령어를 통해 git hub 서버로 이동할 수 있으며, pull 명령어를 통해 다시 local 로 내려받을 수도 있다.

working directory 은 untracked, tracked 으로 구분 할 수 있다. git이 tracking 하고있으면 tracked, 새로 만들어졌거나 git을 초기화 한 파일이면 untracked 이다.

tracked 는 unmodifided, modified 파일로 나눌 수 있는데, 기존 버전과 비교해서 수정이 된 파일만 staging area로 옮겨갈 수 있기 때문에 나뉘게 된다.

git add * //working directory에서 staging area로 이동하는데, 삭제되거나 없는 파일이 있다면 삭제되었다고 나온다.

git add . //working directory에서 staging area로 모든 파일을 포함해서 추가됨.(숨김파일까지)

git add *.css // css파일만 추가하기

git *.log > .gitignore // git 과 github에 추가하고 싶지 않은 파일이 있다면, echo *.log > .gitignore 파일을 만들어서 넣어둔다. (.log 로 끝나는 파일을 모두 적용 시킬때)

// bulid/.log -> bulid안의 .log파일만 tracking 하고 싶지 않을때  

'Git' 카테고리의 다른 글

git setup  (0) 2022.01.31
<input type="file" onchange="readURL(this);" accept=".jpg, .png" multiple/>
//img태그 사용시
function readURL(input) {
			const su = input.files.length;
			for(let su2=0; su2 < su; su2++){

				if (input.files[su2]) {
					var reader = new FileReader();
					reader.onload = function (e) {
						$('#blah'+su2).attr('src', e.target.result);
					}
					reader.readAsDataURL(input.files[su2]);
				}

			}
			
		}
        
        
//background 사용시
function readURL(input) {
			const su = input.files.length;
			for(let su2=0; su2 < su; su2++){

				if (input.files[su2]) {
					var reader = new FileReader();
					reader.onload = function (e) {
						$('#blah'+su2).css({'background':' url('+e.target.result+') no-repeat center','background-size':'100%'});
					}
					reader.readAsDataURL(input.files[su2]);
				}

			}
			
		}

참고

javascript - Preview an image before it is uploaded - Stack Overflow

'JAVASCRIPT' 카테고리의 다른 글

페이지 새로고침 시 GET 파라미터 제거  (0) 2022.02.23
새로고침 방지하기  (0) 2022.02.23
class와 object  (0) 2022.01.30
parameters  (0) 2022.01.24
function  (0) 2022.01.24

*터미널 명령어 

더보기

git > documentation > reference 에서 git에서 이용 가능한 명령어 및 옵션을 확인 가능함.

git 명령어 옵션  // git 뒤에오는 config command add 등은 명령어, 뒤에는 옵션 ex) git add -option 

git --version // git버전 확인

git config //git의 모든 설정들이 config에 저장됨

git config --list //모든 설정들 확인 할 수 있음

git config --global -e //파일로 열어보고 싶을떄 터미널에서 확인해볼 수 있음

터미널에서 code .  명령어로 에디터 프로그램을 열고 싶을때 에디터에서 설정해줘야함. install code

git config --global core.editor "code" // gitconfig가 열림과 동시네 다른 명령어를 입력할 수 있도록 터미널이 활성화되어있음

git config --global core.editor "code --wait" // 열려진 파일이 종료되기 전에는 터미널에서 다른 명령어를 수행할 수 없음.

git config --global user.name "your_name" // 이름 설정

git config --global user.email "your_email" // 이메일 설정

git config user.name // 설정된 이름 확인 

git config user.email // 설정된 이메일 확인

git config --global core.autocrlf true // window os 사용자 core.autocrlf 설정

git config --global core.autocrlf input // mac os 사용자 core.autocrlf 설정

core.autocrlf // 운영체제마다 에디터에서 줄바꿈을 할때 window는 text \r\n 이 mac는 \n 이 들어가게 되는데, 이것을 자동으로 없애주고 붙여주는 설정

mkdir git // git 폴더 생성

cd git // git폴더 접속

ls //리스트 보기

ls -al // 리스트 숨겨진 것 까지 모두 보기

git init // git 초기화

rm -rf .git //git 제거

.git // 앞에 .이 붙으면 숨겨진 파일

open .git // .git 열기

git config --global alias.변수 status // global alias 를 사용하여 ex) git status의 명령어를 git 변수로 변경하여 사용할 수 있음

git 명령어 --h // 명령어 --h 를 사용하여 해당하는 명령어의 속성값들을 볼 수 있음.

 

 

'Git' 카테고리의 다른 글

git basic  (0) 2022.02.06

* class - 데이터를 넣지 않고 정의만함, 메모리 차지x, 틀  (es6에 추가)

더보기
더보기

class는 연관 있는 데이터를 한데 묶어놓는 컨테이너 역할을 함.
class 내부에는 속성(field),행동(method)이 들어갈 수 있음.

속성만 있는 경우도에는  data class 라고 함.

-template

-declare once

-no data in

class person{
	name; //속성(field),
	age; //속성(field),
	speak(); //행동(method)
}

 

*object - 실제로 class(template)에 데이터를 넣어서 만드는것, 메모리 차지o, 내용이 들어간 틀

-instance of a class

-created many times

-data in

 

- 한마디로 class는 템플릿이며, object는 class를 사용해서 만드는 instance 이다. (class는 prototype 베이스이다.)

 

'use strict';

//사용법
//1. class 선언
class Person{
	//constructor
    constructor(name,age){
    	//fields
        this.name = '홍길동';
        this.age = 18;
    }
    
    //methods
    speak(){
    	console.log(`${this.name}: hello!`);
    }
}

class 안의 this는 class를 가리키며, super은 부모 class를 가리킨다. 위의 예제에서 super은 없지만, this가 가리키는 것은 Person이며, speak() method의 결과 값은 consloe.log('홍길동 : hello!');  이다.

위의 class를 사용하는 예시는 아래와 같다.

const hwan = new person('hwan',30);
console.log(hwan.name); //hwan
console.log(hwan.age); //30
hwan.speak(); //hwan: hello!

 

* Getter and Setter

class User{
	constructor(firstName,lastName,age){
    	this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    	}
}

const user1 = new User('Steve','Job',-1);
console.log(user1.age);

 

위의 스크립트는 user1.age를 -1로 반환한다. 하지만 age는 음수여서는 안된다. 사용자가 잘못 입력했을때를 대비해서 음수를 입력 했을때는 0으로 반환하게 해야한다. 그럴때 get과 set을 사용한다.

class User{
	constructor(firstName,lastName,age){
    	this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    	}
    
    get age(){
    	return this._age;
    }
    
    set age(value){   	
    	this._age = value < 0 ? 0 : value;
    }
}

const user1 = new User('Steve','Job',-1);
console.log(user1.age); //0

get age()는 constructor()의 this.age = age에서 this.age를 가리키게되고, set age()는 this.age = age에서 age를 가리키게 된다. 

이렇게 하면 class User에는  firstName, lastName, _age 총 3개의 필드가 있게된다.

new User에서 class에 값이 할당 될때, set age(value)에 할당되며  set age가 무한히 반복되게 되기 때문에 _age로 구분해준다. 그렇게 되면 class에 값이 할당 될때 _age에 할당되고 this.age = age에서 age에 입력된 값이 할당된다.

- 한 마디로 class에 값이 할당되면 get age()에서 계산되어져서 0이 age필드의 값으로 할당된다는 것이다.

 

*publicField 와 privateField

//생성자를 쓰지 않고 필드를 정의할 수 있다.
class Experiment{
	publicField = 2; //그냥 정의 하면 public으로 외부에서 접근이 가능하다.
    #privateField = 0; // #를 붙이면 private으로 내부에서만 접근이 가능하다.
}
const experiment = new Experiment();
console.log(experiment.publicField); //2
console.log(experiment.privateField); //undefined

 

*static

class Article{
	static publisher = 'I love it';
    constructor(Number){
    	this.Number = Number;
    }
    
    static printPublisher(){
    	console.log(this.publisher);
    }
}

const article1 = new Article(1);
console.log(article1.publisher);//undefined
console.log(Article.publisher);//I love it
Article.printPublisher(); //I love it

object의 값에 따라 변하는것이 아니라 class안에 있는 고유의 값을 반복해서 출력해야 할때, static을 붙이면 된다.

object에 따라 달라지는 값이 아니기 때문에, article1에서 publisher은 찾을 수 없지만, class Artcle 자체에서 찾는다면 찾을 수 있다.

 

* 상속&다양성

class Shape{
	constructor(width,height,color){
    	this.width = width;
        this.height = height;
        this.color = color;
    }
    
    draw(){
    	console.log(`drawing ${this.color} color of`);
    }
    
    getArea(){
    	return this.width * this.height;
    }
}

class Rectangle extends Shape{}
class Triangle extends Shape{
    draw(){
        super.draw();
        console.log('realdraw');
    }
    getArea(){
        return (this.width * this.height) / 2;
    }
}

const rectangle = new Rectangle(20,20,'blue');
const triangle = new Triangle(20,20,'red');

rectangle.draw();// drawing blue color of
console.log(rectangle.getArea());//400

triangle.draw();// drawing red color of  //realdraw
console.log(triangle.getArea());//200

위의 내용은 이렇다.

1. class Shape 을 선언한다.

2. class Rectangle, class Triangle을 선언한다.

3. 2에서 선언한 class 각각에 Shape을 extends로 연결해준다.

4. class Rectangle, class Triangle 에 Shape의 필드와 메소드가 상속된다.

5. Shape의 내용을 수정하면 Rectangle, Triangle 둘 다 적용된다.

6. Triangle의 내용만 수정하고 싶다면, class Triangle 내부에서 수정한다.(덮어씌워짐)

7. 부모 extends로 이어진 class값도 불러오고 싶다면, super 키워드로 불러올 수 있다.

- 한마디로, 하나의 class를 extends로 다양한 class에 값을 상속시켜 적용시킬 수 있으며, 내부에서 오버라이딩 시키며 다양하게 사용할 수도 있다.

 

* instanceof

console.log(rectangle instanceof Rectangle);//true
console.log(triangle instanceof Rectangle);//false
console.log(triangle instanceof Triangle);//true
console.log(triangle instanceof Shape);//true
console.log(triangle instanceof Object);//true

좌측의 object가 우측 class 의 instance 인지 확인한다.

'JAVASCRIPT' 카테고리의 다른 글

페이지 새로고침 시 GET 파라미터 제거  (0) 2022.02.23
새로고침 방지하기  (0) 2022.02.23
input type='file' multiple 업로드 미리보기  (0) 2022.02.02
parameters  (0) 2022.01.24
function  (0) 2022.01.24
$(document).ready(function () 

	 // submit, form 일때는 beforeunload 경고창 해제
    $(document).on("submit", "form", function(event){
        $(window).off('beforeunload');
    });

    // 경고창 뜨게
    $(window).on('beforeunload', function(){
        return "";
    });
});

입력 데이터가 중요한 페이지에 기본세팅을 적용해놓고, 

 

//해당 조건에서는 beforeunload 경고창 해제
if(dfdas){
    $(window).off('beforeunload');
    location = 'yourlink';
}

이렇게 적용해서 원할때만 막아준다.

※ AJAX로 비동기 통신할때는 페이지를 벗어나는 걸로 인식을 하지 않아서 beforeunload  경고창이 뜨지 않음.

+ Recent posts