Data house

# App 제작 - 글수정_수정할 정보 전송 이전 시간에 업데이트 링크를 생성해보았습니다! 이제 그럼 업데이트를 클릭했을 때 보여지는 화면을 만들어봅시다 화면을 만들기 위해서는 첫 번째로는 폼이 필요하고 두 번째는 우리가 수정하고자 하는 데이터를 미리 넣어두어야하기 때문에 리드 기능이 필요합니다. 따라서 기존의 우리가 만들었던 것 중에 어떤 특정한 글을 읽어오는 id값이 있는 경우에 대한 처리를 필요로 합니다. path정보가 /update일때의 공간을 새롭게 만들어 주고, create에 있는 글쓰기UI 코드를 복사해서 붙여넣어줬습니다. 위에 드래그한 부분이 긁어온 코드들 입니다. 웹 브라우저의 창은 다음과 같이 나옵니다~ 코드를 약간 수정해야할 것 같네요. 저 폼에서 제출버튼을 눌렀을 때 사용자가 정보를..

# App 제작 - 파일생성과 리다이렉션 post 방식으로 전송된 데이터를 데이터 디렉토리 안에 파일의 형태로 저장하는 법을 살펴보겠습니다. 검색 엔진에 node.js file write 라고 검색해서 공식문서를 살펴봅시다. ctrl+f 로 원하는 함수를 검색할 수 있습니다. 여기서 저는 fs.writefile을 검색했고 결과가 위와 같이 나왔습니다. fs.writeFile함수는 첫 번째 인자로는 제목의 이름을, 두 번째 인자로는 글의 내용을, 세번째에는 옵션인데 여기에 'utf8'을 넣을 것입니다. 마지막으로는 callback함수입니다. 공식문서의 예시와 설명을 참조해서 코드를 수정해보았습니다. 제목으로 나오게 될 첫 번째 인자에 title변수로 동적으로 바뀔 수 있도록 구현하고 두번째는 descrip..

# App 제작 - 글생성 UI 만들기 Web Application에 글쓰기 화면을 만들어 줄 예정이다. 그 전에, 클릭했을 때 글쓰기 화면으로 가게하는 링크가 필요하다. 다음 화면과 같이 create라는 링크를 만들었다. create를 클릭해서 링크를 타고 간 페이지는 보나마나 아직 설정해 둔 것이 없기 때문에 not found가 뜬다. createServer코드로 가서 약간의 수정작업을 할것이다. 37번째 코드를 보면 if(pathname === '/'){} 이 부분이 보일 것이다. 이 코드는 path가 '/'이냐를 묻는 것인데 path가 홈인지를 물어보는 것이다. 주소가 localhost:3000이면 홈으로 간 것으로 인식을하고 localhost:3000/create이면 path가 /create인 ..

# Node.js의 패키지 매니저와 PM2 Package Manager의 Package는 소프트웨어를 부르는 여러가지 표현 중 하나라고 생각하면된다. 독립적으로 실행되는 것을 package라고 할 수 있고 어떤 프로그램 안에서 부품으로 사용되는 작은 프로그램도 package라고 할 수 있다. Package Manager은 software를 생성하고 설치하고 업데이트 및 삭제할 수 있도록 관리해주는 것을 말한다. 각각의 컴퓨터 언어와 OS 별로 Package Manager들은 굉장히 중요한 역할을 하고 있다. 오늘은 여러 Package Manager들 중 NPM을 볼 것이다. NPM은 Node.js에서 광범위하게 사용되고 있고 기본적으로 Node.js를 설치할 때 함께 설치되는 Package Magnage..

# Node.js에서 동기와 비동기 동기 synchronous = 순서대로 일을 처리하는 것 비동기 asynchronous = 동시에 일을 처리하는 것 쉽게 예를 들어보면, 우리가 시험기간인 상황이고 pdf파일을 프린트해서 공부해야한다 인쇄소에 pdf파일을 복사를 맡긴 상황이라고 가정하자 여기서 동기는 인쇄소에 맡긴 인쇄물이 다 만들어질 때까지 기다렸다가 그 다음 인쇄물을 찾고 시험 공부를 하는 것이고 비동기는 인쇄소에 맡긴 인쇄물을 기다리는 동안에 집에가서 해야할 다른 일을 하고 인쇄가 끝났다면 찾아가서 그 다음으로 해야할 것을 하는 상황으로 생각하면 된다. 동시에 일을 처리한다는 점에서 비동기는 효율적이지만 매우 복잡하다! 그렇다면 동기, 비동기가 code level에서 어떤 차이를 갖는가? 폴더 s..

# App 제작 - 함수를 이용해서 정리 정돈하기 앞서 배운 내용을 통해서 이제까지 했던 데이터를 정리해볼 것이다 기계는 상관없지만 사람에겐 코드의 복잡성이 코드 관리에 치명적이다 따라서 사람이 감당할 수 있는 수준으로 만들지 못한다면 복잡한 것에 도전할 수 없을 것이다 이번 시간에는 우리 수업에서 코드를 함수로 정리 정돈하는 모습을 통해서 함수의 사용법을 익혀볼 것이다 저번에도 똑같은 말을 했던 것 같다! 중복은 코드의 복잡성의 주요 원인이기에 반복되는 부분이 있다면 함수화를 통해 복잡한 코드를 단순하게 만들어 주어야한다 :-) main.js파일에서 중복되는 코드는 다음과 같다 이 코드를 함수화 시켜보겠다! (전제 코드를 보여주고 싶지만 캡쳐할 수 있는 크기가 한정적이어서 필요한 부분만 캡쳐했습니다) ..

# JavaScript 함수의 기본 문법 syntax 폴더에 새롭게 function.js 파일을 만들어 준다 새롭게 만들어진 파일에 코드를 적어보았다 아래에 있는 코드를 보면 반복되는 코드를 알 수 있을 것이다. console.log(1) console.log(2) console.log(3) 이 계속 반복되는 것을 알 수 있다. 이렇게 중복이 발생되면 유지, 보수하기에 나쁘고 코드의 가독성이 떨어지며 코드의 양이 많아진다. 이번 시간에는 중복을 제거하는 것을 통해 앞서 배웠던 변수, 제어문을 통해서 얻을 수 있었던 효과를 함수에서 찾아볼 수 있을 것이다. 위의 사진과 같이 함수 f123()을 만들어서 반복되는 코드를 함수 안으로 넣어주었다 그리고 반복되고 있는 코드 자리에 f123()을 대신 넣어주었더니..

# Node.js에서 파일목록 알아내기 지금까지의 한계를 살펴보자 data가 추가되면 main.js의 글 목록을 매번 편집을 해주어야한다는 번거로움이 있다. 그 뿐만아니라 리스트의 추가, 삭제, 수정이 빈번하다면 굉장히 고통스러운 일이 될 것이다.. 이런 문제를 해결하기에 앞서 파일이 파일이 추가되거나 삭제되거나 수정되었을 때를 알아야한다. 그렇다면 어떻게 Node.js통해서 알아낼 수 있을까? 모를 때는 구글링이다! node.js file list in directory라고 구글창에 쳐봤더니 stack overflow에서 다음과 같은 코드를 얻었다 const testFolder = './tests/'; const fs = require('fs'); fs.readdir(testFolder, (err, f..