Web Development (38) 썸네일형 리스트형 [Django] JWT 개념 및 사용법 (djangorestframework-simplejwt) 개념 JWT는 JSON Web Token을 줄인 말로 인증 시스템이다. JWT를 사용함으로 서버는 유저의 세션을 유지할 필요가 없기 때문에 서버 자원을 아낄 수 있게 된다. JWT는 access token과 refresh token을 가지고 있다. access token은 잠시동안만 살아있습니다. 기본값은 5분이고 커스터마이징이 가능하다. refresh token은 조금 더 긴 24시간동안 살아있고 역시 커스터마이징이 가능하다. 토큰이 만료가 되면 당연히 다시 로그인을 해야한다. 구성 JWT는 세 부분으로 구성되어 있다 header.payload.signature signature signature에는 header(base64) + payload(base64) + SECRET_KEY로 구성되어 있다. S.. [Web] 토큰(Token) 기반 인증의 개념 및 장점 토큰(Token) 기반 인증은 모던 웹서비스에서 정말 많이 사용되고 있는 방법이며, API 를 사용하는 웹서비스를 개발한다면, 토큰을 사용하여 유저들의 인증작업을 처리하는것이 가장 좋은 방법이다. 과거 서버 기반 인증의 한계 기존의 서버 기반 인증 시스템은 유저들의 정보를 서버측(메모리/디스크/데이터 베이스 시스템)에서 기억하고 있어야 한다. 하지만, 웹/ 모바일 어플리케이션이 부흥하게 되면서 위 방식의 인증 시스템은 아래와 같은 문제점이 발생했다. 세션 유저가 인증을 할 때, 서버는 이 기록을 서버에 저장을 해야하며, 이를 세션 이라고 부른다. 대부분의 경우엔 메모리에 저장하게 되는데, 만약 로그인 중인 유저의 수가 늘어난다면 서버의 램이 과부화되는 현상이 발생한다. 이를 피하기 위해서, 세션을 데이터.. [Django] app폴더 서브폴더 안으로 이동시키기 1. app 폴더 서브폴더 안으로 이동 1) app 초기 생성부터, 서브 폴더 안에서 시작하고 싶은 경우 아래 명령문과 같이 서브 폴더 내 만들고자 하는 앱 이름의 폴더를 생성한뒤, python manage.py startapp 명령어로 앱을 서브 폴더 내 앱 폴더의 위치에서 생성하겠다는 선언을 한다. mkdir / python manage.py startapp / 예시 (myapp이라는 앱을 apps 폴더 내 생성) mkdir apps/myapp python manage.py startapp myapp apps/myapp 2) 이미 app폴더가 있으며, 이동만 시키고 싶은 경우 이 경우에는 app 폴더를 서브 폴더 안으로 이동시킨 후, 다음 단계를 진행한다. 2. 앱 폴더 내 apps.py의 name을.. Jquery 의존성 해결하기 (Jquery to Vanilla JS) Jquery 의존성을 해결해야 하는 이유 jQuery는 DOM 처리 및 이벤트를 위한 코드 개발을 매우 간편하게 작성할 수 있는 javascript 라이브러리이다. 반면, 외부 라이브러리를 사용하지 않거나 최소한으로 사용하여 작성한 자바스크립트 코드를 Vanilla JavaScript라고 하며, 다른 플랫폼보다도 오래되었음에도 불구하고 꾸준히 업데이트 되어 온 프레임워크이다. 다른 프레임워크나 jQuery 보다도 압도적으로 빠르고(jQuery는 순수 Javscript(Vanilla JS) 대비 최대 10배 정도의 속도차이가 발생) 어떤 라이브러리나 프레임워크를 사용하더라도 작동과 크로스 브라우징이 잘 되는 큰 장점이 있다. 용량도 매우 가벼워서 압축을 하는 경우 압축을 하지 않은 경우보다 용량이 더 나가.. [HTML] tabindex 속성 tabindex란? Tab 키를 사용해 Focus할 수 있는 순서를 지정하는 속성 tabindex 속성을 통해 focus가 될 수 있는 요소를 만들 수 있다 한 페이지에서 하나의 포커스만 가능 값으로는 정수를 지정할 수 있으며, 수에 따라 결과가 달라진다. 음의 정숫값(보통 tabindex="-1") : 연속 키보드 탐색으로 접근할 수는 없으나, JavaScript나 시각적(마우스 클릭)으로는 포커스 가능함 tabindex="0" : 연속 키보드 탐색으로 요소에 접근할 수 있으며 문서 소스 코드의 순서에 따른다는 것을 나타냄, 양의 정숫값을 가진 요소가 존재할 경우 순서는 그 이후가 됨 양의 정숫값은 요소를 연속 키보드 탐색으로 접근할 수 있으며, 그 순서는 해당 값으로 지정하겠다는 것을 뜻. 즉, ta.. [VS Code] HTML 초기 기본 구조 자동 완성 방법 첫 html 파일 화면에서 !를 누른 후, tab키를 눌러 자동완성을 시키면 아래와 같이 html 파일 작성에 필요한 기본 구조가 자동적으로 작성된다 [CSS] 브라우저 자체 CSS 초기화 방법 (크로스브라우징 이슈 관련) 직접적으로 CSS를 입력하지 않았음에도 사용하는 브라우저 내부적으로 html 코드를 해석하기 위해 사용되는 자체 CSS 스타일이 있을 수 있다. 이를 반영해서 프론트엔드를 개발할 경우, 여러 브라우저에서 서로 다른 화면이 출력되는 크로싱브라우저 이슈가 발생할 수 있기 때문에 각 브라우저별 기본 CSS를 초기화해주는 작업이 필요하다. 아래 링크에서 reset.min.css 파일의 HTML link 태그를 복사해 head에 붙여넣어준다. jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all.. [Frontend] 프론트엔드 개발에 유용한 VS code Extensions 지저분한 Indentation 정리하기 (Beautify) 1) VS code Extension인 Beautify의 명령어 HookyQR.beautify를 단축키(ex) alt+cmd+l) 설정 2) 정리하고 싶은 코드를 드래그한 후, 단축키 눌러 명령어 부르기 자동으로 HTML 태그 변경하기 (Auto Rename Tag) 시작 태그를 변경할 경우, 마지막 태그도 자동으로 동일하게 변환해주는 VS code Extenstion HTML 파일을 화면으로 출력해서 보여주기 개발을 위해 임시로 로컬 서버를 오픈해 HTML 파일을 화면으로 출력해서 보여주는 VS code Extension 이전 1 2 3 4 5 다음
