StudyYeong

fs module - File System파일을 읽고 쓰는데 필요한 많은 메서드가 포함되어있는 모듈이다. CRUD프로그래밍에서 CRUD란 정보를 처리하는 4가지의 기본 기능을 말한다. CRUD를 할 수 있다는 것은 그 언어의 75%는 섭렵했다고 봐도 무방하다.C - CreateR - ReadU - UpdateD - Delete Create데이터 파일을 생성하는 기능이다. 사용자가 입력한 데이터로 파일을 생성한다. 사용자의 입력을 받기 위해서 <form>을 이용한다. 또한 form data를 request 객체로 부터 받아와서 이용할 수 있다. request.on()클라이언트로부터 전송되는 입력값을 다룰 수 있는 메서드이다. 1234let body = '';request.on('data', function(data){ body += data;}) data가 한번에 많이 들어오거나 너무 많은 양의 데이터가...

Javascript30 Day6 - Type Aheadfetch를 사용한 서버와의 비동기적 통신을 이용해 필요하 데이터를 불러와 웹페이지에 출력한다.예제에 사용된 JSON data는 다음 endpoint의 도시별 인구수 데이터를 나타내는 endpoint가 사용된다. 이번에 만들 서비스는 입력한 영문자를 포함하고 있는 도시 또는 주(state)의 인구 수를 표시하는 웹 페이지이다. fetch기존의 Ajax로 하던 작업들을 비슷하게 할 수 있게 해주는 메서드이다. 문법1let promis = fetch(url, [options]); options에 아무것도 넘기지 않으면 요청은 GET 메서드로 진행되어 url로부터 컨텐츠가 다운로드 된다.return type은 promise 객체이다. promise 자바스크립트 비동기 처리에 사용되는 객체. 주로 서버에서 받아오는 데이터를 동작에 이용할 때 데이터를 받아오는 작업이 끝나고 나서 동작해야 오류가 발생하지 않으므로 작업이...

Javascript30 Day5 - Flex Panel GalleryFlex box를 다루는 방법을 공부한다. Flex flex 속성을 줄 경우 수직으로 정렬된다. flex : 1 속성 : 모든 child element들이 주어진 컨테이너 공간을 모두 같은 너비로 나눠 쓰게 된다. flex : 5 속성 : 해당 element가 나머지 element들 보다 5배 많은 공간을 가지게 된다. classList element.classList 로 select 할 수 있다. DOMTokenList 자료형으로 반환된다. includes는 Array에 사용할 수 있고, DOMTokenList는 contains를 사용해야 한다. classList.toggle(class) : 클래스 리스트에 인자 클래스가 있는 경우 remove, 없는 경우 클래스를 추가시킨다. 완성된 프로그램 5개의 flext element 들을 누르면 해당 영역이 넓어지고 위 아래에서 글자 element 들이...

노드는 주로 서버 쪽 기능을 담당하는 자바스크립트 기반의 프로그래밍 언어이다.이벤트 기반으로 동작하는 언어이므로 이벤트를 어떻게 처리하는지 잘 알아둬야 한다. 다른 서버 언어들과의 차이점세상이 Node.js에 열광한 이유를 찾아보려면 Node.js가 나온 이유에 대해 알아야 한다. 간단히 말하면 HTML을 일일이 고치고 하드코딩하는 작업이 싫었던 개발자들이 작업을 수월하게 하기 위해 친근한 언어인 Javascript를 기반으로 하는 서버 언어를 만든 것이다.Node.js를 사용하면 Apache 에서는 할 수 없는 사용자에게 전송하는 데이터를 능동적으로 생성할 수 있고 이것이 Node.js가 가지고 있는 힘이다.🌟 주소 문자열 다루기 url 객체웹 사이트에 접속하기 위한 사이트 주소 정보를 다룰 수 있는 객체주소 문자열을 입력하면 *protocol, host, query … *등 접속을 다루기 위해 필요한 정보들로 문자열을 구분해 객체에 저장한다. url...

Javascript30 Day4 - Array Cardio Day 1Array 자료형에 내장된 여러 유용한 함수들을 사용하면, 일반 반복문으로 해결하던 작업들을 더 간단하게 수행할 수 있기 때문에 잘 활용하는게 좋다. 예제 Data1234567891011121314const inventors = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, { first:...

Javascript30 Day3 - CSS Variablescss 속성을 웹 페이지에서 실시간으로 수정하는 기능을 자바스크립트로 구현했다.여기서 쓰이는 가장 중요한 요소는 custom css, 사용자 지정 css 속성이다.Mozilla 설명 사용자 지정 css 정의: -- 접근: var() 사용하는 이유: 같은 속성값이 여러번 사용 될 때, 따로 여러번 속성값을 써주는 것 보다 변수로 선언하고 사용하는 것이 가독성과 이용성 면에서 편리하기 떄문주로 :root {} 내부에서 속성을 선언하여 사용하는 방식이 흔하다 ex) 1234567891011:root { --base: #ffc600; --spacing: 10px; --blur: 10px;}img { padding: var(--spacing); background: var(--base); filter:...

Javascript30 Day2 -작성중-

Javascript 30?Javascript30위 링크에서 누구나 무료로 들을 수 있는 30여개의 자바스크립트 강의 동영상이다.프로젝트를 몇가지 해봤지만 Node.js로 취업을 하기로 결심한 이상 자바스크립트를 좀 더 자유자재로 편하게 다룰 수 있어야 한다고 생각했다. 몇 달 전에 처음 발견하고, 학기가 끝나면 해봐야겠다고 생각했었는데 이제서야 하게 되었다.이 강의는 이미 자바스크립트를 다룰 줄 아는 사용자가 수강한다고 가정하고 순수 바닐라 자바스크립트만을 이용해 작품을 하나씩 만들면서 실력을 쌓을 수 있는 강의다.각 동영상의 길이가 그렇게 길지 않고 html, css가 이미 만들어진 기본 틀을 제공하고 있기 때문에 온전히 자바스크립트에만 집중할 수 있다는 점, 그리고 군더더기 없이 핵심만 이야기하는 강의였던 부분이 내가 느낀 장점이었다.강의를 들으면서 새롭게 배운, 내가 몰랐던 내용들 위주로 정리해놓을 생각이다. Day1 - JavaScript Drum...

Git Page로 블로그를 만들었다이미 써오던 블로그에 글이 점점 많아져서 더욱더 열심히 쓰고 있었는데 아무리 봐도 github.io 도메인은 너무 멋이난다.. 결국 큰 결심을하고 프레임워크를 이용해 새로 만들기로 결정. 이참에 마크다운 문법이나 제대로 익혀놓으면 좋겠다는 생각도 했다.Jekyll과 Hexo 중 고민하다가 Hexo를 사용하기로 한 이유는 Jekyll은 Ruby, Hexo는 Node.js를 사용하기 때문이다.Ruby는 사용해 본 적이 없기때문에 익숙하고 이미 설치가 되어있는 Node.js 서버를 사용하는 Hexo를 사용하기로 결정! Node.js가 이미 설치되어 있다는 가정 하에 시작한다 Git Page + Hexo 사용법Github에서 Repository 만들기'github 유저네임'.github.io 를 블로그 url로 사용하고 싶다면 레파지토리 이름을 저렇게 지정하면 된다.하지만 이미 해당 레파지 이름을 사용하고 있다면 다른 프로젝트를 하나...

문제철수의 토마토 농장에서는 토마토를 보관하는 큰 창고를 가지고 있다. 토마토는 아래의 그림과 같이 격자모양 상자의 칸에 하나씩 넣은 다음, 상자들을 수직으로 쌓아 올려서 창고에 보관한다. 창고에 보관되는 토마토들 중에는 잘 익은 것도 있지만, 아직 익지 않은 토마토들도 있을 수 있다. 보관 후 하루가 지나면, 익은 토마토들의 인접한 곳에 있는 익지 않은 토마토들은 익은 토마토의 영향을 받아 익게 된다. 하나의 토마토에 인접한 곳은 위, 아래, 왼쪽, 오른쪽, 앞, 뒤 여섯 방향에 있는 토마토를 의미한다. 대각선 방향에 있는 토마토들에게는 영향을 주지 못하며, 토마토가 혼자 저절로 익는 경우는 없다고 가정한다. 철수는 창고에 보관된 토마토들이 며칠이 지나면 다 익게 되는지 그 최소 일수를 알고 싶어 한다. 토마토를 창고에 보관하는 격자모양의 상자들의 크기와 익은 토마토들과 익지 않은 토마토들의 정보가 주어졌을 때, 며칠이 지나면 토마토들이 모두 익는지, 그 최소 일수를...