Let's Study Coding

Welcome to Visit!!
 Let's get it

웹 개발자로의 새로운 여정을 시작해 보겠습니다.

명 총 방문자
개 총 포스팅
명 오늘 방문자
000일 째 블로그 운영중

여러분들의 방문을
진심으로 환영합니다

웹 개발자로서, 다양한 개발 지식을 다루는
블로그를 만들어보겠습니다. 😃

추천 카테고리 👑

블로그에 있는 카테고리를 쉽게 찾아보세요

최근 글 ✨

막 올라온 최신 포스팅을 구경해보세요 !

참고하는 웹사이트 목록 💻

필자가 자주 참고하는 웹사이트를 둘러보세요.

Img
2023. 2. 22. 22:45
[WebSite] 🖥️ 웹 개발을 할 때 자주 참고하는 사이트 모음.
목차 제가 웹개발을 할 때 자주 참고하는 사이트를 정리한 포스팅입니다. @Web's CSS 코드펜의 자료들 중 좋은 자료들을 모아 놓은 티스토리 블로그 사이트. 매우 유용한 자료가 많아서 애용하는 블로그다. @web's CSS 코드펜 레퍼런스 사이트입니다. wsss.tistor
더보기
Img
2023. 2. 13. 15:16
[WebSite] 🎨 유용한 무료 이미지 사이트 모음
목차 제가 주로 사용하는 또는 인터넷에서 찾은 유용한 무료 이미지 사이트를 모아서 정리한 포스팅입니다. Unsplash Unsplash는 200만개 이상의 완전 무료 고해상도 이미지를 제공하는 무료 이미지 사이트이다. 전 세계의 사진가들이 라이브러리에 사진을 제공하기
더보기
Img
2023. 2. 13. 15:01
[WebSite] 🖥️ 저작권 무료 목업 사이트 6곳 추천
포토샵, 일러스트를 이용한 디자인 작업을 할 때 로고나 웹, 패키지 등 디자이너들이 자신의 작업물을 더 업그레이드 하기 위하여 목업을 활용하고 있다. 오늘은 제가 주로 사용했던 무료 목업 사이트를 작성해보려고 한다. 1. Anthony Boyd Graphics Free Mockups
더보기
Img
2023. 2. 11. 20:33
[WebSite] 🌈 Gradient 사이트 모음.
목차 프론트엔드 웹개발을 하다 보면 Gradient를 이용하여 작업을 해야할 때가 많다. 문제는 Gradient 디자인을 할 때 단색으로 많은 톤을 잡지만 두 가지 이상을 사용할 때 조합이 어색하다면 전체적인 느낌이 살지 않을 수 있다. 하지만 조합이 잘된 그라데이션(Grada
더보기
Img
2023. 2. 11. 19:26
[WebSite] 🖥️ 유용한 SVG 사이트 모음
프론트엔드 작업을 하다보면 SVG를 사용하여 사이트를 만들어야 할 때가 생긴다. 그래서 어떤 유용한 SVG 사이트가 있는지를 알아볼 겸 자주 사용하는 SVG 사이트를 정리해서 작성해보려고 한다. 필자는 주로 7개의 SVG 사이트를 이용한다. 1. 부트스트랩(Bootstra
더보기

CSS 스타일링 🎨

웹 개발을 할 때 사용하는 CSS 사용방법을 확인해보세요.

Frontend/CSS, SCSS [SCSS] 🚀 SCSS를 이용한 반응형 웹 개발하기.

목차 CSS는 HTML 태그를 꾸미거나 효과를 넣어 주는 등, 디자인 요소를 추가할 때 사용하는 전처리 과정을 의미한다. 프로젝트의 규모가 커지고 반응형 웹을 구현할 때 CSS는 가독성이 떨어지고 유지보수가 어렵다는 단점이 있다. 하지만 SCSS는 CSS와 달리 코드의 재활용성을 높이고, 가독성을 올려 주기 때문에 유용하다. 특히 변수를 활용하여 코드를 작성할 수 있도록 지원하기 때문에 코드의 가독성을 높여주고 반응형 웹 작성을 더 수월하게 만들 수 있다. 그럼 SCSS를 이용하여 반응형 웹을 개발하는 방법을 알아보자. SCSS를 이용한 반응형 웹 개발. SCSS에서 반응형 사이즈 사용법. 우선 SCSS에서 변수를 설정하고 @mixin을 사용하여 밑과 같이 작성한다. SCSS $pc2000: 2000px..
프로필사진
Light9639
(0)
Frontend/CSS, SCSS [CSS] 🕹️ Border에 그라데이션 적용하기.

목차 바로 전 포스팅에서 텍스트에 그라데이션을 적용하는 법에 대해 알아보았다. 그렇다면 이번에는 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..
프로필사진
Light9639
(0)
Frontend/CSS, SCSS [CSS] 🎯 Ellipsis를 이용하여 말줄임 처리하기.

목차 웹 개발을 하다보면, 디자인적인 측면에서 말줄임(...)을 사용해야 하는 경우가 많다. 왜냐하면 이렇게 말줄임표를 사용해야 디자인이 더 깔끔해 보이기 때문이다. 말줄임 CSS 문법은 다음과 같다. CSS overflow: hidden; : 박스에서 넘쳐난 텍스트 숨기기 white-space: nowrap; : 줄바꿈이 없어짐 text-overflow: ellipsis; : ... 말줄임 효과 -webkit-line-clamp : '글자'; : '글자'의 최대 라인수를 결정 -webkit-box-orient: vertical; : 영역 박스의 내의 정렬을 수직으로 만든다. word-break: break-all; : 어절이 유지되지 않고 끊어져서 줄바꿈 됨 1. 한줄만 나타내기 결과) Lorem, i..
프로필사진
Light9639
(0)
Frontend/CSS, SCSS [CSS] 🕹️ 텍스트에 그라데이션 적용하기.

목차 웹 개발을 하다보면 가끔식 사용하는 텍스트에 그라데이션 효과를 넣는 것이 헷갈릴 때가 있어서 지금 작성해보고자 한다. 우선 텍스트에 적용되는 그라디언트 속성을 다음과 같다. CSS # 이 속성은 그라데이션을 넣어주는 속성이다. background: linear-gradient(방향, #색상 코드, #색상 코드, #색상 코드,... , #색상 코드); # 이 속성은 요소의 배경이 어디까지 색을 채울지 정하는 속성이다. -webkit-background-clip: text; # 텍스트 문자의 채우기 색을 지정하는 속성으로, 이 속성이 지정되지 않는다면 color의 색상을 따라간다. -webkit-text-fill-color: transparent; 그럼, 이 내용을 바탕으로 텍스트에 그라데이션을 적용하..
프로필사진
Light9639
(6)
전체 보기
Search
Let's Write Message

Guest Book

블로그를 방문해주셔서 감사드립니다.
자유롭게 댓글 달아주세요 ~

Let's Choose Tag Box

Tag Page

원하시는 태그를 클릭해보세요.

Light Dev
Light Dev에서 공부한 내용을 정리합니다.

-

[Node.js] 📚 Node.js란 무엇인가? 본문

Backend/Node.js

[Node.js] 📚 Node.js란 무엇인가?

Light9639

목차

    Node.js란?

    JavaScript 구동 엔진인 V8의 등장

    크롬과 파이어폭스, 인터넷 익스플로러와 같은 브라우저들은 자바스크립트를 읽고 해석하는 역할을 합니다. 자바스크립트를 빠르게 읽고 해석하면 웹사이트 렌더링 성능도 빨라지니 브라우저 개발자들은 자바스크립트를 해석할 수 있는 엔진 개발을 꾸준히 해 나갔습니다. 

     

    그러다 구글 사내에 있던 크롬 브라우저 개발자들이 자바스크립트 해석엔진인 V8이라는 프로그램을 만들었는데 성능이 상당히 좋았기 때문에 이 엔진만 따로 기능을 추가하여 출시하였는데, 이 엔진을 Node.js라고 이름을 지었습니다. 

     

    즉, 기존의 브라우저에서만 사용되던 자바스크립트를, 브라우저 밖에서 사용할 수 있도록 만들어주는 프로그램입니다. Node.js를 실행하면 자바스크립트 입력란이 하나가 생성되고 그 입력란에 자바스크립트를 입력하면 바로바로 해석해서 실행을 시켜준다.

     

    이런 Node.js의 가능성을 본 개발자들은 Node.js의 출시 이후 Node.js를 이용하여 많은 프로그램들을 만들어내기 시작했고, 자바스크립트를 일반 프로그래밍 언어처럼 다룰 수 있게 된 것이다. 

    Node.js의 장단점

    Node.js를 쓰기에 적합한 사이트

    1. 알림이나 실시간 대화같이 데이터의 실시간 처리가 필요한 앱을 만들때
    2. 사용자의 입출력이 많은 앱을 만들때
    3. 데이터 스트리밍 앱
    4. JSON API 기반 앱
    5. 단일 페이지 기반 웹 (SPA) 페이지 제작

    Node.js를 쓰기에 적합하지 않은 사이트

    • 많은 양의 데이터 (빅데이터)를 처리하는 앱

    Node.js 설치 및 사용법

    Node.js 설치하기 (LTS버전)

    • Node.js를 설치하려면 다음 링크에서 다운로드 하면 된다.
     

    Node.js

    Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

    nodejs.org

    Node.js 버전 확인하기

    • Node.js 버젼을 확인하려면 다음 명령어를 입력하면 된다.
    JavaScript
    // 'node.js' 버젼 확인 명령어.
node -v

    Node.js 로 자바스크립트 파일 실행하기

    • Node.js로 자바스크립트 파일을 실행하려면 다음 명령어를 입력하면 된다.
    JavaScript
    // 'node.js' 실행하기.
node <파일명>

    참고 문헌

    저작자표시
    잘못된 내용이 있으면 언제든 피드백 부탁드립니다.

    이 글이 좋으셨다면 구독 & 좋아요

    여러분의 구독과 좋아요는
    저자에게 큰 힘이 됩니다.

    Light Dev
    Light dev
    웹 개발자로의 새로운 여정을 시작해 보겠습니다. 조언해주실 부분이 있으시면 언제든 이메일 부탁드립니다.
    GitHub Light Dev Email
    naver band kakaoTalk kakaostory twitter facebook
    Backend/Node.js의 다른글
    더보기

    사이트를 방문해 주셔서 감사합니다

    만일 도움이 되셨으면 공감과 구독 버튼 클릭 부탁드립니다.
    추가적인 질문사항이나 이해가 안되는 점이 있으면 댓글로 적어주세요.

      Light9639
      티스토리에 팔로잉