PM2 준비
- pm2 start main.js —watch (에디터 변경사항 바로 반영)
- 혹은 pm2 start main.js --watch --ignore-watch="data/*" (data 디렉토리 제외, 모든 변경사항 즉시 반영)
- pm2 log (에러, 변경사항 바로 표시)
<생활코딩 - WEB - WEB2 - Node.js>
1. App 제작 -파일생성과 리다이렉션
1. 파일 저장
1. 검색: nodejs file write
2. 공식문서에서 결과 확인
3. 형식 : fs.writeFile(file, data[, options], callback)
4. file 이름은 문서의 제목으로 하기 위해 `data/${title}`로 입력했다.
5. 짜잔- 웹화면에서 제출 버튼을 누르니, 내 data 디렉토리에 파일이 자동생성되었다.
2. 제출버튼 클릭 후, 해당 파일의 페이지로 이동하기
1. /?id=fileName 이라는 형식으로 이동하려고 한다.
2. 검색: nodejs redirection
3. 결과: response.writeHead(302, {Location: ‘이동 URL’});
4. 내 코드의 기존 양식에 맞추어, {Location: `/?id=${title}`}라고 입력했다.
5. 짜잔- 제출 버튼을 누르면, 파일이 자동생성되고 해당 파일의 페이지로 이동했다. - 여기까지 공부한 후, -
웹페이지에서 제출버튼을 누르고, console.log를 통해 확인하면 계속 undefined가 확인되었다. 당연히, 새로 생성되는 폴더 이름도 내가 입력한 Nodejs가 아니라, undefined로 확인되었다.
아무리 체크해봐도 이유를 모르겠어서 강의 내의 코드와 띄어쓰기, ; 등 모든 것을 똑같이 작성하고 리로드를 해보았다.
웹화면에 success라는 글자가 보이고, 내 data 디렉토리에도 Nodejs로 파일이 생성되었다. !!
내 생각에는 한 명령을 마침지어주는 ; 가 두 군데에 없었던 것이 코드가 제대로 작동하지 않는데 영향을 미친 것 같다.
간결하되 정확하고 가독성 좋은 코드를 작성하도록 노력해야겠다.
+
안풀려서 답답하던 것이 짜잔- 하고 풀릴 때, 진짜 기분이 좋다. 이런 기분 좋음을 자주 여러 번 느끼고 싶다.
2. App 제작-글수정-수정링크생성
1. 수정링크 생성
1. /create 링크 오른쪽에 /update 링크 입력
2. 수정링크가 각 파일 페이지에서만 나타나도록
1. function templateHTML에 4번 째 인자로 control 입력
2. create, update 링크들을 cut 하고, 그 자리에 ${control} 입력
3. 홈화면용 var template에는 create 링크만 입력
4. 각 파일 화면용 var template에는 create, update 링크 모두 입력
3. update 버튼 눌렀을 때, 특정 파일의 정보가 URL에 생성되도록
1. update 링크에서 href=“/update?id=${title}” 로 변경
2. 예를 들어 Nodejs 웹페이지에서 update 링크를 클릭하면,
/update?id=Nodejs 웹페이지로 이동된다.
3. APP 제작-글수정-수정할 정보 전송
1. 목표: update를 클릭했을 때, form box 와 파일의 내용이 나타나도록
2. 파일의 내용이 나타나기 위해서는 read 기능이 필요하다.
1. pathname이 /update인 else if를 하나 더 만들고,
fs.readdir 부분을 붙여넣기 했다.
2. h2를 통해 title과 description이 나타나는 부분을 form으로 변경한다.
create_process에서 사용한 form action을 붙여넣기했다.
3. form에서 input type=“text”인 태그는 value=“${title}” 형식으로 입력했다.
textarea name=“description”은 꺽쇠 바깥에 ${description}형식으로 입력했다.
4. 짜잔- update를 클릭하면, form box 안에 기존의 파일 내용이 입력되어있다.
3. id와 name 분리해주기
1. input type=“hidden” name=“id” value=“${title}” 코드를 통해
화면에 나타나지는 않지만, id를 파일 이름으로 유지해준다.
2. 이는 검사-network에서 확인할 수 있다.
3. 이제 제목을 수정해도, id는 기존 파일의 이름으로 유지된다.
4. App 제작-글수정-파일명 변경, 내용저장
1. 작업환경 만들기
1. pathname이 /update_process 인 else if를 하나 더 만들고,
'/create_process' 내용을 붙여 넣기했다.
2. 아이디 값도 필요하니, var id = post.id; 를 추가해주었다.
3. console.log(post)를 통해 id, title, description 부분이 잘 들어온 것을 확인했다.
(*확인을 자주 해주는 게 좋다고 한다.)
2. update 페이지에서 수정한 제목, 내용이 파일에 반영되도록 하기
1. 검색: nodejs file rename
2. 결과: fs.rename(oldPath, newPath, callback)
3. 적용: fs.rename(`data/${id}`, `data/${title}`, function(error) {}
* 중괄호 내에 fs.writeFile 내용 붙여 넣기.
4. 웹화면에서 수정을 제출하자, 내 data 디렉토리의 내용이 변경되었다.
검사-network 를 통해 id도 변경된 것으로 확인했다.
5. fs.writeFile 내용 중에는 Location 지정 코드도 있기 때문에,
수정 제출을 누르면 바로 해당 파일 화면이 나타난다. 아…. update에서 CSS3로 바꾸고 제출하니, 자꾸 오류가 났다.
아무리 이것저것 확인해봐도 그 이유를 모르겠어서, 이고잉님이 올려주신 코드 내용과 내 코드 내용을 하나하나 대조해보았다.
update_process의 else if 부분에서 var id = post.id; 라고 써야할 것을 var title이라고 써서 계속 오류가 났던 것이었다.
너무 기본적인 부분이 틀렸다는 것을 알자 허탈하고 허무했다.
그래서 허허 웃음이 절로 났는데, 그러면서도 문제를 해결했다는 점에 기분이 좋았다.
코딩은 정말 스펠링 하나, 방점 하나 등이 기술을 실현시키는 데 큰 영향을 준다. 마치 우리 인생과 같다. 우리 인생도 순간 순간의 생각이나 행동에 따라 크게 달라지는 점이 코딩과 똑같다.
코딩을 배우는 것은 마치 하나의 우주를 배우는 것 같다.
이런 재미를 스스로에게 준 나에게 감사하고, 또 이런 분야가 있고 나도 도전할 수 있다는 점을 알려준 준이오빠에게도 감사하다.
말이 나왔으니 말인데, 나는 아주 어렸을 때부터 우주에 큰 관심이 있었다.
그러나, 전공으로서 공부하기에는 너무 어려운 분야라 감히 마음을 내지 못하고 있었다.
지금 홀로 코딩을 공부하고 있는 것처럼 우주에 대한 부분도 차츰차츰 공부하면, 새로운 흥미와 재미를 느낄 수 있을 것 같다. 또 그 공부는 코딩이나 내 인생에 큰 영향을 줄테고.
공부를 하면 할수록 공부하고, 알고 싶은 분야가 더 많아진다.
하고 싶은 것 모두 하고 살 수 있도록 스스로를 잘 단련 시켜야겠다.
5. App 제작-글삭제-삭제버튼 구현
1. * 삭제 버튼은 꼭 post 방식으로 만들자. 링크 방식으로 만들면 특정 링크가 생성되어 이동되기 때문에 위험하다.
2. form 태그를 통해 input type="hidden" name="id" value="${title}" 버튼과 input type="submit" value="delete" 버튼을 만들어주었다.
3. form action(웹주소 설정)은 /delete_process로 지정했다. method=“post”를 지정했다. 자바스크립트를 통해 onsubmit을 설정해서, 나중에 삭제 직전 다시 한 번 물어보는 단계를 추가할 수도 있다. 6. App 제작-글삭제 기능 완성
1. 작업환경 만들기
1. pathname update_process 의 else if 부분을 복사해서
1개 더 생성하고, update를 delete로 변경해주었다.
2. delete 버튼은 id 값만 필요하기 때문에,
title, description, fs.rename 부분은 모두 삭제했다.
2. 삭제 기능 확인
1. 검색: nodejs delete file
2. 결과: fs.unlink 기능 확인.
인자에 path와 callback 기능을 입력해야 한다.
3. 적용: fs.unlink(`data/${id}`, function(error){
response.writeHead(302, {Location: `/`});
response.end();
6. 특정 링크를 누르고(ex_MangoDB) delete 버튼을 클릭하면,
내 data 디렉토리에서 MangoDB 파일이 삭제되고,
웹화면은 홈화면으로 이동한다.
3. 이 강의까지 해서 CRUD 기능을 모두 배우고 실습해보았다.7. JavaScript 객체의 형식
1. 객체(Object): 추상적이지만, 구체적이고 기능 중심으로 생각하자.
1. 순서가 없는 정보 저장에 최적임.
2. var roles = {‘’:’’, ‘’:’’, ‘’:’’}
3. 확인방법: console.log(roles.singer); 혹은 console.log(roles['singer']);
2. 배열(Array): 객체와 함께 정보를 정리 정돈하는 수납상자.
1. 순서에 따라 정리 정돈한다. 각각의 엘리먼트는 고유한 식별자(숫자)가 있다.
2. var members = [‘’, ‘’, ’’]; 형식으로 담는다. 0번부터 숫자로 식별자가 부여된다.
3. 확인방법: console.log(members[0]);8. JavaScript-객체-반복
1. 배열-반복문 양식
1. var i = 0;
2. while(i < members.length){
3. console.log(members[i]);
4. i = i + 1; }
2. 객체-반복문 양식
1. for(var name in roles){
2. console.log('object=>', name, 'value=>', roles[name]); }
3. (첫째 줄과 셋째 줄의 name은 다른 걸로 써주어도 된다. )
4. name 변수에 객체의 key(식별자, 첫째 단어) 정보가 담긴다.
5. value는 둘째 단어를 지정한다.
6. (첫째 줄과 셋째 줄의 name은 다른 단어를 써도 된다. )9. JavaScript-객체-값으로서 함수
1. 객체지향 프로그래밍(Object Oriented Programming, OOP)
2. 함수는 처리할 정보를 담고 있는 일종의 ‘구문(statement)’이다.
또한, 함수는 ‘값’이다. 따라서, 함수는 변수에 넣을 수 있다.
3. 이런 특성은 아래의 방식을 가능하게 한다.
1. 변수 f = 함수 ~~~ 를 지정한다.
2. var a = [f];
3. a[0]();
4. var o = {
5. func: f }
6. o.func();
4. 정리: 자바스크립트에서 배열, 객체는 서로 연관된 데이터를 담는 그릇이다.
자바스크립트에서 함수(처리방법을 그룹핑 함)는 데이터이다.
따라서, 함수를 배열과 객체에 담을 수 있다.
5. 어려운 게 당연하다. 이해가 되지 않아도, 익숙해지면 된다. 10. JavaScript-객체-데이터와 처리 방법을 담는 그릇으로서 객체
1. 값으로서 함수를 배열에 담는 경우는 많이 없다. 대신 객체에 많이 담는다. 객체는 이름이 있기 때문에 담아놓은 함수(=정보)를 이름으로 꺼내 놓기가 좋기 때문이다.
2. 객체에 함수를 담는 것을 통해서 우리가 무엇을 할 수 있는지 어떤 점이 좋아지는지 살펴보고자 한다.
3. 객체로 담는 것의 장점
1. 정보가 섞일 가능성을 낮춰준다.
2. 가독성있게 정보를 정리 정돈할 수 있다.
4. 처리하는 코드 생성
1. function f1변수에 객체 형식으로 함수도 담을 수 있다.
var o = {
f1:function(){
console.log(this.v1);}}
꺼낼때는 o.f1(); 로 내용을 꺼낼 수 있다.
this는 변수 o의 이름을 가리키는 것으로, 변수의 이름이 달라져도 영향을 받지 않는다. (=알아서 달라진 이름을 가리킨다.)
함수는 값이다.
객체는 값을 저장하는 그릇이다.
이 특성을 이용하여 서로 연관된 데이터, 처리 방법을 담고 있는 함수를 그룹핑할 수 있다. 이를 통해 코드의 복잡성을 획기적으로 낮출 수 있다.
객체지향이라는 것은 분명히 복잡한 개념이다. 현대에는 더 복잡하고 추상적인 기능들도 존재한다.
그러나, 객체라는 것이 정리 정돈을 하는 형식으로 코드의 복잡성을 낮추기 위한 기능에서 출발했다는 ‘본질’을 분명하게 인식하고 있다면, 그 복잡하고 추상적인 기능들이 지적인 짜릿함을 내게 줄 것이다.
