본문 바로가기

분류 전체보기267

[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.
2021.11 - 12 한 것과 해야할 것 ✔️ 포트폴리오 사이트'이 시간을 어떻게 보내고 싶을까?'를 생각하다 고심 끝에 기업협업을 지원하지 않기로. 당장 목마르지 않았던게 솔직한 마음이 었다. '자유+새로 배운 지식+취업 전' 이 3박자가 완벽할 수 있는 꿀같은 시기 '나를 위한 내 프로젝트를 해보고 싶었다'혼자 CRA를 세팅하고, 새로 업데이트된 React-router를 봐가며 큰 레이아웃을 50%정도 잡아가다, 다른 기술 스택을 적용해보고 싶어 일시 정지. 계획부터 다시 짤 예정.번외 : 혼자 Figma강의를 보며 조금씩 디자인을 했다. 오랜만의 디자인 작업이 었는 데 시간 가는 줄 모를 정도로 재미있었다. ⬛️ wecode 25기 끝 하루 정말 길게 보낸 3개월. 마음엔 장황한 생각들이 가득한데 어떻게 표현해야할 지 모르겠다.이제 시작이.. 2022. 1. 2.
#TIL #211216-1231 12월 16일 (목) 오늘한 것 TypeScript 내용 추가 수정 - 포스팅 12월 17일 (금) 오늘한 것 Front-end 스터디 🔥 (12PM~16PM) 내용 준비, 공유, 피드백 반영 부산행🚄 12월 18일 (토) 오늘한 것 알고리즘 1문제 - 프로그래머스 Level 01- 16 약수의 합 12월 20일 (월) 오늘한 것 Front-end 스터디 🔥 (12PM~16PM) 내용 준비, 공유, 피드백 반영 웹 저장소 - 로컬스토리지 vs 세션스토리지 vs 쿠키 JWT이란? + 인증/인가 12월 22일 (수) 오늘한 것 Front-end 스터디 🔥 (12PM~16PM) 내용 준비, 공유, 피드백 반영 세션 강의 : SSR, CSR 12월 23일 (목) 오늘한 것 interview 12월 24일 (금).. 2021. 12. 31.
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.

티스토리툴바