전체 글 225

[Vue.js] Router 기초

뷰 라우터 ; 선행 개념 라우팅 웹 페이지 간의 이동 방법을 뜻한다. 라우팅은 현대 웹 앱 형태중 하나인 "싱글 페이지 애플리케이션" 에서 주로 사용한다. 장점 화면간의 전환이 매끄럽다. 애플리케이션의 사용자 경험을 향상 시킬수 있다. 화면 깜박거림이 없다 "싱글 페이지 애플리케이션" : 페이지를 이동할 떄마다 서버에 웹페이지를 요청하여 새로 갱신 하는것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱산하는 패턴을 적용한 애플리케이션 뷰 라우터 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리 뷰 특수 태그와 기능 태그 설명 페이지 이동태그. 화면에서는 로 표시 되며 클릭하면 to에 이정한 URL로 이동합니다. 페이지 표시 태그. 변경되는 ..

FrontEnd/Vue 2023.04.15

[Vue.js] 컴포넌트 등록

참고 문서 do it vue.js 컴포넌트란? 조합하여 화면을 구성할 수 있는 블록(화면의 특정영역)을 의미한다. 특징 컴퓨넌트를 활용하면 화면을 빠르게 구조화 하여 일괄적인 패턴으로 개발 할 수 있다. 쪼개서 사용하므로 재사용이 쉽다. 남이 작성한 코드를 직관적으로 이해 할 수있다. 컴포넌트를 이해 하기 위하 예제 구조 설명 뷰 에서는 웹화면을 구성할 때 흔히 사용하는 네비게이션바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리 합니다. Tree 형식으로 구조화 되어 있다. Root Header Content Aside List Footer 컴포넌트 등록 전역(global)) 여러 인스턴스에서 공통으로 사용한다. 뷰로 접근 가능한 모든 범위에서 사용할수있다. 지..

FrontEnd/Vue 2023.04.15

Vue.js란?

참고 문서 do it vue.js Vue.js란? 웹페이지 화면을 개발하기 위한 Frontend 프레임워크이다. 기존 웹 개발자 뿐 아니라 HTML, CSS, Javascript 기초만 알아도 개발하기 쉬운 Frontend 프레임워크이다. 창시자 에반 유(Evan You) 설명 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할수 있는 형태로도 제공됩ㄴ다. 즉. 라이브러리 역할 뿐 아니라 프레임워크 역할도 할수있다. 장점 배우기가 쉽다. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다. Vue 제작팀에서 리액트와 앵귤러를 가지고 같은 테스트 케이스에서 성능을 비교한 결과 vue가 가장 빨랐다. 리액트의 장점과 앵귤..

FrontEnd/Vue 2023.04.15

Vue.js + spring 프로젝트 생성

Spring Boot & Vue.js 연동Spring Boot & Vue.js 기본 연동 프로젝트(springvue > images : HELP.md 에 필요한 이미지)구조Front : Vue.jsBackend : Spring Boot기본 설치 목록Vue.jsVue-CLINode.js프로젝트 생성순서Spring Boot 프로젝트 생성Vue.js 프로젝트 추가(현재는 vue2 설치) vue create 'project name'3. springvue > vue-frontend > vue.config.js 파일 추가```module.exports = { // npm run build시 파일 생성위치 outputDir: "../src/main/resources/static", // index.ht..

FrontEnd/Vue 2023.04.15

Cookiecutter

Django를 개발 하다보면 초기 설정이 복잡하다. 그래서 CookieCutter을 사용한다. Spring과 Spring Boot의 느낌인거 같다. CookieCutter Hub https://github.com/cookiecutter/cookiecutter-django Cookiecutter 명령어 설치 pip install "cookiecutter>=1.7.0" 실행 cookiecutter https://github.com/cookiecutter/cookiecutter-django 설치시 Option Cloning into 'cookiecutter-django'... remote: Counting objects: 550, done. remote: Compressing objects: 1..

BackEnd/Django 2023.04.15

Document 프로젝트 생성

Git 주소https://github.com/Raconer/django-basic참고 유투브https://www.youtube.com/watch?v=-Nmtakm70RoDjango Documenthttps://docs.djangoproject.com/en/3.2/프로젝트 목적사람들이 설문 내용을 보고 직접 투표할 수있는 개방된 사이트관리자가 설문을 추가, 변경, 삭제할 수 있는 관리용 사이트View 페이지 구성질문 《색인》 페이지 – 최근의 질문들을 표시합니다.질문 《세부》 페이지 – 질문 내용과, 투표할 수 있는 서식을 표시합니다.질문 《결과》 페이지 – 특정 질문에 대한 결과를 표시합니다투표 기능 – 특정 질문에 대해 특정 선택을 할 수 있는 투표 기능을 제공합니다.기본 단어Project vs App..

BackEnd/Django 2023.04.15

세션 vs 토큰 vs 쿠키?

세션 vs 토큰 (with 쿠키 개념 정리)유튜버 노마드 코더의 설명을 기반으로, 사용자 인증에서 자주 나오는 개념인 세션, 토큰, 쿠키에 대해 정리한 내용입니다.🔹 쿠키 vs 토큰?이 질문은 잘못된 비교입니다.왜냐하면:쿠키(Cookie) 는 클라이언트(브라우저)에 저장되는 데이터 저장소입니다.반면, 토큰(Token) 은 사용자 인증을 위한 방식입니다.✅ 쿠키란?서버가 브라우저에 저장하는 Key-Value 형식의 작은 데이터 조각입니다.자동으로 요청 헤더에 담겨 서버로 전송됩니다.도메인 기준으로 접근 제한이 있습니다.만료 시간 설정 가능 (세션 쿠키 vs 영속 쿠키)🔹 세션 vs 토큰서버는 HTTP 특성상 매 요청마다 사용자를 기억하지 못합니다.따라서 사용자를 구분하기 위한 인증 방식이 세션(Sess..

Server 2023.04.15

데이터베이스 트랜잭션(Transaction) 이란?

트랜잭션이란?데이터베이스의 상태를 변화시키기 위해 실행되는 작업의 논리적 단위를 의미합니다.하나의 트랜잭션은 여러 SQL문을 포함할 수 있으며, 반드시 전체가 성공하거나 전체가 실패해야 합니다.트랜잭션은 ACID 원칙을 기반으로 동작합니다:원자성(Atomicity)일관성(Consistency)고립성(Isolation)지속성(Durability)별도로 설정하지 않으면, SQL 문 1개 단위로 트랜잭션이 처리됩니다.예시: 계좌 이체 시나리오✅ 시나리오: 홍길동이 김국밥에게 900원을 송금1. 홍길동의 잔액 조회 (READ)이름잔액홍길동1000김국밥5002. 김국밥의 잔액 증가 (UPDATE)→ 김국밥의 잔액 +900이름잔액홍길동1000김국밥14003. 홍길동의 잔액 차감 (UPDATE)→ 홍길동의 잔액 -9..

DB 2023.04.15

기능 개발

문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100% 일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는 100 이하의 자..

Coding Test 2023.04.15

Spring boot Test Case

개발을 하다 보면 Service 기능별 테스트를 해야 할 때가 있다.그렇다고 테스트 할때마다 서버를 동작시켜 서비스가 실행되는 동작까지 가기에는 은근히 시간을 잡아먹게 된다.이때 Spring Boot 의 Test 기능을 사용하면 시간이 단축되며 수많은 TestCase를 실행할 수 있다.한번 간단하게만 사용해 보면 끊을 수 없다.Spring Boot 테스트 가이드✅ Import DependencytestImplementation 'org.springframework.boot:spring-boot-starter-test'JUnit 기반이며 별도로 JUnit import도 가능✅ 기본 테스트 방법@SpringBootTest를 사용하면 아래와 같이 properties를 설정할 수 있다.@SpringBootTes..

BackEnd/Spring Boot 2023.04.15