본문 바로가기

D.evelop111

[Vue.js] Instance 인스턴스 참고) javascript의 인스턴스[TIL]Javascript - 객체지향 class (ES5/ES6) ✅ Vue 인스턴스 - 공식문서 Vue에서 인스턴스를 생성하는 방법 var vm = new Vue({ // 옵션 }) 의미 javascript는 보통 아래과 같인 작성하지만 vue 공식문서에서는 변수로 구분하지 않고 위와같이 객체를 인스턴스에 바로 넣는 방법을 추천 가독성 var options = { el: "#app", data: { message: "hi", }, methodes: { }, }; var vm = new Vue(option); 2022. 1. 27.
[Vue.js] Reactivity 반응성 Reactivity (반응성) 데이터의 변화를 라이브러리에서 감지해 알아서 화면에 뿌려줌 // 객체의 동작을 재정의하는 api Object.defineProperty(대상 객체, 객체의 속성,{ // 정의할 내용 }) Object.defineProperty() ✅ Reactivity를 라이브러리화 하는 법 즉시 실행 함수 사용 init과 render함수가 애플리케이션 로직에 노출되지 않게 또다른 스코프(유효범위)에 넣어주는 것 일반적인 오픈소스 라이브러리는 즉시 실행 함수 형태로 유효범위를 관리함 var div = document.querySelector("#app"); var viewModel = {}; (function () { function init() { Object.defineProperty(.. 2022. 1. 26.
[Vue.js] 시작 전 환경세팅 🎯 목표 인프런 Vue.js 시작하기 - Age of Vue.js 완주 Vue.js 시작하기 - Age of Vue.js - 인프런 | 강의 Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요., - 강의 소개 | 인프런... www.inflearn.com 🔥 시작 전 세팅 [브라우저 Chrome 에서 세팅할 것] ✔️ Vue 개발자 도구 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd Vue.js devtools Chrome and Firefox DevTools exten.. 2022. 1. 26.
ESLint와 Prettier ✅ ESLint란? ESLint는 보다 좋은 품질의 자바스크립트 코드를 작성하기 위한 일종의 코드 스타일 가이드다. Getting Started with ESLint Getting Started with ESLint ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptio eslint.org JavaScript, JSX의 정적 분석 도구로 오픈 소스 프로젝트.. 2021. 12. 22.
인증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.
[React] 코드 분할 Code-Splitting (번들링) 공식문서 - https://ko.reactjs.org/docs/code-splitting.html 번들링이란? 앱이 커지면 번들도 커진다. 큰 규모의 서드 파티 라이브러리를 추가할 때 실수로 앱이 커져서 로드 시간이 길어지는 것도 주의해야하는 부분이다. 코드 분할 Code-Splitting 번들이 거대해지는 것을 방지하는 방법 런타임에 여러 번들을 동적으로 만들고 불러오는 것 Webpack, Rollup과 Browserify (factor-bundle) 같은 번들러가 지원하는 기능 코드 분할은 여러분의 앱을 “lazy-load” 하게 도와줌 앱의 코드 양을 줄이지 않고도 사용자가 필요하지 않은 코드를 불러오지 않게함 앱의 초기화 로딩에 필요한 비용을 줄여줍니다. ✅ 동적 import()문법 // Befo.. 2021. 12. 15.
[Webpack] 웹팩이란? Webpack 여러개의 리소스 파일을 하나의 파일로 묶어주는 도구(bundler) 중 하나로 최신 JavaScript 애플리케이션을 위한 정적 모듈 번들러 하나의 시작점(entry point)에 의존되는 모듈을 전부 찾아 하나의 결과물로 만들어 냄. 장점 네트워크 접속의 부담을 줄여 더욱 빠른 서비스를 제공할 수 있음 서로 다른 패키지들 간의 동일한 변수명으로 인한 충돌 문제를 줄여줌 리팩토링 효과를 냄 : 구동되는 방식은 그대로 유지하며, 내부의 코드를 효율적으로 바꿈 다양한 플러그인을 제공하고 다양한 작업을 자동화 할 수 있음 구형 브라우저에서 사용 가능하게 함 (IE를 포함한 구형 브라우저에서는 module을 사용할 수 없었음) 핵심 개념 Entry Output Loaders Plugins Mode.. 2021. 12. 15.

티스토리툴바