vue 라이프사이클 Vue 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 업데이트(update)되며, 없어지는(destroy) 4가지 과정을 거치게 된다. 이 과정에서 Vue는 각각의 단계에서, Vue를 사용하는 사람들을 위해 훅(Hook)을 할 수 있도록 API를 제공합니다. 일반적으로 많이 사용하는 종류로는 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed가 있다. 1) Creation : 컴포넌트 초기화 단계 creation hooks은 라이프사이클에서 가장 먼저 실행된다. 컴포넌트가 DOM에 추가되기 전에 수행하며 다른 후크와 달리 서버 렌더링 중에도 실행된다. 클라이언트 렌..
썸네일 vue.ps1파일을 로드할 수 없습니다. 나중에 또 기억못하고 찾을 것 같으니 기록 해두려한다. 윈도우에서 Vue 설치를 하고 PowerShell에서 버전 확인을 하려 했지만 오류가 발생했다. powershell를 관리자 모드로 연다. User 폴더로 이동 후 Get-ExecutionPolicy 를 사용하여 현재 PowerShell 세션에 대한 유효 실행 정책을 확인한다. Restricted로 나와있는데, 이는 default설정값으로, 스크립트 파일을 실행할 수 없는 상태를 말한다. vue 를 실행할 수 있도록 권한 상태를 변경하기 위해 Set-ExecutionPolicy RemoteSigned RemoteSigned : 로컬에서 본인이 생성한 스크립트와, 신뢰할 수 있는(서명된) 스크립트 파일 실행할 수 있는 상태 를 사용하고, Y를 눌러 규..
Vue 기초 문법 vue객체 자체에 html 태그를 할당 el: .은 class (class는 여러개 존재 가능) vue에서는 class로 적용해도 하나만 적용돼, id속성을 주로 사용함. #은 id (id는 전체에서 하나만 존재) new Vue({ el: '#some-element', // 옵션 }) Template v-html은 문자열 형태의 html을 브라우저가 html로 처리하게끔 해 v-bind로 속성 세팅 v-model을 사용하면 input으로부터 data에 값을 넣을 수 있음. input1: input2: {{a1}} {{a2}} Component component는 최상위 태그로 감싸져 있어야한다. component는 뷰 객체 안에서만 사용 가능 v-bind:is를 사용하면 v-bind:is에 할당된 값에따..
썸네일 SVN이란? SVN(SubVersion)은 여러명이서 작업하는 프로젝트의 버전관리나 각자 만든 소스의 통합과 같은 문제를 해결하기 위해 저장소를 만들어 그곳에 소스를 저장해 소스 중복이나 여러 문제를 해결하기 위한 형상관리/소스 관리 툴이다. SVN 사용 목적 - Revision별로 파일 백업이 가능 - 개발 버전과 배포 버전이 섞이지 않고 쉽게 관리가 가능 - 파일 이름 변경, 이동, 디렉토리 버전 관리 지원 가능 - 여러명이 동시에 커밋을 해도 충돌이 발생하지 않는다. - 한번 커밋할 때마다 revision이 올라간다. - commit시 자동 로그 기능 - 서버와 클라이언트 양방향 데이터 전송으로 네트워크 소통량 최소화 - 접근이 가능한 개발자는 수정 가능 형상관리 용어 명령어 checkout[co] 원격 저장소..
Vue.js 정리 (코딩애플 Vue 유튜브 무료강의) vue 프로젝트 생성하기 전 node.js를 설치하면 npm을 사용할 수 있는데, npm은 각종 웹개발 라이브러리 설치 도우미로 @vue/cli 설치가 가능하다. 프로젝트 생성 vue create 프로젝트명 안에는 HTML Vue에서 함수 작성법 methode:{ 함수명(){ } } ※ 함수 안에서 데이터 쓸 땐 this.데이터 4강 숙제 {{ i }} 원룸가게 {{products[0]}} {{ price1 }} 만원 허위매물 신고 신고수 : {{신고수[0]}} {{products[1]}} {{ price2 }} 만원 허위매물 신고 신고수 : {{신고수[1]}} {{products[2]}} {{ price3 }} 만원 허위매물 신고 신고수 : {{신고수[2]}} 5강 숙제 상세페이지 상세페이지 내용 닫기..
Vue.js 란? Vue.js란 프론트엔드 개발을 쉽게하기 위한 react와 함께 대중적인 오픈소스 javascript 프레임워크 SPA(Single Page Application) 개발을 위한 프론트엔드 프레임워크 SPA는 단일 페이지 애플리케이션이기 때문에 제일 처음 웹사이트에 접속했을때, 웹사이트 전체에 필요한 모든 웹 자원(자바스크립트, CSS, 이미지 등)을 서버로 부터 가져와서 로딩을 하게 된다. {{ message }} Vue 인스턴스를 만들어 el 속성을 설정해 app 이라는 이름의 element 에 종속 Hello World!! 마우스를 Start Vue! 위에 몇 초 동안 올리고 있으면 v-bind에 의해 Hello World!!가 출력 된다.
썸네일 JWT 특정 사용자가 서버에 접근을 했을 때, 이 사용자가 인증된 사용자인지 구분하기 위해서는 여러 방법을 사용할 수 있는데 대표적인 방법으로는 서버 기반 인증, 토큰 기반 인증 이렇게 2가지 방법으로 나눌 수 있다. 서버 기반 인증 방식은 서버의 세션을 사용해 사용자 인증을 하는 방법으로 서버측(서버 램 or 데이터베이스)에서 사용자의 인증정보를 관리하는 것을 의미하고, 사용자가 증가함에 따라 성능의 문제를 일으킬 수 있으며 확장성이 어렵다는 단점을 지닌다. 토큰 기반 인증 방식은 인증받은 사용자에게 토큰을 발급하고, 로그인이 필요한 작업일 경우 헤더에 토큰을 함께 보내 인증받은 사용자인지 확인하며, 이는, 서버 기반 인증 시스템과 달리 서버가 클라이언트의 상태를 보존하지 않는 Stateless(무상) 한 특..
Redis 프로젝트를 진행하며 redis를 사용 했지만 자세하게 이해가 가지 않아 정리해본다. Redis란 - Key, Value 구조의 비정형 데이터를 저장하고 관리하기 위한 오픈 소스 기반의 비관계형 데이터 베이스 관리 시스템 (DBMS)이다. 데이터 베이스가 있지만 Redis라는 인메모리 데이터 구조 저장소를 사용하는 이유는 데이터 베이스는 데이터를 물리 디스크에 직접 쓰기 때문에 서버에 문제가 발생하여 다운되더라도 데이터가 손실되지 않는 장점이 있지만 매번 디스크에 접근해야 하기 때문에 사용자가 많아질수록 부하가 많아져 느려진다. 또한, 이렇게 사용자가 늘어난다면 데이터 베이스가 과부하 될 수 있기 때문에 이때 캐시 서버를 도입하여 사용하는데, 이때 이 캐시 서버로 이용할 수 있는 것이 바로 Redis이다...
썸네일 스프링 패키지 구조 스프링 패키지 구조 계층형 vs 도메인형 계층형 디렉토리 구조는 전체적인 구조를 빠르게 파악할 수 있지만, 각 레이어 (controller, service 등)별로 수십개의 클래스들이 존재하기 때문에 코드 파악이 어렵다. 도메인형 디렉토리 구조는 관련된 코드들이 응집되어 있고, 도메인과 관련된 스펙 & 기능이 변경되었을 때, 변경 범위가 적다. 하지만 전반적인 흐름을 한눈에 파악하기가 어렵고, 개발자의 관점에 따라 어느 패키지에 둘지 애매한 클래스들이 존재하기 때문에 팀 프로젝트 시, 자신이 예상하는 패키지와 다를 때, 해당 클래스를 찾기가 어렵다. 더보기 계층형 구조 - 규모가 작고, 도메인이 적은 경우 도메인형 구조 선택 - 규모가 크고, 도메인이 많은 경우
썸네일 프로그래머스-콜라츠 추측 https://school.programmers.co.kr/learn/courses/30/lessons/12943 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr class Solution { public int solution(int num) { int answer = 0; if(num == 1){ answer = 0; } else{ while(num != 1){ if(num%2 ==0){ num = num /2; answer++; }else{ num = num*3 +1; answer++; } } } if(answer>500){ answer = -1; }..
스프링 객체 주입 스프링 객체 Controller, Service, Dao Controller - @Controller Service - @Service, @Component Dao - @Repository, @Component 스프링 객체는 Spring StereoType으로 등록이 가능하다. 의존 객체 주입 @Autowired 주입하려고하는 객체의 데이터 타입을 보고 의존 객체 주입 타입 → 이름 생성자 / 필드 / setter 레벨에 작성 가능 스프링 자체 주석 required 속성 지원 @Autowired(required = false) / 기본값 @Autowired(required = true) 필드 / setter 레벨 작성 가능 의존성을 Optional로 설정 의존 객체를 주입받지 못하도 객체를 생성할 수 있..
썸네일 DAO, DTO, VO, Entity DAO(Data Access Object) 데이터베이스의 data에 접근하기 위한 객체이다. 직접 DB에 접근하여 데이터를 삽입, 삭제, 조회 등 조작할 수 있는 기능을 수행한다. DataBase에 접근하기 위한 로직과 비지니스 로직을 분리하기 위해 사용한다. PA, Hibernate, Mybatis 등의 Persistence Framework를 통해 접근 DAO를 사용하는 이유 효율적인 커넥션 관리와 보안성 비지니스 로직을 분리하며 도메인 로직으로부터 DB와 관련된 메커니즘을 숨기기 위해 사용한다. public class TestDao { public void add(TestDto dto) throws ClassNotFoundException, SQLException { Class.forName("co..
라이브러리 브랜드 그룹 | 망고네

티스토리툴바