본문 바로가기
728x90

전체 글157

[MAC] 맥 폴더 즐겨찾기 추가/ 독(Dock)에 추가하기 Mac 사용 설명서 맥 폴더를 즐겨찾기에 추가하기 1. finder 열기 2. 왼쪽 목록에 즐겨찾기로 원하는 폴더를 드래그 앤 드랍한다. 맥 앱을 독(Dock)에 추가하기 1. 원하는 앱을 선택 2. 앱을 Dock에 드래그 앤 드랍한다. 2021. 3. 29.
[NodeJs] CSS Javascript 추가 / 사용하기 (public 폴더 사용하기) NodeJs Express를 통해 웹사이트를 구현하게 되면 Html 내 CSS나 Javascript 파일을 포함해야하는 경우가 있다. 무작정 프로젝트 폴더내 css나 javascript 파일을 넣어 놓으면 클라이언트 측에서는 보안 등의 문제로 폴더내 다른 파일들의 접근이 허용이 되지않는데 이를 허용하는 방법이 미들웨어 express.static 이다. 1. 우선 클라이언트의 접근이 허용되는 public이라는 폴더를 프로젝트 폴더 내에 만든다. 2. 코드 상단에 미들웨어로 app.use(express.static('public'))을 선언해준다. 3. nodejs로 구축한 웹사이트에서 최상위 경로로 등록된 폴더 (public)내의 파일의 접근이 가능하다. 샘플예제 const express = require.. 2021. 3. 26.
[NodeJs] Express 미들웨어 (middleware) NodeJs Express 미들웨어 (middleware) 개념 NodeJs Express에서 미들웨어는 app.use(미들웨어 함수)의 기능을 nodeJs로 구축한 어플리케이션을 실행하여 라우팅 될때마다 실행 되는 것을 말한다. 대표적인 미들웨어로는 body-parser, compression 등이 있다. 미들웨어의 동작 원리를 조금더 이해하기위해 직접 간단한 미들웨어를 만들어보자 샘플코드 [nodeJs Express] const express = require('express'); const app = express(); //미들웨어 호출 app.use(middle); //미들웨어 함수 [request,response,next()] const middle = (req,res,next)=>{ conso.. 2021. 3. 25.
[NodeJs] 미들웨어 body-parser 설치 없이 get, post 데이터 손쉽게 다루기 NodeJS body-parser 설치 없이 웹 get,post 데이터 손쉽게 다루기 express 4.x 이전 버전에서는 body-parser를 npm install body-parser 를 통해 설치 후 사용하였다. 하지만 4.x버전 이후에서는 따로 body-parser를 설치하지 않아도, 기존 body-parser의 기능이 express내에 탑재되어있어 하단의 코드와 같이 작성하면 해당 기능을 사용할수 있다. //최소한의 코드로 설명 const express = require('express'); const app = express(); //기존에는 require('bodyParser') 추가 후 //bodyParser.json()이었음.. app.use(express.urlencoded({exte.. 2021. 3. 25.
[Express] NodeJs Route 라우팅 NodeJs Express API 를 활용한 라우팅 라우팅이란 ? 웹페이지 접속시 특정 주소에 대한 클라이언트 요청에 응답하는 방법을 결정하는 것을 말한다. 쉽게말해, http://goodmemory.tistory.com (현재 블로그) 에서 첫번째 글을 클라이언트가 확인하려면, http://goodmemory.tistory.com/2 로 접속해야 하는데, http://goodmemory.tistory.com (주소) + /2 (엔드포인트) 를 의미하고, 엔드포인트가 /3 ...../15 등 달라지면서 서버는 해당 라우팅에 따른 글을 출력하며 응답을 해주는 형식이다. 샘플 예제 [순수 nodeJs] const http = require('http'); const url = require('url'); c.. 2021. 3. 24.
[NodeJs] 애플 홈페이지 프론트엔드+백엔드 (풀스택) 샘플코드 Apple HomePage / front-end / back-end / Full Stack Sample Code 프론트엔드 + 백엔드 풀스텍 연습겸 애플 홈페이지 스타일의 웹사이트를 만들어보았다. 수정을 통해 본인의 웹사이트로 사용하여도 좋고, 소스를 다운 받아 본인의 학습 용도로 사용해도 좋다. 프론트엔드 사용 기술 목록 1. Html (Html5 표준 사용) 2. Css (프레임워크 없이 순수 CSS5만을 사용하여 가볍게 동작 구현) 3. Javascript (라이브러리 사용 없이 순수 바닐라 자바스크립트만을 사용) 백엔드 사용 기술 목록 1. NodeJs (반응형 메인 페이지를 우선 구현해 보았는데, 이후 포스팅에서 상품 상세페이지 등 다양한 페이지 추가 구현할 예정이다) 2. json (서버측의 .. 2021. 3. 22.
[CSS] 엘리먼트 투명도 조절 opacity CSS Element 투명도 조절 opacity css 에서 opacity 속성을 이용해 해당 엘리먼트의 투명도를 조절할수 있다. 투명도는 0~1까지로 조절이 가능하며, 소수점의 사용으로 흐리거나 진하게 조절할수 있다. 사용 예제 [CSS] 엘리먼트명 { /* 투명도 10% */ opacity : 0.1; /* 투명도 30% */ opacity : 0.2; /* 투명도 50% */ opacity : 0.5; /* 투명도 70% */ opacity : 0.7; /* 투명도 100% */ opacity : 1; } 2021. 3. 20.
[CSS] 가로 세로 가운데 정렬 CSS 가로 세로 가운데 정렬 CSS로 텍스트나 엘리먼트를 부모 엘리먼트 내 가로 세로 모두 가운데 정렬로 style을 지정해야 하는 경우가 많다. 아래 가장 자주 사용하는 2가지 방법을 나열해 보았다. 첫번째 text-align 속성과 line-height 속성을 사용 [가운데 정렬할 컨텐츠가 텍스트 (position : inline)성질인 경우에만 가능] 엘리먼트명 { /* 가로축 가운데 정렬 */ text-align : center; /* 세로축 가운데 정렬 */ line-height : center; } 두번째 flex를 통한 justify-content, align-items를 사용 엘리먼트명 { display : flex; /* 가로축 가운데 정렬 */ justify-content : cent.. 2021. 3. 20.
[CSS] 마우스 오버 이벤트 hover CSS 엘리먼트 위에 마우스 올렸을때 발생하는 이벤트 hover CSS selector 유형 /* 엘리먼트에서 이벤트 발생 + 해당 엘리먼트에 효과주기*/ 엘리먼트명:hover { 원하는 효과 입력 } /* 부모 엘리먼트에서 이벤트 발생 + 해당 엘리먼트의 자식 엘리먼트에만 효과주기 */ 부모엘리먼트명:hover 자식엘리먼트명 { 원하는 효과 입력 } 샘플예제 (부모 엘리먼트에 hover 이벤트 + 부모 엘리먼트에 효과) body { margin : 50px; } .container { display : flex; justify-content : center; align-items : center; width: 200px; height: 200px; border-radius : 50%; backgroun.. 2021. 3. 20.
[CSS] 짝수/홀수 번째 태그에만 style 효과 주기 CSS 짝수 홀수 번째 엘리먼트 Select 하기 CSS를 작성하다 보면 여러 태그에 같은 style을 설정할 일이 많은데 Class를 통해 따로 지정하여 style 효과를 설정해도 되지만 홀수번째, 짝수 번째와 같이 교차 효과를 설정할 필요가 있을때는 Selector를 통하여 간단한 코드를 통해 설정이 가능하다. 엘리먼트명:nth-child(even) 짝수번째 엘리먼트 Select 엘리먼트명:nth-child(odd) 홀수번째 엘리먼트 Select 샘플 예제 body { margin : 25px; } .container { display : flex; flex-direction : column; } .item { width: 50px; height: 50px; margin-bottom : 5px; } .. 2021. 3. 20.
728x90

티스토리툴바