Engineering_S/W & H/W

 NestJS는 백엔드 프레임워크이지만 가끔 직접 클라이언트에 HTML을 직접 전달하는 경우가 있습니다. 1. Handlerbars를 사용하기 위해서 패키지 설치 $ npm install @nestjs/serve-static hbs copy           ├── src           │   ├── app.module.ts           ├── views           │   ├── test.hbs (API로 응답할 HTML 파일)           └── public               └── styles.css                └── index.html 해당 에러를 확인하면 default엔진이 제대로 제공되지 않은것을 알수 있다. main.ts에 엔진 및 경로를 설정해준다. 에러가 발생하는데 이것은 Index.html을 찾는 NestJS 에러이다.  index.html을 만들면 해결 된다. Build시 views, public폴더가 dist안에 들어가게 하기 위해서 아래 코드를 추가 작성해야 한다. nest-cli.json 코드 추가 추가로 dist파일에 view폴더도 복사해 넣고 싶다면 nest-cli.json에 추가 코드를 넣는다.  GitHub Link

 아파치를 이용하여 웹사이트를 구성하도록 Dockerfile과 Docker-Compose file을 작성한다. 프로젝트 파일 구성 index.html은 아래와 같이 구성한다. <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > 원티드 시연 </ title > </ head > < body > < h1 > Wanted Backend Challenge - Docker </ h1 > < p >< br /></ p > < h3 > Docker 자료 정리 </ h3 > < p >< br /></ p > < div > < h4 > 도커 설치법(docker, docker-compose) </ h4 > < p > 1. Docker 설치 : < a href = "https://engineeringshw.blogspot.com/2022/03/docker-install-by-terminal-ubuntu-2004.html" > [Ubuntu(Linux)] </ a > < a ...

  Live Server Image preview Auto Rename Tag Color Highlight

위 글에 나오는 코드는 이전 글에서 참고한 것입니다. 링크를 참고해 주세요. 먼저 'base.page.tmpl'를 생성해 줍니다. $ touch ./templates/base.page.tmpl <!-- base template 시작지점 --> {{ define "base"}} <!-- ./templates/base.layout.tmpl --> <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> < meta http-equiv = "X-UA-Compatible" content = "ie=edge" /> < title > Document </ title > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity = "sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin = "anonymous" /> </ head > {{bloc...

해당 작성 코드는 위 링크를 참고해 주시기 바랍니다.  ( 링크 ) // ./main.go package main import ( "fmt" "html/template" "net/http" ) // 포트번호 지정 const portNumber = ":8080" func Home (w http.ResponseWriter, r *http.Request){ renderTemplate (w, "home.page.tmpl" ) } func About (w http.ResponseWriter, r *http.Request){ renderTemplate (w, "about.page.tmpl" ) } // 해당 tmpl을 rendering합니다. func renderTemplate (w http.ResponseWriter, tmpl string ) { // 해당 tmpl파일을 파싱 합니다. parseTemp , _ := template. ParseFiles ( "./templates/" + tmpl) // 파싱한 tmpl파일을 응답합니다. err := parseTemp. Execute (w, nil ) // 에러 발생시 if문 실행 if err != nil { fmt. Println ( "error parsing template" , err) return } } func main (){ http. HandleFunc ( "/" , Home) http. HandleFunc ( "/about" , About) fmt. Println (fmt. Sprintf ( "Starting application on port %s " , portNumber)) _ = http. ListenAndServ...

  초기 코드 // ./main.go package main import ( "fmt" "net/http" ) // 포트번호 지정 const portNumber = ":8080" func Home (w http.ResponseWriter, r *http.Request){ } func About (w http.ResponseWriter, r *http.Request){ } func main (){ http. HandleFunc ( "/" , Home) http. HandleFunc ( "/about" , About) fmt. Println (fmt. Sprintf ( "Starting application on port %s " , portNumber)) _ = http. ListenAndServe (portNumber, nil ) } 사진1) 폴더 및 .tmpl파일 생성 <!-- ./templates/home.page.tmpl --> <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta http-equiv = "X-UA-Compatible" content = "IE=edge" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title > Home Page </ title > </ head > < body > < h1 > This is...

  기존의 HTML 코드에 css파일을 추가하여 디자인을 변경하도록 하겠습니다. HTML 파일명은 'index.html'로 하고 경로는 './public/index.html'로 합니다. 코드는 위의 방법으로 작성하고 저장을 합니다. CSS가 적용되지 않은 상태는 위와 같은 페이지가 출력됩니다.  css또한 폴더를 생성(./public/css)하고 style.css파일을 저장합니다. (파일, 폴더, 경로는 자유롭게 생성 가능) background : 뒷 배경 color : 글자 색 일단 위 글은 css에 대한 설명이 아니기 때문에 위의 css에 대한 설명만 적겠습니다. <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link rel = "stylesheet" href = "css/style.css" > <!-- CSS파일을 HTML에 삽입 --> > < title > My HomePage </ title > </ head > < body > < h1 > My HomePage </ h1 > < p > 테스트 홈페이지. </ p > < p > 테스트 홈페이지. </ p > </ body ...

 안녕하세요. 알렉스 입니다. 이번에는 class에 대해서 작성하도록 하겠습니다.  이전 글에서 class부분은 id였습니다. 이번에는 class문을 사용하기 위해서 변경하였습니다. 그리고 추가사항으로 <ul> tag가 2개가 있습니다.  실제 HTML을 크롬에서 열어보면 위와 같이 ul tag 2개가 표시되는 것을 알수 있습니다. id와 달리 class는 여러개를 지정할수가 있습니다.  'getElementsByClassName'에서 보면 마지막에 [0]이 있습니다. 이는 HTML문서 위쪽부터 시작해서 먼저 만나는 Class에 요소를 얻는 것입니다.  HTML에 CSS를 추가하여 디자인 또는 색을 변경할수 있습니다.  위 사진과 같이 HTML이 수정이 되었습니다. 하지만 'Alex'왼쪽의 점이 검정색이였으면 좋겠습니다. 이때 'li' tag에 동일한 'class'(name)를 부여해 줍니다.