Engineering_S/W & H/W

 저번 글에서 GET요청을 받을때 모든 members의 데이터를 보냈습니다. 이번에는 client가 특정 id를 server에 보내면 server에서 해당 id에 맞는 member를 보내는 것이다. 만약 존재하지 않는다면 상태코드 404를 출력하고 잘못됬다고 알려준다. const express = require ( 'express' ); const members = require ( './member' ); // members 데이터 저장 const app = express (); app . get ( '/members' , ( req , res ) => { res . send ( members ). end (); // 모든 멤버를 client에 보낸다. }); const PORT = process . env . PORT || 5000 ; app . listen ( PORT , () => console . log ( `Server Started on PORT : ${ PORT } ` )); 위 코드에서부터 시작한다. 위 코드는 이전에 작성한 코드이다. 이전 글을 참고하면 된다. app . get ( '/members/:id' , ( req , res ) => { // id를 받고 존재하는지 확인후 client에 send한다. }); 저번의 app.get과 다른점이 있다. ':id'가 추가가 됬는데 이는 url마지막에 숫자를 기입하면 서버에서는 이것을 id로 인식한다. app . get ( '/members/:id' , ( req , res ) => { // id를 받고 존재하는지 확인후 client에 send한다. // id존재유무 확인 // req.params.id는 client가 입력한 id(문자열)이다. const bool = members . some ( member =>...

 안녕하세요. 알렉스 입니다. 저번에는 부모 엘리먼트(parent element)에 자식 엘리먼트(child element)를 추가하는 방법에 대해서 알았습니다. 이번에는 제거를 하는 방법에 대해서 알려 드리겠습니다. 이전 글의 코드를 바탕으로 짰으니 참고 부탁드립니다. appendChild를 이용하여 li 늘리기 1번 appendChild를 이용하여 li 늘리기 2번 이전 코드에서 test()함수 안에 2줄만 존재합니다. 엘리먼트를 가져오는 'listID'와 제거하기 위한 '.removeChild'입니다. 여기서 ( )안에 'listID.children[0]'이 있는데 '[0]'은 #List에 자식 엘리먼트 0번째 <li>를 말하는 것입니다.  이전에 작성한 HTML문서를 보면 '<li>List1</li>'부분이 첫번째 리스트 입니다. 따라서 버튼을 누르면 1개가 삭제가 되는데 리스트의 첫번째 부분이 삭제 된다는 이야기 입니다. 물론 인덱스를 이용하여 2번째 것도 제거할수 있습니다.

 안녕하세요. 알렉스 입니다. 저번에는 <li></li>리스트를 추가할때 가장 아래쪽부터 추가가 됬었습니다. 이번에는 앞쪽에서 부터 리스트를 넣도록 하겠습니다.   HTML파일은 저번에 작성한 글(링크) 과 동일합니다. 다만 전에는 <li>List2</li> 아래쪽에 생성이 됬다면 이번에는 <li>List1</li>와 <ul id = "List">사이에 생성하는 것입니다.  순서도는 이전 글과 같습니다. 다만 2개의 문장이 추가되고 1개의 문장(appendChild)은 삭제되어 있습니다.   추가된 'element'는 'list_temp'입니다. 다음 사진에서 'insertBefore'를 사용하기 위해 'child element'의 인덱스로 사용됩니다.  이제 insertBefore를 이용하여 'liElement'를 삽입합니다. 이때 'list_temp.childNode[0]'에서 '[0]'은 기존 <li>List1</li>를 말합니다. 이 위쪽에 <li>ABC</li>를 삽입하는 것입니다.  JavaScript 코드

 안녕하세요. 알렉스 입니다. 이번에는 html과 javascript를 이용하여 텍스트를 입력받아 'li' tag를 추가하도록 하겠습니다.  버튼을 'document'에 생성해 줍니다. 버튼에 표시할 문자열은 'Button'으로 합니다.  input text도 버튼 위쪽에 생성해 줍니다. 텍스트를 입력할 것이니 당연히 타입은 text로 합니다. 리스트를 작성하기 위해서 <ul></ul>을 버튼 아래쪽에 생성합니다. 현재 <ul>에는 아무것도 없기때문에 'document'에서는 빈공간 입니다. 참고 : <div> tag는 </div>를 만나기 전까지 속해있는 아이템(버튼, 텍스트 등등)에 대해서 같은 칸(한줄)에 존재하도록 합니다. 위치 확인을 위해 <ul>안에 <li>를 2개 추가하고 각각 'List1' , 'List2'로 텍스트를 작성합니다. 이제 텍스트 input, 버튼 그리고 리스트에 id를 생성해 줍니다. id는 나중에 JavaScript에서 코딩할때 해당 tag를 추적하고 속성값을 얻을수 있게 해줍니다. 이제 마지막으로 JavaScript 코드를 불러오는 부분을 추가합니다. <script src = [js파일 위치 정보 또는 제목(같은폴더 있을시)]> 이렇게 하면 HTML에 대한 부분을 완료가 되는 것입니다. 다음에는 JavaScript에서 코딩하여 입력받은 텍스트를 리스트에 추가하도록 하겠습니다. 감사합니다.

 안녕하세요. 이번에는 저번시간때 만들었던 html에다가 JavaScript코드를 추가할 것입니다.  위의 2개의 const는 선언을 하는것인데 아래에서 다시 설명드리도록 하겠습니다.  일단 JavaScript에 위와 같이 작성을 합니다. 버튼을 누를시 실제 동작하는 함수는 'test()'함수 입니다.   사용자가 실제로 버튼을 누를시 'btn00.onclick = test'부분이 동작합니다. 이때 'test()'함수를 찾게 됩니다. 만약 'btn00.onclick = test()'를 하게 되면 함수의 리턴값을 넣게 되기 때문에 에러가 발생합니다.    일단 함수를 만들것입니다. 위 순서도는 함수의 진행 순서도를 표현한 것이며 버튼을 클릭하기 전에 이미 'inputText'와 'btn00'이 선언 되어 있는것을 알수 있습니다. 'inputText'와 'btn00'는 'document.querySelector'를 통해서 해당(여기서 텍스트와 버튼) 아이콘에 대한 정보를 갖고 올수 있습니다. 이때 '#'은 아이디를 의미하며 HTML에서 선언한 id를 찾아갑니다. - listID는 'document'에서 Id가 'List'인 'element'를 넣는다.  먼저 초기값을 설정할때 기존에 존재하는 <ul id = "List">의 'element'를 listID의 변수로 저장을 합니다. (추후 listID에 <li>를 추가함).  getElementById 대신 querySelector를 사용할수 있다. - liElement는 'document'에 Tag 'li'가 있는 'element'를 생성한다.  이제 새로운 element를 생성(liElement)하여 'li'(<li...