[Node.js] Express 웹 서버 만들기 (mySQL 연동) - 1
·
Back-End/Node.js
Express란 "Node.js를 위한 가장 빠르고 개방적인 간결한 웹 프레임워크"다. MIT허가서로 라이선스 되는 자유-오픈 소스 소프트웨어다. 웹 어플리케이션, API 개발을 위해 설계되었고, Node.js의 사실상의 표준 서버 프레임워크로 불린다. 주로 React를 사용해 프론트엔드를 개발하고 Express를 사용해서 웹 서버를 개발하는 조합이 많이 사용된다. Express.js 시작하기 https://expressjs.com/ko/starter/installing.html Express 설치 설치 Node.js가 이미 설치되었다고 가정한 상태에서, 애플리케이션을 보관할 디렉토리를 작성하고 그 디렉토리를 작업 디렉토리로 설정하십시오. $ mkdir myapp $ cd myapp npm init 명령..
[JS] 자바스크립트 공학용 계산기 만들기
·
Front-End/HTML, CSS, JS
HTML, CSS clear = 1 2 3 + x^y 4 5 6 - sin 7 8 9 * cos 0 +/- . / tan ⦁ 인라인 스타일과 태그를 섞어서 사용했다. 처음에 인라인 스타일만 사용했다가, 코드가 길어지는 느낌이 들어서 태그로 css를 적용해 보았는데 오히려 통일감이 없어지고 코드의 길이도 더 길어진 느낌이라 아쉬웠다. 다음부턴 조심하자. 자바 스크립트 (Java Script) 참고 문헌 :
[Web] 쿠키, 세션, 토큰(jwt) 인증 방식 정리
·
CS 지식
웹에서 사용자를 인증할 때 크게 쿠키, 세션, 토큰 방식이 있다. HTTP 프로토콜은 Stateless이기 때문에 상태 정보를 가지지 않는다. 지속적이지 않다는 특징 덕분에 서버의 부담은 줄어들었지만, 로그인 같은 경우는 한번 인증이 완료되면 클라이언트가 누구인지 계속 정보를 유지해야 하기 때문에 사용하는 것이 쿠키와 세션, 토큰이다. 인증(Authentication) & 인가(Authorization) 1. 인증 ⦁ 식별 가능한 정보로 서비스에 등록된 사용자의 신원을 입증하는 과정 예시 : 인증은 방문자가 자신이 회사 건물에 들어갈 수 있는지 확인을 받는 과정이다. 2. 인가 ⦁ 인증을 통해 확인을 받은 사용자가 이후 서비스의 여러 기능들을 사용할 때 내가 로그인이 되어있음을 알아보고 활동을 허가해주는..
[HTML] <form>을 사용한 로그인 페이지 구현 (audio 음악재생)
·
Front-End/HTML, CSS, JS
HTML만 사용해서 간단한 로그인 페이지를 구현 해보자. 태그를 사용하면 사용자가 입력한 정보를 한 번에 서버로 보낼 수 있다. 주로 로그인이나 사용자의 의견을 물어볼 경우 많이 사용된다. 태그 설명 https://www.w3schools.com/html/html_forms_attributes.asp HTML Form Attributes W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3scho..
[JS] 자바스크립트 글자 미리보기 (String 메서드, getElementBy)
·
Front-End/HTML, CSS, JS
자바스크립트를 이용해서 설정에 따라 적용된 글자를 미리 보는 간단한 프로그램이다. 주로 getElementByID와 String 메서드를 사용한다. HTML 미리 보기 색상: 빨강 파랑 녹색 크기: 1 2 3 4 5 6 7 취소선 크게 작게 두껍게 기울임 위첨자 아래첨자 소문자로 대문자로 document 객체의 getElementByID(), getElementsByName(), getElementsByTagName() 메서드를 사용할 것이기 때문에 최대한 필터링하기 편하도록 HTML에서 태그들의 Id와 Name을 지정한다. JavaScript 코드 * 전체코드 더보기 더보기 미리 보기 색상: 빨강 파랑 녹색 크기: 1 2 3 4 5 6 7 취소선 크게 작게 두껍게 기울임 위첨자 아래첨자 소문자로 대문자..
절대경로와 상대경로 정리
·
CS 지식
경로(path)란 파일 시스템 내에서 특정 파일의 위치, 이름을 나타내는 양식이다. 개발을 할 경우 다른 모듈이나 라이브러리를 import 할 경우가 많은데, 가장 많이 하는 실수 중 하나가 경로를 잘못 기입해서 에러가 발생하는 것이다. 실수를 방지하기 위해서 절대 경로와 상대 경로의 차이점에 대해서 알아보자. 절대 경로 ⦁ 루트 디렉토리를 포함한 주소를 갖는 경로를 말한다. ⦁ 작업 디렉터리와 상관없이 절대적인 파일의 위치를 가리키는 경로 루트 디렉토리를 포함하여 사용하기 때문에 외부에서도 이 절대경로를 이용하여 파일을 연결할 수가 있습니다. 서버의 주소가 달라진다면 절대경로로 설정된 주소들은 모두 수정해 주어야 합니다. 로딩 속도는 상대경로에 비해 떨어집니다. 상대 경로 ⦁ 상대경로는 루트 디렉토리를..
[웹] HTTP, URL 개념 정리 (REST API / GET, POST, PUT, DELETE )
·
CS 지식
HTTP 메서드는 클라이언트가 웹 서버에게 요청의 목적이나 종류를 알리는 수단이다. 여러가지 메서드가 존재하지만 대표적으로 GET, POST, PUT, DELETE 를 가장 많이 사용한다. HTTP 이란? HTTP(Hypertext Transfer Protocol)는 웹을 개발하는 사람이라면 기본적으로 알아야 하는 통신 프로토콜이다. 프로토콜이란 상호 간에 정의한 규칙을 의미하며 데이터를 주고받기 위해 정의되었다. 브라우저에서 서버에 URL + HTTP 메서드(GET, POST, PUT, DELETE)를 Request 하면, 서버는 상태 코드 + 응답 Body를 Response 해준다. ⦁ HTTP 프로토콜 특징 HTTP 프로토콜은 상태가 없는 (Stateless) 프로토콜이다. 상태가 없다는 말은 각각..
[네트워크] OSI 7계층 정리 ( 전송 단위, 장비, 프로토콜 )
·
CS 지식
OSI (Open Systems Interconnection)란 개방형 시스템의 상호연결 모델의 표준이다. 초기 여러 정보통신 업체의 장비들은 자신의 업체 장비끼리만 연결이 되어 호환성이 없었다. 따라서 모든 시스템이 상호 연결에 있어 문제가 없도록 표준을 정한 것이 OSI 7계층이다. 즉 호환성과 학습도구로서 제작이 되었다. OSI 7계층 OSI 계층은 전송 시에 7계층에서 1계층으로 각각의 층마다 인식할 수 있도록 헤더를 붙여 캡슐화를 하고 1계층에서 헤더를 떼어내며 디 캡슐화를 해서 데이터를 주고받는다. 1. 물리 계층 ( Physical Layer ) 전기적 기계적 특성을 이용하여 통신 케이블로 전기적 신호를 전송한다. 단지 데이터 전송의 역할을 할 뿐이라 알고리즘이나 오류 제어 기능은 없다. ⦁..