미어캣의 필기장

Package.json : 프로젝트의 정보를 정의합니다. (name, version, dependencies...) 의존하는 패키지들의 정보를 version range(범위)으로써 정의합니다. "name" : "example", "version" : "1.0.0", "dependencies" : { "A" : "

라우팅 : 웹 페이지 간의 이동 방법 SPA(Singal Page Application) : 페이지를 이동할 때마다 웹 페이지를 요청하여 갱신하는 것이 아니라 미리 페이지들을 받아 놓고 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 방식 뷰 라우터 : 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 라이브러리 라우터 셋팅 : 설치 : npm install vue -router@4 src폴더에 router.js를 만들고main.js에 라우터를 사용한다고 말해줍니다. import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "/경로", component: import해온 컴포넌트, } ]; const ..

컴포넌트는 Vue에서 강력한 기능중에 하나입니다. 쉽게 이해 하자고 하면 최상위 페이지를 App.vue라고하고 컴포넌트를 하나 생성한다고 하면 다음과 같이 생각 할 수 있습니다. App.vue의 기본적인 내용은 건드리지 않고 Component의 내용만을 수정하면서 페이지를 쉽게 바꿀 수 있습니다. 컴포넌트는 재사용이 쉽고 코드의 간결화를 통해서 사용한다면 Vue 특유의 빠른 렌더링을 통해서 컴포넌트의 내용들만 바꿔가면서 페이지를 수정할 수 있습니다. 저는 개인적으로 JSP로 코드 구성을 했을 때 ajax를 통해서 페이지내용을 바꿔가는 것과 비슷했던 것 같습니다.

최근에 Vue를 공부하게 되어서 Vue관련 노트한 내용들을 끄적여 볼까 해서 작성하게 되었습니다. Props는 상위 컴포넌트의 데이터를 하위 컴포넌트로 전달하기 위한 방법 중에 하나입니다. 사용방법은 다음과 같습니다. // 상위 컴포넌트 //ex) 상위 컴포넌트 데이터 바인딩을 사용할때에는 콜론 ' : '을 사용해줍니다. // 하위 컴포넌트 export default { props : { 전달 받은 변수명 : 데이터 타입 } } // ex) 하위 컴포넌트 props : { send : String, // 이후 해당 컴포넌트에서 사용 } 전달 받은 변수 명과 데이터타입을 props 안에서 선언해줍니다.

Margin : Margins are used to create space around elements. outside of any defiend borders. 마진을 통해서 Border(경계선) 바깥의 공간의 값을 지정할 수 있습니다. Shorthand : /* Syntax */ margin-top: 값1; margin-bottom: 값3; margin-right: 값2; margin-left: 값4; /* Shorthand Syntax */ margin: 값1, 값2, 값3 값4; 이전의 내용과 마찬가지로 Shorthand를 사용할 때는 시계방향으로 값이 지정됩니다. 4개의 값이 지정될 경우 : 위, 오른쪽, 아래, 왼쪽 3개의 값이 지정될 경우 : 위, 양옆, 아래 2개의 값이 지정될 경우 : 위..

Border The CSS border properties allow you to specify the style, width, and color of an element's border. Border property는 요소의 경계에 스타일, 굵기 그리고 색을 설정할 수 있습니다. Border Style : Border의 스타일을 정의할 수 있습니다. /* dotted; dashed; solid; double; groove; ridge; inset; outset; none; hidden; [mix] dotted dashed solid double; */ Border Width : Border(경계선)의 굵기를 정의합니다. p.one { border-style: solid; border-width: 5px..

Backgrounds 🔎 배경에대해 조금 더 알아봅시다. Color opacity : 불투명도 0.0 ~ 1.0의 수치로 조절이 가능합니다. rgba를 이용하여 RGB 값에 opacity를 추가할 수 있습니다. div { background: rgba(0, 128, 0, 0.3) } /* Green background with 30% opacitvy */ image : background요소에 이미지를 사용하게 해줍니다. body { background-image: url("img.jpg"); } /* 이미지를 사용할 때에는 텍스트와 밸런스를 잘 조절해야합니다.! */ Repeat : Background-image는 기본값으로 수직과 수평으로 계속 반복되게 설정 되어있습니다. 이미지에 따라 수직과 수평을..

한 주가 skip 되었습니다. 오늘은 오전에 JSP, 오후에 자습이 있어서 JSP 시간에 만드는 게시판을 조금 다듬고 CSS에 대해 공부를 해보았습니다. 아무래도 JSP의 비중이 크다보니 Web이나 DB 부분들은 추가로 공부를 계속해야될 것 같습니다. 이미 CSS는 어느정도 진도가 나갔지만 초기 개념들이 부족하다고 생각하여서 필기장을 적게되었습니다. 주말에는 정처기 실기를 공부해야되지만 시간이 된다면 작게나마 게시판 만들기를 정리해보도록 하겠습니다. 다짐 다짐 CSS basic CSS is the language we use to style a Web page. CSS(Cascading Style Sheets) 는 HTML 요소들을 어떻게 화면에 구성하고 표현하는지 명시해줍니다. Syntax Select..