하고싶은대로##

기술 면접에서 이런 거 많이 물어본다고 해서

정확히 뭔지 궁금해서 찾아보았다.

찾아보니까 다 Programming Language 같은  수업이나

스스로 찾아서 공부하면서 들은 내용이긴 해서 이해하는데 어렵진 않았다.

일반적으로 프로그래밍 언어에서 메모리의 생존 주기는

1. 필요할 때 메모리를 할당

ex) int i; 를 하면 4bytes가 할당된다.

2. 할당된 메모리를 읽고 쓴다.

ex) i라는 변수를 읽거나 내용을 바꾼다. 

3. 필요 없으면 해제한다.

이런 순서이다.

필요 없으면 해제할 때, 자바스크립트는 가비지 콜렉션을 하여 해제하는데,

가비지 콜렉션은 말그대로 쓰레기, 즉 이제 더 이상 사용하지 않거나 필요 없는 메모리를 찾아서 지워준다.

가비지인지 아닌지는 참조되는가 되지 않는가로 알아낼 수 있다.

참조는 다른 메모리가 이 메모리로 접근이 가능하면 참조된다고 한다.

가비지 콜렉션 방법은 2가지가 있다.

1. Reference-counting 가비지 콜렉션

말 그대로 참조가 되는지 안되는지만 세서 없애주는 것이다.

int a = 3;

int b = a;

이렇게 되면, a는 b에 의해 참조되고 있는 것인데, 이 때

b = 3; 으로 바뀐다면

a는 더 이상 참조되지 않으므로 가비지 콜렉션이 수행된다.

이 방법의 문제는 서로가 서로를 참조하게 되면 순환 참조가 되어 메모리가 해제되지 않고,

이에 따라 메모리 누수가 발생한다.

2. Mark and sweep

roots라는  오브젝트 집단을 가지고,

이 집단들에 대해 참조를 하거나, 참조를 당하지 않는 메모리들을 닿을 수 없는 메모리라고 하고

이들을  가비지 콜렉팅을 한다.

이 방법으로는 순환 참조의 문제를 해결할 수 있다.

store.js를 만든다.

//store.js의 내부

import Vuex from "vuex"; //vuex 라이브러리를 import한다

export default new Vuex.Store({

state: {}, //vue의 data와 비슷

mutations: {}, // vue의 computed와 비슷, 함수 이름은 대문자로 지어야한다.

getters: {}, // state를 수정할 때 사용, 동기적으로 하나씩 혹은 하나의 그룹을 바꾼다

actions: {} // 비동기를 사용할 때, 또는 여러 뮤테이션을 연달아 실행할 때

});

store은 여러개 만들 수도 있다.

Vuex는 데이터를 중앙에서 관리해주는 것이다.

React에서는 Redux가 비슷한 역할을 해준다.

Eventbus는 매쏘드나 함수의 중간 매개체 역할을 해준다.

$on으로 연결하고, $emit으로 그 함수 혹은 매쏘드를 실행시킨다.

일정한 시간 후에 함수를 실행시키는 SetTimeout 사용법

setTimeout(() => {

   할 일

}, 시간 );

참고로 시간은 1000이 1초이다.

따라서 6초 뒤에 콘솔 로그를 띄우는 코드를 짜보면

setTimeout(() => {

console.log("6second");

}, 6000);

이렇게 사용하면 된다.

**참고로 메모리 누수 방지를 위해서는

clearTimeout() 으로 없애줘야한다.

clearTimeout 사용법을 예를 들면

var timeout = setTimeout(() => {

console.log("6second");

}, 6000);

clearTimeout(timeout) ;

이런식으로 사용하면된다.

데이터베이스를 짜는데 고민이 많다,,

일단 비밀번호를 사용자가 추가했을 때, 이것을 관리자의 승인 이후에 보여주고 싶은데,

이것을 사용자가 입력한 DB와 보여주는 DB를 동일하게 둔 후에, boolean 변수로 사용자들에게 보여주냐 마냐를 결정할 것인가

아니면 DB를 다르게 두어서 검증 받은 내용만 옮겨줄 것인가가 고민이 된다.

그리고 primary key로 어떤 것을 넣을지도 고민이 되구,,,

현재 생각하는 DB는 이런 형태인데, 뭘 더 넣거나 빼야할지 고민이다.

사실 자료형도 고민이 된다,,, 위도나 경도는 소숫점 아래로 많이 내려가는데 

이에 해당하는 자료형이 적절하지 않아서 일단은 숫자가 아닌 문자로 넣었다.

DB 잘못 만들면 데이터 다시 다 넣어줘야하는데 걱정이 크다,,

현재 위치를 받아올 방법이 없으니 지금은 원래 위도와 경도 안 받는 DB는 사용자가 추가하는 용도로 두고

새로 만든 DB를 바탕으로 사용자에게 정보 제공해야겠다.

Vue에서는 객체나 배열 내부 정보를 바꿀 때 index로 바꾸게 되면 바뀌지 않는다.

data() {

return {

array: [["", "", ""], ["", "", ""], ["", "", ""]],

};

}

이렇게 존재할 때,

array[1][0]= "a";

이렇게 하면 data는 바뀌지만, 바뀐 내용이 화면에 나오지 않는다.

해결 방법은 2가지이다.

import Vue from "vue" 로 import한 뒤,

Vue.set(this.array[1], 0, "a");

이렇게 Vue의 set 매쏘드를 이용하면 된다.

혹은 import하지 않고

그냥 this.$set(this.array[1], 0, "a");

이렇게 해도 된다.

만약 3차원, 4차원 배열인 경우에는

set(array[3][1][2] , 0, "a") 

이렇게 마지막 인덱스만 2번째 인자로 받아주면 된다.

제대로는 아니지만 대충이라도 계획서를 그려봤다.

지도를 사용하느라 넣어봤는데, 구글 맵 키 등록하고, 가입하고 했는데

생각보다 api 사용법이 간단해서 역시 구글인가 싶었다.

현재 위치는 geolocation으로 받았다.

로컬 환경에서는 잘 돌아갔는데, 배포하니까 안돌아간다,,,

getcurrentposition no longer work on insecure origins 

이라는 문구가 뜨면서,,,

찾아보니까 보안문제라고 한다.

현재 위치를 받아오는 것은 보안 문제로 2015년 즈음부터 막혔다구한다,,,

https을 사용해야 가능하다고 한다,,,

이건 나중에 해결책을 찾아봐야겠다,,,

다행히 다른 건 해결했다,,

그 때문인지는 모르겠는데 위치 정확성이 너무 떨어진다,,

옵션으로 정확도 높히는 모드?로 했는데도 매우 낮다,, 1km 정도 오차 있는듯,,,

그리고 node js에서도 문제도 발생했는데

Cannot GET /stylesheets/style.css나

cannot get /html page 같은 문제가 발생했는데

로컬에서나 firebase나 netlify처럼 정적인 배포와 차이가 있는 것 같다..

지도나 위치 관련해서 api가 편하긴한데 언젠가 한 번 직접 만들어보고 싶다 ㅎㅎ

geoloaction을 사용하여 현재 위치를 잡았는데, 위치가 잘 안 잡혀서 정확도 높히려고 찾아봤다.

navigator.geolocation.getCurrentPosition(success, error); 

여기서 3번째 인자로

{ enableHighAccuracy: true, maximumAge: 30000, timeout: 27000 }

이 객체를 넣어주면 되는데, 중요한건 enableHighAccuracy: true로 정확도를 높혀주지만, 기기의 배터리를 더 많이 소모하게 할 수 있고, 응답 속도도 느리다. 

따라서 timeout 시간도 충분히 길게 설정해주는게 좋다.

결론적으로

navigator.geolocation.getCurrentPosition(success, error, {

enableHighAccuracy: true,

maximumAge: 30000,

timeout: 27000

});

이런식이 된다.

참고로 나는 이걸해도 정확도가 전혀 나아지지 않았다.

아마 와이파이로 위치를 잡아서 그 문제인 것 같다....

다른 방법을 찾아봐야겠다.