다한의 웹 블로그

전체 글 (85)

NodeJS 환경 변수 설정 및 cross-env 사용법

웹 서버 배우기/Node.js 다한(dahan) 2021. 3. 18. 00:22

NodeJS API 테스트 과정에서 morgan 모듈에 대한 정보가 나오지 않도록 환경 변수를 변경하고 싶었습니다. 그래서 package.json 파일에 다음과 같은 코드를 추가했습니다. "scripts":{ "test":"NODE_ENV=test mocha test/users.spec.js" } 다음으로 넘어가기 전에 환경 변수 설정에 대해 알아보겠습니다. 환경 변수 설정 보통 NodeJS를 실행할 때 NODE_ENV 값을 이용해서 실행하게 됩니다. 배포(production) 모드와 개발(development) 모드로 나눌 수 있습니다. 배포 모드 일 때에는 파일 캐싱, 에러 메세지 감추기 등 배포에 적합한 환경 설정을 합니다. 개발 모드 일 때에는 파일 캐싱 방지, 디버그를 위한 상세한 에러 메세지 ..

Node 개발자라면 알아야 할 기본 지식 (JavaScript )

웹 개발 정보 다한(dahan) 2021. 3. 16. 10:11

Node 개발자라면 알아야 할 기본 지식을 한번 짚고 넘어가자는 의미에서 글을 쓰겠습니다. Node와 JavaScript Node는 구글에서 개발한 C++ 기반의 V8 엔진으로 빌드된 이벤트 기반 자바스크립트 런타임(실행 환경)입니다. 런타임 환경은 call stack, web apis, callback queue, event loop로 이루어져 있습니다. Node는 기본 언어가 자바스크립트이기 때문에 이 언어를 알아야 합니다. 자바스크립트 엔진은 메모리 힙(Memory Heep)과 호출 스택(call stack)로 구성되어 있습니다. 메모리 힙은 우리가 선언한 변수, 함수 등이 담겨져 있고 호출 스택에는 코드가 실행될 때 쌓이는 곳입니다. JavaScript 자바스크립트는 웹 브러우저에서 동작하는 스크..

자바스크립트 ES6(ECMAScript 6) 정리

웹 언어 배우기/JavaScript 다한(dahan) 2021. 2. 3. 12:30

자바스크립트 ES6(ECMAScript 6) 정리해봤습니다. ECMAScript는 자바스크립트 프로그래밍 언어를 정의하는 국제 표준의 이름입니다. 템플릿 문자열(리터럴) 문자열 안에 변수와 연산식을 혼합하여 사용할 수 있습니다. let id = '12345'; console.log(`id값은 ${id}입니다.`); //결과: id값은 12345입니다. `${}` 백틱(`)으로 감싸고 문자열은 그대로 적고 ${연산식}으로 작성합니다. 화살표 함수 기존의 함수보다 구문이 짧고 자신의 this, arguments(함수에 전달된 인수에 대항하는 배열 형태의 객체), super 또는 new.target을 바인딩하지 않습니다. (매개변수) => {함수 기능} let arr = ['css','html','javasc..

버튼 클릭 시 HTML 코드 복사하여 나타내는 방법

웹 언어 배우기/JavaScript 다한(dahan) 2021. 1. 27. 11:10

버튼 클릭 시 HTML 코드 복사하여 나타내는 방법에 대해 알아보겠습니다. 이름 아이콘 목표 추가 폰트패밀리 폰트 추가 저는 form 태그를 이용하여 목표 추가 버튼 또는 폰트 추가 버튼을 클릭하면 label과 input을 복사하여 아래에 나타나는 HTML 코드를 짜봤습니다. let addButton = document.querySelectorAll('button'); const addButtonClickHandle = (e) =>{ e.preventDefault(); let id = e.target.id; let appendArea = document.querySelector(`#${id}Add`); let html = document.querySelector(`.${id}__item--add`); l..

자바스크립트 배열 특정 문자열 찾기, match 함수

웹 언어 배우기/JavaScript 다한(dahan) 2021. 1. 25. 19:56

특정 텍스트 안에 검색할 단어, 찾고 싶은 단어가 있는 경우 해당 텍스트가 문구에 포함되어 있는지 확인할 수 있습니다. 또한, 정규표현식을 이용하여 특정 패턴을 검색할 수 있습니다. match 함수를 이용하여 자바스크립트 배열 특정 문자열 찾아보는 시간을 갖도록 하겠습니다. match 사용 방법 자바스크립트 배열 특정 문자열 찾기 전에 match 함수 사용 방법을 익히겠습니다. 문자열.match(찾을 단어) 간단한 예제와 함께 match 함수를 이해해보겠습니다. let str = 'hello world'; str.match('hello') 'hello world' 문자열에서 'hello'가 있는지 찾습니다. 일치하면 다음과 같이 결과가 나타납니다. [ 'hello', index: 0, input: 'he..

react 외부 함수형 컴포넌트 가져오는 방법

라이브러리/React js 다한(dahan) 2021. 1. 23. 15:57

이번 시간은 react 외부 함수형 컴포넌트 가져오는 방법에 대해 알려드리고자 합니다. 컴포넌트 만들기 모듈 내보내기(export) 및 가져오기 (import)를 통해 외부 함수형 컴포넌트를 가져올 수 있습니다. 일단 사이트에서 header 부분을 담당할 header 컴포넌트를 만들어보겠습니다. header.js import React from "react"; const header = () =>{ return( CYH Portfolio HOME ABOUT PORTFOLIO BLOG 사는곳: 서울특별시 영등포구 email: choyoungho95@gmail.com © 2021 CYH Portfolio. ) } export default header header 컴포넌트에서 export default [컴..

HTML 상대경로와 절대경로 표기법

웹 언어 배우기/HTML 다한(dahan) 2020. 6. 24. 10:30

HTML과 CSS에서 이미지를 넣는 방법은 img와 background:url()로 삽입할 수 있습니다. 이 과정에서 경로를 설정해야 하는데 상대경로와 절대경로를 이용할 수 있습니다. 상대경로 상대경로는 HTML, CSS 파일을 기준으로 경로를 설정하는 방법입니다. 만약, img 태그를 사용하여 jpg 파일을 삽입하고 싶을 때 어떻게 해야 할까요? 일단 img 태그는 HTML에 속하므로 index.html를 참고할 것입니다. index.html 파일은 루트에 있고 jpg 파일은 images 안에 logos에 있습니다. 그렇다면 최종 경로는 './images/logos/xxx.jpg'가 될 것입니다. 마찬가지로 CSS에서 jpg 파일을 삽입하고 싶을 때 어떻게 해야 할까요? index.css 파일은 sty..

CSS 생략기호 만들기(한줄, 멀티)

웹 언어 배우기/CSS 다한(dahan) 2020. 6. 23. 16:00

박스 형태나 한정된 width 값을 가지고 있을 때 CSS로 생략 기호를 만들 수 있습니다. See the Pen css 생략기호 1줄 / 멀티 by Cho-YoungHo (@choyoungho-web) on CodePen. CSS에서는 한줄과 멀티의 형태로 생략기호를 만들 수 있습니다. 공통적인 코드는 다음과 같습니다. width:300px; overflow: hidden; text-overflow: ellipsis; overflow 속성은 width 값과 height 값을 넘어간 글자에 대해서 숨기거나 스크롤이 생기게 할 수 있습니다. text-overflow 속성은 overflow된 내용을 사용자에게 어떻게 전달할지 지정합니다. 기본값은 clip으로 잘린 채 아무 것도 없습니다. 반면 ellipsi..

1
2
3
4
···
11

Copyright © 다한의 웹 블로그 All Rights Reserved

Designed by JB FACTORY

티스토리툴바