<생활코딩 - WEB - WEB2 - Node.js>
1. JavaScript 함수의 기본 문법
1 중복된 코드가 있을 경우, function 이름(){ 코드코드 } 와 같이 함수를 이용해
코드의 가독성을 높이고 유지보수를 편리하게 할 수 있다. 2. JavaScript 함수의 입력
1 아래의 함수와 같이, 값에 따라 결과가 달라지는 함수를 만들 수 있다.
*sum(2,4)는 argument(인자)이다.
function sum (first, second) {
console.log(first+second); }
sum(2,4);3. JavaScript 함수의 출력
1 sum 함수는 항상 화면에 나타나도록 만들어진 함수로서, 융통성이 떨어진다.
2 메일 발송, 텍스트 출력 등 융통성이 있는 함수로 만들어 보자.
1) console.log(first+second); 를 return first+second; 로 변경한다.
2) Return 코드 영향
1 이제 sum(2,4); 코드는 화면에 나타나지 않는다.
2 return 코드 앞뒤로 console.log 코드를 실행시키면,
return 아래의 console 코드는 실행되지 않는다.
3 return 코드를 만나면, 즉시 함수가 종료된다.
4 즉, return 코드는 어떤 값을 출력한다는 의미와,
그곳에서 함수를 종료시킨다는 의미 2가지를 가지고 있는 특수한 키워드이다.
3) sum(2,4); 를 console.log(sum(2,4)); 로 바꿔준다.
4) 6이 출력된다. 4. App 제작 - 함수를 이용해서 정리 정돈하기
1 함수 2개를 통해 중복되는 템플릿 부분과, 리스트 부분을 정리해주었다.
2 코드의 가독성이 훨씬 좋아졌다!
3 코드가 예뻐서 기분이 좋다 ㅎㅎ
4 아직 중복되는 변수 부분이 있지만, 그걸 정리하는 것은 까다로워서 추후 진행할 예정이라고 한다. 5. 수업의 정상
1 Nodejs 수업의 정상에 올랐다.
앞으로 공부할 것보다 지금까지 배운 것이 더 중요한 부분이었다고 한다.
2 생활코딩 맨 처음에 본 강의 내용처럼,
앞으로 배우는 내용은 들이는 노력에 비해 나타나는 실력이 적게 나타날 수 있다.
원래 그런 것이니 크게 힘들어하지 말고 꾸준히 해나가자.6. Nodejs에서 동기와 비동기 1
1 synchronous & asynchronous
2 同期 / 非同期
3 동시에 일어나는 방식 / 동시에 일어나지 않는 방식
4 동기는 차례차례 일을 진행하는 것으로,
일이 완료될 때까지 기다리는 시간이 길어 비효율적이다.
5 비동기는 어떤 일이 진행될 때,
그것을 기다리지 않고 또 다른 일을 하는 것으로 효율적으로 시간을 사용할 수 있다.
그러나 매우 복잡한 방식이다. 7. Nodejs에서 동기와 비동기 2
1 nodejs.org 사이트의 문서를 확인해보면,
모든 코드가 Sync가 있는 것과 없는 것으로 나누어져 있다.
2 Sync가 있는 코드는 동기적으로 작업한다.
그렇기 때문에 시간이 오래 소요되는 작업이 있더라도 순서대로 진행한다.
3 Sync가 없는 코드는 비동기적으로 작업한다.
그렇기 때문에 조금이라도 시간이 소요되는 작업이 있으면,
그 작업이 처리되는 동안 그다음 코드를 미리 진행한다.
*call back을 세 번째 인자로 입력해야 한다.
call back 자리에는 함수가 입력된다. 8.JavaScript-callback
1 세 번째 인자 자리에 있는 함수의 의미는
“작업을 처리한 후에 함수 호출을 통해 나를 불러”이다.
2 callback은 정말 까다롭고 어려운 개념이라고 한다.
그렇기 때문에 이해가 안 되더라도 계속 마주해서 익숙해지면 된다고 한다.
3 변수와 함수 값을 만들어보자.
var a = function (){
console.log('A'); } 라는 코드를 입력했다.
1) 이는 a라는 변수의 값으로 함수를 입력한 것이다.
2) 즉, 자바스크립트에서 함수는 값이다.
4 callback 을 실행해보자.
function slowfunc(callback){
callback(); }
slowfunc(a); 라는 함수를 입력했다.
1) 이는 “함수 실행 후, 그다음 일을 하세요”라는 뜻이다.
2) 중괄호 안에 callback( ); 이라는 함수를 통해 실행을 명령한다.
3) 그러면 callback 함수는 var a 를 실행하게 된다. 9. Node.js의 패키지 매니저와 PM2
1 Package Manager는 nodejs가 안정적으로 실행될 수 있도록 여러 지원을 해주는 시스템이다.
2 Node.js runtime을 설치할 때 함께 설치된 패키지 매니저는 NPM 이다.
3 이 NPM을 통해 PM2를 설치하고 실행했다.
4 와!!!!
5 일단 문자를 통해 PM2가 그림처럼 뜨는 점이나,
pm2 monit라는 명령을 통해 옛날 컴퓨터 디자인으로 내 컴퓨터의 데이터가 나타나는 점이
너무너무 멋있고 간지 났다. 꼭 멋있고 일 잘하는 비서가 생긴 느낌이다.
6 프로그램 지원 내용
1) stop 명령이 있기 전까지 안정적으로 nodejs runtime을 online 상태로 유지해준다.
2) 에디터에서 소스코드를 수정하면, runtime에서 해당 파일을 바로 종료했다가 켜준다.
따라서 별도의 설정 없이 웹페이지를 리로드 하면 바로 수정된 코드대로 페이지가 실행된다. 10. HTML-form
1 웹페이지 사용자가 웹페이지를 통해 컨텐츠를 생성, 수정, 삭제하는 방법을 알아볼 예정이다.
2 사용자는 HTML form 방식을 통해 서버 쪽으로 데이터를 전송할 수 있다.
3 첫째,
1) form.html 파일을 생성한다.
2) input type="text" 코드를 통해 문자를 입력할 수 있는 네모 박스를 만든다.
이 네모 박스에는 한 줄만 입력할 수 있다.
3) textarea 태그를 통해 여러 줄을 입력할 수 있는 네모 박스를 만든다.
4) input type=“submit” 코드를 통해 네모박스 내의 정보를 제출할 수 있는 버튼을 만든다.
5) form 태그로 모든 내용을 감싸준다.
6) form 태그 내에 action 속성을 통해 주소를 할당한다.
나는 “http://localhost:3000/process_create” 로 정했다.
이 속성은 “이 네모박스에 입력한 정보를 이 주소로 전송하고 싶다”는 뜻을 가진다.
7) 이 상태에서 네모박스에 내용을 입력하니, URL에 모든 내용이 나타났다.
즉, 쿼리 스트링이 만들어졌다.
8) 정리: form 태그는 그 폼 안에 있는 각각의 컨트롤들의 사용자가 입력한 정보를,
submit 버튼을 눌렀을 때 액션 속성이 가리키는 서버(주소)로 queryString의 형태로 데이터를 전송하는 ‘기능’이다.
4 둘째,
1) 이처럼 URL에 정보가 들어가 있으면,
그 주소를 통해 접속한 사람에 의해 정보가 수정 혹은 삭제되는 불상사가 일어날 가능성이 있다.
2) 따라서, 이런 가능성을 방지하고자 action 속성 뒤에 method=“post”를 입력한다.
3) 네모박스에 정보를 입력하고 submit을 클릭하면,
http://localhost:3000/process_create URL만 확인된다.
4) 정리: 서버에서 데이터를 가져올 때(= 정보를 get 할 때),
/?id=HTML 과 같은 queryString을 사용한다.
서버에 데이터를 생성,수정,삭제할 때는 method=“post” 코드를 통해
필요한 데이터를 눈에 보이지 않는 방식으로 보낸다.
5 셋째,
1) * method=“post” 방법을 통해서는 아주 큰 데이터도 전송할 수 있다.
반면, URL 방법을 통해서는 제한된 데이터만을 전송할 수 있다.
2) 사용자가 서버로부터 정보를 가져올 때(get할 때)는 method=“get” 방식을 사용한다.
(method가 아예 없는 경우도 get 방식으로 진행되고 있는 것이다.)
3) 사용자가 서버에 정보를 생성, 수정, 삭제할 때는 method=“post” 방식을 사용한다. 
💡 Software Engineer - F.E