D.evelop/Web10 [NFT] 기본 개념 https://dive.hyundaicard.com/web/content/contentView.hdc?firstBanner=Y&deviceApp=Y&contentId=4594&fbclid=PAAabtvuWC21yYmXqY5r0yENNKq8MRfMTtd5F2kRuio3xQ40uJjQcW6w3NURs_aem_AW2E7rHoXoGk3tQwd5YImYpA4LFreca7YKn0mQ8ua0XKdOuYSR3yWY8A_Pea9jvESYtOjhNfWedq12U857rbJuETyfumNoNnzvxnpEycEGzX39iYa96MLTLWSQP75nd-M-I NFT 용어 백서 세상 쉬운 NFT 입문서, #3 용어편 dive.hyundaicard.com https://dive.hyundaicard.com/web/content/c.. 2022. 5. 26. [Chrome 개발자 도구] 네트워크 패널 DevTools - Network 구글 크롬 개발자도구 Chrome DevTools Network panel ::용도 리소스가 예상대로 다운로드 또는 업로드되고 있는지 확인해야 하는 경우 리소스가 실제로 업로드되거나 다운로드되고 있는지 확인합니다. HTTP 헤더, 콘텐츠, 크기 등과 같은 개별 리소스의 속성을 검사합니다. 네트워크 요청시 보여지는 내용들 [자료] Developers Chrome https://developer.chrome.com/docs/devtools/network/ 인프런 강의 "Vue.js 시작하기 - Age of Vue.js" https://www.inflearn.com/course/age-of-vuejs 캡틴 판교 - 프런트엔드 개발자가 알아야하는 HTTP 프로토콜 Part 1 https://joshua1988... 2022. 3. 16. 인증Authentication/인가Authorization 📍 인증Authentication : 내가 누구인지! 비밀번호 관리 DB에 저장 시 개인정보를 해싱(암호화)하여 복원할 수 없도록 함. 예:난독화 통신 시 개인 정보를 주고 받을 때 SSL을 적용하여 암호화(HTTPS 주소창 앞에 자물쇠) 암호화는 어떻게 하나? 단방향 해쉬 hash함수는 자료구조에서 빠른 자료의 검색, 데이터 위변조 체크를 위해 쓰임 복원 불가능 단방향 해쉬함수는 암호학적 용도로 사용 MD5, SHA-1 : 보안 취약, SHA-256등이 있음 결과만 보면 당장 식별이 불가능한 값같아 보이지만 하지만 같은 알고리즘으로 '1234'를 해싱하면 같은 값이 나옴 단점 input이 똑같을 때, output도 똑같음 > 보안 취약 SALTIING & Keystretching Salting : 입력.. 2021. 12. 20. [WEB] 웹 저장소 - 쿠키/로컬스토리지/세션스토리지 🍪 Cookie 배경 http의 특성인 '비연결성', '무상태성'으로 인해, 요청과 응답이 완료되면 연결을 끊음. → 한 사이트에 여러번 방문해도 새로 방문한 것이 됨. 이에 Netscape사이트 방문자가 이미 사이트를 방문했는지 판단하기 위해 사용하기 시작. Unix 프로그래밍에서 사용하던 매직쿠키(프로그램이 수신한 뒤, 변경하지 않고 보내는 데이터 패킷)에서 유래. 최대 4KB까지 저장 서버 데이터를 공유하는 용도 : 서버 요청을 할 때마다 자동으로 실려서 따라옴 SSR에서 더욱 중요! SSR 시점에 localStorage의 값을 알 방법이 없음. But!! 쿠키데이터는 알 수 있음. → 서버에서 html를 렌더링 할 때, 더욱 많은 정보를 담을 수 있음 → 로딩시간 단축 HTTP요청시 Headers.. 2021. 12. 20. [WEB] 웹 렌더링 SSG, SSR, CRS 이란? SSG (Static-Site Generation) 빌드 타임에 js를 변환하여 html을 미리 만들어 둠 > 요청이 들어오면 이미 완성된 html을 반환 빠름 단점 정적 파일로 제공되기 때문에 현재의 사용자 수준에 상응하는 웹 서비스를 제공하기 어려움. SSR(Server-Side Rendering) 전통적인 렌더링 방식 페이지를 새로고침 > 서버에 요청이 들어오면 html로 바로 만들어서 응답 SEO에 유리함 단점 페이지 이동 시 화면 깜박임 새로운 파일을 받아 다시 로드하므로, 클라이언트에서 메모리에 데이터를 유지할 수 없음 CSR(Client-Side Rendering) SPA 처음 웹사이트 진입 시, 비어 있는 html 응답 > 클라이언트 브라우저에서 어플리케이션 렌더링 진행 초기 로드 이후, .. 2021. 12. 13. HTTP(HyperText Transfer Protocol)이란? HyperText 문서와 문서가 링크로 연결되어 있음 Transfer 전송하다. "HTML로 만든 웹 페이지 문서(파일)를 보낸다" Protocol 컴퓨터 간 어떻게 HTML 파일을 주고 받을 지에 대한 소통 방식 또는 약속 즉, HTTP는 'hyper text문서를 어떻게 주고 받을지 정해둔 약속' 특징 1. 요청 / 응답 (Request / Response ) PC 간의 소통은 메세지 형식으로 이루어진다. 서로 다른 PC가 서버에 Request하면, 서버는 Response하며 PC간의 정보와 상태를 공유해 줌. 2. Stateless state상태 + less 없음 HTTP 개별 통신은 모두 독립적임 과거의 HTTP 통신 결과(state)를 보존하지 않음 매 통신 마다 사전에 필요한 모든 정보를 담아.. 2021. 9. 25. [Chrome 개발자 도구] 콘솔 패널 DevTools - console panel 구글 크롬 개발자도구 Chrome DevTools console panel ::개발자 도구 보는 법 1. 마우스오른쪽 클릭 > 메뉴 > '검사'선택 2. 단축키 Mac : [Cmd + Opt + i] Window : [Cmd + Opt + i] 또는 [F12] :: Console 패널 보는 법 :: Console 패널의 기능 현재 페이지에서 실행중인 javascript의 console을 확인, 테스트 할 수 있다. console 패널에 코드를 입력하면 입력하면 브라우저에서 바로확인 가능하게 해준다. :: 화면을 새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법은? 크롬의 개발자 도구에서는 console 옆 설정에서 "Preserve log"를 눌러주면 된다. ❗️기록이 남아있다고 해서 데.. 2021. 9. 5. [WEB]시멘틱 웹/요소 (Semantic Web/element) Semantic web / Semantic element ✅ 시멘틱 웹(Semantic web)이란? 시멘틱 요소를 사용해 '의미'와 '관련성'을 고려해 구성된 웹 이런 웹을 만드는 작업을 '시멘틱 마크업(semantic markup)'이라고 한다. 아무리 유익한 콘텐츠라도 접근하기 어렵고, 찾기 어려우면 시간과 비용이 낭비된다. 공유 되지 않고, 남들이 찾지 못한 나만의 멋진 정보를 찾아내는 재미가 있을 수있지만, 알 수 없는 서버에서 발견되지 못한 지식이 우주폐기물처럼 떠다니고 있을 수도. ✅ 시멘틱 요소(Semantic element)란? 의미론적인 요소. 사람이 작성한 문서를 의미있는 태그로 사용함으로서 컴퓨터가 해석하기 쉽게 해준다. 자료 : w3schoool - HTML Semantic Ele.. 2021. 9. 1. 이전 1 2 다음
