본문 바로가기

웹

Building a static sitewith Node and Express [1]
웹/school(MEAN) 2021. 9. 15. Building a static sitewith Node and Express [1] static 사이트를 만들어보자 전체에서 동그라미 친 부분을 작성할 겁니다. 첫 번째 버전 뷰에 모든 데이터를 포함합니다. express에 라우터를 지정합니다. locations에는 3개의 페이지가 있고 about 는 1개의 페이지가 있습니다. 4개의 패이지와 url을 매핑시켜야 합니다. 표준을 지정해야 합니다. / = 홈페이지로 요청이 들어오면(=장소를 쭉나타내는 홈페이지) location = 세부사항을 보여주는 페이지가 되야할 것입니다. reivew = 리뷰를 달려고할 때 리뷰 폼을 나타내는 페이지가 될 것입니다. about = about페이지가 나와야 합니다. 라우터와 컨트롤러를 분리시켜야 합니다. 컨트롤러를 Collection으로 나눕니다. Locations과 Others로 나눕시다. 아키택쳐 관..
Creating and setting upa MEAN project [2]
웹/school(MEAN) 2021. 9. 14. Creating and setting upa MEAN project [2] MVC 환경 만드는것 Bootstrap 레이아웃으로 추가하는것 Git, Heroku 사용하는 방법 MVC로 Node, Express 를 만들어야 합니다. 강한 결합을 느슨하게 만들려고 합니다. 새의 눈으로 MVC를 봐봅시다. MVC아키텍처 루프는 1. 요청을 받습니다. 2. 라우터를 통해 컨트롤러로 보냅니다. 3. 데이터가 필요하면 모델에다가 데이터를 요청합니다. 4. 컨트롤러가 응답합니다. 5. 컨트롤러는 뷰와 데이터를 합쳐서 요청자에게 응답을 보내줍니다. 그림으로 보면 라우터가 요청을 받고 컨트롤러가 받습니다. 모델에게 데이터 요청하고 받습니다. 컨트롤러가 데이터와 뷰를 합쳐서 랜터링 해서 사용자에게 줍니다. 폴더 구조를 보면 왼쪽이 저번에 만들었떤 express 프로젝트 입니다. 이거를 우리가 MV..
Creating and setting upa MEAN project
웹/school(MEAN) 2021. 9. 8. Creating and setting upa MEAN project MEAN 프로젝트 설정하기 이번에는 위에부분만! 이번에 2가지 해봅시다. 개발환경을 구축해봅시다. NPM = 노드 페키지 매니저 노드에서 필요하는 각종 패키지를 관리하는 툴 패키지 매니저는 package.json으로 파일을 관리합니다. 좀더 자세히 살펴봅시다 모듈 하나하나를 개발자가 관리를 하려면 번거롭고 힘드니, package.json이 탄생했습니다. pakage.json 모양 간단한 명령 하나로 파일이 생성됩니다. 필요로하는 모듈들을 설치하면 자동으로 dependencies에 들어갑니다. 모듈들이 버전번호와 함께 들어이는 곳이 'dependencies'에 있습니다. dependencies파일에 있는 것을 모두 한꺼번에 설치한는 방법 npm install 치면 한꺼번에 설치가 됩니다. 루트 밑에 nod..
MEAN stack architecture
웹/school(MEAN) 2021. 9. 7. MEAN stack architecture SPA(Single Page Application) rest api 역할은 sap에서 데이터를 요청을 하면 json 형태로 보내준다. REST Api란? 보통 이런식으로 api를 사용합니다. 왜 굳이 REST라고 붙혔을까? 이유를 알아봅시다. 우리가 만들고자 하는건 web app입니다. web app은 어떻게 동작할까요? hosting을 해야합니다. 즉, 클라우드 플렛폼에 올려놔야 동작을 합니다. 마찬가지로 DB도 클라우드에 올라가있어야 합니다. 우리가 써야한 MongoDB는 로컬 DB를 쉽게 클라우드DB로 올리는 방법이 MongoDB Atlas 라는 것이 있습니다. 결국 REST API가 웹상(HTTP)에서 주고 받을 수 있게 해야 합니다. REST(REpresentational State Transf..
1일차
웹/school(MEAN) 2021. 9. 1. 1일차 Node.js 모바일 웹앱 개발 = Node.js(플렛폼) + Bootstrap(반응형 디자인 프레임워크) + Paas cloud platform(호스팅 지원, 클라우드 플렛폼) 합쳐서 사용자가 아이폰을 사용하던 안드로이드를 사용하던 모든 사용자에게 일관되게 제공할 수 있습니다. Javascript만 사용합니다. 서버를 100% 통제를 할 수 있습니다 MEAN Mongo DB - Express - Node.js위에서 돌아가는 에플리케이션 프레임워크 Angular - 프론트 엔드 담당, 브라우저에서 돌아가는 것을 작성 Node - 플렛폼 JavaScript 풀 스택 (MongoDB, Express, Angular, Node .js 을 공부할 것이다. MEAN stack 아래 4 가지의 주요 기술로 구성된 ..
todo 웹 만들기
웹 2021. 8. 24. todo 웹 만들기 jstl 버전이 낮아서 오류가 남 위에 것으로 depency해서 maven lib에 추가해야 합니다. java.sql.SQLException: No suitable driver found for jdbc:mysql://localhost:3306/connectdb?serverTimezone=Asia/Seoul&useSSL=false 나올 때 8.0.17 버전을 사용했다. db에 연결하는 dao 에서 위와 같이 적었다. jsp에서 서블릿으로 내용을 보내기 위한 방법 3가지 1. forward 방식 2. form 태그를 활용하는 방식 내용없음 3. sendRedirect 방식 https://itisik.tistory.com/184 한가지 더 말하자면 function next(user_id){ var oReq ..
웹21일차
웹 2021. 8. 17. 웹21일차 Maven이란? Maven은 지금까지 애플리케이션을 개발하기 위해 반복적으로 진행해왔던 작업들을 지원하기 위하여 등장한 도구입니다. Maven을 사용하면 빌드(Build), 패키징, 문서화, 테스트와 테스트 리포팅, git, 의존성관리, svn등과 같은 형상관리서버와 연동(SCMs), 배포 등의 작업을 손쉽게 할 수 있습니다. Maven을 이해하려면 CoC(Convention over Configuration)라는 단어를 먼저 이해해야 합니다. CoC란 일종의 관습을 말하는데, 예를 들자면 프로그램의 소스파일은 어떤 위치에 있어야 하고, 소스가 컴파일된 파일들은 어떤 위치에 있어야 하고 등을 미리 정해놨다는 것입니다. 이 말은 관습에 이미 익숙한 사용자는 쉽게 Maven을 사용할 수 있는데, 관습에 익숙..
Visual Studio Code에서 JavaScript 디버그 실행하기
웹 2021. 8. 3. Visual Studio Code에서 JavaScript 디버그 실행하기 처음에 node.js를 깐다. 일단 디버그 실행할 폴더에 node.js package-lock.json을 만들어야 하니 npm init을 실행한다. 1.실행 및 디버그를 클릭합니다. 2. 위쪽 리스트 버튼을 누르고 구성추가를 클릭합니다. 3. Node.js: 프로그램 실행을 고릅니다. launch.json이 이런식으로 저장이 될것입니다. launch.json 파일의 Configurations 대괄호 시작 부분에 커서를 두고 오른쪽 하단 구성 추가 버튼을 클릭합니다. json안의 "name"과 왼쪽 리스트의 이름이 같게 나옵니다. 실행 및 디버그를 사용자 지정하려면 launch.json 파일을 만들어 실행창에서 관리하는 것이 좋습니다. VS code 에러 특성 'program' 이(가) 없습니다 위같은 오..
Visual Studio Code에서 JavaScript을 실행하고싶을 때
웹 2021. 8. 3. Visual Studio Code에서 JavaScript을 실행하고싶을 때 Extentions메뉴를 누릅니다.(한글화 했다면 확장) "상단에 Code Runner"를 검색합니다. 설치 버튼을 누릅니다. 오른쪽 상단의 ▷버튼을 누르면 js 코드가 실행됩니다. 윈도우에서는 Ctrl + Alt +N을 누르면 실행됩니다.

티스토리툴바