728x90
반응형

개발노트 68

[Vue.JS] Vue.js 시작하기

Vue.JS 공부 시작은 인프런의 제로초님의 "웹 게임을 만들며 배우는 Vue" 를 보며 시작하였다. 학습을 하면서 부가적인 내용이 많아졌기 때문에 따로 정리 해볼려고 한다. 첫 단계로 구구단을 만들어 보는 걸로 시작한다. 일단 전체적인 HTML 코드는 이렇게 된다. {{firstNum}} X {{secondNum}} = ??? 입력 {{result}} 스크립트 내부에 app이라는 변수에 Vue 인스턴스를 생성하였다. 여기서 중요한건 el, data, methods 이다. el 값에 '#root' 를 통하여 해당 아이디 값을 Vue에서 관리한다고 선언하였다. // 이 내부 코드는 이제 Vue에서 관리하게 된다. 설명에의하면 Vue 에서 가장 중요한것은 화면단이 아닌 data의 움직임이라고 한다. data..

개발노트/Vue.js 2021.09.30

[JavaScript] 자바스크립트로 Ajax 구현

jQuery를 통하여 Ajax를 구현하는 방식을 사용했었다. 이번 Nodejs를 공부하면서 jQuery를 사용하지 않고 순수 자바스크립트로만으로 Ajax 기능을 구현해보았다. 예제 //조회 document.querySelector('#searchBtn').addEventListener('click',function(){ var data = document.forms[0].elements[0].value; sendData('http://localhost:3333/search',data); }); function sendData(url,data){ var result = { 'search': data } result = JSON.stringify(result); var xhr = new XMLHttpRequ..

[Node.js] NPM

NPM(Node Package Manager) 자바스크립트 패키지 매니저이고 NodeJS에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할을 하며 설치/관리를 수행할 수 있는 CLI를 제공한다. 패키지 설치 npm i 명령어로 손쉽게 패키지가 설치된다. 설치에는 local install과 global install이 있다. 기본값은 local install이고 local package는 해당 프로젝트 내에서만 사용할 수 있다. npm i -g 명령어로 global install을 할 수 있다. global package는 모든 프로젝트에서 공통으로 사용할 수 있다. global packge install path는 다음과 같다. 의존성 관리 패키지들의 버전이 빈번하게 업데이트되므로 프로젝트가 ..

[Node.js] Tutorial - 서버 만들기

Tutorial - 웹서버 연결 const http = require('http'); const hostname = '127.0.0.1'; const port = 3333; http.createServer((req, res) => { res.writeHead(200,{'Content-Type': 'text/plain'}); res.end('Hello World With egoing'); }).listen(port,hostname,() => { console.log('서버 실행 되었습니다 사용중인 포트 번호 : ' + port); }); const http = require('http'); : 노드 모듈을 가져온다 ( http 모듈 사용 ) const hostname = '127.0.0.1'; : 사용할 ..

[Spring] @PathVariable , @RequestParam 차이

두 어노테이션 다 데이터를 전달하기 위하여 사용된다. http에서는 요청간의 데이터를 보장해주지 않기 때문에 이를 저장할 공간이 필요하다. @PathVariable : URL경로에 변수를 넣는것 입니다. ex)127.0.0.1:8080/abcd/abcd RESTful API에서 사용합니다. @PostMapping("delete/{idx}") @ResponseBody public JsonResultVo postDeleteFactory(@PathVariable("index") int indexNum) { return factoryService.deleteFacotryData(indexNum); } WAS같은 경우 URL에 특수문자나 구분기호 " , , ` , . " 등을 사용하면 인식을 못한다. 따라서 UR..

개발노트/Spring 2021.08.26

[Spring] @Controller, @RestController 차이

Spring에서 컨트롤러를 지정해주기 위한 어노테이션은 @Controller와 @RestController가 있다. 전통적인 Spring MVC의 컨트롤러인 @Controller와 Restuful 웹서비스의 컨트롤러인 @RestController의 주요한 차이점은 HTTP Response Body가 생성되는 방식이다. @Controller(Spring MVC Controller) @Target(value=TYEP) @Retention(value=RUNTIME) @Documented @Component public @interface Controller [ Controller - View ] 전통적인 Spring MVC의 컨트롤러인 @Controller는 주로 View를 반환하기 위해 사용 아래와 같은 과..

개발노트/Spring 2021.08.26

[Git] ignore - springBoot application.properties

파이널 프로젝트에 깃을 통하여 협업을 하는 와중에 문제 발생(우리 팀은 sourcetree를 사용하고있다.) 각자의 application.properties가 달라서 pull 해올때마다 수정해줘야하는 번거러움 발생... git ignore를 통하여 깃에서 application.properites를 추적하지 못하게 한다. 1. cmd -> 프로젝트를 들어가는데 .git 디렉토리가 있는 곳까지 이동 git rm --catched C:\Users\DH\Documents\Final_Project-il-doduk\application.properties // application 파일이 위치한 경로와 해당 파일의 전체 이름 2. 프로젝트 디렉토리 안에 있는 .gitfnore 파일 수정 파일을 열어 가운데 공간처럼..

개발노트/Git 2021.08.09

[Spring Boot] Thymeleaf

SrpingBoot에서는 JSP를 권장하지 않는다. Thymeleaf와 달리 JSP는 스프링부트가 자동 설정을 지원하지 않으며 권장하지도 않는다. 우선 JSP를 사용하면 JAR 패키징을 할 수 없어 WAR 패키징을 해야한다. 물론, WAR패키징으로도 임베디드 톰캣으로 실행할 수 있고 배포도 가능하다. 하지만 Undertow라는 최근에 만들어진 서블릿 엔진이 JSP를 지원하지 않는 등 제약사항이 있다. 또한 JSP에 대한 의존성을 넣으면 의존성 문제가 생기는 경우도 있다. JAR vs WAR JAR와 WAR 모두 JAVA의 jar 툴을 이용해 생성된 파일이며 애플리케이션을 쉽게 배포하고 동작시킬 수 있도록 관련 파일을 패키징해준다. JAR (Java Archive) .jar 자바 프로젝트를 압축한 파일 자..

개발노트/Spring 2021.07.09
728x90
반응형