月亮

나는 vuetify3를 업데이트하려 했는데, Package.json과 yarn.lock이 동기화되지 않는 문제를 발견했다. 항상 프로젝트를 파악할때 package.json을 보기 때문에 이 동기화 작업이 필요했다. 1. 패키지 지정 업데이트 yarn upgrade vuetify@^3.1.10 2. yarn.lock 파일 변경됨 3. package.json 동기화 # syncyarnlock 설치 $ yarn global add syncyarnlock # yarn.lock에서 설치된 버전으로 package.json을 업데이트 $ syncyarnlock -s -k # package.json의 현재 버전 제약 조건으로 yarn.lock을 업데이트 $ yarn install 출저 https://jhyeok.com..

컬럼(변수,특성)-범주형/연속형 범주형 : 등장하는 데이터 종류가 정해짐, 구분되서 끊어진 형태를 보임. (성별,등급,혈액형,직업) (키 170~180 cm구간 연속형도 범주,구분에 의해 범주형으로 가능하다) 연속형 : 연속적인 수치 데이터 (범위가 없다) (나이,인구수,가족수,몸무게,키)

https://elena90.tistory.com/85 위의 링크 블로그글을 복사했다. 블로그 주인분께 감사 🙏 앞으로도 잘 쓸 것 같아서 블로그에 올려두기ㅎㅎㅎ 작업순서 1. param : 파일명 2. 뒤에서 부터 '.'를 찾는다. lastIndexOf('.') : 파일명에 '.'이 포함될 수도 있기 때문에 뒤에서 부터 찾으면 오류 없이 찾을 수 있음 3. subString()을 이용하여 확장자 추출 , 소문자 변환 /** * 파일명에서 확장자명 추출 * @param filename 파일명 * @returns _fileExt 확장자명 */ function getExtensionOfFilename(filename) { var _fileLen = filename.length; /** * lastIndexO..

저번에 선임님이 vue의 filter를 알아보라고 하셨는데 오늘 써볼 기회가 있어서 포스팅을 해보도록 하겠다. 일단 vue3에서 filter는 removed apis로 옮겨서 filter를 쓰기보단 computed나 method를 쓰기를 권장하고 있다! 하지만 그래도 쓰고 싶은 사람들을 위해 마이그레이션 가이드를 알려주고 있다. https://v3-migration.vuejs.org/breaking-changes/filters.html#migration-strategy Filters | Vue 3 Migration Guide v3-migration.vuejs.org 한번 써보니까 vue3에서는 왜 filter를 없애는 건지 잘 모르겠는 느낌,,, filter 편한데,,,, 아무튼 vue3에서 filter..

객체 객체(Object)는 이름-값 쌍으로 구성된 데이터를 저장합니다. 즉, 객체는 프로퍼티(Property)의 집합이라고 할 수 있습니다. 객체는 중괄호({})로 표현하며, 프로퍼티는 "이름: 값" 형태로 정의 const person = { name: "John", age: 30, gender: "male" }; 배열 배열(Array)은 값의 집합을 저장합니다. 즉, 배열은 값(Value)의 집합이라고 할 수 있습니다. 배열은 대괄호([])로 표현하며, 값은 쉼표로 구분하여 정의 배열은 인덱스(Index)를 사용하여 값을 가져올 수 있으며, 배열의 길이를 알 수 있는 length 프로퍼티를 제공합니다. 객체와는 달리, 배열은 값의 순서가 유지되며, 값을 추가하거나 삭제할 수 있습니다. const fru..

브라우저 저장소는 왜 생겨났을까? HTTP : 서버와 클라이언트가 서로 소통 할 때 지켜야 할 규약 client가 server에게 request - server가 client에게 response 보내고 통신 종료 통신이 끝나면 상태를 유지하지 않는다는 특징이 있다. (=서버가 클라이언트의 상태 정보를 기억하지 않는다는 것) (요청이 끝나면 서버는 뭔지 잊어버림, 그래서 요청 할때 마다 우리가 누군지 알려줘야한다) 이런 특징으로 계속해서 통신연결을 하지 않기 때문에 자원낭비가 줄어드는 것은 장점 하지만 통신을 할 때 마다 새로 연결을 해줘야 돼서 클라이언트는 그 때마다 인증을 해주어야 된다는 단점이 있다. 예를 들어 페이지를 이동 할 때 마다 로그인을 계속 해줘야 하는 점 로그인한 정보를 어딘가 저장 해두..

로그인을 구현한다고 할때, 일반적인 생각 -> 사용자의 아이디와 비밀번호를 그대로 데이터베이스에 저장해서 로그인 할때 확인하면 되지 않을까? => 데이터베이스가 뚫리면 그대로 전부 유출 될 수 있다. 로그인 기능만 있고 로그인 유지 기능이 없다면? -> 메일에서 글쓸때, 메일 지울때마다 일일이 로그인해야하는 번거로움 생긴다. => 그러므로 한번 로그인을 하면 내가 로그인되어 있다는 것을 서버가 알수 있어야 한다. 그렇기 때문에 로그인을 구현 할 때 보안과 UX에 신경써야한다. -> 그래서 서버를 만들 때 "인증"과 "인가"를 어떻게 할지가 주요이슈이다. 인증 Authentication + 쿠키 Cookie : 그냥 옮기는 시스템, 매개체 세션 Session 클라이언트와 서버 간의 상호 작용을 통해 생성되..

JSON이란? 자바스크립트 객체를 표현하기 위한 문자열 기반의 데이터 교환 형식 JavaScript에서 객체를 표현하는 방식을 기반으로 만들어짐 웹 서버와 웹 클라이언트 간 데이터교환을 위한 표준 포맷으로 널리 사용된다. JSON은 JavaScript에서 파싱 하기 쉽도록 간결하고 구조화된 형식으로 데이터를 표현하기 때문에 웹 애플리케이션에서 데이터를 주고받을 때 많이 사용된다. 가독성이 좋고, 크기가 작아서 데이터 전송에 용이하며, 프로그래밍 언어와 플랫폼에 독립적이어서 매우 유용하다. 기본 데이터 타입인 문자열, 숫자, 불리언, null, 배열, 객체 등을 모두 지원한다. 자바스크립트에서 객체는 중괄호({})로 감싸진 key-value 쌍의 집합으로 표현되지만, JSON에서는 이를 문자열 형태로 표현..

1. localstorage란? 웹 브라우저에서 제공하는 클라이언트 사이드 저장소 웹 애프리케이션에서 데이터를 브라우저에 저장하고 다른 페이지에서도 접근 가능하게 할 수 있다. localstorage는 `key - value` 형태로 데이터를 저장하며, 저장된 데이터는 브라우저가 닫혀도 유지된다. 이러한 특징 때문에 웹 애플리케이션에서 사용자 정보, 설정 값, 쇼핑카드 등을 저장하기에 적합하다. localstorages는 javascript의 API로 다음과 같이 사용 할 수 있다. localStorage는 일반적으로 5-10MB의 용량을 제공하며, 서버와의 통신이 필요하지 않으므로 더 빠르고 경제적이다. 하지만 브라우저에서 데이터를 직업 다루기 때문에 보안에 취약할 수 있으므로, 민감한 정보를 저장하는..

store 기능을 이용하는 것은 react 쓸 때 redux 접할 때 빼고는 처음 건드려 보는데 pinia는 나름 간단하게 사용할 수 있는 것 같다! 전제조건은 vuetify3이 세팅되어 있어야 한다! 1. pinia 공식문서를 보고 세팅하기 main.js에 세팅한다 (이번 프로젝트 하면서 느꼈는데 공식문서에 다 나와있다) https://pinia.vuejs.org/getting-started.html Pinia | The intuitive store for Vue.js Intuitive, type safe, light and flexible Store for Vue pinia.vuejs.org 2. 프로젝트 루트에 store폴더 > index.js 만들기 나는 src > store >index.js 로..