외우지말고 이해하라.

외우는 것 보단 이해해서 내것으로 만들어 활용하기

WEB Front-End 24

Node.js 서버 메모장

const http = require('http'); const fs = require('fs').promises; // 프로미스 기반 fs 를 사용하려면 .promises 를 붙여야 됌, 안그럼 오류남 const server = http.createServer(function(req, res){ new Promise(function(resolve, reject){ var data = fs.readFile('./index.html'); resolve(data); }).then(function(result){ // 서버 응답 var data = result; res.writeHead(200, {'Content-type' : 'text/html; charset=utf-8'}); // 200 은 성공을 의미 ..

Javascript - 정규표현식(Regular Expression) 정리 / 모음

[a-z] : 영어 소문자 [A-Z] : 영어 대문자 [0-9] : 숫자 [aeiou]: 모음 [k-p] : 알파벳에서 k 부터 p 까지만. [4-8] : 숫자 4에서 8까지만. [가-힣] : 한글 .*[가-힣]+.* : 앞에 주절주절 영어든 숫자든 한글이든 마구 반복돼도 상관 없고 가운데 한글이 한 글자 이상 반복된 다음 또 무슨 문자가 반복돼도 상관없다. 출처: https://solskjaer.tistory.com/155 [work smart !!]

Javascript - LocalStorage 정리 + 로컬 스토리지 사용법

LocalStorage ・데이터를 사용자 로컬에 보존하는 방식. ・데이터를 저장, 덮어쓰기, 삭제 등 조작 가능. ・자바스크립트(JavaScript)로 조작. ・모바일에서도 사용 가능 쿠키와 차이점 ・유효 기간이 없고 영구적으로 이용 가능 ・5MB까지 사용 가능 (쿠키는 4KB까지) ・필요할 때 언제든 사용 가능 (쿠키는 서버 접속시에 자동 송신) LocalStorage 기본 구성 ・키(key)와 값(value)을 하나의 세트로 저장. ・도메인과 브라우저별로 저장. ・값은 반드시 문자열로 저장됨. Session Storage => localStorage - 세션이 끊겨도 사용 가능. sessionStorage - 같은 세션만 사용 가능. LocalStorage 사용법 //localStorage 데이터 추..

requireJS를 통한 모듈화 - javascript define 함수 사용법

공부를 하다 보니 define([ '../test04.js', ], function(test04) { var getTest = function(str){ console.log("hi"+str); } return { getTest : getTest }; }); define() 이라는 함수를 만나게 되었다.. 최근 자바스크립트 모듈화 및 의존성관리에 관심이 생기게 되었습니다. 회사에서 맡아서 진행하는 프로젝트가 오래된 서비스이다 보니 아직 까지 모듈화 및 의존성 관리가 제대로 이루어 지고 있지 않고 있어 (html코드에 script 코드를 포함시키는 방식… 순서 꼬이면 난리가 나서 새로운 코드를 작성할때도 일단 다 가져다 쓰고 있습니다…) 코드를 유지보수하는데 점점 어려움을 겪고있어 계속 이런식으로 유지보수..

Node.js 학습 01 - 노드의 기본 개념 : node.js 이벤트 루프, 태스크 큐, 백그라운드, 싱글스레드

노드 js 의 핵심 개념 이해하기 1. node.js 는 chrome V8 javascript 엔진으로 빌드된 js 런타임이다. ㄴ 런타임이란 ? 특정 언어로 만든 프로그램을 실행할 수 있는 환경을 뜻한다. ㄴ 노드는 V8과 libuv 라는 라이브러리를 사용하며 c와 c++ 로 구현되어 있다. libuv는 이벤트키반, 논블로킹 I/O 모델을 구현하고 있다. (I - input , O - out : 입출력) 2. 노드는 이벤트 기반이다. ㄴ 이벤트 리스너에 콜백함수를 등록하여 사용한다. ㄴ 이벤트 루프는 호출 스택, 태스크 큐, 백그라운드를 이용한다. 3. 노드는 논 블로킹 I/O 를 구현하고 있다. ㄴ 보통 자바스크립트 코드는 동시에 실행 될 수 없다. ㄴ 파일 시스템 접근, 네트워크를 통한 요청 같은 ..

a태그 JavavScript void(0) 을 쓰는 이유 <a href="javascript:void(0)">

Javascript void(0) 이란? 회사에서 일하다 보니 a href="javascript:void(null)" 이런 태그가 눈에 띈다. void(null) 을 편의상 void(0) 이라고 하겠다. (출력해보면 둘다 undefined 가 나옴) 링크가 정상적으로 동작하지 않게 만들기 위하여 이처럼 undefined를 사용한다고 보면 된다. 우리는 내부 link 태그를 사용하면서 경우에 따라 링크를 제거하기를 원한다. 링크 태그인 a에 css 스타일이 있는 경우에 link 태그를 그대로 유지해야하므로 태그는 가지면서 실제 클릭 이벤트는 작동하지 않도록 하기 위함이라 하겠다. 태그는 가지면서 클릭 이벤트는 작동하지 않도록 하기 위해서 이렇게 사용하는 것.

JavaScript - for, foreach, filter, map, reduce 기능

자바스크립트에서 map(), filter(), reduce() 메소드는 배열 요소를 나열하거나, 특정 조건에 맞게 보여줄 때 자주 쓰인다. 해당 메소드들의 동작 원리를 알아보고자 해당 메소드들이 for문으로 어떻게 돌아가는지 작성하려 한다. const listData = [ { id: 1, text: 'hello', }, { id: 2, text: 'everyone', }, { id: 3, text: 'welcome', }, { id: 4, text: 'to', }, { id: 5, text: 'my blog', }, ] 공통으로 사용되는 데이터 1. filter var newArr = arr.filter(function(v, i, arr) { return condition; }); filter의 가장 ..

Vue.js 란?

Vue.js 란 ? 프론트 프레임 워크이다. UI 단에서 데이터를 관리하고 이를 처리하기 위한 프레임워크, 화면을 꾸며주는 프레임워크는 아니다. 프론트엔드의 종류 Angular - Typescript 사용, 구글 등 React - 탄탄한 아키텍쳐, ES6 필수, 페이스북 등 Vue - page 수준의 라이브러리 참조 (script 태그) 가 가능, 가벼움 - React 와 Angular 의 장점을 차용해서 만듬 장점 : 가볍고 유연함 , 동작 속도가 빠름(React 다음으로), 초기 러닝커브가 완만함, JQuery 보다 구현 방식이 쉽고 간단함, 구조를 정확히 지키지 않아도 동작 특징 : SPA : single page Application , MVVM 패턴 : Model - view - viewMode..

Node.js 란?

Node.js 란? Ryan Dahl 이라는 사람이 만듬. 기존 프레임워크의 단점을 지적하면서 이것을 해결하기 위해 node.js 를 만들었음. 웹 브라우저 뿐만아니라 다른 곳에서도 javascript 를 실행하는 환경을 만들어준다. 예를 들어 서버에서 자바스크립트를 사용할 수 있음 GUI , AI 등등 다양하게 사용할 수 있음 Node.js를 배우면 뭐가 좋을까? JS 만 알아도 모든 웹사이트 제작 가능 프론트, 백 모두 사용 가능 Paypal, Netflix 에서도 node.js 를 이용해 개발함.