목록Web (34)
Slow but steady wins the race
에러 메시지 next : The term 'next' is not recognized as the name of a cmdlet, function, script file, or operable pro gram. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. -> next가 없다는 의미 이므로 설치해주면 됨 해결 방법 npm install next -g
Hidden Field란? 화면의 폼에는 보이지 않지만(사용자는 볼 수 없음), 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소 (예제) 히든 필드를 사용해 사용자가 사이트에서 로그인하는 정보를 서버로 넘겨줌 아이디: 비밀번호: 실행하면 아래와 같이, hidden filed의 내용은 보이지 않는다. HTML 삽입 미리보기할 수 없는 소스 하지만,, 위의 예제로는 도대체 hidden field를 왜 사용하는지 이해가 되지 않아서 찾아봤는데,, 위의 예제는 hidden field의 내용은 실제로 사용자의 눈에 보이지 않는다는걸 알려주기 위해 나온듯 하고 Hidden field에 대해 좀 더 정확히?자세히 말하면 사용자가 입력할 필요가 없는 정보/ 사용자가 몰라도 되는 정보,,이지만 폼 전송과 같이 전..
Module 코드를 작성하는 과정에서 코드의 길이가 길어지면 정리정돈할 필요성이 생김 - 가장 큰 도구 : module nodejs/mpart.js var M = { v:'v', f:function(){ console.log(this.v); } } module.exports = M; module을 생성하기 위해서 exports 전역 객체를 사용 muse.js var part = require('./mpart.js'); part.f(); module을 불러오기 위해서 require( ) 메소드 사용
객체지향 프로그래밍 목적 : 코드를 깔끔하게 복잡하지 않게 정리하는것 refactoring : 과거의 코드를 효율적으로 바꾸는 것 object를 통해 template 정리 template라는 객체를 만들고 객체 안에서 property를 정의 function templateHTML(title, list, body, control){ return ` WEB ${list} ${control} ${body} `; } function templateList(filelist){ var list = ''; var i = 0; while(i < filelist.length){ list = list + `${filelist[i]}`; i = i + 1; } list = list+''; return list; } var ..
Object vs Array //Array var members = ['kbs','k0214','1999k']; console.log(members[1]); //How to get information //Object var roles = { 'programmer' : 'kbs', 'designer' : 'k0214', 'manager' : '1999k' } console.log(roles.designer); How to get information Array : 각각의 정보를 순서에 따라 정리 (각각의 정보는 고유한 식별자가 존재) Object : 순서가 없는 정보 저장 (식별자가 숫자가 아닌 이름으로 존재) 순서 식별자 literal Array O 숫자 [ ] Object X 이름 { } object..
삭제버튼 구현 control 부분에 삭제 할 수 있는 버튼을 추가 else { fs.readdir('./data', function(error, filelist){ fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){ var title = queryData.id; var list = templateList(filelist); var template = templateHTML(title, list, `${title}${description}`, ` create update delete` ); response.writeHead(200); response.end(template); }); }); } } 글을 삭제 할 때, 따로 보여줄 ..
수정링크 생성 (홈페이지에서는 create만 보이고 각 페이지에서는 update가 보이도록 하기 ) temlpateHTML{ } 안에 update 추가 templateHTML 에서 control을 추가 create update 를 ${control}로 수정 function templateHTML(title, list, body, control){ return ` WEB ${list} ${control} ${body} `; } 모든 메뉴가 보이는 부분에 a 태그로 링크를 설정한다. else { fs.readdir('./data', function(error, filelist){ fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){ ..
UI 만들기 기존에 있던 if(pathname === '/') 이외에 /가 아닌 create일 때의 조건문 생성 해당 조건문 내용 : 글을 작성할 수 있는 페이지 작성 , 기존의 template에 html의 form 태그 추가 else if(pathname === '/create'){ fs.readdir('./data', function(error, filelist){ var title = 'WEB - create'; var list = templateList(filelist); var template = templateHTML(title, list, ` `); response.writeHead(200); response.end(template); }); Post 방식으로 전송된 데이터 받기 "node...