웹/TIL (13) 썸네일형 리스트형 티스토리 마크다운 제대로 적용하기 https://darkangelus.tistory.com/153 티스토리 마크다운 제대로 적용하기 안녕하세요. 엔젤루스입니다. 이번에는 티스토리에서 마크다운를 적용하는 방법을 포스팅하려고 합니다. 문제점 티스토리에서 포스팅할 때 마크다운 언어를 지원을 해줍니다. 하지만 실제로 darkangelus.tistory.com 위에 블로그 보고 따라했는데 인용부분이랑 띄어쓰기가 살짝 요상하네... 0916 Blockchain 학습 목표 1. Blockchain의 개념 2. 암호 알고리즘에 대해 3. Blockchain 활용 어플리케이션에 대해 1. Blockchain이란? Block : 데이터의 논리적 저장 단위 Block에 저장된 데이터가 - 거래 내역 -> 비트코인 - 실행 로직 -> 이더리움 데이터의 수정, 삭제가 불가능하기 때문에 위변조가 어려움 Chain : LinkedList처럼 서로 연결된 형태 검증 시 Hash 함수를 사용 Hash 함수? 복호화 불가능(단방향 암호화)한 알고리즘으로 대표적으로 SHA256, keccak256 등이 있음 1대1 매핑되기 때문에 값이 조금이라도 다르면(위조가 된다면) 전혀 다른 암호화 값이 나옴 * 전자 서명(Digital Signature) 지갑 -> 암호화폐 키 관리 프로그램 .. 0516 Vuex Vuex : Vue.js 어플리케이션에 대한 상태 관리 패턴 + 라이브러리 여기서 상태란, 뷰 인스턴스 내부의 data()를 가리킨다. new Vue({ // 상태 data () { return { count: 0 } }, // 뷰 template: ` {{ count }} `, // 액션 methods: { increment () { this.count++ } } }) Vuex는 어플리케이션 내 모든 컴포넌트들의 중앙 저장소 역할을 하며 예측 가능한 방식(정해진 방식)으로 상태를 변경할 수 있다. 언제, 왜 사용할까? Vue의 데이터 흐름이 단방향이기 때문에 컴포넌트 간의 상위, 하위 단계가 많아진다면 데이터를 전달하는 부분이 매우 복잡해진다. Event Bus를 이용해 동위 컴포넌트 간의 data 전.. 0512 Vue CLI @vue/cli 실행 환경 NodeJS 설치 - LTS 버전(NPM 같이 설치됨) NPM을 이용한 @vue/cli 설치 NPM(Node Package Manager) : 커맨드에서 써드파티 모듈(외부 모듈)을 설치하고 관리하는 툴 명령어 npm init : 새로운 프로젝트나 패키지를 만들 때 사용(package.json이 생성됨) npm install package : 생성되는 위치에서만 사용 가능한 패키지로 설치 npm install package : 글로벌 패키지에 추가. 모든 프로젝트에서 사용 가능한 패키지로 설치 install 대신 i 로 쓸 수 있음 SFC(Single File Component) : HTML(template) + JavaScript(script) + CSS(style) 를 모두.. 0510 Vue.js (3) 비동기 처리 방법 - AJAX 기존 사용 방식 1. XMLHttpRequest 2. jQuery 오늘 배울 것 : axios Axios : Vue에서 권고하는 HTTP 통신 라이브러리 Promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양하다. axios.get(URL) then, catch 사용 가능 Promise 란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 라이브러리이다. 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 주로 Promise를 활용한다. Axios 설치 CDN 방식 - jsDelivr CDN / unpkg CDN (최신버전을 가져.. 0509 Vue.js (2) Vue Instance 속성 Vue method this : 객체(Vue instance)가 가진 변수나 함수에 접근하기 위해 사용 Mustache 표기법 내에서 함수명 뒤의 '()' 를 생략할 경우, 문자열로 인식됨 Vue filter : 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능 중괄호 보간법 [ {{}} ] 또는 v-bind 속성에서 사용 가능 ex: [ val | filt1 | filt2 ] => val 값을 filt1에서 변경한 뒤, 이 값을 다시 filt2에서 변경 (chaining 가능) 문자의 포맷을 설정할 때 유용함 (ex: 핸드폰 번호, 천 단위마다 쉼표 찍기) 전역 필터 ; Vue.filter (필터 이름, 콜백함수) 지역 필터 ; filters : { 필터 이름 (가져올 .. 0504 ES6 ES6(ECMAScript6) : ECMAScript는 JavaScript의 표준 사양으로, 프로그래밍 언어의 값, 타입, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정하고 있다. 이는 각 브라우저나 엔진마다 JavaScript를 구현할 때, ECMAScript에서 규정한 모든 문법을 준수해야 함을 뜻한다. ES6 문법 const and let const : 변경 불가능한 변수. 값을 재할당하려고 하면 오류가 반환됨. let : 변경 가능한 변수. 새로운 값을 가질 수도, 재할당할수도 있음. const 와 let 모두 블럭 범위임 let msg = "global"; console.log(msg); function outer(a) { let msg = "outer"; console.log.. 0503 Vue.js VSCode Extensions Material Theme : 화면 색 테마 Live Server : 로컬 서버 변경 자동 반영 Bracket Pair Colorization : 괄호마다 색 매칭 indent-rainbow : 들여 쓰기 색 매칭 Prettier : 코드 포맷 설정 Auto Rename Tag : 시작 태그의 이름 변경 시 닫는 태그의 이름 자동 변경 Html CSS Suport : HTML에서 CSS 자동 완성 TabOut : 탭 누르면 단어 단위로 넘어감 Vetur : .vue 파일에 코드 생성, 문법 강조, 자동완성, 디버깅 Vue 3 Snippets : Vetur에서 지원하지 않는 자동완성까지 적용 Vue.js : Google에서 Angular로 개발하다가 가벼운 걸 만들어 보고 .. 이전 1 2 다음
