Bleeding edge

어제까지 카카오 api를 이용하여 html위에 지도를 그렸다면, 오늘은 카카오 api를 동적으로 그리려고 시도를 하였다. 문제는.. currentStyle, kakao에 대한 에러가 나를 맞이했다. 저 위에 사진 두개를 제외하고도 new kakao.maps.Map() is not a constructor와 같은 에러가 있었다. kakao api는 로드되었을 때 id가 map에 있는 부분에 그림을 그린다. 이것을 해결하기 위해 카카오 맵이 그려질 컨테이너 밖이 그려진후 시도를 하였지만 말짱 도루묵이었다. 이에 대한 해결법은 '//dapi.kakao.com/v2/maps/sdk.js?appkey=autoload=false'; 다음과같이 api를 호출하는 부분에서 autoload를 false를 string을 ..

요번주 화요일부터 미니프로젝트를 진행했는데, 자꾸 git add를 할 때마다 LF로 바꾸라는 이야기가 나왔다. 오늘 전체적인 CSS 수정을 위하여 다른 사람들과 코드를 merge를 하는 도중에 eslint에서 많은 빨간줄(eslint가 봤을 때 문제가 있다고 생각하는 것)이 나왔었는데, 원인은 위에서 이야기한 LF와 CRLF에 대한 문제였다. 오늘은 LF와 CRLF의 차이가 무엇이고 어떻게 해결하는지 알아볼 것이다. LF? 아래 줄로 이동 하는 것이 Line Feed(LF) CR? 쪽 끝으로 밀어 주는 것이 Carrige Return(CR) CRLF는 이둘을 더한 (CR + LF)이다. 두가지의 선택지가 있다면… LF CRLF 왜 다른 컴퓨터마다 다르게 나올까? Linux와 같은 유닉스 계열은 LF, W..

오늘 해결한 문제 : "/" 주소가 아닌 "/login"과 같은 주소로 라우팅을 express 없이 시도를 하였는데, /login으로 접근할 때 index.html로도 접근을 할 수 없기 때문에 어떠한 자바스크립트 파일도 로드가 되지 않기 때문에 404 에러가 나왔다. 이를 해결하기 위해 express를 이용하여 "/" 페이지가 아닌 페이지에 접근하여도 지정한 컴포넌트 파일이 있으면 그 파일이 로드되도록 수정하였다 128.1.1과 localhost는 다른 값으로 인지하여 api가 오작동을 일으킨다(현재 ip보다는 본인의 ip를 루프백 할 수 있는 localhost를 사용하자) 아직 해결하지 못한 과제: axios 에러 npm install axios 후 import axios from ‘axios’ Un..

미니프로젝트에서 무조건 구현해야하는 과제가 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..