본문 바로가기

개발(Development)273

Lorem Ipsum: 샘플 더미 텍스트 생성 방법(+ VSCode HTML) 개발자들이나 디자이너들이 작업을 할 때, 다양한 이유로 샘플 더미 텍스트(dummy text)를 입력해야 할 때가 있다. 직접 타이핑을 하기도 번거롭고 귀찮을 때, 로렘 입숨(Lorem Ipsum)을 사용한다. IT 업계 실무에서는 - 기획자나 디자이너들의 경우, : 디자인/레이아웃/구성에만 집중하길 바랄 때, 의미 파악이 전혀 안 되는 더미 텍스트로 내용을 채운다. (의외로 그냥 막 써놓은 샘플 텍스트의 내용을 문제 삼는 분들이 종종 계신다.) - 개발자들의 경우, : 미리 텍스트 영역을 잡아놓고자 할 때 더미 텍스트를 사용하곤 한다. 1. 웹사이트: 한글, 영어, 일본어, 중국어 1) http://dogumaster.com/work/dummy 접속 2) 언어, 단락수/단어수 체크후, "생성하기" 버튼.. 2021. 7. 7.
[HTML] img 태그: 샘플 더미 이미지 사이즈별 적용 방법 HTML개발하다보면, img 태그를 사용하면서 수많은 사이즈에 맞는 이미지를 미리 적용해둬야 할 때가 있다. 매번 그런 이미지를 편집해서 사용하는건 대단히 번거로운 일이다. 그럴 때 사용하기 좋은 방법이 있다. 사이즈별 더미? 샘플? 이미지를 제공해주는 사이트를 이용하는 것인데, 아래처럼 이미지 소스 경로를 설정해주면 된다. http://placehold.it/ 경로(url) 뒤에 원하는 가로X세로 사이즈를 설정해주면 된다. 즉, 아래 html 파일을 실행해보면 아래와 같은 결과가 나온다. 아주 유용하게 img태그에 샘플 이미지를 미리 적용해 둘 수 있는 방법이다. 더 자세한 사용 방법은 아래 사이트를 참고 https://placeholder.com 2021. 7. 7.
[자바스크립트] HTML엘리먼트 생성, 추가, 삭제, 속성/텍스트/내부html 설정 방법 # 자바스크립트로 HTML엘리먼트 조작 window.document객체의 메서드로 HTML엘리먼트 생성, 추가, 삭제, 속성/텍스트/내부HTML 설정을 할 수 있다. 1. Element 생성 1) 요소 노드 생성 : document.createElement('태그') 2) 텍스트 노드 생성 : document.createTextNode('텍스트') 2. Element 추가 1) 자식으로 추가 : 부모노드.appendChild(자식노드) * 자식노드 : 요소노드 || 텍스트노드 3. Element 제거 : 부모노드.removeChild(자식엘리먼트) 4. Element의 속성 설정 1) 노드의 프로퍼티 확인/설정 : 노드.속성 / 노드.속성=값; * 지원 안되는 것들이 있음. 아래의 setter/gette.. 2021. 7. 7.
[node.js] Socket.IO 웹 소켓 모듈 기본 사용 방법 # Socket.IO 모듈이란? socket.io는 소켓 구현시 필요한 다양한 편의기능을 제공하는 모듈로, 웹소켓이 지원되지 않는 브라우저에서도 작동하도록 내부적으로 구현해 준다. (ws 프로토콜이 지원되지 않는 경우, http 프로토콜로 반복적으로 서버와 통신하는 polling 방식을 이용한다.) 웹 소켓 자체 및 ws모듈에 대해서는 아래 글 참고! 전체 샘플코드는 글 하단에 첨부! Node.js: Web Socket 통신 - ws모듈 사용 방법 #1 socket.io 모듈 설치 - npm install socket.io #2 서버 측 socket.io 설정 작업 1. http 서버 생성 const app = require("express")(); const server = app.listen(3000.. 2021. 7. 6.
[자바스크립트] HTML 엘리먼트(태그/노드) 선택/취득 방법 # HTML 엘리먼트(태그/노드) 선택/취득 방법 브라우저 환경의 전역객체인 winodw의 documet객체에 정의된 메서드를 활용하여 HTML 노드를 선택하여 조작할 수 있다. # documet.getElement...종류 1. id로 1개의 엘리먼트 선택 window.document.getElementById('아이디') => HTMLxxxElement 반환 *window 생략 가능 2. class로 여러개의 엘리먼트 선택 document.getElementsByClassName('클래스') => HTMLCollection(이터러블) 반환 3.태그명으로 여러개의 엘리먼트 선택 document.getElementsByTagName('태그') => HTMLCollection(이터러블) 반환 # docum.. 2021. 7. 4.
웹소켓(Web Socket) 온라인 테스트 사이트 # 웹소켓 연결 및 데이터(메세지) 전송 테스트 사이트 - 주소 : https://www.websocket.org/echo.html # 온라인 웹소켓 테스트 방법 1. 접속 - https://www.websocket.org/echo.html 주소로 접속한다. 2. 연결 1) Location에 연결할 WebSocket 서버의 주소를 입력 2) Connect 클릭시 연결, Disconnect 클릭시 연결 종료 3) Log 항목에 연결(Connected) 로그와 서버로 부터 받은(RECEIVED) 메시지가 출력 된다. 3. 데이터 전송 1) Message에 전송할 메시지 입력 2) Send 버튼 클릭시 데이터 전송 3) Log 항목에 보낸(Send) 메시지와 서버로 부터 받은(RECEIVED) 메시지가 출력 .. 2021. 7. 3.
Node.js: Web Socket 통신 - ws모듈 사용 방법 # 웹소켓(Web Socket)이란? : ws프로토콜을 이용하는 양방향 통신방식이다. : ws프로토콜은 한번 연결되면 "연결을 끊지 않고 계속 유지"한 상태로 "클라이언트와 서버가 서로 데이터를 주고 받는다" : 따라서 서버 하나에 여러 클라이언트가 붙어서 지속적으로 데이터를 주고 받아야하는 서비스에 유용하다. : HTTP 통신의 경우, 클라이언트가 요청을 하고 서버가 응답을 하면 바로 연결이 끊어진다. 예를 들어 채팅서비스의 경우, 계속해서 새로운 메시지가 있는지 확인해야 하는데 웹소켓을 이용하면 매번 서버에 요청할 필요 없이 계속해서 새로운 데이터를 받을 수 있다. 기존에 연결된 통로를 통해 추가 요쳥이 없어도 서버에서 데이터를 보내줄 수 있기 때문이다. * 참고: 웹소켓 지원 전에는 클라이언트가 서.. 2021. 7. 2.
Javascript: URI, URL, QueryString과 인코딩/디코딩 정리 # URI(Uniform Resource Identifier) : 인터넷에 있는 자원을 나타내는 유일한 주소 * URI, URL(Uniform Resource Locator), URN(Uniform Resource Name)의 차이는 아래 그림 참고 * 연관된 개념인 Scheme(Protocol), Host(Domain), Port, Path, Query String, Search, Fragment는 아래 그림 참고 # URI 인코딩이란? : URI의 문자들을 이스케이프 처리하는 것 # 이스케이프 처리란? : 어떤 시스템에서도 읽을 수 있는 아스키(ASCII) 문자셋으로 변환하는 것 # 즉, URI 인코딩이란? : 네트워크 등를 통해 정보를 공유할 때, 어떤 시스템에서도 읽을 수 있도록 URI의 문자들을.. 2021. 7. 2.
Node.js: NPM 명령어 정리, package.json(+scripts) 생성 및 사용 방법 # NPM(Node Package Manager)이란? - Node.js 전용 패키지가 올라가 있는 서버이다. - 패키지 업로드/다운로드 및 버전관리 기능을 제공한다. - node.js를 설치할 때 함께 설치된다. * 패키지는 남들이 만들어 놓은 외부모듈로, 라이브러리 같은 개념이다. * NPM 공식 사이트: https://www.npmjs.com/ # package.json 생성 - 수많은 패키지를 다운받다보면 관리가 어려워진다. - 그래서 프로젝트마다 package.json 파일을 만들어서 패키지 목록 및 버전을 관리한다. * 프로젝트를 생성하자마자 package.json을 만들어주고 시작하길 권장한다. - 명령어: npm init 1) package name 등의 정보를 입력해준다. 필요 없는 항목.. 2021. 7. 1.

티스토리툴바