Welcome to Visit!!
Let's get it
웹 개발자로의 새로운 여정을 시작해 보겠습니다.
여러분들의 방문을
진심으로 환영합니다
웹 개발자로서, 다양한 개발 지식을 다루는
블로그를 만들어보겠습니다. 😃
참고하는 웹사이트 목록 💻
필자가 자주 참고하는 웹사이트를 둘러보세요.
CSS 스타일링 🎨
웹 개발을 할 때 사용하는 CSS 사용방법을 확인해보세요.
목차 CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등, 디자인 요소를 추가할 때 사용하는 전처리 과정을 의미한다. 프로젝트의 규모가 커지고 반응형 웹을 구현할 때 CSS는 가독성이 떨어지고 유지보수가 어렵다는 단점이 있다. 하지만 SCSS는 CSS와 달리 코드의 재활용성을 높이고, 가독성을 올려 주기 때문에 유용하다. 특히 변수를 활용하여 코드를 작성할 수 있도록 지원하기 때문에 코드의 가독성을 높여주고 반응형 웹 작성을 더 수월하게 만들 수 있다. 그럼 SCSS를 이용하여 반응형 웹을 개발하는 방법을 알아보자. SCSS를 이용한 반응형 웹 개발. SCSS에서 반응형 사이즈 사용법. 우선 SCSS에서 변수를 설정하고 @mixin을 사용하여 밑과 같이 작성한다. SCSS $pc2000: 2000px..
목차 바로 전 포스팅에서 텍스트에 그라데이션을 적용하는 법에 대해 알아보았다. 그렇다면 이번에는 border에 그라데이션을 적용하는 법에 대해서 포스팅해보겠다. 예제 파일 작성하기 1. Index.html 수정 index.html의 body 부분 안에 밑의 코드를 작성한다. HTML 2. Style.css 작성. 우선 HTML에 CSS를 다음과 같이 추가하여 박스들을 정 중앙에 위치시킨다. CSS html { display: flex; align-items: center; justify-content: center; height: 100vh; } 이후 .box1 부분에 다음과 같이 CSS를 작성한다. CSS .box1 { width: 200px; height: 200px; border: 5px solid..
목차 웹 개발을 하다보면, 디자인적인 측면에서 말줄임(...)을 사용해야 하는 경우가 많다. 왜냐하면 이렇게 말줄임표를 사용해야 디자인이 더 깔끔해 보이기 때문이다. 말줄임 CSS 문법은 다음과 같다. CSS overflow: hidden; : 박스에서 넘쳐난 텍스트 숨기기 white-space: nowrap; : 줄바꿈이 없어짐 text-overflow: ellipsis; : ... 말줄임 효과 -webkit-line-clamp : '글자'; : '글자'의 최대 라인수를 결정 -webkit-box-orient: vertical; : 영역 박스의 내의 정렬을 수직으로 만든다. word-break: break-all; : 어절이 유지되지 않고 끊어져서 줄바꿈 됨 1. 한줄만 나타내기 결과) Lorem, i..
목차 웹 개발을 하다보면 가끔식 사용하는 텍스트에 그라데이션 효과를 넣는 것이 헷갈릴 때가 있어서 지금 작성해보고자 한다. 우선 텍스트에 적용되는 그라디언트 속성을 다음과 같다. CSS # 이 속성은 그라데이션을 넣어주는 속성이다. background: linear-gradient(방향, #색상 코드, #색상 코드, #색상 코드,... , #색상 코드); # 이 속성은 요소의 배경이 어디까지 색을 채울지 정하는 속성이다. -webkit-background-clip: text; # 텍스트 문자의 채우기 색을 지정하는 속성으로, 이 속성이 지정되지 않는다면 color의 색상을 따라간다. -webkit-text-fill-color: transparent; 그럼, 이 내용을 바탕으로 텍스트에 그라데이션을 적용하..
Guest Book
블로그를 방문해주셔서 감사드립니다.
자유롭게 댓글 달아주세요 ~
Tag Page
원하시는 태그를 클릭해보세요.
Light Dev
Light Dev에서 공부한 내용을 정리합니다.
[Node.js] 🔦 dotenv 미들웨어 사용법. 본문
목차
Dotenv는 무엇인가?
웹 개발을 하다보면 특정 값들은 다른 개발환경을 사용할려고 하거나, 다른 컴퓨터로 코드를 옮겨야 할 때 수정이 필요하다. 예를 들면.
- 다른 컴퓨터에선 3000 포트를 사용해야 할 때.
- 나중에 DB를 이전하여 DB 접속 문자열이 바뀌는 상황.
- 내가 만든 코드를 팀원과 공유해야 하는데 내 아이디와 비번이 적혀있어서 보안 문제가 발생할 때.
이러한 환경에 따라 가변적인 변수 데이터들을 환경변수
라고 부른다. 영어로는 environment variable
이라고 부른다.
그래서 웹 개발자을 할 때는 환경변수를 한곳에 모아서 관리하게 되는데 이를 .env
파일에 모아서 관리하게 된다. .env파일에 모든 중요 환경변수들을 넣은 다음에, server.js
로 가서 .env파일에 있는 포트정보
와 데이터베이스 URL
을 작성하는 방식의 코딩을 하면 된다. 이 경우에는 server.js 파일에 보안 문제가 생길 경우에도 중요한 정보들은 .env 파일에 있기 때문에 보안상 이점도 존재한다. 그럼 사용하는 방법을 포스팅해보겠다.
Dotenv 사용법
dotenv 라이브러리 설치하기
.env
파일을 Node.js
서버에서 사용하려면, 우선 터미널을 킨 다음 Npm
이나 Yarn
을 사용하여 dotenv
설치해야 한다.
npm install dotenv
# or
yarn add dotenv
환경변수가 있는 server.js에 dotenv 라이브러리를 등록
server.js
상단에 let, const
변수가 모여있는 곳에 하단의 코드를 작성하면 된다. 그러면 하단에서 환경변수를 자유롭게 사용할 수 있다.
(server.js)
require('dotenv').config()
server.js와 같은 경로에 .env 파일 생성
위의 코드를 작성했다면, 나중에 변경이 될 것 같은 환경변수들을 .env
파일에 전부 다 적고 저장하면 된다.
(.env 파일)
PORT=8080
DB_URL="mongodb+srv://Light9639@~~~"
형식은 var 문법
으로 숫자와 문자 변수를 만드는 것과 같은 방식으로 왼쪽에는 변수명을 넣고, 오른쪽은 값을 넣는다고 보면 된다. 다만 변수 이름들은 보통 대문자로 표기한다. 변수를 server.js
에서 사용하는 방법은 다음과 같이 process.env.PORT
라는 방식으로 사용하면 된다.
(server.js)
console.log('PORT:', process.env.PORT);
console.log('DB_URL:', process.env.DB_URL);
이렇게 .env
파일에 모든 환경변수를 모아놓고 사용하게 되면 나중에 .env
파일만 수정하면 되니까 관리도 편해지고, 나중에 작업환경이 바뀌거나 클라우드에 올릴 때도 작성한 부분 변경해주면 쉽게 환경세팅이 가능해진다.
이러면 나중에 환경변수 변경이 필요할 때 직접 server.js
상에 변경해야 할 코드를 찾아서 바꾸는 것이 아니라 .env
파일만 수정하면 되기 때문에 좀 더 편리하게 사용할 수 있다.
이 글이 좋으셨다면 구독 & 좋아요
여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.
사이트를 방문해 주셔서 감사합니다
만일 도움이 되셨으면 공감과 구독 버튼 클릭 부탁드립니다.
추가적인 질문사항이나 이해가 안되는 점이 있으면 댓글로 적어주세요.
© Copyright 2023 Light