본문 바로가기

분류 전체보기

 (84)
Node.js 시작하기 express로 hello world 찍어보자 Node를 공부하면서 지난 블로그에 셋팅 과정들을 기록해왔다. NVM 설치하기 (node 버전 관리 / 윈도우에서 작업 환경 세팅하기) 구글 클라우드 플랫폼에서 VM인스턴스를 생성하고 ssh 접속까지 완료했으니, 이제 NVM을 설치해서 작업 환경을 셋팅하려고 한다. (윈도우 환경) VM 인" data-og-host="bomango.tistory.com" data-og-source-url="h.. bomango.tistory.com 이제 셋팅은 완료했으니, 직접 node를 통해 hello world를 찍어보기로 한다. npm init 으로 셋팅을 완료하면 기본적으로 app.js 파일이 생성되는데 얘를 통해 hello world를 찍어낼 수 있다 app.js를 열고 var express = require('..
Readme.md 마크다운 작성법 정리 md파일은 과연 어떻게 만드는 것일까. 남의 깃헙을 구경하면서 정말 궁금했었다. 그래서 마크다운 작성법을 총정리해놓으려고 한다. ** 우선 vscode에서 md파일 미리보기 하는 방법 ctrl + shift k v (맥의 경우 cmd + K V)를 누르거나, 상단에 preview 버튼을 누르면 미리보기가 가능하다. 위 미리보기 기능은 vscode에 내장된 익스텐션을 다운받아야 가능하다고 들었는데, 본인은 익스텐션을 따로 받지 않았는데도 미리보기가 가능했다. (vscode 기본 기능으로 미리보기가 생겼나?) #는 HTML 태그로 치면 h1 ## ### #### 갯수가 늘어나면 h2, h3, h4...와 같음. h6까지 표현 가능 # 아래에는 언더라인이 그어지는데, 만약 언더라인을 긋고 싶으면 ___ 언더라..
서버 ftp에 연결하기 vsftpd 설치 + password 재설정 (리눅스 초기값 셋팅) NVM 설치하기 (node 버전 관리 / 윈도우에서 작업 환경 세팅하기) 구글 클라우드 플랫폼에서 VM인스턴스를 생성하고 ssh 접속까지 완료했으니, 이제 NVM을 설치해서 작업 환경을 셋팅하려고 한다. (윈도우 환경) VM 인" data-og-host="bomango.tistory.com" data-og-source-url="h.. bomango.tistory.com 지난번에 node까지 설치를 완료했으니, 오늘은 ftp로 연결해서 직접 서버 내의 파일을 수정하고자 한다. ftp 연결을 위해 vsftpd를 설치한다. vsftpd 설치에 앞서 리눅스 초기 셋팅을 해둔다. * 리눅스 초기 세팅 (업데이트) sudo apt update 여러 유저들이 한 서버에 접속할 때를 대비해 유저명과 권한 등등을 설정할..
NVM 설치하기 (node 버전 관리 / 윈도우에서 작업 환경 세팅하기) 구글 클라우드 플랫폼에서 VM인스턴스를 생성하고 ssh 접속까지 완료했으니, 이제 NVM을 설치해서 작업 환경을 셋팅하려고 한다. (윈도우 환경) 구글 클라우드 플랫폼에서 가상 서버 만들고 ssh접속까지 Node를 공부하기 위해 나만의 홈페이지를 개설해 서버에 연결하는 작업을 해보기로 했다. 먼저 구글 클라우드 플랫폼을 통해 가상 머신을 실행시켜야 한다. 1. 구글 클라우드 플랫폼 접속 -> VM 인 bomango.tistory.com NVM (Node Version Manager)은 시시때때로 버전업하는 노드를 따라 쓰기 위해 사용한다. 다운로드 하는 방법은 아래 링크에 자세히 기록되어 있으니 꼼꼼히 읽고 따라하면 된다. nvm-sh/nvm Node Version Manager - POSIX-compl..
구글 클라우드 플랫폼에서 가상 서버 만들고 ssh접속까지 Node를 공부하기 위해 나만의 홈페이지를 개설해 서버에 연결하는 작업을 해보기로 했다. 먼저 구글 클라우드 플랫폼을 통해 가상 머신을 실행시켜야 한다. 1. 구글 클라우드 플랫폼 접속 -> VM 인스턴스 결제 정보가 있어야 가상 머신이 생성된다. 결제 정보가 없다면 결제 사용 설정에 들어가 신용카드 정보를 넣어 만들어야 한다. (!신용카드여야 한다) 대략 리전은 서울로 하고 머신 유형은 비용 부담이 없이 일단 제일 작은 메모리로 설정. 이름과 리전, 영역은 수정이 안되므로 만들때 신중하게 작성한다. 수정해야하는 상황이 올 때는 그냥 삭제하고 새로 만들면 됨. (메모리에 따라 비용이 추가되므로 만들어 놓고 필요에 따라 추후 수정한다. ) (서울은 비용이 조금 더 드는데 빠르기 때문에 보통은 서울. 아니면..
회원가입 유효성 검사시 페이지 이동 혹은 포커스가 갑자기 사라질 때 회원가입 폼을 짜고 있는데 자바스크립트로 유효성 검사를 하다가 아주 사소한 실수로 버벅거리게 됐다. function chkForm() { if(form.userName.value == ""){ alert("이름을 입력해주세요"); form.userName.focus(); return false; } return true; } 여기서 더 추가적으로 검사해야하는 태그들은 if문으로 줄줄이 달아서 작성했다. 그리고 확인 버튼 요소로 함수를 실행시켰다. 근데 자꾸만 새 페이지로 로드가 되는 것이다. (메소드가 post면 새 페이지 로드, get이면 url에 value 값들이 전부 쳐덕쳐덕 붙어있음..) 처음엔 페이지가 렌더링되는지도 모르고 (메소드가 get상태여서) 왜 인풋창에 focus가 들어갔다가 갑자기 사..
토글클래스 이벤트 실행 시 innerHTML도 toggle이 될까? 제이쿼리에서는 toggleClass 로 클래스를 추가했다가 삭제했다가를 할 수 있다 (혹은 addClass, removeClass 반복) 순수 자바스크립트에서는 classList라는 프로퍼티를 활용해 클래스를 조절할 수 있다. el.classList.add("클래스명") //클래스 추가 el.classList.remove("클래스명") //클래스 제거 el.classList.toggle("클래스명") //클래스 넣었다뺐다 el.classList.contains("클래스명") //클래스 존재유무 확인 메서드 종류는 이렇게 있다. 그렇다면 자바스크립트에서 클래스를 넣었다 뺐다 함으로써 HTML 요소들의 스타일링을 왔다리갔다리 할 수 있을까? 예제로 다중의 div들에 addEventListener로 click..
[제이쿼리] fullpage.js 플러그인에서 스크롤시 동영상 자동재생이 멈출때 요즘도 fullpage를 자주 쓰는지 모르겠지만.. 한때는 포트폴리오 제작할 때는 무조건 fullpage로 제작해야하는 게 관습이라고 할 정도로 빈번하게 사용됐다. 요즘 이전에 만들어뒀던 포트폴리오를 정리하고 있는데, 스크롤을 할 때마다 자동재생이 멈추는 이슈를 발견했다. (엉망진창 대충대충 만들어내느라 몰랐던 나의 과오..) 영상은 video 태그를 이용해 mp4파일을 불러오기 했는데, video태그의 오류인가 싶어서 iframe태그로 동영상 URL을 붙여놔도 똑같은 현상이 반복됐다. 페이지 로드시 영상은 문제없이 자동재생되었으나, 스크롤만 하면 영상은 뙇 멈춰버린다. controls기능을 키면 다시 재생은 가능하나, 자동재생은 아니고 클릭을 해야만 재생이 가능했다.. 검색을 해봐도 안나오고, 이 이슈..
css 사이즈 태그 em, rem, vh, vw, vmin, vmax 완벽 정리 css 작성할 때 종종 em rem까지는 작성할 때도 있긴 한데, 보통은 귀찮아서 반응형일 때는 %에 의존하고 그 외에는 그냥 대부분 px처리 해버리곤 한다.. 하지만 폰트나 블록 영역 크기를 조절할 때 사용하는 요 요소들을 적절히 사용해주면 보다 간단하면서도 깔끔한 코딩이 완성되므로, 숙지할 필요가 있다. 꼭 암기해서 다음 플젝 때는 요 요소들을 활용해 보자! (는 의미에서 작성한 포스팅..) 1. em : 부모 사이즈에서 곱한 사이즈 div {font-size: 14px} p {font-size: 1.2em} 일 경우, p의 사이즈는 14*1.2 = 16.8px 이 된다. 2. rem: 부모가 아닌 최상위 태그에서 곱한 사이즈 em을 사용하다보면 점점 사이즈가 커져버려서 제어가 힘든 상황이 온다. 이..
P태그요소 안에 div 넣지 마세요. HTML 기본기 박살내기 HTML5의 등장으로 태그를 인라인/블록으로 나누는 시대는 지났다. 그러나 HTML를 공부할 때 인라인/블록의 개념을 반드시 알고 지나가야 한다고 생각한다. HTML5 등장 이전에 통용되던 개념은 "인라인 요소 안에 블록을 넣을 수 없다" 였지만, 시맨틱 구조의 출현으로, 사실상 우리는 a앵커 태그 안에 블록 요소를 넣는 행위?를 밥먹듯이 하고 있다. 하지만 아직까지 전통적으로 인라인 레벨 요소로 불리던 것들 button, input, i, 등등의 요소에는 블록 요소를 집어넣어서는 안된다.. 이건 시맨틱 구조로도 납득되지 않는 부분들이다. 이와 더불어 우리가 쉽게 간과하지만 그래서는 안되는 부분이 있다. 바로 P태그다. P태그 안에 블록 요소를 넣으면 안된다. p태그는 블록요소다. 여기서 블록/인라인이 ..

티스토리툴바