본문 바로가기

웹프로그래밍35

로컬 테스트 서버 Python의 SimpleHTTPServer 웹 브라우저에서 로컬 파일 경로로 파일을 열면, 비동기 요청으로 외부 데이터를 읽어올 수 없다. 웹 보안 때문에 다른 경로의 파일에 접근할 수 없다. 하지만 연습이나 테스트를 할 때는 어떻게 해야 할까? 간단하게 로컬 웹 서버로 실행하면 된다. 가장 쉬운 방법이 파이썬(Python)의 SimpleHTTPServer라고 한다. 리눅스, 맥 OS X 사용자라면 이미 시스템에 설치되어 있을 것이다. 윈도우 사용자는 따로 설치해야 한다. 1. Python 설치하기 먼저 Python 홈페이지로 가야 한다. 아래 Download 영역에 있는 Latest:Python 3.7.4(혹은 다른 숫자일 수도 있음) 링크를 클릭한다. 최신 버전 파이썬 다운로드 페이지로 이동한다. 만약 상단의 메뉴로 이동한다면, Downloa.. 2019. 10. 7.
File.separator로 OS 상관없이 파일 경로 구분하기 운영체제마다 파일 경로 구분자가 다르다. 윈도우는 \ (요즘 윈도우는 /도 인식한다고 한다), 리눅스와 맥은 / 로 말이다. 이런 OS에 따른 경로 차이를 신경 쓰지 않고, 파일 경로를 설정하고자 한다. 이럴 때, java.io 패키지의 File 클래스의 separator 필드를 사용한다. import java.io.File; ... String path = File.separator+"fileName"+File.separator+"sample.jpg"; 위 코드의 path는 /fileName/sample.jpg or \fileName\sample.jpg가 될 것이다. 윈도우의 루트(root)는 윈도우가 설치된 C드라이브로 인식한다. 그래서 /나 \로 시작하는 파일 경로는 root 경로 아래부터 시작한다.. 2019. 10. 4.
CSS Layout - position 속성 CSS의 position 속성은 HTML 요소들의 위치를 설정하는 데 사용된다. position 속성의 값으로는 static, relative, absolute, fixed, sticky 이렇게 다섯 가지가 있다. 요소를 배치하는 방법의 유형이며, 각 유형에 따라 top, bottom, left, right 속성으로 위치를 조절할 수 있다. 1. static HTML 요소의 기본 position 값이 static이다. 정적 위치로 top, bottom, left, right 속성에 영향을 받지 않는다. See the Pen css position static by Park EunAe (@eapark) on CodePen. 이렇게 css로 직접 position: static을 지정하든 아무 설정을 하지 않.. 2019. 10. 3.
자바 날짜 데이터 생성하기 1. Date, Calendar 자바에서 날짜 데이터를 생성하거나 조작할 때 가장 먼저 떠오르는 것, java.util 패키지의 Date 클래스이다. import java.util.Date; ... Date currentDate = new Date(); 이런 식으로 현재 날짜 데이터를 생성할 수 있다. 특정 날짜를 생성하거나 날짜를 계산할 땐 Calendar 클래스를 사용한다. import java.util.Calendar; ... Calendar cal = Calendar.getInstance(); cal.set(2019, Calendar.OCTOBER , 2); cal.add(Calendar.DATE, 7); 이런 식으로 2019년 10월 2일 날짜를 생성하고 7일을 더할 수 있다. 만약 날짜의 포맷.. 2019. 10. 2.
UUID로 파일 이름 중복 방지하기 UUID는 범용 고유 식별자(Universally Unique IDentifier)를 뜻한다. UUID에 관한 더 자세한 내용은 Kakao DB Team MySQL 서버에서 UUID 활용에서 참고. 파일을 업로드할 때, 같은 이름의 파일을 업로드하면 기존 파일이 다른 파일로 덮어씌워질 수 있다. 이를 방지하기 위해 파일의 이름을 UUID로 생성하여 저장하고자 한다. UUID가 중복이 전혀 없는 것은 아니지만, 중복될 확률은 희박하다고 한다. 그래도 미연의 상황을 방지하고자 한다면, File 객체의 exists()를 활용하여 같은 파일이 있는지 확인하고, 뒤에 숫자나 날짜 등을 붙여주는 코드를 추가하면 될 것이다. 아래 코드는 UUID를 랜덤으로 생성하는 코드이다. String extension = fil.. 2019. 9. 17.
파일 업로드 & 다운로드 파일을 업로드하고 다운로드하는 방법에 대해 알아보려고 한다. 1. 파일 업로드 1) HTML 파일 업로드는 form 데이터로 쉽게 업로드할 수 있다. HTML 태그를 다음과 같이 작성한다. 파일도 이렇게 input 태그로 데이터를 전송할 수 있다. (type은 file이다.) name으로 이름을 지정하면, 서버에선 이 이름으로 데이터를 얻을 것이다. accept는 전송 허용 가능한 파일의 타입을 지정하는 것이다. 예제 코드에서는 모든 이미지 파일을 허용하고 있다. 이런 식으로 이미지 파일 중 png, jpeg 확장자의 파일만 허용하겠다고 할 수도 있다. 콤마로 여러 타입을 지정할 수 있다. 참고로 accept 속성의 브라우저 지원 범위는 별로 좋지 않다. Can I use 사이트에서 더 자세한 내용을 확.. 2019. 9. 13.
SLF4J 이용하여 로그 남기는 방법 (with Logback) 로그에 대한 내용은 아래 글에 있다. ▷로깅에 대하여 로그를 위한 라이브러리는 다양한 종류가 있다. 이 다양한 라이브러리를 같은 방법으로 사용할 수 있도록 도와주는 SLF4J에 대해 알아보도록 하자. 1. SLF4J란? SLF4J는 로깅 Facade(퍼사드)이다. 로깅에 대한 추상 레이어를 제공하는 interface의 모음이다. 여러 로깅 라이브러리를 하나의 통일된 방식으로 사용할 수 있는 방법을 제공한다. 아래 그림을 보면, 초록색 박스의 application들은 하늘색의 SLF4J API를 사용하고 있다. 이렇게 application은 SLF4J를 이용하여, 로깅 라이브러리가 어떤 것이든 같은 방법으로 로그를 남길 수 있게 되는 것이다. 나중에 더 좋은 라이브러리가 생겨 교체하더라도, applicat.. 2019. 9. 12.
로깅에 대하여 운영 중인 웹 어플리케이션에 문제가 발생했을 경우, 문제의 원인을 파악하려면 문제가 발생했을 때의 정보가 필요하다. 이를 위해 Exception이 발생했거나 중요 기능이 실행되는 부분에서 적절한 로그를 남겨야 한다. 이를 생성하는 로깅에 대해 알아보도록 하겠다. 1. 로깅이란? 로깅(logging)은 정보를 제공하는 일련의 기록인 로그(log)를 생성하도록 시스템을 작성하는 활동을 말한다. 이런 로그들은 테스트할 때 재현하기 힘든 버그가 개발 완료된 환경에서 발생했을 경우, 그런 버그들에 대한 정보를 알려줄 수 있으며, 구문들 사이에 걸리는 시간 등의 성능에 관한 통계와 정보를 제공할 수 있다. 로그가 제공하는 정보의 양은 프로그램이 실행되는 중에도 설정이 가능한 것이 이상적이다. 설정이 가능할 때, 로.. 2019. 9. 12.
웹 프론트엔드 개발자가 공부할 것들 edwith 부스트코스 웹 프로그래밍 강의 과정 중, 웹 프론트엔드 개발자가 공부할 것들과 순서에 대한 내용이 있었다. 블로그에 포스팅해두고 하나씩 공부해나가면 좋을 것 같아 포스팅한다. 1. JavaScript Programming (with nodeJS) 프로그래밍의 기본이 될 수 있는 언어의 특징을 아는 것 + 프로그래밍 능력이 중요! IDE (with nodeJS) Version control (Git) Variables, Scope, Type, String (ES2015 based syntax) operator, switch, iterator, condition Function - declaration and expression - arguments property & return - call .. 2019. 9. 10.
window.scrollTo를 이용하여 특정 위치로 이동시키기 홈페이지 중에 탭 메뉴를 클릭하면, 특정 위치로 스크롤바가 이동되면서 화면에 보여지는 것을 본 적 있을 것이다. scrollTo() 메서드로 이를 구현할 수 있다. window 객체의 scrollTo 메서드는 문서를 지정된 좌표로 스크롤해주는 기능을 한다. (window는 생략 가능) 1. window.scrollTo 메서드 문법 window.scrollTo()에는 두가지 사용법이 있다. 참고) MDN - Window.scrollTo() 1) window.scrollTo의 문법 중 첫번째는 다음과 같다. window.scrollTo(xpos, ypos) 파라미터로 주어진 xpos는 x좌표, 즉 가로 위치를 말하는 것이고, ypos는 y좌표, 즉 세로 위치를 말하는 것이다. (아래 이동하길 원하는 위치 알.. 2019. 9. 6.

티스토리툴바