프론트엔드 정복하기

프로그래밍 언어에서 >,

로그아웃 버튼을 2번째(더블클릭 X) 눌렀을 때 성공했다. 로그를 확인하니 1번째 눌렀을 때 OPTIONS 메소드, 두번째 눌렀을 때 OPTIONS, GET 메소드로 요청되었다. OPTIONS란 웹서버에서 지원되는 메소드의 종류를 확인할 경우 사용됐다. 첫번째 클릭 시 get 메소드로 요청하기 전 options 메소드만 실행된 것이다. 로그아웃 버튼을 클릭했을 때 메인페이지로 이동하는 것까지 되었으나 로그아웃 함수가 실행 되지 않는 것이 이상했다. 어떻게 메인페이지로 이동할 수 있었나 확인해봤다. 로그아웃버튼이 a태그로 되어있었고, href 속성으로 인해 이동할 수 있었다. 로그아웃 함수가 실행되기 전에 href 속성때문에 페이지 이동이 발생했다는 것을 캐치했다. button태그로 바꾸니 해결됐다. **..

배포 후 로그인, 로그아웃이 되지 않았다. 분석한 결과, 로그인 로그아웃 기능은 작동하나, 이후 auth 체크가 말썽이었다. 따라서 헤더부분에 로그인상태, 로그아웃 상태가 반영되지 않았다. (예) 로그인 시 마이페이지 보여지기) http, https 환경에서 보안때문에 쿠키 기능이 작동되기 어렵다는 것을 알게됐고 세션방식으로 변경했다. 그러나 세션도 쿠키 기반이었기 때문에 여전히 문제였다. (쿠키를 기반으로 하나 사용자 정보 파일을 브라우저에 저장하지 않고 서버측에서 관리한다는 차이점) session의 sid가 (서버(웹)는 접근한 클라이언트(사용자)에게 response-header field인 set-cookie 값으로 클라이언트 식별자인 session-id(임의의 긴 문자열)를 발행(응답)한다.) 생..

IE에서 에러메세지 : tui-chart 개체가 'assign' 속성이나 메서드를 지원하지 않습니다. * 원인 Object.assign 등 IE에서 지원하지 않는 EC6 문법이 tui-chart 에서 사용되기 때문. assign 을 * 해결 해당 EC6 문법 지원해주는 babel polyfill 을 tui-chart 불러오기 전에 호출해주면 됨. ( 아래 구문을 public의 index.html에 삽입하였음) 참고 okchangwon.tistory.com/3

** 브라우저 내장 객체로 함수, 정규식 보다는 아래 메소드를 쓰는 것을 추천한다. Intl.NumberFormat const number = 123456.789; console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number)); developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat 함수 function comma(num){ var len, point, str; num = num + ""; point = num.length % 3 ; len = num.length; str = num.subs..

1. route를 만들 때 /video/:videoId 2. List에서 3. 디테일페이지에서 const variable = props.match.params.videoId ; (주소창에서 videoId로 입력된 id를 가져올 수 있음.) axios로 variable을 보낸다. 해당 정보들을 가져온다.