On a couch

0. npm 사용법 * 실행을 원하는 파일이 있는 폴더로 이동(cd) 앱 목록을 확인하고 싶을 때 : pm2 list 앱을 실행시키고 싶을 때 : pm2 start (파일이름).js 앱을 종료시키고 싶을 때 : pm2 stop (파일이름).js 앱을 실행시키고 수정사항을 자동으로 반영시키고 싶을 때 (끄고-켜고) : pm2 start (파일이름).js --watch 앱 현황(오류상황 등)을 체크하고 싶을 때 : pm2 log 1. HTML form 기능 1) form이란 웹브라우저(사용자) -> 서버로 데이터를 전송할 때 사용하는 기능. HTML로 만들 수 있음. 2) 태그 : 안에 있는 각각의 컨트롤에 사용자가 입력한 정보를 / submit 버튼을 눌렀을 때 / queryString의 형태로 / act..

1. 글목록 출력하기 1) 배열과 반복문 while 반복문 불편하지만 자유도 높음. while( true ){ } -> ( ) 안의 값이 true 인 동안에 { }를 실행해라. 따로 도돌이표가 있는 것이 아니라, 컴퓨터가 "( ) 아직 true야? 계속 true야?" 하며 모니터 + 실행함 배열 var i = 0으로 설정해 두고 값을 하나씩 꺼내 계산 가능 2) 파일 목록 알아내기 * 현 상태: 'data' 파일 하위에 메뉴.txt가 있는데, 만약 이 메뉴가 추가/삭제/수정된다면? -> Node.js에서 특정 디렉토리 하위에 있는 파일과 디렉토리의 목록을 알아내서 자동으로 수정하게 만들자 var testFolder = './data'; *const 안배워서 var로 쓴다. 폴더명 앞의 ./은 현재폴더란 ..

0. 수강 준비 1) 수업 배경 * html을 수동으로 작성하는 데 지침. * 방문자들이 자유롭게 의견을 남길 수 없음 (수정권한 일부 허용 불가) * 구글이 크롬 v8을 통해 js 성능 개선시킴. -> javascript 사용자들이 추가적인 언어 배우지 않고도 service side application(api)을 사용할 수 있도록 함 즉, 웹브라우저 제어가 아닌 컴퓨터 자체 제어로 확장 2) 수업 목표 : JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만들기 3) cmd 활용 cd : change directory (이 뒤에 경로 붙여넣어 이동) node + 파일명 -> 실행값 보여줌 1. 동적 웹페이지 만들기 1) URL의 이해 http : ..

Ajex 하면서 배는 아프고 머리는 못 따라가겠고 죽을 맛이었는데 역시 공부는 엉덩이 힘이라고 ^^ 붙잡고 하다 보니 됐다 ^^ 1시간 30분짜리 공부를 온종일 붙잡고 있었쥬😹 web1 강의 시작할 때부터 내가 만들고 싶은 페이지를 만드느라 강사님의 예시 페이지와는 내용/구성에 차이가 있었는데, 하나를 배울 때마다 내 경우에는 어떻게 적용할 수 있는지 더 머리를 굴리게 돼서 재밌다. '??? : 앗쉬 나는 저대로 하면 안 먹힐텐데 뭐됐군...' 어려서부터 스스로 납득하지 않으면 다음으로 순순히 안 넘어가주는 학생이어서 그래서 수포자 됨 이렇게 스스로에게 시간을 넉넉하게 주고 알아서 정리하며 곱씹을 수 있는 게 당장 부트캠프 시작하는 것보다 나은 결정이었다는 생각이 다시금 든다. 어제까지는 강의 들으면서 ..

이 모든 삽질의 발단은 생활코딩의 야간/주간모드 토글이어따... 현상은 해결했지만 나는 아직도 그 원리를 모른다 ^^ 지나가다 검색도 제대로 못 하는 이 중생이 딱해보이는 고수님이 계신다면 댓글 부탁드립니다 ^^ 아직 모르는 것 : js 선택자로 '선택한 태그에 해당하는 모든 항목' 선택해 변경하기 "왜 document.querySelectorAll('a').style.color = 'white'라고 입력하면 모든(All) a태그 값이 white로 변하지 않고 최상위 1개만 변하는가???? 만약 원래 그렇게 생겨먹은 거라면 vanilla에서 모두 선택해 변화시키는 가장 효율적인 방법은?" 생활코딩에서 댓글에 달린 답변 (22.01.18) 그리고 자바랑 CSS랑은 달라서, querySelectorAll('..

*Asynchronized javascript and xml : reload 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해주는 기술 1. fetch & api 2. Ajax의 적용 fetch(' Ajax로 보여줄 파일명 ').then(function(response){ ... querySelector( 'article' ) ... } ) 보여 줄 파일(name으로 지정)을 로드하고, 그 다음에 응답받은 데이터(response) 중에서 text()를 실행하고, 그 다음에 얻은 text값을 태그의 innerHTML로 대입해라. 아뉘,, 너모,, 어렵따,, 지금은 이렇게 해 두고 넘어가는 걸로 만족^^ 3. fragment identifier 활용해 초기 페이지 구현 0) ajax로 원페이지 웹을 ..

1. 조건문 1) 비교연산자와 boolean 데이터 타입 === 비교연산자 : 좌항과 우항이 같은지 판단하는 연산자 -> 같으면 true -> 다르면 false -> true 와 false 를 합쳐서 boolean 데이터타입(정보형) >, (greater than) 사용 2) 조건문 문법 ()안의 boolean에 따라서 실행되는 코드가 달라진다. e.g. if ( _________ === true/false ) { true일 때의 코드 } else { false일 때의 코드 } 2. 리팩터링(refactoring)을 통한 중복의 제거 * re+factor : factor를 다시 구성하다. * fac·tor : 1. 요인, 인자 2. 인..

1. 자바스크립트 수업의 목적 * 자바스크립트란 : html을 제어해서 사용자와 상호작용할 수 있도록 기능을 추가하는 언어 * 웹 페이지는 한 번 페이지를 출력하면 자신을 바꿀 능력이 없다. 컴퓨터 언어 vs 프로그래밍 언어 *프로그램 : 순서 *프로그래밍 : 순서를 만드는 것 *프로그래머 : 순서를 만드는 사람 2. Javascript와 html의 만남 1) 기본 문법 자바스크립트 코드임을 알려주는 태그 : *마치 css임을 알려주는 코드가 이듯 자바스크립트가 웹 페이지에 글씨 출력할 때 : document.write( ) 2) 이벤트 html의 속성(attribute) "onclick"의 속성값으로는 : 반드시 자바스크립트가 온다. 속성값을 웹브라우저가 기억하고 있다가, 속성이 적용된 태그를 사용자가..

1. css 도입의 이유 1) 중요한 '정보(html)'와 디자인 기능(css)을 분리해서 페이지 내 정보의 가치가 손상되지 않게 함 2) css를 통해 디자인하는 것이 훠얼씬 효율적 (중복 코드 x) 2. css를 표현하는 2가지 방법 1) 태그 안에 태그로 감싸기 서로 다른 클래스를 중첩해 넣을 수 있으며 -> 띄어쓰기로 구분 2. css 태그 안에 .111 { } .222 { } 로 효과 넣기 -> 선택자로 class를 입력할 시 앞에 점 찍어야 함 4. 선택자 권력 순위 태그 기본 속성 상 hi은 display : block, 일반 태그는 display : inline으로 설정되어 있기 때문 -> 이런 속성은 css 태그 안에 display 프로퍼티 넣어서 수정할 수 있음 2. 테두리/간격 설정 ..

Html 태그 줄바꿈 문장 뒤에 한 번만 작성 paragraph 단락 설정 *간격조정 원한다면 텍스트 강조 굵은 글씨 underline 밑줄 목록작성 (자식-부모 태그) unordered list 동그라미 표시된 리스트 ordered list 번호가 매겨지는 리스트 list 리스트 내 항목 (각 항목마다 태그) 이미지 삽입 링크 걸기 특정 글자에 하이퍼링크 걸기 anchor(정보의 바다에 닻을 내리다) href=" " HyperText Reference 링크 걸 주소 target="_blank" 새 창에서 열리게 하기 title=" " 링크 내용을 툴팁으로 보여주기 페이지 구조 이 웹페이지는 html로 만들어졌어 페이지 제목 (검색엔진, 브라우저 탭에 표시되는 제목) 브라우저야 이 웹페이지는 UTF-8로..