본문 바로가기
  • Coding & Book

Back-End50

Node.js에서 모듈과 npm 사용해보기 npm이란? npm은 Node Packaged Manager의 약자입니다. Node에서 사용할수 있는 모듈을 패키지 형태로 저장해둔것이라고 생각하시면 됩니다. 패키지 사용하는 방법 패키지를 사용해보기 위해 간단한 패키지를 설치해보겠습니다. 패키지는 아래 npm 사이트에서 검색하셔서 찾아 볼수 있습니다. https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and sa.. 2023. 9. 13.
스프링 부트 DTO DTO란? DTO는 태그에 실어 보낸 데이터를 서버의 컨트롤러가 객체에 담아 받는데 이때의 객체를 말합니다. DTO로 받은 데이터는 데이터베이스에 저장됩니다. form 태그에 대해서는 아래 글을 참고 해주세요. (action 과 method에 관한글이 적혀 있습니다.) https://loui3.tistory.com/8 [HTML5] 간단한 입력 양식을 만들어보자 입력양식 사용자에게 정보를 입력받고 싶을때 사용합니다. 쓰는 방법으로 태그로 영역을 생성하고 안에 태그를 넣으면 됩니다. form 태그 태그에서 method 속성으로 데이터를 전달하고 action 속성 loui3.tistory.com 입력 form 만들기 부트스트랩을 이용해 입력 form을 만들겠습니다. 생성은 new.mustache 파일에 해주.. 2023. 9. 3.
Node에서 사용할 터미널 명령어 정리 Terminal을 사용 하는 이유 많은 개발자들이 터미널을 아주 오랫동안 사용해서 익숙하고 빠르게 작업을 할수 있다고 합니다. 한줄만으로도 많은 양의 명령어를 실행할 수 있습니다. 터미널이 컴퓨터에 대한 모든 액세스 권한과 비슷한 것을 제공해줍니다. Node, Express, 데이터 베이스등에 사용되는 많은 기술과 도구들이 터미널을 기반으로 합니다. 명령어 LS LS는 List를 뜻합니다. 현재 있는 디렉토리의 콘텐츠들을 나열합니다. 예시로 node_example에 있는 first.js를 나열해보겠습니다. 명령어 pwd PrintWorkingDirectory의 약자 입니다. 현재 위치를 파악하기 위해 사용합니다. 명령어 cd ChangeDirectory의 약자입니다. 앞으로 혹은 뒤로 (폴더) 이동할때 .. 2023. 9. 1.
스프링 부트 '모델'로 템플릿 활용하기 모델 추가하기 지금까지는 HTML 파일과 다를게 없었습니다. 이제 모델을 가지고 템플릿을 활용해보겠습니다. 사용방법은 머스테치 문법을 사용해 뷰템플릿 페이지에 변수를 삽입하면 됩니다. 아래는 예시 입니다. {{변수명}} 전에 했던 "반갑습니다 사용자님" 을 변숫값에 따라 결과가 그때 그때 다르게 출력되게 할 수 있습니다. greethings.mustache 파일에서 반갑습니다 사용자님을 -> 반갑습니다, {{username}}님으로 바꾸어 주시고 모델을 사용해주시면 됩니다. 모델 사용하기 모델은 컨트롤러의 메서드에서 매개변수로 받아옵니다. FirstController에 있는 niceToMeetYou() 메서드에 Model 타입의 model 이라는 매개변수를 추가해주시면 됩니다. (매개변수 추가시 Mode.. 2023. 8. 29.
MVC 패턴대로 뷰 템플릿 페이지 만들기 MVC 패턴이란? M - 모델은 데이터를 관리하는 역할 V - 뷰는 웹페이지를 화면에 보여주는 것 C - 컨트롤러는 클라이언트의 요청에 따라 서버에서 처리하는 역할 위 처럼 역할을 나누는 기법을 MVC 패턴이라고 합니다. 뷰 템플릿 페이지 만들기 src > main > resources > templates 디렉터리로 이동후 파일을 만들어주시면 됩니다. 파일을 만들때 greetings.mustache로 만들어주시면 됩니다. 위에서 mustache 확장자는 뷰 템플릿을 만드는 도구, 즉 뷰 템플릿 엔진을 의미합니다. 머스테치 파일을 만들면 머스테치 파일을 지원하는 플러그인을 발견했다고 나오는데 설치해주시면 됩니다. 만든 후에 제일 윗줄에서 doc를 입력후 tab 버튼을 눌러주시면 기본 HTML 코드가 자동.. 2023. 8. 7.
스프링 부트에서 hello.html 파일 만들기 구조 웹 서비스는 클라이언트의 요청과 서버의 응답으로 동작합니다. 따라서 클라이언트가 요청할때 서버가 실행중이어야 합니다. 아래의 스프링부트 프로젝트를 종료할 경우 해당사이트에 접근할수 없다고 나옵니다. hello.html 파일 만들기 프로젝트 화면 프로젝트 탐색기의 src > main > resureces >static 에 있는 디렉터리에서 마우스 오른쪽 버튼을 눌러 hello.html 파일을 만들어주면 됩니다. 그 후 크롬에서 실행 가능합니다. (localhost:8080/hello.html) 알아두기 - localhost 여기서 크롬에 있는 localhost는 내 컴퓨터를 의미하고 마치 내가 사는 집을 우리집이라고 표현하는것과 같습니다 (IP 주소를 변경하면 127.0.0.1 이됩니다.) - 808.. 2023. 8. 7.