하고싶은대로##

웹을 만들다보면, onFocus, onBlur, onClick을 태그에 옵션에 주어 많이 사용한다.

이 옵션들을 사용할 때 문제가 발생했는데, 순서의 문제가 발생했다.

나 같은 경우, 검색창을 만드는데, 검색창을 클릭, 즉 Focus를 넣었을 때, 추천 검색어가 밑에 주르륵 뜨도록 하고 싶었다.

그리고 검색창에 Focus가 사라졌거나, 추천 검색어를 클릭했을때, 추천 검색어 창이 사라지도록 하고 싶었다.

검색창에 Focus가 사라졌을때는, 검색창이라는 input 박스 이외에 다른 곳을 클릭했을때를 말한다.

이런 처리는 onBlur을 사용하여 해결할 수 있다.

onFocusOut이라는 옵션도 있지만, 이 옵션은 styled component에서 작동을 하지 않길래 onBlur을 사용했다...나중에 원인을 알아봐야하겠지만..

어쨌든 이럴때 문제가 있었다.

onBlur이 onClick보다 먼저 작동하는 것이다.

무슨 말이냐면, 추천 검색어를 클릭하려고 하는 순간, 검색창에서 Focus는 사라지고, 추천 검색어 창이 사라져서 클릭이 안되는 것이다!!

이 문제를 해결하기 위해, onBlur에 함수에 시간 지연을 넣어서 해결할까, 아니면 boolean 변수를 추가할까 고민을 했는데,

더 나은 방법이 있었다.

바로  onMouseDown이라는 옵션을 사용하는 것!

마우스 클릭을 했을때! 그러니까 마우스 버튼을 눌렀을때 작동하는 옵션인데,

이 옵션은 다행히 onBlur보다 먼저 작동하여 내가 겪는 문제를 해결할 수 있었다.

JavaScript는 브라우저에 컴파일된다.

그 말은 즉 따로 IDE를 설치 안해도 코딩이 가능하다는 것이다!

물론 가장 좋은 것은 좋은 IDE를 사용하여 코딩하는 것이지만,

JavaScript 공부하다가 간단하게 문법이 맞나 틀리나? 확인을 해보려고

귀찮게 IDE키고, 컴파일을 해야한다.

이럴 때 간단하고 빠르게 코딩하기 좋은 방법을 소개해드리려한다.

방법은 간단하다

f12 버튼을 누르거나, 마우스 우클릭 후 검사 버튼을 클릭한다.

그럼 웹 개발자모드가 화면에 나타난다.

여기서 오른쪽 위에 Console 탭으로 이동!

그러면 콘솔창이 깜빡깜빡 거린다.

여기서 간단하게 코딩이 가능하다!

예를 들어 상수 값이 변경 가능한가?가 궁금하면

이렇게 

const a = 3

a = 4 

코드를 입력했다.

그랬더니 상수의 값을 변경하려고해서 에러가 난다.

이렇게 문법적 오류도 잡아주고, 여기서 console.log로 확인도 가능하다.

이렇게 간단하게 JavaScript 코딩이 가능하다.

물론 복잡한 코딩은 좀 힘들 수 있겠지만, 간단한 것들은 이렇게 확인 가능하니,

자주 활용하면 좋을 것 같다 ㅎㅎ

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

});

이런식이 된다.

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

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

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

배포 = deploy , deploying

여러개 = multiple  ex) 여러 인자 = mulitple arguement

수정 = modify

코드를 설명하자면 단어 여러개(n개)를 받은 후

단어 길이가 짧고, 길이가 같다면 단어를 사전 순으로 나열하였다.

그리고 중복되는 단어는 생략하였다.

#include<iostream>

#include<cstdio>

#include<string>

#include<algorithm>

#include<vector>

#include<utility>

using namespace std;

int main(void) {

int n;

cin >> n;

vector<pair<int,string>> v;

for(int i=0;i<n;i++) {

string s;

cin >> s;

int l = s.length();

v.push_back(make_pair(l,s));

}

sort(v.begin(), v.end());

for (int i = 0; i < n; i++) {

if (i>0&&v[i].second == v[i - 1].second)

continue;

else

printf("%s\n", v[i].second.c_str());    // cout << v[i].second << endl과 같은 의미

}

return 0;

}

c_str()을 끝에 붙여줘야한다

#include<iostream>

using namespace std;

int main(void) {

int T;

cin.tie(NULL);

ios_base::sync_with_stdio(false);

cin >> T;

while (T--) {

int a, b;

cin >> a >> b;

cout << a + b << "\n";

}

return 0;

}

코드에 이 두 문장 추가

cin.tie(NULL);

ios_base::sync_with_stdio(false);

줄바꿈은 endl이 아닌 "\n" 사용하면 좋다. endl을 사용하면 버퍼를 비우고, 그 오버헤드는 생각보다 크다!

7.20

pair에서는

#include<pair>

#include<queue>

queue<pair<int,int>> a;

a.push(make_pair(1,2))를 하면 1과2를 넣을 수 있고,

a.front().first 로 1에 접근

a.front().second 로 2에 접근 가능하다.

tuple은 pair와 다르게 first와 second로 접근하지 못한다.

tuple을 사용할 때 접근법은

#include<tuple>

#include<queue>

일단, queue(큐)와 tuple을 이용하니 두 헤더를 넣어준 후

queue<tuple<int, int, int>> q;

q.push(make_tuple(a, b, c)); 이라고 하면  queue에 a,b,c라는 int가 들어가는데,

이때 각각 접근하려면

a는 get<0>(q.front());

b는 get<1>(q.front());

c는 get<2>(q.front());

으로 접근 가능하다.

7.20

putty에서 gcc쓸때 gg=G로 인덴트하는게 편해서 비주얼도 되는지 찾아봤다.

1. 인덴트 하고자 하는 부분을 선택한 후(ctrl+A로 전체 지정하는게 편하다) 

2. alt+F8 누르면 된다...

이게 안된다면 

1. 인덴트 하고자 하는 부분을 선택한 후(ctrl+A로 전체 지정하는게 편하다) 

2. (ctrl+k) 

3. (ctrl + f)