WebApplication

Thymeleaf 서버에서 view를 구성할 때 사용하는 라이브러리 태그 형식의 문법을 사용하며 vue와 유사하다. 기본 문법 thymeleaf 공식 튜토리얼 에서 기본적인 문법을 확인할 수 있다. 태그 안에 th:속성="값" 형태의 속성을 추가하는 형태로 사용한다. text <span th:text="${text}">default text</span>: 서버에서 ’text’라는 이름으로 정의한 태그가 있으면 text를 표시한다. text변수가 없으면 <span>default text</span>를 표시한다. utext <span th:utext="${utext}">default text</span>: ’text’ 이름으로 정의한 텍스트를 ‘span’ 태그에 넣어 표시한다. ’text’변수가 없으면 ‘default text’를 표시한다. fragment <div th:fragment="name">: ’name’ 이라는 이름으로 fragment를 생성한다. fragment는 th:replace, th:copy 를 사용해서 재활용 가능하다. copy <div th:copy="this::name">: 현재 파일의 ’name’ fragment를 ‘div’태그로 표현한다. ’this’ 대신 파일 이름을 사용하면 다른 파일의 fragment를 사용 가능하다. replace <div th:replace="this::name">: 현재 파일의 ’name’ fragment로 대체한다.(태그도 바뀐다.) ’this’ 대신 파일 이름을 사용하면 다른 파일의 fragment를 사용가능하다.

Tailwind Css 프레임워크로 빠르고 효율적으로 css를 설정할 수 있는 툴이다. Tailwind Docs Installation tailwind 모듈 설치 npm install -D tailwindcss@latest 명령을 사용하여 설치가 가능하다. npx tailwindcss init 명령을 사용하면 현재 경로에 tailwind.config.js 파일이 생성되며, 현재 프로젝트에서 tailwind를 적용할 수 있게 된다. tailwind.config.js 파일은 다음과 같이 구성된다. module.exports = { // 포함할 항목 content: ['./src/**/*.{html,js,jsx,ts,tsx, mustache}'], // 제외할 항목 (최신 버전에서 사용되지 않는 문법) // purge: ["./src/**/*.html", "./src/**/*.js"], // jit mode는 purge와 함께 세트로 사용되었고, 세트로 사라졌다.(?) // mode: process.env.NODE_ENV ? 'jit' : undefined, darkMode: 'class', // [false, 'mdeia', 'class'] theme: { fontFamily: { display: ['Open Sans', 'sans-serif'], body: ['Open Sans', 'sans-serif'], }, extend: { fontSize: { 14: '14px', }, backgroundColor: { 'main-bg': '#FAFBFB', 'main-dark-bg': '#20232A', 'secondary-dark-bg': '#33373E', 'light-gray': '#F7F7F7', 'half-transparent': 'rgba(0, 0, 0, 0.5)', }, borderWidth: { 1: '1px', }, borderColor: { color: 'rgba(0, 0, 0, 0.1)', }, width: { 400: '400px', 760: '760px', 780: '780px', 800: '800px', 1000: '1000px', 1200: '1200px', 1400: '1400px', }, height: { 80: '80px', }, minHeight: { 590: '590px', }, backgroundImage: { 'hero-pattern': "url('https://demos.wrappixel.com/premium-admin-templates/react/flexy-react/main/static/media/welcome-bg-2x-svg.25338f53.svg')", }, }, }, plugins: [], }; tailwind는 react와 같은 framework에서는 자동으로 적용이 가능하지만, 그 외의 경우에는 postcss 등과 같은 모듈의 도움이 필요하다. tailwind 모듈 설치와 tailwind.config.js 구성이 끝났다면, tailwind로 작성된 css를 코드에 추가해줘야 한다. index.css에 아래 구문을 추가한다. @tailwind base; @tailwind components; @tailwind utilities; postcss ...

Angular Angular JS와 Angular는 다르다. Angular JS는 초창기 Angular를 의미하고, 그냥 Angular는 Angular2 이상의 버전을 의미한다. javascript기반의 textscript를 사용한다. 확장자가 ts로 끝난다. 개발환경 세팅 nodejs 설치 $ sudo apt install npm :nodejs와 npm 동시에 설치 angular client 설치 $ npm install -g @angular/cli 명령어를 이용하여 설치 workspace 생성 client 설치가 완료되었으면 workspace를 생성하고 application을 생성한다. $ ng new <application_name> 명령어를 이용하여 설치한다. nodejs 버전이 낮다고 한다. github에서 받아서 빌드하여 써 보자. ...

React basic 개발환경 설치 및 실행 node.js 로 만들어진 create-react-app 툴을 이용하면 손쉽게 react 앱을 생성할 수 있다. npm을 설치하고 아래 명령어를 수행하여 create-react-app을 설치한다. npm install -g create-react-app 원하는 경로에 들어가 프로젝트를 생성한다. create-react-app <NAME> : NAME 경로에 프로젝트 생성 주의 : 프로젝트가 생성되는 폴더명은 대문자를 사용할 수 없다. 실행 npm run start 를 수행하면 localhost:3000에서 웹페이지를 퍼블리싱한다. 기본 설정 실행 포트 package.json 파일에서 "proxy": "http://localhost:3000/" 과 같이 입력하면 실행시 포트를 3000으로 설정할 수 있다. 기본 구조 /public/index.html 에서 기본 화면 구성 ‘root’ 이름으로 된 division이 있는데, 이 division에 대한 설정은 javascript로 정의되어있다. src 경로에 javascript파일들 구성 ‘index.js’ 에 메인 화면에 사용된 객체가 정의되어 있다. 아래 내용은 id가 ‘root’ 인 division에 ‘App’을 적용하겠다는 의미이다. ...

python CGI CGI는 Common Gateway Interface의 약자다. web application을 만들 수 있는 언어는 ruby, java, php 등 다양하지만 모두 CGI 규약을 따라 web server와 통신한다. web server는 사용자의 요청을 받으면 약속된 이름의 데이터를 환경변수로 web application에 전달하여 서로 교류한다. apache에서 python을 이용해 web application을 만들어 web server와 통신해 보자. $ a2enmod CGI 명령으로 apache의 CGI를 켜 주고, sudo service apache2 restart 로 설정 적용 /var/log/apache2/error.log 안에 apache 실행시 발생한 에러 로그가 담겨있다. 웹 브라우저가 웹 서버에 요청할 때 웹 서버는 응답으로 웹 페이지의 데이터 타입(헤더)와 함께 웹 페이지를 전송한다. python CGI로는 print("content-type:text/html; charset=UTF-8\n") 와 같이 헤더를 표기낸다. 헤더를 출력한 다음 부터는 body 부분이 출력된다. 특정 주소로 Redirection을 할 때에는 print("location : index.py?id=title")을 이용한다. ( ‘:’ 이후 부터 ‘"’ 까지는 원하는대로 작성) formatting string에서 특정 문자열을 다른 문자로 치환하는 기능 ex) '{} {}'.format('one','tow') ex) '{a} {b}'.format(a='hello', b='world') python 파일에서 문자열과 format 함수를 이용하여 동적 html을 구현 가능하다. CGI 모듈 import cgi 로 모듈을 로드해 사용한다. form = cgi.FieldStorage() form은 jQuery와 같은 역할을 한다. ex) pageId = form['id'].value : page의 id를 가져온다. HTML 연동 input 태그의 name 속성 : input 태그를 특정 이름으로 CGI에 전달함 ex) ...