NICE SUGI

드롭다운에서 로그아웃을 눌러보자 ! 로그아웃 누르면 1. 저장된 토큰을 삭제 시키며 정상 로그아웃 처리 2. 로그인 화면으로 이동 console.log를 사용해서 로그아웃 버튼이 잘 작동되는지는 확인하고 로그아웃의 알람이나 로그인화면으로 이동하는 것 까진 잘 되었으나, 나는 저 !!! 토큰이 삭제가 됐는지 안됐는지 알 수가 없었다. 내 실력으로 한번에 될 것 같지 않았는데, 한번에 되니까 너무 의심스럽더라. 간단하게 토큰이 생성되었는지 삭제되었는지 알 수 있는 방법을 알 게 되어 공유해봄 ! 우선, 로그인시 토큰이 발생되는지 안되는지를 확인하는 법부터 알아보자. 개발자 도구 > Application > Cookies > 로컬PC 누른 상태에서 로그인을 해보자. 그렇다면 아래의 영상처럼 없었다가 토큰이 생..

드롭다운 작동 드롭다운을 바닐라 코드로 만들어봄 ! if문과 show, hide를 사용할 줄 안다면 누구나 만들 수 있다. 하지만 나는 어제가 되어서야 정확하게 만들 수 있게 됐다. 구현하지 않음 히스토리 내역 링크 연결(저장,설정,계정 변환) 클릭시 아이콘 색 변화 코딩하면서 어려웠던 점 아이콘 클릭 시, 상단 아이콘'들'이 위로 올라가는 현상 : 상단 아이콘과 히스토리 부분의 태그가 둘 다 태그길래 히스토리 태그를 에서 로 바꿈 히스토리 드롭다운이 숨겨져있지 않고 처음부터 보여져있는 현상 : 아무리 display / visibility / opacity 를 바꿔봐도 상태가 변화가 없었다. 개발자 도구를 이용해 히스토리 드롭다운을 클릭했을때, 작은 삼각형과 네모가 한번에 묶여져 있는 태그가 없었기 때문..

인증에서 사용자가 자격 증명을 사용하여 성공적으로 로그인하면 JWT가 반환됨 JWT는 권한 부여와 정보 교환할 때 사용함 보안 문제를 방지하기 위해 세심한 주의가 필요함 -토큰을 필요 이상으로 오래 보관해서는 안 됨 ! -민감한 세션 데이터(서버에 저장되는)를 브라우저 저장소에 저장해서는 안 됨 ! 구성 헤더 JWT 토큰 유형 HMAC SHA256 or RSA 같은 서명 알고리즘 { "alg": "HS256",#알고리즘 "typ": "JWT"#토큰 } 유효 탑재량 : 클레임을 포함하는 페이로드 - 클레임은 사용자 및 추가 데이터에 대한 설명으로, 이름은 단 3자 ! - 페이로드는 클레임을 인코딩하는 것 등록된 클레임 : 미리 정의된 클레임 집합 ; iss, exp, sub, aud 등 공개 클레임 : 사..

HTTP의 비연결성 및 무상태성 특징을 보완한 기술 : 쿠키와 세션 비연결성 : HTT는 요청에 대한 응답을 처리하게 되면 연결을 끊어버림 무상태성 : 연결이 끊기면 이전의 상태 정보 및 현재 통신 상태가 남아있지 않음 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각 브라우저는 데이터 조각을 저장해 놓았다가, 동일한 서버에 재 요청시 저장된 데이터를 함께 전송. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용 결과적으로 사용자의 로그인 상태를 유지할 수 있음 !! 쿠키의 목적 세 가지 1. 세션 관리 : 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보관리 2. 개인화 : 사용자 선호, 테마 등의 세팅 3. 트래킹 : ..

Jinja 단순한 텍스트 파일로 모든 텍스트 기반 형식을 생성할 수 있음 파일 확장자에 관계없이 모든 파일을 템플릿으로 로드할 수 있음 템플릿을 식별하기 좋은 방법은 templates ! 확장명에 관계없이 폴더에 있는 것. 대신 꼭 이름은 templates 로 ! - 템플릿 로드하는 법 from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_templates("index.html") - 기본 구분 기호 {% ... %} for 문 {{ ... }} 템플릿 출력으로 인쇄할 표현식의 경우 {# ... #} 템플릿 출력에 포함되지 않은 주석의 경우 # ... ## 라인문 - 기..

0. 타임 어택 테스트, 첫번째 실패했으니, 같은 시간동안 같은 내용 재시도 + 코드리뷰 1. 얘네는 뭐길래 기호에 쌓여있는지? {%%} {% if %} {% elif %} {% else %} {% endif %} 2. 비밀번호 암호화에 있어서 두 가지의 차이점? bcrypt vs SHA256 3. 토큰은 무엇이고, 발행하는 이유? 4. 쿠키 ? 세션? JWT? 5. utcnow 6. if문 for문 try문의 차이점 7. API 요청시 data 처리방식이 딕셔너리형태를 띄우는 것도 있고, 변수를 선언해주는것도 있고, 직접 아이디값을 부르는것도 있는지???? 질문도 제대로 못하는 지경이지만, 어쨌던 data 방식에 대해 8. HTTP 에러코드 9. 페이로드 10. 프론트엔드 > 모달을 띄울 때 정가운데가..

회원가입 중 ! 정보 입력 후 가입해봅시당. 가입이 되었으면 데이터가 잘 저장되었는지 확인해봅시당. 현재 페이지의 회원가입에 필요한 정보는 이메일 또는 핸드폰 번호 | 이름 | 아이디 | 비밀번호 가 필요하다 이름, 아이디, 비밀번호는 조건문 사용없이 데이터에 저장이 가능하지만, 이메일 또는 핸드폰 번호는 택 1이라는 조건이 있어서 while을 사용하였음 우선 while문을 사용하기 이전에 이메일 과 핸드폰번호의 전역 변수를 만들어주었고 if문 사용을 위해 변수는 공란처리를 해주었다. 간단하게 사용한 함수를 설명하자면, contact_receive : 브라우저에서 이메일 또는 핸드폰 번호를 입력해 사용자가 요청한 데이터 변수. while True: 내용이 true일 경우 1. contact_receive..

회원가입 화면 현재 5월 5일 13시 20분 Git update. 팀원 중 하나가 이전 팀프로젝트의 별에 대한 컨셉을 이어가면 좋겠다는 의견을 내서 mov를 배경에 깔려다가 실패. 아쉬운대로 오로라 느낌이 나게 그라디언트 효과를 줌. 요즘에는 색조합표가 있어서 찾으면 금방 나와서 만들기가 쉬움 이제 점심 먹고 DB, API 를 공부를 해야한당.. Js, jQuery는 그 다음 ! - 색상을 고를때 참고하면 좋을 링크- #ffffff - Google 검색 HEX, sRGB : #FFFFFF, AdobeRGB : #FFFEFF. RGB (sRGB), Red : 255, Green : 255, Blue : 255. RGB (AdobeRGB), Red : 255, Green : 254, Blue : 255. w..

말보다 행동, 해보면 이해가 쉽다 ! (이 블로그는 작성자의 의견일 뿐, 정답이 아닐 수 도 있습니당...) 프로젝트 기획에 있어서 중요한 3가지 ! ERD + Figma + 기능명세서 Figma는 전의 포스팅을 했듯이 브라우저에 어떻게 띄울 것인가 ERD는 DB 구성을 어떻게 했고, 어떤 시스템으로 진행되는가 기능명세서는 각각의 (아이디, 패스워드, 프로필사진, 좋아요 수 등) DB가 어떤 기능을 하는가 실무에서는 위의 3 가지가 기본적으로 있어야 한다고 한다. Figma에 대해서는 앞의 포스팅에 기재를 했었고, 어제(4일)는 ERD 진행 구조에 대한 간단한 내용과 ERD Cloud 사용법을 배웠다. 진행 구조는 사실상 무슨 말인지 알 것 같으면서도 모르겠던데, 막상 ERD Cloud 를 그려보니 알겠..

백엔드 기술을 들어가기 전에 먼저 메인화면 UI 수정과 함께 [ 회원가입 + 로그인 + 마이페이지 + 모달 + 드롭다운 + (개인정보설정?) ] 화면을 팀원들과 나눠 만들게 됐다. 그 중에 나는 회원가입 화면을 맡았고, 프로젝트가 아예 똑같을 필요는 없다하여 색상을 좀 바꿔봄 MOCK UP대로 만들며 발견한 오타와 실수들을 반영해 만들어 봄 지금 보면 수직정렬이 안되어 있는데, align-contents, justify-contents, position(static, fixed, sticky, center, relative) flex-direction, grid, cloumn? 진짜 많은 코드를 도전해봤는데 막상 포스팅하려니까 기억이 다 안남......... 이제 곧 일출시간이겠다 자고 일어나서 다시 도..