티스토리

호소세의 개발 블로그
검색하기

블로그 홈

호소세의 개발 블로그

pabeba.tistory.com/m

호소세 님의 블로그입니다.

구독자
6
방명록 방문하기
공지 공지사항! (호소세 블로그 들어가는 ⋯ 모두보기

주요 글 목록

  • [Javascript] html2canvas 라이브러리 이용하여 스크린샷 찍기 https://html2canvas.hertzen.com/ html2canvas - Screenshots with JavaScript Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture html2canvas.hertzen.com 이곳에 가셔서 자신이 원하는 방식으로 다운로드하시면 됩니다. https://github.com/niklasvh/html2canvas/releases 저는 github에서 html2 canvas.min.js를 다운로드하여서 불러왔습니다. 다운로드하면 html 파일에 이런 식으로 넣어서 사용하면 됩니다. 아무튼 저 사이트에 들어가면 다운로드하는 방법이 잘 작성되.. 공감수 0 댓글수 0 2024. 4. 1.
  • [Javascript/HTML] 스크롤 시 퍼센트 바/원 동작 개발 오브제 광고를 보다가 제가 스크롤을 내리면 동그라미에 내린 높이만큼 퍼센트가 채워지는 것을 보고 이 기능에 대해 알아보면 재밌겠다고 생각해서 글을 쓰게 되었습니다. 스크롤 시 퍼센트 바 기능 추가 #progressBar { position: fixed; top: 0; left: 0; width: 0; /* 초기 너비는 0으로 설정 */ height: 5px; /* 퍼센트 바의 높이 설정 */ background-color: blue; /* 퍼센트 바의 배경색 설정 */ z-index: 9999; /* 다른 요소 위에 표시하기 위해 z-index 설정 */ } var windowHeight = window.innerHeight; var pageHeight = Math.max(document.body.scr.. 공감수 0 댓글수 0 2024. 3. 20.
  • [Javascript] document.referrer HTTP referrer document.referrer는 현재 페이지로 유입된 트래픽의 이전 페이지의 URL을 나타내는 JavaScript의 속성입니다. 이 속성은 HTTP Referer 헤더를 기반으로 하며, 사용자가 링크를 클릭하거나 페이지를 요청할 때 브라우저가 자동으로 설정합니다. 개발자 도구 네트워크 창에 들어가서 네트워크 통신한 것을 확인해 보면, 이런 식으로 요청 header에 저장되게 됩니다. 글로만 보면 이해하기가 조금 애매하니 그림으로 어떤 상황에 사용하면 좋을지 설명해 보겠습니다. 예시 및 설명 A 사이트에서 html 파일로 연결했을 때와 B 사이트에서 html을 연결했을 때 다른 결과 값이 나오게 하기 위해서 document.referrer를 사용하면 됩니다. if(document.. 공감수 1 댓글수 0 2024. 3. 5.
  • [HTML, Javascript] 모바일 터치와 PC 터치 구분(모바일 터치 안되는 현상) 웹 개발을 하면서 확인해야 하는 것이 바로 PC에서의 동작과 Mobile에서의 동작을 확인해야 합니다. 당연히 크기도 변해야 하지만 기능도 동작해야만 개발이 되었다고 할 수 있는데요. 개발을 하다 보니 PC에서는 눌리는데 모바일에서는 터치가 안 되는 현상을 발견하여 이것에 관하여 알아보려고 합니다. 모바일 터치 HTML 속성 값 ontouchstart 터치가 시작되었을 때 발생하는 이벤트입니다. Touch me! ontouchmove 터치한 상태에서 움직일 때 발생하는 이벤트입니다. Drag me! ontouchend 터치가 종료되었을 때 발생하는 이벤트입니다. Touch end! ontouchcancel 터치 이벤트가 취소될 때 발생하는 이벤트입니다. Touch canceled! ontouchenter.. 공감수 0 댓글수 0 2024. 1. 14.
  • [Echarts] 그래프에 위치 별로 tooltip 넣기, grid 설정 Echats를 사용하여 그래프를 그리고 있는데, 저희가 그래프를 표현하는 곳의 디자인이 굉장히 작아서 그래프도 최대한 크게 만들어 보고, 그래프의 라벨이 작아서 툴팁도 만들어 보았습니다. 어떻게 생성하는지 알아볼까요? 먼저 제가 작성한 글을 읽으면서 echart 사용법을 알아본 후 조건 설정을 해보면 좋겠습니다. https://pabeba.tistory.com/238 JavaScript - ECharts 사용하는 법 그래프를 직접 만들어서 사용하는 것은 대단하다고 생각합니다. 하지만 일을 더욱 효율적으로 하기 위해서 다른 사람들이 만들어 놓은 좋은 소프트웨어를 가지고 일을 진행하면 업무 속도도 빠 pabeba.tistory.com 잘 숙지하셨다면 https://echarts.apache.org/examp.. 공감수 0 댓글수 0 2023. 12. 31.
  • [JavaScript] 달력 구현2 예전에도 달력 구현을 한 적이 있는데, 에러가 나서 아쉬웠던 적이 있습니다. https://pabeba.tistory.com/12 Javascript - 달력 구현 Javascript를 이용해서 웹 페이지에 달력 구현을 해보았습니다. 개인적으로 너무 어렵기 떄문에 더 자세히 분석을 해봐야겠습니다. 또한, 구현은 했지만 오류가 있는 달이 있어... 우울합니다. 부족 pabeba.tistory.com 이번에는 조금 더 간단?하고 에러가 나지 않게 구현해보려고 합니다. 달력 구현하기(Version. 02) 1. HTML 코드 작성 일 월 화 수 목 금 토 1. jquery를 이용하여 script 함수를 만들었기 때문에 CDN으로 jquery를 다운로드합니다. 2. 월(month)을 변경하는 헤더 부분과.. 공감수 0 댓글수 2 2023. 12. 23.
  • JavaScript - ECharts 사용하는 법 그래프를 직접 만들어서 사용하는 것은 대단하다고 생각합니다. 하지만 일을 더욱 효율적으로 하기 위해서 다른 사람들이 만들어 놓은 좋은 소프트웨어를 가지고 일을 진행하면 업무 속도도 빠르고 좋다고 생각합니다. ECharts 설치하기 1. 콘텐츠 전송 네트워크(Content Delivery Network, CDN)를 이용해서 설치하기 이런 식으로 script import 많이 해보셨을 겁니다. 2. NPM Install npm install echarts 제가 요새는 npm을 사용하지 않아서 이 방법은 사용하지 않았는데, node.js를 사용하시는 분들이라면 당연히 이 방법이 가장 간편하다고 생각합니다. 3. 직접 다운로드하여 사용하기 https://github.com/apache/echarts/blob/m.. 공감수 0 댓글수 2 2023. 12. 11.
  • [JavaScript] Object.entries(obj) , sort((a,b)=>) 오늘은 Object.entries 와 sort 함수에 대하여 알아보도록 하겠습니다. 제가 이 함수를 사용하게 된 이유는 객체에 있는 value 값을 시간의 순서대로 나타내고 싶어서 이러한 함수를 사용하게 되었는데, 오늘은 가볍게 동물의 수로 정렬하는 것을 알아보도록 하겠습니다. 1. Object.entries 객체의 key 값과 value 값을 list 안에 list 형태로 담습니다. const keywordCount = { '말': 3, '코끼리': 1, '기린': 5 }; let entries = Object.entries(keywordCount); console.log(entries); // [ [ '말', 3 ], [ '코끼리', 1 ], [ '기린', 5 ] ] 결과를 보시면 리스트 안에 val.. 공감수 1 댓글수 0 2023. 11. 29.
  • [JavaScript] 돈(money),숫자 세 자리마다 ,(콤마=쉼표) 찍는 법 오늘은 돈이나 숫자 3자리마다 , (쉼표, 콤마)를 찍어보는 것을 알아보도록 하겠습니다. 설명에 앞서 서버에서 돈이나 숫자 데이터를 받아서 화면에 나타낼 때, 컴마를 찍으려고 한 적 많으실 겁니다. 방법이 두 가지 있는데 아마 첫 번째 방법이 가장 무난하고 간단하다고 생각합니다. 간단한 방법부터 알아보도록 하죠. 1. toLocaleString() 함수 이용하기 number.toLocaleString(locales, options) 콤마를 찍으려는 숫자와 locales 그리고 options를 넣어서 코드를 실행하면 되는 구조입니다. locales 에는 국가의 코드를 넣어야 하는데.... 엄청나게 많습니다. https://www.iana.org/assignments/language-subtag-regist.. 공감수 0 댓글수 1 2023. 11. 26.
  • [개발] 모달(Modal)창 만들기 (feat. 팝업 창과의 차이점) 모달 창 만들기 연습에 앞서 팝업창과 모달 창의 차이점을 알아보겠습니다. (모달 창을 직접 만들어보면 알게 되지만요.) 팝업 창 목적: 팝업 창은 주로 새로운 브라우징 창을 열어 다른 웹 페이지, 광고, 알림, 미디어 등을 표시하는 데 사용됩니다. 주로 웹 브라우저에서 볼 수 있으며, 사용자에게 새로운 창을 열어 웹 페이지 내용을 표시합니다. 독립 창: 팝업 창은 일반적으로 원래 페이지와 독립된 창으로 열립니다. 이것은 다른 페이지와 분리되어 동작하므로 사용자가 주 창과 팝업 창 간을 이동하거나 중복 창을 열 수 있습니다. 제한적 동작: 팝업 창은 일반적으로 더 많은 권한을 갖습니다. JavaScript 팝업 창은 브라우저의 보안 기능을 우회할 수 있으므로 팝업 창이 남용되지 않도록 브라우저에서 차단되는.. 공감수 1 댓글수 1 2023. 10. 19.
  • [개발] 국경일 확인표 만들기 with HTML, CSS, Javascript, JQuery 23년 추석 연휴가 개천절까지 껴서 매우 길게 느껴졌습니다. 그러면서 궁금증이 생겼습니다. 과연 다음번에 있는 가장 긴 연휴는 언제일지 궁금해지기 시작했습니다. 그래서 저만의 국경일 달력? 표?를 만들어 보는 것도 재밌을 것 같더라고요. 국경일 API 승인받기 일단 제작에 앞서 국경일 API를 승인받아야 합니다. https://yogyui.tistory.com/entry/%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0%ED%8F%AC%ED%84%B8%EA%B3%B5%ED%9C%B4%EC%9D%BC-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A1%B0%ED%9A%8C-REST-API 공공데이터포털::공휴일 데이터 조회 (REST API) 회사에서 사원별 공수.. 공감수 2 댓글수 1 2023. 10. 5.
  • jQuery 4탄 (ajax 통신 text방식, json방식) 1탄 : https://pabeba.tistory.com/175 2탄 : https://pabeba.tistory.com/176 3탄 : https://pabeba.tistory.com/178 어쩌다 보니 4탄까지 작성하게 되었네요. 어떤 영화를 보면 계속 후속작이 나오는데 솔직히 뒤로 갈수록 흥미가 떨어지더라고요. 아 근데 스파이더맨이랑 범죄도시는 재밌었습니다. 그래서 여러분들이 지루해하실까봐 이번 편을 마무리로 jQuery를 잠깐 보내주려고 합니다. 물론 다른 코드에서 나올 수도 있어요 ㅎㅎ 그래서 오늘은 중요한 Ajax 통신에 대하여 알아보도록 합시다. Ajax 통신 두가지를 알아보도록 하겠습니다. 텍스트만 받아오는 방식과 json을 받아오는 방식을 해보겠습니다. 텍스트 방식 1. script 를 .. 공감수 0 댓글수 0 2023. 6. 23.
  • jQuery 3탄(요소선택 응용, mouseenter, mouseleave, hover, prop) 어쩌다 보니 3탄까지 가게 되었습니다. 1탄 : https://pabeba.tistory.com/175 2탄 : https://pabeba.tistory.com/176 slideToggle html에 작성된 내용이 스르륵 내려오는 형태를 보여줍니다. 정보 더보기 호소세 출생 2000년 13월 36일, 서울특별시 국적 대한민국파일:대한민국 본관 호소 호씨[3] 신체 185.7cm 80kg 가족 부모님, 남동생, 형, 누나, 언니, 오빠 이번에 새로 추가된 내용입니다. document ready를 작성하지 않아도 저렇게만 작성하여도 dom이 생성되고 함수를 사용할 수 있게 되었습니다. 코드가 줄었네요 ㅎㅎ 그래서 아이디가 toggleSpan 인 태그를 누르면 숨겨진 내용이 나오게 됩니다. 직접 코드를 옮겨서.. 공감수 0 댓글수 0 2023. 6. 21.
  • jQuery 1탄 (ready, click, text, $(요소 선택) ) jQuery란? jQuery는 JavaScript 기반의 오픈 소스 프론트엔드 라이브러리입니다. 웹 개발을 위한 도구로 사용되며, HTML 문서의 요소를 선택하고 조작하는 데 특히 유용합니다. jQuery는 단순하고 직관적인 API를 제공하여, 복잡한 JavaScript 코드를 간결하게 작성할 수 있도록 도와줍니다. 웹 페이지의 동적인 요소를 조작하고 애니메이션 효과를 적용하며, 서버와의 데이터 통신을 쉽게 처리하는 등 다양한 기능을 제공합니다. jQuery는 여러 가지 기능을 갖춘 다양한 모듈로 구성되어 있으며, 기본적인 선택자, 이벤트 처리, 애니메이션, AJAX와 같은 웹 개발에 필요한 다양한 기능을 포함하고 있습니다. 하지만 최근 웹 개발의 발전과 JavaScript의 표준화로 인해 jQuery의.. 공감수 0 댓글수 0 2023. 6. 19.
  • Ajax Ajax란? AJAX는 Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법입니다. 이름에 XML이라고 명시되어있긴 하지만 JSON이나 일반 텍스트 파일과 같은 다른 데이터 오브젝트들도 사용 가능해서 요즘엔 XML을 잘 안 쓰고 십중팔구 JSON을 다룬다고 합니다. 용어와 실제 기술 간의 차이가 커져서 요즘에는 약어가 아닌 고유명사 취급하고 있습니다. Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분.. 공감수 1 댓글수 0 2023. 6. 8.
  • Javascript & DOM DOM이란? 텍스트 파일로 만들어져 있는 웹 문서(HTML 파일, XML, SVG)를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 합니다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 합니다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM입니다. DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영됩니다. 그림을 보면 브라우저는 웹 문서(HTML 파일,XML, SVG)를 로드한 후 파싱하여 DOM을 생성합니다. 이러한 웹 문서의 동적 변경을.. 공감수 1 댓글수 0 2023. 6. 4.
  • Execution Context & Call Stack 이제서야 JS의 기본을 알게 되어 기쁩니다. 처음에 들었을 때는 뭐야 이게 하고 지나갔지만, 점점 코드를 생성하다 보면 이것이 왜 필요한지 알게 되더라고요. 더 높은 빌딩을 위해 더 좋은 기초가 필요하듯이요. 어?쓰흡... 하아... 님의 글을 읽으면서 이해가 잘되어 제 블로그에도 살짝 포스팅하고 싶네요. 감사합니다. Execution Context(실행 컨텍스트)란? 자바스크립트 엔진이 코드를 실행하기 위해선 코드에 대한 정보들이 필요합니다. 코드에 선언된 변수와 함수, 스코프, this, arguments 등을 묶어, 코드가 실행되는 위치를 설명한다는 뜻의 Execution Context라고 부릅니다. 자바스크립트 엔진은 Execution Context를 객체로 관리하며 코드를 Execution Co.. 공감수 1 댓글수 0 2023. 5. 14.
  • JavaScript - async/await Promise를 통한 비동기 코딩(복습) https://pabeba.tistory.com/84 Promise로 비동기 동작을 하는 것을 복습해 봅시다. 어떤 원격 REST API를 호출을 하여 게시물 작성자의 이름을 리턴하는 함수를 작성하고 그 함수를 호출해보았습니다. function fetchAuthorName(postId) { return fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`) .then((response) => response.json()) .then((post) => post.userId) .then((userId) => { return fetch(`https://jsonplaceholder.typicode.com/users/.. 공감수 0 댓글수 0 2023. 2. 7.
  • JavaScript - Promise callback 함수를 통한 비동기 처리의 문제점 function makeCharcter(id,job,func){ let user setTimeout(function(){ console.log('1초 뒤 실행') user ={ id : id, job : job, info : id + job }; func(user) },1000) } makeCharcter('hoso','warrior',function(a){console.log('character:',a)}) 한개의 callback함수만 있다면 전혀 어지러워 보이지 않지만 저 만들어진 callback 함수 속에 또 함수를 만들고 또 함수를 만들고 하면 코드가 너무나도 길어질 것입니다. 콜백 함수를 중첩해서 연쇄적으로 호출해야하는 복잡한 코드의 경우, 계속.. 공감수 0 댓글수 0 2023. 2. 7.
  • JavaScript - Callback Callback함수 다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수를 말합니다. 함수를 만들 때, parameter를 함수로 받아서 쓸 수 있는데 그 함수가 callback 함수 입니다. 기본적으로 js를 배울 때 console.log로 따로 함수를 실행시켜 결과값을 확인하곤 합니다. 케릭터를 만드는 함수에서 return 값으로 user의 케릭터를 만들어내고 확인하는 방법입니다. callback 사용 X function makeCharacter(id,job){ const user = { id : id, job : job, info : id + job } return user } const hoso = makeCharcter('hoso','warrior') console.log('charac.. 공감수 0 댓글수 0 2023. 2. 6.
  • JavaScript - 최대공약수, 최소공배수 최대공약수 (the greatest common denominator) JS로 두 수의 최대공약수 구하기! 일단 최대공약수가 뭔지 다들 아시겠지만, 최대공약수는 사전적인 의미로 '둘 이상의 정수(整數)의 공약수 가운데 가장 큰 수. 정식(整式)에서는 공약수 가운데 차수가 가장 높은 것을 이른다' 인데 그림으로 설명하는 것이 더 이해가 빠르겠네요.... 한국어 너무 어려워요 ㅠ 84와 120의 최대공약수는 2*2*3인 12입니다! 저렇게 소수를 나누다보면 나오게 됩니다. 그것을 JS로 만들어보면 됩니다. 두 수를 나눴을 때 둘 다 나머지가 0이 나오는 수를 찾으면 되겠죠! let GCD = (num1, num2) => { let gcd = 1; for(let i=2; i GCD(120,84) => GCD(.. 공감수 0 댓글수 0 2023. 1. 15.
  • JavaScript - Prototype TypeScript를 공부하려고 하니까 Prototype, scope, this, 동적타입 느슨한 타입 이런 것들을 좀 알아야 왜 대체제를 만들었는지 알 수 있겠더라고요 ㅎㅎ 그래서 오늘은 Prototype을 공부해 봅시다! 프로토 타입 객체 Java, C++과 같은 클래스 기반 객체지향 프로그래밍 언어와 달리 자바스크립트는 프로토탑입 기반 객체지향 프로그래밍 언어입니다. Class 를 만들어서 객체를 만드는 방법도 사용할 수 있지만 prototype 을 사용해서 자식 object에게 데이터를 물려줄 수 있습니다. 일단 Class의 예를 보겠습니다. class human{ constructor(name, age){ this.name = name this.age = age } } const hosose =.. 공감수 0 댓글수 0 2023. 1. 10.
  • Express JS - router 속 미들웨어 코드 구조화를 하면서 엔드포인트를 router를 이용하여 분리하였습니다. 기존에는 app = express() app.get('/users/signup' , async(req,res) => {내용} 이렇게 작성했다면 파일을 여러개로 분리하여 index.js 파일에 const userRouter = require('./userRouter') const router = express.Router() router.use('/users', userRouter) userRouter.js 파일에는 const router = express.Router() router.post('/signup', userController.signUp) 이런식으로 파일을 분리하여 엔드포인트를 지정해 주었습니다. 사실 이것이 코드 전체.. 공감수 0 댓글수 0 2022. 11. 14.
  • Node.js - API Architecture (구조화) 코드 구조의 중요성 음... 저는 지금 express의 모든 메소드를 한 파일에 넣어놓았습니다. get 부터 delete 까지 전부다요. 지저분한 저의 js파일은 부끄럽게 짝이 없기 때문에 API 구조화를 해보려고 합니다. 당연히 한 파일안에 있으면 구현하기 간단합니다. 하지만... 저도 한 7~8개의 기능만 구현해 놓았는데 제가 어디에 무엇을 써놓았는지 알지 못하겠더라고요! 특히, 기업 시스템에서 하나의 파일에 모든 코드를 넣는 경우는 거의 없습니다. 기능적으로 영역을 구분하여 개별 코드를 관히하는 것이 좋습니다. 코드의 구조를 더 체계적으로 그리고 효율적으로 구현해 놓은 것을 코드의 아키텍처(architecture)라고 합니다. 코드를 어떤 기준으로 나누어 구조화해야 하는지 알아봅시다! 1. 확장성 .. 공감수 0 댓글수 0 2022. 11. 10.
  • Express - JWT JWT(json web token) $ npm install jsonwebtoken --save 다운로드한 후 하기 코드 작성 (1): jsonwebtoken 라이브러리 import (2): 실제로 전달할 내용인 Payload 정의 (3): Secret Key, 실제로 Secret Key는 노출되면 안 되기 때문에 환경변수로 관리해 주어야 합니다. (4): sign() method로 JWT 발급, 첫번째 인자로 Payload가 두번째 인자로 Secret Key가 들어 갑니다. 세번째 인자로 option을 추가 할 수 있는데, option이 존재하지 않으면 HS256 알고리즘으로 JWT가 발급 됩니다. JWT 확인 (1): verify() method로 JWT의 Payload 확인, 첫번째 인자로 JWT가.. 공감수 0 댓글수 0 2022. 11. 8.
  • Javascript - 화살표 함수의 비밀 map 함수에 객체를 바로 return 하려고 하니 undefined 이 나타나게 되었습니다. 그리하여... 화살표 함수의 비밀을 파헤쳐보기 시작했습니다. map 함수로 간단한 예시를 보여드리겠습니다. let arr = [1,5,412,2,156,2] arr.map(x => {x}) [undefined, undefined, undefined, undefined, undefined, undefined] 화살표 함수 뒤에 리턴값을 불러오게 되면 모든 것이 생략되고 리턴 값만 작성하면 되는데 객체를 불러오면 undefined가 뜹니다. 그 이유는 저 {x} 객체를 함수로 인지해서 return 값이 없기 때문에 그렇다고 합니다. 객체 안에 값을 넣으려면 arr.map(function(x){ return {x} .. 공감수 0 댓글수 0 2022. 11. 4.
  • Express와 TypeORM을 활용한 CRUD API 만들기 Express를 도입하며 자주 등장하게 될 req | res 이 두 단어는 ‘요청’과 ‘응답’으로 쉽게 번역될 수 있는 request와 request를 의미하는 변수명입니다. 여기서 req는 HTTP 통신시 요청에 대한 정보를 담는 객체를 의미합니다. 그리고 이 req에 상응하여 응답에 대한 정보를 담는 객체가 바로 res라고 표현될 수 있습니다. 그리고 백엔드 서버 입장에서 클라이언트측에서 전달한 여러 메타 정보를 확인해야할 때는 req 객체에, 백엔드 서버로서 내보내야하는 다양한 메타 정보들을 담아내야 할 때는 res 객체에 접근하게 됩니다. 이제부터 이 둘이 품고 있는 다양한 속성 및 메소드들을 살펴보며 세부 역할과 기능을 파악해보겠습니다. req - 요청 객체 (Request) request 객체.. 공감수 0 댓글수 0 2022. 11. 4.
  • Express 초기 환경세팅 가이드 express 설치 는 검색해보면 저보다 더 뛰어난 분들이 잘 작성 해주셨을 것이라 믿습니다. 설치 명령어 $ npm install express Express를 일시적으로만 사용하고 배포용 dependency list에 저장하고 싶지 않는다면 아래의 명령어를 입력합니다. $ npm install express --no-save dependencies가 아니라 로컬 개발환경에서 쓰고 싶은 패키지들을 관리하는 devDependencies에 해당 내용을 저장하고 싶다면 사용하셔야될 명령어는 아래와 같습니다. $ npm install express --save-dev 2. nodemon 개념 정의 Node에서는 코드에서 수정이 일어났을 때, 코드의 수정 사항이 서버에 자동으로 반영되지 않습니다. 즉, 코드를 .. 공감수 0 댓글수 0 2022. 11. 3.
  • Express.js node.js 기반으로 서버를 개발한다는 것은 자유도가 높고 무한한 확장 가능성을 이야기합니다. express.js 와 같이 Server-side Framework들이 무수히 많기 때문입니다. 이러한 server-side Framework 를 사용하지 않고 node.js 에 내장된 http로 진행을 하게 된다면 매우 복잡한 로직을 진행하는 어플리케이션이나 큰 규모의 서비스를 제공해야하는 경우 코드가 지저분해지게 됩니다. 그래서 이러한 불편함을 해소하기 위해서 탄생한 것이 바로 express와 같은 프레임워크입니다. ” Express is fast, unopinionated, minimalist web framework for node.js.” 빠르고 자유롭고 가벼운 것이랍니다. 시작부터 벌써 개운하군요... 공감수 0 댓글수 0 2022. 11. 1.
  • Node.js (사용 이유) Node.js 를 사용하는 이유 (중요 3가지) 1. Frontend 와 Backend 기술 스택 통합 프론트엔드와 백엔드 양쪽에 동일한 언어를 사용하면 코드를 모듈로 만들어서 재사용할 수 있습니다. Javascript로 훈련된 개발자는 최소한의 노력으로 서버 측 프로그래밍을 시작할 수 있습니다. 현대 웹 개발에서 가장 중요한 개발팀의 전반적인 생산성 향상에 도움이 됩니다. 2. 빠른 처리 속도와 동시 요청 처리 성능 Node.js에 사용된 C++ 로 작성된 V8엔진은 인터프리터 방식이 아닌 JavaScript로 작성된 코드를 컴퓨터가 해석하기 쉬운 바이트 코드로 변환하는 JIT 컴파일 방식을 채택하고 있으며, V8의 최적화 기법으로 놀라운 속도로 작업을 수행합니다. Google이 엔진에 막대한 투자를 .. 공감수 0 댓글수 0 2022. 10. 25.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.