개발 공부 기록하기 108

SQL group by와 having 이해하기

직원에 대한 테이블 emp가 있다고 하자 emp는 3가지 column을 가지고 있다. id : primary key dept : 근무 부서 번호 salary : 월급 이 테이블 안에는 다음과 같은 데이터들이 있다고 하자 (1, 1, 1000) // 1번 부서에서 1000원을 받고 일하는 사람 (2, 1, 2000) (3, 1, 3000) (4, 2, 4000) (5, 2, 5000) (6, 3, 6000) (7, 3, 7000) (8, 2, 8000) 이런 상황에서 내가 근무 부서 당 월급의 총합을 알고 싶다고 하자. group by를 모르는 상황에서는 이렇게 할 수 있다. 1. 우선 근무 부서 번호의 종류를 확인한다 SELECT DISTINCT(dept) FROM emp; 2. 그 다음 각 근무 부서 ..

SQL JOIN 이해하기

JOIN : 두 개 이상의 테이블이나 데이터베이스를 연결하여 검색하는 방법 보통 PK 또는 FK로 두 테이블을 연결함 Inner Join 교집합이라고 많이 설명한다. 여기서 교집합이라는 것은, 특정 조건에 맞는 행들만 포함시키고 그렇지 않은 행들은 제외시킨다는 뜻이다. 예를 들어, 두 테이블이 있다고 하자 유저(user) 테이블 id : PK name : 유저 이름 자동차(car) 테이블 id : PK user_Id : FK (유저 테이블) name : 자동차 이름 이 테이블에 다음과 같은 값들이 있다고 하자 유저(user) 테이블 (1, 김철수) (2, 홍길동) (3, 김영희) (4, 박상식) 자동차(car) 테이블 (1, 1, "SM3") (2, 1, "그렌져") (3, 2, "소나타") (4, 3,..

Spring REST DOCS를 Spring Boot에 적용하기 (2)

본 포스팅에서는 Spring Boot에 적용된 Spring REST Docs를 보다 잘 활용하는 방법에 대해 기술합니다! 적용하는 방법은 여기를 참고해 주세요! request, response 변경하기 기본적으로 나오는 http-request.adoc과 http-response.adoc에서 한 두가지 정도를 변경해보자 JSON을 더 보기 좋게 기본적으로 나오는 json은 한 줄로 취급된다. 하지만 이것을 조금 더 이쁘게 출력하고 싶다면 prettyPrint()를 사용하면 된다. mockMvc.perform(get("/api/v1/data")) .andDo(print()) .andExpect(status().isOk()) .andDo(document("signup"), preprocessRequest(pr..

Spring REST DOCS를 Spring Boot에 적용하기 (1)

주요 REF Spring REST DOCS DOCU Asciidoctor 본 포스팅에선 1) Spring REST DOCS가 무엇인지 2) gradle + mockMvc 환경에서 Spring REST DOCS를 Spring BOOT에 어떻게 "기본" 적용하는지 다루고 있습니다! Spring REST DOCS를 "활용"하는 방법은 여기를 참고해 주세요! Spring REST DOCS란? 일단 Spring REST DOCS의 정의는 이렇다. 1) Spring MVC TEST에 의해 2) 자동 생성된 snippet과 3) 직접 작성한 문서를 결합하여 최종 Documentation을 만들어 주는 서비스 여기서 포인트는 3가지 이다. Spring MVC TEST - snippet 만드는 방법은 Spring MVC..

HTTP Content-Disposition란

간단한 이해 Disposition이란 기질, 성향, 배치, 배열 이란 뜻이다. HTTP Response Header에 들어가는 Content-Disposition은 HTTP Response Body에 오는 컨텐츠의 기질/성향을 알려주는 속성이다. default 값은 inline으로 web에 전달되는 data라고 생각하면 된다. 특수한 경우는 Content-Disposition에 attachment를 주는 경우로, 이때 filename과 함께 주게 되면 Body에 오는 값을 다운로드 받으라는 뜻이 된다. Content-Disposition: attachment; filename="hello.jpg""는 서버측에서 header를 설정할 때 붙이지 않아도 되는 듯 하다 multipart 만약 Body에 담길 ..

vue에 SASS 적용하기

요즘엔 순수 CSS 보다는 SASS를 많이 사용하고 있다. 여러 속성을 변수로 선언하여 관리할 수 있는 것도 장점이고, 중첩된 element에 쉽게 접근할 수 있는 것도 큰 장점이다. vue.js에 SASS를 적용하는 방법은 간단하다! Step 1 npm install --save node-sass Step 2 npm install --save sass-loader Step 3 vue 컴포넌트 `` 태그에서 lang을 scss로 지정한다.

vue 컴포넌트란? / vue export default 간단 정리

컴포넌트 앞선 포스팅에서 components/안에는 *.vue파일들이 있으며, 이 파일들이 각각 하나의 컴포넌트로 간주된다고 언급한 적이 있다. 이번 포스팅에선 각 컴포넌트가 어떻게 구성되는지 살펴보고, 그 중 에 대해서 조금 더 알아보자 *.vue 파일은 크게 3가지 부분으로 이루어져 있다. 실제 HTML 태그가 들어가는 일종의 템플릿이다. 디렉티브를 활용하여 조건부 렌더링, 값 바인딩 등을 할 수 있다. 잘 생각해보면 script에서는 객체 하나를 export하고 있다. 이 객체 안에 property로 들어갈(...에 들어갈) 목록과 그 역할을 알아보자 data vue component에서는 무언가를 return하는 함수를 넣어줘야 한다. 이런 식이다. 만약 Vue 객체의 인스턴스를 선언한다면, 함수..

vue-cli로 vue 시작하기

본 글은 HTML, CSS, JS에 꽤나 익숙하고, react.js를 사용한 경험이 있어 컴포넌트에 대한 이해가 있는 분이 이해가 쉬울 것으로 예상됩니다. 사용 OS는 macOS Mojave 10.14.5입니다 새로 들어간 회사 내 팀에서 팀 admin 페이지를 만드는 데 사용하는 frontend 라이브러리는 vue.js라고 하여 파일럿 프로젝트를 하는 겸 간단하게 공부를 해보았다. 설치 vue를 시작하는 방법은 여러 가지가 있고 여기에서 자세히 알 수 있으나, 가장 쉽고 간단한 방법은 vue-cli를 설치하여 vue 프로젝트를 시작하는 방법이다. sudo npm install -g vue-cli시작 vue init webpack vue-project이렇게 하면 vue-project라는 폴더가 생기고 그..