Bleeding edge

미니프로젝트에서 무조건 구현해야하는 과제가 JWT를 이용하여 로그인 SPA를 구현 두가지 조건을 준수해야한다. 오늘은, 이 두가지 조건중 JWT에 관한 것을 공부하였다. JWT? Json Web Token의 약자로 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰을 의미한다. JWT는 어디에 저장할까? 보안 관련 대책 없이 JWT를 아무 곳에나 저장을 한다는 것은 우리 고객 정보는 가져가도 상관없다는 의미나 다름 없다. 그렇기 때문에 JWT는 일반적으로 localStorage와 cookie에 저장한다. 1. Localstorage 장점 : 자동으로 request에 담기는 쿠키와는 다르게 헤더에 담기기 때문에 XSS가 뚫리지 않는 이상공격이 힘들다. 단점 : XSS에 취약하다. 공격자가 local..

페어프로그래밍 최종 회고 자신있게 이야기할 것 뻔뻔하게 발표할 것! (자신감이 필요하다) 대화를 할때 말이 안통하는이유는 맥락을 무시해서다. 내가짠 코드가 아닐지라도 알아보게 만들자 setnavState(!getNavState()) 가독성이 좋은 코드가 무조건 짧은코드는 아니다. 이것을 설명할 수 있어야 한다. 가독성을 위해서 변수에 담는것이 좋다면 담는 것이 좋다. 클린코드가 어려운 이유는 클린코드를 위한 조건을 조합하는 것이 어렵고 예외사항이 있기 때문에 어렵다. 클린코드란 설명할 수 있는 코드이다. 라우터 : 내가 어느 페이지로 가야할지를 관리하는 것이 라우터이다. SPA기준으로 페이지 이동은 root안에 있는 내용이 싹다 바뀌는 것을 페이지 이동이라고 한다. path가 달라지면 페이지 컴포넌트를 ..

페어프로그래밍에서 배운 것 Toggle side navigation 회고 처음에 요구 사항중에서, 검정화면이 아닌 흰화면인 경우, preload를 지우지 않았던 현상을 캐치를 못했습니다. addEventListener와 같은 비동기 매서드 같은 경우 다양한 케이스가 나올 수 있으니 여러 경우를 고려해야한다 라고 생각이 들었습니다 그리고, 브라우저의 시점에 따른 이벤트를 다루면서, 이를 정리해야겠다고 생각이 들었습니다. Tick Tac Toe 직접 이기는 경우를 계산해서 만들었는데, 요구사항 맞춰서 만드는 방법에 대해서 생각을 해였고, 계산이 필요하지 않다면, 메모리를 사용해서 해결하도록 만드는 코딩을 해야겠다고 생각했습니다. 그리고, some을 이용하여, 모든 조건중 한개가 성립하는 경우, every를 ..

컴포넌트의 역활 자신이 그릴 DOM스트링 만들기 컴포넌트는 자기가 어디에 그려질지 알 필요가 없다 컴포넌트는 자기가 그릴 DOM스트링만 부모 컴포넌트에게 전해주면 된다 이벤트핸들러 달아주기(선택) 이벤트가 발생할 요소를 그리는 컴포넌트가 직접 정보를 넘겨줘야한다 중복으로 달아주면 안된다 상태 만들고 관리하기 상태가 바뀌면 자동으로 렌더링해야 한다 DIff의 가장 중요 한것은 APP이 아래에 그려질 것을 알아야 한다. SPA는 AJax와 세트이다. 모든 컴포는트는 자기가 어디에 그려질지 모른다. 어플리케이션 파일만이 그 위치를안다 컴포넌트는 자신이 그려지는ㅁ 모습이라는정보를 기억한다. 이를 하려는 이유는 새로 그릴 때 처음부터 다시 모든걸 그리기때문에 개발이되었다. Proxy를 사용하면안되는 이유, get..

자바스크립트에서 많이 사용하는 안티 패턴 안티패턴이란? 실제 많이 사용되는 패턴이지만 비효율적이거나 비생산적인 패턴 자바스크립트 루프 [1,2,3].map(i => console.log(`Logged to console ${i} times`)) // log Logged to console 1 times Logged to console 2 times Logged to console 3 times map은 원래 위와 같은 용도로 사용하는 것이 아니라 const myArray = [1, 4, 9, 16]; const myMap = myArray.map(x => x * 2); console.log(myMap); // expected output: Array [2, 8, 18, 32] 다음과 같이 각 Array의..

Pair-Programming에서 배운 것 1. CustomEvent CustomEvent는 3가지의 단계를 통하여 사용할 수 있다. CustomEvent를 생성한다. const eventName = new CustomEvent('event-name', { detail: something //... detail을 통하여 이벤트의 내용이 전달된다. }) 어떤 이벤트 이름으로 어떤 일을 할지를 정한다. 1번에서 정의한 이벤트는 3번에서 정의할 dispatchEvent로 2번에서 정한 addEvenListener에 보낼 때 1번에서 보낸 내용을 이용하여 실행된다. addEventListener을 생성한다 $container.addEventListener('event-name', e => { console.lo..

오늘 Pair-Programming에서 배운 것 some, every 두 메서드는 boolean을 반환하는데, 여러 배열이 특정 조건을 만족하는지 체크하는 데 사용하였다 winCases.some(wincase => wincase.every(index => $gameBoard[index].textContent === player)); 둘을 굳이 비교하자면 some은 or(그 중에 한개가 성립하는가?) every는 and(모든 것이)와 유사하다. 둘다 Array.prototype.some, Array.prototype.every로 배열에 사용할 수 있다. scrollHeight 높이가 0인 element에서, scroll이 있었다면 되었을 높이가 scrollHeight이다. ul.style.height = ..

오늘 Pair-Programming에서 배운 것 1. Proxy Object 이전에 프록시 객체에 대해서 사용을 해본적이 있었으나, 이번에 사용하면서 느낀점이 더 많아졌기 때문에 프록시 객체에 대해 간단한 정리를 남기려고 한다. 1-1. Proxy..? 프록시를 한글로 번역하면 대리라는 뜻이다. 게임에서 대리로 한다 이 대리가 아니라 A에서 B로 갈 때 B에 접근하기전에 먼저 대리로 어떤 처리를 할 때 사용한다. 아마 현실에 프록시로 비유를 하면, 방송을 촬영한 후에 방통위를 거치면서, 영상이 필터 될 것이 필터되거나 편집되게 하는 과정이라 생각하면 좋을 것 같다. 1-2. Proxy in javascript 자바스크립트에서의 proxy는 핸들러의 종류와 같은 기능을 사용할 때 대신 이 기능을 사용하는 ..

오늘 Pair Programming에서 배운 것 문서에 link를 동적으로 붙이는 방법 document.head.insertAdjacentHTML('where', 'html string') 이 방법이 아닌 createElement를 이용하여 link를 다른곳에 append를 하는 방법을 사용한다면 3~4줄정도를 써야하지만 위의 방법을 이용하면 한줄이면 원하는 장소에 붙일 수 있다. at Array.prototype.at(n) 대괄호로 Array를 접근하는 것과 비슷한거 같다고 생각이 들 수도 있지만, at을 사용하면 음수를 이용하여 뒤에서 값을 접근할 수 있다. Array.from Array from을 사용하는 방법은 보통 Object인 자료를 Array로 변환할 때 많이 사용하였다. 오늘 캘린더를 구현..