삐제제의 개발 노트

Express.js란? node.js를 이용하여 서버개발을 할때 사용하는 js 기반 웹 프레임워크이다. 그리고 npm을 이용하여 간단하게 설치할 수 있다! 그냥 Express.js 웹 사이트 들어가서 설치 할 수 있지만, Express 버전이 업데이트 되면 다시 다운로드받아 내가 지금 개발하고있는 프로젝트에 재 적용을 해주어야한다. 하지만 NPM을 이용하면 이런 번거로움을 줄일 수 있다! 1. NPMjs www.npmjs.com/package/express express Fast, unopinionated, minimalist web framework www.npmjs.com 1. 위의 링크에 들어간다. 2. 현재 내 컴퓨터에 npm이 잘 설치되있는지 확인하기 위해 npm -v 로 확인 아마 블로그에는 ..

1. Node.js 홈페이지 접속 nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. LTS 버전 다운로드 좌측의 LTS 버전은 일반적으로 권장되는 버전이고, 우측의 최신버전은 약간 실험적인 버전 LTS 버전은 기능들이 테스트되고 안정적인 버전이고, 최신버전은 최신 기능들이 추가되었지만 아직 테스트가 덜 된 부분도 있고 LTS 버전에 비해 덜 안정적인 버전이라고 생각하면 된다. 3. 설치 설치는 되게 간단하다. 사진을 첨부해서 설명하려고했으나, 이미 내 컴퓨터에는 Node.js가 깔려있어서 인스톨 과정을 찍을수가 없다 ㅠㅠ 쭉쭉 Next를 누르면 아주 간단하게 ..

숫자에 약한 나라서.. 스스로의 방식으로 이해해보고자 하여 블로그에 포스팅한다.. 우선 1000 밀리초 = 1초 1일은 1000 * 60 * 60 * 24 = 86,400,000 밀리초 1시간은 1000 * 60 * 60 = 3,600,000 밀리초 1분은 1000 * 60 = 60000밀리초 1초는 1000 밀리초 이다. 그런데 이걸 응용 하여 우리가 실생활에 사용하는 일,시,분,초 단위를 구하려면 어떻게 해야할까? 계산할 날의 밀리초 / (1000 * 60 * 60 * 24) = 일 (계산할 날의 밀리초 / (1000 * 60 * 60)) % 24 = 시 (계산할 날의 밀리초 / (1000 * 60)) % 60 = 분 (계산할 날의 밀리초 / 1000) % 60 = 초 이다. 근데 숫자에 약한 나는 ..

html 요소를 id나 클래스, 태그를 통해 가져올 때 : // title 이라는 클래스를 가진 요소를 title 변수에 저장 const title = document.querySelector(".title"); // title 이라는 id를 가진 요소를 title 변수에 저장 const title = document.querySelector("#title"); // body 라는 태그를 가진 요소를 body 변수에 저장 const body = document.querySelector("body"); 가져온 요소를 이벤트 리스너를 통해 제어하는 방법 : // title 클래스를 가진 요소를 변수 title에 저장. const title = document.querySelector(".title"); //..

서블릿에서 클라이언트의 요청을 서버로 얻어오는 방법은 태그로 전송된 데이터를 받아오는것이다! HTML에서 다음과 같은 form 태그가 있다. 아이디 : 비밀번호 : 각각 아이디와 비밀번호를 input 태그로 입력받고, 각각의 태그 name 은 user_id 와 user_pw 이다. 그리고 이것들이 전송될때는 name 속성의 값 (user_id) 과 input태그에 입력한 값 (value) 가 쌍으로 전송된다. 만약 아이디에 hello 를 입력했다면 이것은 user_id : hello 이런식으로 전송된다는 것이다! 그리고 서블릿에서는 이렇게 전송된 데이터를 HttpServletRequest 클래스의 getParameter() 메서드를 사용하여 받아올 수 있다. 다음은 form 태그로 전송된 데이터를 받아오..

HttpServletRequest, HttpServletResponse는 서블릿에서 요청이나 응답과 관련된 API이다. 클라이언트가 서블릿에 요청을 하면 먼저 톰캣 컨테이너가 받고, 그 다음 사용자의 요청이나 응답에 대한 HttpServletRequest 객체와 HttpServletResponse 객체를 만들고, 서블릿의 doGet() 이나 doPost() 메소드를 호출하면서 이 객체들을 전달한다. 톰캣이 사용자의 요청에 대한 정보를 모든 HttpServletRequest 객체의 속성으로 담아 메서드로 전달하므로 각 HttpServletRequest 에서 제공하는 메서드들은 매개변수로 넘어온 객체들을 이용하여 사용자가 전송한 데이터를 받아 오거나 응답할 수 있는것이다. 다음은 각 API에서 제공하는 중요..

웹 애플리케이션이란? 정적인 웹 애플리케이션(HTML,CSS,JS)의 기능을 그대로 사용하면서 서블릿, JSP, 자바 클래스들을 추가하여 사용자에게 동적인 서비스를 제공하는 프로그램을 말한다. 웹 컨테이너에서 실행되는 JSP, 서블릿, 자바 클래스들을 사용해 정적 웹 프로그래밍 방식의 단점을 보완하여 서비스를 제공하는 서버프로그램을 웹 애플리케이션이라고 한다. 따라서 정적 웹 애플리케이션의 기능인 HTML, 자바스크립트 CSS 등도 웹 애플리케이션에서 그대로 사용할 수 있다. 웹 애플리케이션의 기본 구조 컨테이너에서 실행되는 모든 웹 애플리케이션은 웹 애플리케이션의 이름으로 이루어진 루트 디렉터리와 하위 디렉터리 구조를 기본 구조로 가진다. 웹 애플리케이션 이름 │ └─────── WEB-INF │ ├─..

부모박스에 opacity가 적용되어있으면, 그 자식도 영향을 받게된다. 예를들어 박스가 하나있고, 그 박스안에 3개의 박스를 배치하고싶은데 바깥 박스는 투명하게, 안쪽박스는 투명하지 않게 하고싶다. 그런데 이때 부모박스의 css 속성에 opacity값을 주게되면.. 안쪽박스까지 같은 투명도를 가지게된다. 이때 위에 보이는 아이콘들의 css속성에 opacity: 1; 값을 주어도 위와같은 상태가 그대로 유지된다.. 하지만 이때 부모의 css에 opacity 대신 background-color: rgba(0, 0, 0, 0.5); 이처럼 rgba 로 투명도를 주게되면 원하는대로 나온다.

이번 포스팅에선.. 오늘 공부한 자바스크립트 함수의 정의에 대해서 글을 써보려고한다. 우선 자바스크립트에서 함수를 생성하는 방법은 3가지가 있다! 1. 함수 선언문 2. 함수 표현식 3. Function() 생성자 함수 요러케 세가지가 있다! 들어가기전에 함수 리터럴의 형태를 간단하게 살펴보자.. function add (x, y) { return x+y; } function : function 키워드이다. 자바스크립트 함수를 만들때 사용한다 ! add : 함수명이 오는 자리이다! 위 코드에 나온 함수의 이름은 add가 되겠죵? (x, y) : 매개변수가 오는 자리이다! 우리가 C 나 JAVA에서 사용했던 그 매개변수랑 비슷한데 차이점은 데이터 타입을 명시하지 않아도 된다는점! return x+y; : ..

자바스크립트에서 두 값이 같은지 확인할 때 사용하는 연산자는 == 연산자와 === 연산자가 있다! 이 비슷하게 생긴 두 연산자의 차이점은 다음과 같다. == 연산자는 비교하려는 피연산자의 타입이 다를 경우, 같은 타입으로 바꿔준 뒤 비교한다. 즉 1 == '1' 숫자 1과 문자열 1 을 비교하면 같은 타입으로 바꿔 준 뒤 비교하기때문에 결과가 true가 나온다! === 연산자는 타입 변환을 하지 않고 비교한다. 1 === '1' 을 했을때, 당연히 숫자 1 과 문자 '1' 은 다르기때문에 false 를 출력한다! js로 코딩할때 == 연산자로 비교하는 방법은 추천하지 않는다고한다. 그 이유는 == 연산자의 타입 변환에 따른 잘못된 결과를 얻을 수 있기 때문이란다.. 그래서 가급적이면 === 로 피연산자들..