깍돌이

1. 리액트를 다루는 기술  (책) - 김민준 저자

2. VSCode(에디터)

     -> 관련 플러그인

> ESLint // 문법 정리 *

> Relative Path // 상대 경로 작성 도구 

> Guides   // 들여쓰기 가이드 라인 

> Reactjs code snippets(Karypidis) // 리액트 관련 스니펫 모음 제작자 Charalampos Karypidis *

> React-beautify // 리액트 코드 정리 

3. Node.js with NPM (노드는 10버전)

> create-react-app 설치   -g 로 

4. git 

* 코드 스니펫이 뭔가 해서 찾아봤습니다.

js에서 

arr에는 forEach 로 가져올수 있는 것처럼

arr.forEach(function(item,index,arr){

}); 를 입력해야되는데

arr.f 엔터 치면 저 위에부분들이 조각처럼 가지고있다가 한번에 나오는 기능을 말합니다.

global 옵션으로 create-react-app 설치 

npm i -g create-react-app

터미널에 create-react-app basic-react

** basicReact 라고 했더니 

Could not create a project called  ''  because of npm naming restrictions 

** name can no longer contain capital letters

네;; 대문자를 사용 못한답니다.

그래서 소문자로 만 하셔야 됩니다.

basic-react로 변경 

입력 후 

cd basic-react

npm start 시

리액트 화면 확인

신나네요 리액트 할 생각에 

안녕하세요 알고리즘 공부를 시작하려고 합니다.

물론

자바스크립트를 기준으로 하려고합니다.  관련 서적으로 Introduction to algorithms 를 사긴 했는데 너무 수준이? 높다고 해야될까요 갑자기 사놓고 동공지진...이 왔네요  그래서 책은 가끔 눈으로만 읽고 

책을 읽기전에 기본적으로 볼려고 하는 To do List 를 뽑아봤어요  해당 To do list 는 어느 한 포스팅을 참고 하였구요

미디엄이라는 곳에서 사람들이 포스팅 하는 내용중 

// 자바스크립트에서의 알고리즘 

https://medium.com/siliconwat/algorithms-in-javascript-b0bed68f4038

에서 포스팅에 대한 내용을 하나씩 이해 하면서 적어 볼려고 해요 

유명한 알고리즘 문제에 대한 설명이 잘되어있어서 이부분에 대한 이해를 할거고 그 아래에 다른 내용들은

제가 따로 조사해서 포스팅 하려고합니다. 

회사일이 많아 빠르게 되진 않겠지만 시작이 반이잖아요 해보겠습니다.

유명한 알고리즘 문제 22선 

1. 문자열 반전(String Reversal)

2. 팰린드롬(Palindrome)

3. 정수 반전(Integer Reversal)

4. 피즈버즈 (Fizz Buzz)

5. 최대 문자(Max Character)

6. 철자 바꾸기(Anagrams)

7. 모음체크(Vowels)

8. 배열 묶음(Array Chunking)

9. 배열 반전(Reverse Array)

10. 문자 뒤집기(Reverse Words)

11. 문자비교 (Capitalization)

12. ?Caesar Cipher

13. 랜덤 노트 (Random Note)

14. Mean ,Median,and Mode 

15. Two Sum

16. Max Profit

17. Sieve of Eratosthenes

18. 피보나치(Fibonacci)

19. 메모이제이션 피보나치 (Memoized Fibonacci)

20. Staircase

21. Pyramid (피라미드)

22. Matrix Spiral 

자료구조 알고리즘 

( 도전 -> 1. MidPoint  2. Circular 3. From Tail 4. Trees)

1. 큐    2. 스택     3. 링크드리스트

정렬 알고리즘

1. 버블 정렬 2. 삽입정렬 3. 선택정렬 4. 퀵정렬 5. 합병 정렬 6. 카운팅 정렬

검색 알고리즘

1. 이진 검색 2. 이진 검색 트리

/ 분할 정복기법 , 동적프로그래밍, 그리디알고리즘

특정 태그에 대한 이벤트 받는 형식을 막고 싶을때

예를 들면

input#testEvents:checked+label {

/*  do thing */

} 

인데 do thing 에서 CSS3 애니메이션을 사용한다고 가정할때

ex)  transform: translateX(120%);

해당 애니메이션이 실행안되게 하고싶은데 CSS속성을 똑같이 하나 클롬을 떠서 (js)로 애니메이션만 제외하고 

이런건 너무 무식한 방법 같고 

찾다 보니 events를 받지 못하게 하는 방법이 있다고 해서 적용 해보았습니다.

답은 pointerEvents 

값으로는

auto

none

stroke /* SVG -only  */

fill  /* SVG -only  */

a[href="http://localhost"]{
       pointer-events:none;
}

document.querySelector("input#runTag").style.pointerEvents="none";

이벤트를 동작하지 않게 하는 방식입니다.

이외의 속성들을 SVG 온니 이므로 mdn 참조 바랍니다.

2018년 7월 25일 크롬 68 버전이 업데이트 되었습니다. (Stable)버전이죠

not Stable 버전인 Dev 버전은 지금 69.0.3497.12 for Windows, Mac and Linux라고 표기되어있네요

그래서! 오늘은 68버전에 뭐가 변경되어있나 확인해보려고 합니다.

우선

크롬 패치에 대한 로그 사이트입니다.

// 크롬 로그 사이트 69 버전이기 때문에 참고만 하시는게 좋을것 같습니다.

https://chromium.googlesource.com/chromium/src/+log/69.0.3493.3..69.0.3497.12?pretty=fuller&n=10000

우선 68버전의 공식 명칭은

Chrome 68.0.3440.75 이며 해당 에 대한 수정 사항은 위의 로그를 통해서 확인할수 있으며

Chrome 또는 Chromium 블로그 에서  68에 대한 기능 및 큰 변화들을 제공하기 떄문에 참고 하여도 좋을 것 같습니다.

1. HTTP Sites Marked as 'Not Secure'

대표적인 안건으로 되어있네요 SSL(Secure Socket Layer) 를 입히지 않은 사이트에 대해서는 Not Secure 마크를 붙이겠다 라는 거같습니다. 68버전 부터는 이제 안전하지 않은 사이트로 취급이 되겠네요 제 티스토리도 마찬가지...

크롬 블로그 내용 입니다.

'Chrome 68 에서는 모든 HTTP 페이지에 대한 Not Secure("안전하지않음") 이라는 마크를 붙일 겁니다. 그리고 이에 대한 해당 내용은 2월 8일 의 Google Chromium 및 ONline Security 블로그에 게시하여 이를 발표 하였습니다.'

'또한 Chrome에서 보안되지않음 (Not Secure) 경고 페이지를 보지 않기 위해서는 HTTPS로 마이그레이션 하는것이 좋습니다. HTTPS는 SEO,광고 수익 및 실적 영향등 문제를 해결해 줍니다.' 

라네요

이미 공표 된 패치였나보네요

** 업뎃 하니 나타납니다.

2. Security Fixed and Rewards

이외의 자잘한 보안 수정 관련 로그입니다. 약 42개의 보안 패치를 적용 하였으며 

// 해당 내용은 아래의 URL에서 보안 패치에 대한 내용을 읽을수 있습니다.

https://sites.google.com/a/chromium.org/dev/Home/chromium-security

여기까지는 Google Chrome 블로그에 게시된 내용이였으며

New in Chrome 68  로 게시된 개발자 사이트에서 변경된 점을 포스팅하려 합니다.

대표적인 카테고리 부터 보고 들어가자면

Add to Home Screen behavior

Page Lifecycle API

Payment Handler API

3가지가 있겠네요  해당 내용은 크롬 개발 도구창에 들어가면 나타납니다.

1. Add to Home Screen changes

정해진 웹사이트가 Chrome에서 지정한 추가 기준을 충족시에는 홈 화면에서 추가 배너가 나타나지 않습니다.

또는 사용자에게 언제 어떻게 프롬프트 창을 표시할지도 정할수 있습니다.

* 사용자에게 프롬프트 창을 표시하기 위해서는 beforeinstallprompt 이벤트를 리스너로 추가한 후에

버튼 또는 UI요소를 추가하여 설치 가능 여부를 나타낼수 있습니다.

// 프롬프트 코드 

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

해당 에서 ADD버튼을 클릭하게되면 beforeinstall 이벤트에서 prompt를 호출시 Chrome 에 홈 화면 추가 대화상자가 표시됩니다.

btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(handleInstall);
});

이에 대한 자세한 내용에 대해서는

사이트를 참조 바랍니다. 풀 코드가 있습니다.

// 홈 화면 배너 관련 

https://developers.google.com/web/updates/2018/06/a2hs-updates

2. Page Lifecycle API

페이지 라이프 사이클 관련 API 입니다. 이에 대한 해당 내용은 좀더 분석하고 따로 한번 더 포스팅 하도록 해야 될거 같아서 따로 하겠습니다.

러프하게 말씀드리자면

(이미지를 누르시면 원본으로..)

FROZEN -> HIDDEN 부분에 보시면 resume 과 freeze라는 개념이도입되었습니다. 

크롬 사이프 사이클 중 freeze -> resume -> freeze가 가능하게 되어있네요 무슨 의미인지는 모르겠지만 좀더 봐야겠네요

내용 전문입니다.

"사용자가 다수의 탭을 실행하게 되면 메모리,CPU,배터리 및 네트워크와 같은 중요한 리소스가 과도하게 발생할수 있기 때문에 사용자 환경은 매우 좋지 않습니다."

"만약에 사이트가 백그라운드에서 실행 중이면 시스템 리소스를 절약하기 위해서 사이트를 일시 중지 할수 있습니다.

새로운 Page LifeCycle API 를 사용하면 이러한 이벤트를 수신 및 응답이 가능합니다."

"예를 들면 잠시 동안 백그라운드에서 탭이있는 경우 브라우저를 해당 페이지에서 스크립트 실행을 일시 중단하여 리소스를 절약 할수 있습니다."

" 그전에 Freeze 이벤트를 실행하여 열려있는 IndexedDB 또는 네트워크 연결을 닫거나 저장하지 않은 보기 상태를 저장할 수 있습니다. 그 후 -> 사용자가 탭을 다시 초점 맞추면 다시 시작 이벤트가 발생하여 해체된 항목을 다시 초기화 할수 있습니다."

// 관련 freeze -> resume 코드 

const prepareForFreeze = () => {
  // Close any open IndexedDB connections.
  // Release any web locks.
  // Stop timers or polling.
};
const reInitializeApp = () => {
  // Restore IndexedDB connections.
  // Re-acquire any needed web locks.
  // Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);

이와관련 된 문서가 있습니다.

// Page Lifecycle API doc

https://developers.google.com/web/updates/2018/07/page-lifecycle-api

// Page Lifecycle 1 Spec

https://wicg.github.io/page-lifecycle/spec.html

// 해당 git hub

https://github.com/WICG/page-lifecycle

3. Payment Handler API

표준 방식의 결재를 받아들이는 결재 관련 요청 API 가 오픈되었습니다. 

결재 API 는 웹 기반 결재 응용 프로그램이 결재 환경에서 직접 결재 할수 있도록 용이하게 함으로 결재의 범위를 확장합니다.

크롬팀에서 이렇게 말하네요

"기존의 웹 에 결재 기능을 추가하는 것은 supportedMethod 등록 정보에 항목 추가하는 것 만큼 쉽습니다."

// 관련 결재 코드 

const request = new PaymentRequest([{
  // Your custom payment method identifier comes here
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

결재 를 처리할수 있는 서비스 워커(Service Worker) 가 설치되면 결재관련 UI가 나타나며 사용자는 결재를 할수 있습니다.

이와관련하여서 Eiji 는 훌륭한 내용을 담고 있습니다.

// Eiji URL 

https://developers.google.com/web/updates/2018/06/payment-handler-api

이번 내용은 너무 광범위해서 포스팅을 러프하게 가져오는 정도로는 애매한거 같네요 시간이 된다면 꼭 LifeCycle 관련은 한번 더 쓰려고 합니다.

감사합니다

안녕하세요 기존에 Windows 7  에서 

selenium-js를 통해서 네이버 자동 로그인을 구현해서 예제로 놓았었는데요

// 네이버 자동로그인 windows 7 Chrome 66 Selenium-JS 4.0.0alpha

http://ipex.tistory.com/entry/webUI-Naver-Login-seleniumJS-iframe-%EB%8C%80%EC%B2%98-%EB%B0%A9%EC%95%88?category=770641

// 네이버 자동로그인 windows 7 IE 11 Selenium-JS 4.0.0alpha

http://ipex.tistory.com/entry/webUI-Naver-Login-seleniumJS-iframe-%EB%8C%80%EC%B2%98-%EB%B0%A9%EC%95%88-IE%EB%B2%84%EC%A0%84?category=770641

// 네이버 변경 되는 로그인 페이지 URL

https://m.blog.naver.com/PostView.nhn?blogId=naver_diary&logNo=221320011665&proxyReferer=

네이버 로그인 페이지가 보안성 강화를 통해서 변경 된다고 합니다.

자동화의 단점이 이렇게 나타나네요 유지보수를 해야할 시점이 이렇게 빨리 찾아 오다니요

네이버 로그인 페이지가 바뀌는 것에 맞춰서 8월에 다시 예제를 작성해서 올리도록 하겠습니다.

감사합니다.

안녕하세요 이번에는 flex에서 

flex-wrap ( 줄 넘기기 ) 와  기존에 포스팅 하였던 flex-direction 과 flex-wrap 을 한꺼번에 제어하는

flex-flow ( 방향과 줄넘기기 ) 에 대해서 작성 하려고 합니다.

flex-wrap 

flex-wrap 은 컨테이너의 크기보다 아이템들의 크기가 늘어났을 때의 어떻게 동작할 것 인가에 대한 속성 지정입니다.

display: flex 인 flex에서는 flex-wrap으로 지정 합니다.

1. nowrap (Default)

flex-wrap을 지정하지 않은 경우는 기본이 nowrap 입니다. 그렇기 때문에 기본적으로 nowrap 은 위와같이 동작합니다

박스안에 초록 아이템들이 위와같이 있는 상태에서 앞으로 더 추가 될 박스가 있을 경우  점선 박스의 위치로 붙게 됩니다.

- 결과 

2. wrap

wrap으로 지정된 상태에서 노란 박스의 경우 width 가 고정되어있을 시 아래로 줄을 넘기게 됩니다.

- 결과 화면

height 를 고정으로 놓았을 경우의 wrap 결과 화면

3. wrap - reverse

위의 wrap 의 반대 로 줄을 넘기게 된다는 의미의 reverse입니다. wrap의 경우는 우측 아래로 넘기기 때문에

reverse는 좌측 위로 넘기게 됩니다.

- 결과 화면

height 를 고정으로 놓았을 시의 결과 화면

flex-flow

flex-flow는 flex-direction || flex-wrap 형태로 작성되어지는 속성이며

기본값으로는 row 와 nowrap 을 가집니다.

맨위의 nowrap 이 direction 이 row이기 때문에

해당 html 에서 flex-direction 과 flex-wrap 을 제거하고

flex-flow : row nowrap; 으로 작성 하여 테스트 해보았습니다.

flow-flow : flex-direction flex-wrap 형태만 기억하면 되겠네요

flex-flow: row nowrap;

의 형태로 사용됩니다.

- 결과 화면

피글렛

★★★★☆

메뉴 : 흑돼지돈가스 * 2 ( 18,000원)  +흑돼지 큐브 스테이크(9,000원) + 흑돼지 강정(1/2인분 7,000원)

+ 음료수 * 2 (4,000원) + 감자튀김 추가 (1,000원)

total : 39,000원

후기 

깍돌이 : 평범한 돈가스 같은데 일반 적인것보다 두껍당

깍돌이 장 : 돈까스가 젤 맛  돈까스 >> 강정 > 큐브스테이크 (너무 퍽퍽함)

깍돌이 양 : 

깍돌이 길 : 큐브스테이크는 야채랑 먹어야한다.

안녕하세요 flexBox Model 중

flex-direction( 플렉스 - 방향 ) 에 대해서 작성 하려고 합니다. ( 테스트한 전체 코드는 포스팅 하단에 있습니다. )

flex-direction

flex-direction 이라 함은 컨테이너 내부의 아이템들이 만들어지는 방향을 뜻 합니다.

안의 초록 박스가 Items (이후에도 계속 해당 방식으로 작성 하려고합니다. )

겉의 빨간 줄? 로 덮여진 박스가 Container 라고 보시면 됩니다.

1.  row (default)

좌 -> 우로 만들어지는 방식이며

<container>

<box>

<box>

<box>

<box>

</container> 상태에서 <box>태그를 하나 더 추가한다면 점선으로 되어있는 쪽에 추가가 될 것입니다.

- 결과 화면

2. row-reverse

row의 리버스 형태로 우 -> 좌로 만들어지는 형태입니다. 아이템을 추가할때 마다 우측에서 붙습니다. 

- 결과 화면

3. column

위 에서 아래로 붙습니다. 새로운 아이템 추가시 위 부터 차례로 붙습니다.

- 결과 화면

4. column-reverse

column 의 리버스 형태로 아래에서 위로 생성 됩니다. 새롭게 생성되는 아이템은 가장 최상단 부터 생성됩니다.

- 결과 화면 

확인 코드 (html) 그대로 복붙 하셔서 test.html 로 만들면 됩니다.!

<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
      <title> CSS3 FlexBox </title>
<head>
<style>
/* padding 및 border를 width 와 height 에 포함한다.  margin X  > box-sizing:border-box */
*{
      box-sizing:border-box;
      
}
html,body{
   display:-webkit-flex;
   display:flex;

   flex-wrap:wrap;
   -webkit-flex-wrap:wrap;
   
   width:100%;
   height:100%;
   padding:0;
   margin:0;
}

header{
   display:flex;
   flex-direction:row;
   width:100%;
   height:80px;
   background-color:#DAD9FF;
   text-align:center;
}

div#bodyLayout{
   display:flex;
   
   width:100%;
   height:calc(100% - 180px);
}

nav {
   display:flex;
   width:10%;
   height:100%;
   background-color:#4641D9;
   color:white;
}

article{
   display:flex;
   flex-direction:column;
   width:90%;
   height:calc(100%);
   background-color:#FFD9EC;
   border : solid 3px black;
   padding: 15px;
   overflow-y:auto;
}

article .block{
      display:flex;
      flex-direction:row;
      align-items :center;
      border : solid 2px #FF007F;
      padding :2px;
      width:100%;
      min-height:80px;
      
      overflow-x:auto;
      overflow-y:hidden;      
      margin-bottom:3px;
    
      font-size:12px;
      font-weight:700;
 
}
article .columnblock{
      display:flex;
      flex-direction:row;
      align-items :center;
      border : solid 2px #FF007F;
      padding :2px;
      width:100%;
      min-height:200px;
      
      overflow-x:auto;
      overflow-y:hidden;
      margin-bottom:3px;
      
      font-size:12px;
      font-weight:700;




}
article span{
      line-height: 30px; 
      display:inline-block;
      vertical-align:middle;
      background-color:aquamarine;
      text-align:center;
      height:30px;
      width:30px;
      margin:5px;
    

}
footer{
   width:100%;
   height:100px;
   background-color:orange;
}

</style>
   <body>
         <header>
               header 태그입니다.   
            <div style="display:flex;width:250px;height:50px; border : solid 2px #FF007F;
            align-items:center;align-self:center;justify-content:center;margin:0px 50px 0px 0px;
            font-size:10px;font-weight:600;">
                  flex-Container 테스트 
            </div>
            <div style="display:flex;width:250px;height:50px; border : solid 2px #E1FF36;
            align-items:center;align-self:center;justify-content:center;
            font-size:10px;font-weight:600;">
                  flex-Items 테스트 
            </div>
         </header>
         <div id="bodyLayout">
            <nav>
               <ul>
                  <li>nav Tag</li>
               </ul>
            </nav>
            
            <article>
                  <div class="block">
                        <div style="display:flex">
                              <span></span><span></span><span></span><span></span>
                        </div>            
                        display:flex
                  </div>

                  <div class="block">
                             <div style="display:flex;flex-direction:row">
                               <span>A</span><span>B</span><span>C</span><span>D</span>
                             </div>         
                        display:flex </br>
                        flex-direction  : row (default)   
                  </div>
                  
                
                  <div class="block">
                              <div style="display:flex;flex-direction:row-reverse">
                               <span>A</span><span>B</span><span>C</span><span>D</span>
                              </div>       
                              display:flex</br>
                              flex-direction  : row-reverse</br>     
                  </div>


                  <div class="columnblock">
                        <div style="display:flex;flex-direction:column">
                         <span>A</span><span>B</span><span>C</span><span>D</span>
                        </div>       
                        display:flex</br>
                        flex-direction  : column</br>     
                  </div>

                  <div class="columnblock">
                        <div style="display:flex;flex-direction:column-reverse">
                         <span>A</span><span>B</span><span>C</span><span>D</span>
                        </div>       
                        display:flex</br>
                        flex-direction  : column-reverse</br>     
                  </div>

            </article>
         </div>
      
         <footer>
                  footer 입니다.
         </footer>
      <script>
         window.addEventListener('load',function(){
                console.warn('onLoad flexBox Test')
         });   
         
         window.addEventListener('unload',function(){
                 alert("unLoad flexBox Test");
         });   
         /*
            load = 페이지를 전부 다 읽어 들인 후 발생
            unload = 페이지로부터 빠져나갈때 빨생  
            
            
         */
   
      </script>

   </body>
</html>

윤밀원

★★★★★

메뉴 : 칼국수 (9,000원) + 비빔 막국수 (9,000원)

total : 18,000원

후기 

깍돌이 : 면에 장조림이 들어가있는데 너무 밑반찬도 그렇고 맛이 좋다

깍순이 : 맛있고 특이한 칼국수

펠리스 산쵸

★★★★★

메뉴 : 펠리스산쵸 화이타 (38,000원) + 맥주 500 *2 (8,000원)

total : 46,000원

후기 

깍돌이 : 진짜 하나도 빠짐없이 다 맛있다. 둘이먹기엔 양이 많으니 한 3~4명이 적당할거같당

깍순이 : 둘이 먹기는 많아용