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; 그럼, 이 내용을 바탕으로 텍스트에 그라데이션을 적용하..
Let's learn about
'node.js'에 대해 공부한 내용을 정리한 페이지입니다.
Guest Book
블로그를 방문해주셔서 감사드립니다.
자유롭게 댓글 달아주세요 ~
Tag Page
원하시는 태그를 클릭해보세요.
node.js
공부한 내용을 정리한 페이지입니다.
Light Dev
Light Dev에서 공부한 내용을 정리합니다.
목차 Babel 이란? Babel이란 최신 ES6, ES7 버전의 JavaScript 코드를, ES5버전의 코드로 바꾸어주는 Node.js 패키지를 의미한다. Babel을 사용해야 하는 이유 계속해서 변화하는 JavaScript의 최신 코드를 이해하지 못하는 웹 브라우저의 문제를 해결하기 위하여, 또는 컴퓨터만이 아니라, 스마트폰에서 사용하는 브라우저에서도 자바스크립트 코드를 작동되도록 만들어주기 때문에 사용해야 한다. Babel 작동방식 Babel은 여러개의 플러그인이, 자신이 이해할 수 있는 ESNext 문법만 골라, 컴파일하는 방식으로 작동된다. ESNext 구문을 Babel 플러그인으로 보낸다. 여러개의 Babel 플러그인이 파이프라인 형태로 차례대로 실행한다. Babel 플러그인이 이해할 수 있..
목차 PM2란? PM2는 'Production Process Manager for Node.js'의 줄임말로 Node.js를 통해서 만든 프로그램을 관리해주는 프로그램을 뜻한다. PM2를 사용하는 이유 PM2를 사용하지 않을 경우, 에러가 발생하여 프로그램이 중지 되는 경우가 있다. 그러나 PM2를 사용할 경우, 프로그램 동작이 중지되면 PM2가 프로그램 동작을 다시 실행 시켜 주기 때문에 매우 유용하다. PM2를 사용하면서 코드를 수정 할 때, 서버를 끄고 다시 시작하는 번거로움 없이, 코드를 저장하고 웹 새로고침만 해주면 수정사항이 반영되기 때문에 매우 유용하다. PM2 설치 프로젝트 파일 터미널 창에서 아래 코드 입력 Shell npm install pm2 -g 위 코드가 실행이 안될 경우 아래 코..
목차 Express.js는 무엇인가? Expresss는 Node.js의 프레임워크로, Node.js를 이용하여 웹 개발을 할 때, Expresss 프레임워크를 사용하면 훨씬 간편하게 개발을 할 수 있게 도와주는 프레임워크이다. Expresss 프레임워크의 특징을 다음과 같다. 프레임워크중 점유율이 가장 높다. 많은 개발자들이 사용하고 있어 정보들을 많이 얻을 수 있다. 확장 모듈이 많이 있고 추가하기 용이하게 되어있다. Express 설치 방법 Express를 설치하기 위해서는 Node.js가 설치되어 있어야 한다. Express 설치는 NPM과 Yarn을 이용하여 설치하면 된다. Shell npm install express # or yarn add express Hello World 띄우기 그럼, E..
목차 Package.json 생성 TS-Node를 사용하기 전에 Package.json을 생성한다. TypeScript // 'package.json' 다음 명령어로 생성하고 전부다 enter 처리하면 된다. $ yarn init // 'package.json' 생성을 자동으로 하고 싶다면 $ yarn init -y 설치하기 Package.json을 생성하였다면 TS-Node 관련 패키지를 설치한다. Shell // 'Express', 'typescript', 'nodemon' 설치하기. $ npm install express @types/express @types/node nodemon ts-node typescript # or $ yarn add express @types/express @types/..
목차 TS-Node는 무엇인가? JavaScript를 웹이 아닌 콘솔에서 실행하기 위해서는 Node.js를 설치한 후에 node 자바스크립트파일명.js를 통하여 실행할 수 있다. 물론 TypeScript 파일도 자바스크립트 문법으로만 작성을 한다면 node 타입스크립트파일명.ts를 통하여 실행이 가능하긴 하다. 그러나 타입스크립트 문법으로 작성된 .ts 파일은 Node.js에서 실행이 되지 않는다. 왜냐하면 Node.js는 JavaScript 파일만 해석할 수 있지, TypeScript 파일은 해석할 수 없기 때문이다. 그래서 TypeScript 파일을 Node.js에서 실행하기 위해서는 TS-Node를 설치해야 된다. TS-Node는TypeScript 코드를 JavaScript로 컴파일하지 않고 직접 ..
목차 (import / export), (require / exports) 문법 자바스크립트에서의 대표적인 파일 입출력 방법은 CommonJS 와 ES6 문법이 있습니다. 서로 사용법이 다르며, 특징과 차이점이 있다. 그럼 이 두가지 차이점에 대해 포스팅해 보겠다. ES6 문법 (import / export) 특징 ES6에서 새롭게 도입된 키워드입니다. 자바와 파이썬 언어 방식과 비슷합니다. 파일 시작 부분에서만 호출 가능 필요한 모듈 부분만 선택하고 로드할 수 있어 더 선호 require() 에 비해 성능이 우수하며 메모리 절약 사용법 JavaScript import : 가져오기 export : 내보내기 export defaults : 내보내기 Tip 출력할 때 export(ES6) 와 exports(..
목차 Node.js를 이용한 백엔드 프로그래밍 작업을 할 때, Node.js 프로젝트 개발환경을 구축할 때 디렉토리 구조를 잡기 어려울 때가 있다. 이 때 Express-generator를 이용하면 Express환경을 간단하게 구축할 수 있다. 그럼 이 글에서 Express-generator 예제 파일을 만들어보자. Npm, Yarn을 이용하여 설치하기 Npm, Yarn을 이용하여 설치하려면 다음과 같은 명령어를 입력한다. Shell // 'npm i' 대신 'install'로도 가능함. $ npm i -g express-generator 프로젝트 환경 구성하기 전역 설치 후 터미널에 다음과 같이 입력한다. Shell // 'express'를 'pug'로 설치. $ express my-app --view..
목차 Node.js란? JavaScript 구동 엔진인 V8의 등장 크롬과 파이어폭스, 인터넷 익스플로러와 같은 브라우저들은 자바스크립트를 읽고 해석하는 역할을 합니다. 자바스크립트를 빠르게 읽고 해석하면 웹사이트 렌더링 성능도 빨라지니 브라우저 개발자들은 자바스크립트를 해석할 수 있는 엔진 개발을 꾸준히 해 나갔습니다. 그러다 구글 사내에 있던 크롬 브라우저 개발자들이 자바스크립트 해석엔진인 V8이라는 프로그램을 만들었는데 성능이 상당히 좋았기 때문에 이 엔진만 따로 기능을 추가하여 출시하였는데, 이 엔진을 Node.js라고 이름을 지었습니다. 즉, 기존의 브라우저에서만 사용되던 자바스크립트를, 브라우저 밖에서 사용할 수 있도록 만들어주는 프로그램입니다. Node.js를 실행하면 자바스크립트 입력란이 ..
© Copyright 2023 Light