보안 전공생의 공부

express.js는 node.js를 위한 웹 프레임워크이다. 우선 node.js를 설치해야하는데 내 노트북에는 기존에 설치한 적이 있다. (nodejs.org 페이지에서 설치하면 됨) asdf1이라는 폴더를 만들었다. 폴더 밑에 app.js 파일을 하나 만들어서 node.js가 잘 되는지 확인해보았다. 터미널에 node (폴더명)을 입력하면 실행된다. 콘솔창에 helo world! 가 출력되는 것을 보면 잘 실행되고 있음을 확인할 수 있다. npm은 node package manager의 약자로, 오픈소스라고 볼 수 있다. 따라서 필요한 기능이 있을 때 npm ~~로 구글링하면 그 기능을 구현하기 위해 필요한 외부모듈을 찾을 수 있다. 필요한 모듈을 설치할 때는 터미널에 npm install (모듈명)..

* SSR(Server-side rendering) : 서버에서 사용자에게 보여줄 페이지를 모두 구성한다. 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다. 단 - 서버를 이용하기 때문에 페이지를 구상하는 속도가 CSR에 비해 늦음 장 - 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 CSR에 비해 빠름 * CSR(Client-side rendering) : 서비스 페이지를 보이는데 필요한 데이터를 클라이언트(브라우저)에서 구성한다. 단 - 전체적인 페이지 완료 시점은 SSR보다 느림 장 - 초기 전송되는 페이지의 속도가 SSR보다 빠름 * SPA(single-page application) 전통적인 웹 사이트는 어떤 요소 하나를 한 번 클릭하면 서버로부터 완전한 ..

클라이언트가 주소창에 www.naver.com을 입력하면 어떤 과정을 통해 네이버 홈페이지가 화면에 뜨게 되는 걸까 ? 1. www.naver.com의 IP주소 찾기 1) 로컬 DNS 캐시 검색 웹 브라우저는 로컬 DNS 캐시를 통해 www.naver.com에 해당하는 도메인네임을 찾고, 이에 매칭되는 IP주소를 반환한다. 2) DNS 서버에 요청 만약 DNS 캐시에 www.naver.com에 해당하는 도메인네임이 없다면, DNS서버에 해당 주소에 매칭되는 IP주소를 요청하여 반환받는다. * DNS : 도메인네임과 IP주소를 매칭한 전화번호부 역할의 서버 DNS 캐시 : 전화번호부의 로컬 사본. 최근 방문한 기록을 토대로 도메인네임과 해당 IP주소를 캐싱함. 매번 DNS 서버에 요청하는 것보다 프로세스 ..

[[앞 게시물 이어서 materialize의 기능들에 대해 설명하는 글 ! ]] ● Navbar 앞에서 navbar 컴포넌트(웹사이트 탐색에 이용) 보여준 기본 구조이다. "hide-on-med-and-down"이라는 클래스의 속성 -> 태블릿 이하의 화면 크기에서는 보이지 않도록 하라 스마트폰에서 navbar을 이용하려면 >> a 태그의 data-target 속성 이용해 id 속성값을 설정하고, class 속성에 "sidenav-trigger" 설정 [index.html] 수이니의 여행 menu {{link.text}} {{link.text}} 1) index.html파일 - head 태그 : Google Icon Font, materialize.css, fontawesome.com 링크 추가 2) i..

●Button 1) Raised Button - 기본 버튼 - 클릭했을 때 물결 효과 - 버튼색 -> waves-color 형태로 정의해서 사용 button 2) Floating Button - 원형 모양 버튼 add 3) Flat Button - card, modal 내에서 사용하는 버튼 button index.html wireless cloudcloud wifiwifi app.js new Vue({ el:'#app', methods:{ showMessage($event){ ($event.target.children.length == 2) ? alert($event.target.children[0].innerText) : alert($event.target.innerText); } } }) 조건부 3항..

스마트폰, 태블릿, PC 등 다양한 장치의 각각의 화면 크기에 맞춰 적절한 페이지를 보여주기 위해 반응형(responsive)을 구현해야 한다. Materialize는 CSS, 자바스크립트, HTML로 작성된 UI라이브러리다. 이를 이용하면 장치에 따라 특정 콘텐츠는 감추고, 다른 콘텐츠는 보이도록 할 수 있으며 짧은 시간 내 반응형 애플리케이션을 만들 수 있다. ▶Materialize 설치 materializecss.com/getting-started.html Getting Started - Materialize Materialize comes in two different forms. You can select which version you want depending on your preferenc..

◆ 슬롯 : 부모 컴포넌트에서 자녀 컴포넌트에 나타나야 할 콘텐츠 제공 가능 부모 컴포넌트가 자녀 컴포넌트로부터 데이터 전달 받기 가능 (컴포넌트 재사용 ↑) 1) unnamed slot (default slot) - 가장 기본적인 슬롯 - 부모 컴포넌트의 일부 -> 자녀 컴포넌트 inject 가능 부모 컴포넌트의 DOM(Document Object Model) 엘리먼트들 ( e.g. p, div, img ) -> 자녀 컴포넌트에 정의된 태그 위치에 대체 가능함 태그 無 -> 부모 컴포넌트에서 html 엘리먼트를 전달해도 자녀 컴포넌트에 표시 X cmd 창에 vue create unnameslotwithcli --default 입력 -> 프로젝트 생성 해당 폴더 vscode로 실행 App.vue를 위처럼..

(출처 : wiki.plateer.com/pages/viewpage.action?pageId=8553499) 하위 컴포넌트 D에서 상위 컴포넌트 A로 통신을 위해 상위 컴포넌트 B -> 최상위 컴포넌트 -> 상위 컴포넌트 A>경로를 이용할 수 있지만, 이는 필요없는 상위 컴포넌트를 필요로 한다. 이러한 점을 보완하기 위한 방법으로 이벤트 버스를 이용한다. var eventBus = new Vue(); Vue 인스턴스를 생성하고, 이를 이용해 컴포넌트 간 통신 매개체로 쓴다. - 데이터를 전달하는 컴포넌트에서 eventBus.$emit 사용 method: { 메소드명: function(){ eventBus.$emit('이벤트명',데이터,...); } } - 데이터를 전달받는 컴포넌트에서 eventBus.$..