728x90

Module Warning (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):                                                                               friendly-errors 15:44:51

과 같은 워닝뜰 때

 

 

1. npm install @nuxt/postcss8. ( or yarn add )

2. nuxt.config.js → buildModules → '@nuxt/postcss8' 추가

728x90
<input v-model="inputText" @keyup.enter="input_key" type="text" placeholder="입력후 엔터를 눌러주세요">

위와 같은 input이 있을 경우 안드로이드 앱의 웹뷰에서 엔터를 감지하지 못하는 현상이 있다.

 

참고 : https://blog.naver.com/crucifyer/222749456743

 

Android Web Form - Enter Event 동작의 이상함.

평소 안드로이드를 안써서 몰랐는데, input type=text 에서 엔터를 눌렀을 경우 모든경우에 엔터로 ...

blog.naver.com

 

iOS에는 해당 문제가 없다.

textarea로 바꾸니 해결. 스타일을 input 박스와 동일하게 해주기 위해 인라인 태그도 추가해주었다.

<textarea rows="1" v-model="inputText" @keyup.enter="input_key" 
 style="min-height: 0px; resize: none; "  placeholder="입력후 엔터를 눌러주세요">
</textarea>

 

아주 오래된 글이지만 아래와 같은 포럼글도 있으니 참고

https://issuetracker.google.com/issues/36993179

 

Google Issue Tracker

 

issuetracker.google.com

 

728x90

자식창은 닫고 부모창의 경로를 이동하는 방법이다. (vue에서도 적용가능)

 

// 자식 (팝업창)
opener.location.replace("https://123.co.kr/test/");
window.close();

 

728x90

1. node에서 jar파일을 불러올 수 있는 java패키지 설치

https://www.npmjs.com/package/java

 

java

Bridge API to connect with existing Java APIs.. Latest version: 0.12.2, last published: 10 months ago. Start using java in your project by running `npm i java`. There are 155 other projects in the npm registry using java.

www.npmjs.com

npm i java

2. 프로젝트에 jar파일 추가

 

3. 코드 연동

연동 시에 결과를 리턴받으려면 정의한 함수 뒤에 Sync를 붙여주면된다.

예) getMethod   -> getMethodSync

var java = require("java")
java.classpath.push("./test_JDK18.jar")

var something = java.import('com.test.comm.some.Manager'); 
var instance = new something(); // 인스턴스 생성

console.log('instance', instance);
console.log('===================test', instance.getMethodSync("test", ""))

 

728x90

WebRTC 특징

웹에서 사용할 수 있는 P2P 기술

  • 기본적으로 별도의 서버를 사용하지 않으므로 두 피어가 연결 방법을 공유하기 위한 가상의 신호 서비스인 Signalling 사용
  • 클라이언트가 동일 로컬 네트워크가 아닌 이상 다이렉트 소켓을 사용할 수 없는 경우(P2P연결불가)가 많으므로, 릴레이 서버인 TURN 서버를 사용
  • UDP 기반

  • 1:1 , 1:N, N:N 응용서비스 개발 모두 가능

1:1 - 카카오 보이스톡

1:N - 방송서비스 (대량 접속 환경에선 P2P 성격은 버려짐)

N:N - 화상회의형서비스

WebRTC 어려움

  • 관련 기술 문서 부족
  • UDP기반의 RTP프로토콜로 품질 불확실성
  • 고난이도의 미디어 처리

강의 : https://nomadcoders.co/noom

줌 클론코딩

WebSockets, SocketIO, WebRTC

요구사항 :

ExpressJS, app.get(), Pug, JS

Node v14.17.3 이상

pug

: html을 조금 더 세련되게 쓸 수 있는 템플릿 언어. express 뷰 엔진

node.js

__filename 은 현재 실행 중인 파일 경로

__dirname 은 현재 실행 중인 폴더 경로

위는 CommonJS 모듈내에서만 동작하며 ES모듈에서는 동작안하므로 아래 코드 추가 필요

import path from 'path';
const __dirname = path.resolve();

“Uncaught SyntaxError: Cannot use import statement outside a module” 에러시 package.json에 아래 코드 추가

 "type": "module",

express내에서 템플릿 엔진을 사용하려면
app.set으로 설정

https://expressjs.com/ko/guide/using-template-engines.html

Express와 함께 템플리트 엔진 사용

Express와 함께 템플리트 엔진을 사용 Express가 템플리트를 렌더링하려면 다음과 같은 애플리케이션 설정이 필요합니다. views, 템플리트가 있는 디렉토리. 예: app.set('views', './views') view engine, 사용할

expressjs.com

nodemon 특정 경로 파일 수정할때는 재시작되지 않도록 설정하려면 nodemon.js에 ignore 추가

{
    "ignore": ["src/public/*"],
    "exec": "babel-node src/server.js"
}

바벨은 그 자체로 아무것도 하지 않으므로 플러그인을 사용해야한다.

babel foundation에서는 plugin들을 포함한 번들파일을 포함한 preset을 제공하며 (plugin 자동 설치) "@babel/preset-env"는 공식적인 기본 프리셋이다.

https://developer.mozilla.org/ko/docs/Web/API/WebSocket

WebSocket - Web API | MDN

WebSocket 객체는 서버와의 WebSocket 연결을 생성하고 관리할 수 있는 API 들을 제공합니다. 이는 데이터를 전송하거나 주고 받는 등의 API 들을 포함합니다.

developer.mozilla.org

webSocket에는 아래와 같이 자유롭게 어트리뷰트를 추가하고 설정할 수 있다.

 socket["nickname"] = parsedMsg.payload;

SocketIO

소켓IO는 웹소켓의 일부분이 아니다. 대부분의 브라우저가 웹소켓을 지원하지만 미지원인 경우 롱폴링(long polling) 으로 연결이 이뤄진다.

*클라이언트가 서버에 있는 정보를 요청하면 지정한 시간동안 연결을 열어둔다. 서버에 정보가 없으면 클라이언트가 요청한 정보가 생길 때 까지 또는 지정한 시간이 끝날 때까지 해당 요청을 열어둔다. 지정 시간이 끝나면 클라이언트는 서버에 있는 정보를 다시 요청한다. 코멧은 서버가 클라이언트로 뭔가를 송신할 수 있을때까지 HTTP 응답 완료를 지연시킨다. 이 기법을 'GET' 또는 '미결 POST(pending -POST) 라고 부른다.

'Web Develop > Web Programming' 카테고리의 다른 글

Spring Boot시작하기  (0) 2021.08.10
html 기초  (0) 2021.01.07
반응형 웹 만들기  (0) 2017.03.23
HTML 5 미지원 브라우저 고려하기  (0) 2017.03.21
윈도우 웹서버 설치 및 HTML 실습기초  (0) 2017.03.09
728x90

- URL 해시

#id를 사용해 지정한 anchor(책갈피)로 이동 (한 페이지 내에서 특정 요소 위치로 이동)

 

Vue Router에서는 기본적으로 해시모드를 사용하나 아래와 같이 히스토리 모드를 사용할 수도 있다.

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

hash mode 에서는 URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않으나 history모드에서도 history.pushState API를 활용하여 페이지를 다시 로드하지 않고도 URL 탐색을 할 수 있다.

 

url에 #이 포함되지 않길 원하면 히스토리 모드를 사용한다.

 

  • 해시 모드가 아닌 히스토리 모드에서 서버는 이 페이지가 새로운 페이지라는 것을 알지 못한다. 예를 들어, 로그인 링크를 클릭했을 때 url이 이동을 하더라도 서버 입장에서는 모른다.
  • 따라서 히스토리 모드에서는 우리의 앱이 적절한 서버 설정이 없는 단일 페이지 클라이언트 앱이기 때문에 사용자가 직접 http://oursite.com/login 에 접속하면 404 오류가 발생한다.
 

HTML5 히스토리 모드 | Vue Router

HTML5 히스토리 모드 vue-router의 기본 모드는 hash mode 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않습니다. 해시를 제거하기 위해 라우터의

router.vuejs.org

 

728x90

!important 무한대 점수(최우선이나 되도록 사용하지 않는 것 추천)

인라인 요소 : 1000점 (마찬가지로 되도록 사용하지 않는 것 추천)

 

전체선택자 ( * ) : 0점

태그 : 1점

클래스 : 10점

ID : 100점

최고점이 동일 점수면 가장 아래 (해석이 맨 나중) 코드가 우선적용

 

예시)

index.html

(...)
<body>    
    <div class="hello">        
        Hello World!
    </div>    
</body>
</html>

main.css

.div {
  color: antiquewhite;
}

div.hello {
  color: gold;
}

.hello {
  color: blue;
}

 

.div : 10점

div.hello : 1 + 10 점

 

728x90

 

https://start.spring.io/

위 사이트에서 Generate

Group :  프로젝트를 식별 고유 아이디.
 ex) com.cafe24.test

Artifact : 버전 정보를 생한 이름(jar, war) , 프로젝트 ID

 ex) Test Project

 

Application.java

@SpringBootApplication:  @EnableAutoConfiguration, @ComponentScan, @Configuration을 하나로 묶은 어노테이션

 

실행 시 서버가 가능되는 걸 볼 수 있다.

 

- 시작페이지를 만들기 위해

resources > static 하위에 index.html 파일을 생성

시험적으로 body의 내용을 바꾸고 localhost:8080페이지를 열어보면 index.html의 내용을 확인가능

 

 

- 컨트롤러 생성

Inaugurate/src/main/java 경로에 TestController.java파일 생성

package com.cafe24.itwillbs2.Inaugurate.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController {

	@RequestMapping(value = "/home")
	public String home() {
		return "index.html";
	}
}

http://localhost:8080/home 경로 접속 시 index.html 의 내용이 출력된다

 

 

@ResponseBody 로 data 전달

Controller.java

(...)
@ResponseBody
	@RequestMapping("respTest")
	public String respTest() {
		String val = "Response Test!";
		return val;
	}

 

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
	$.ajax({
		type: "GET", url: "/respTest", 
		success: (data) => { console.log(data); 
		$('#contents').html(data); }
	});
</script>


</head>
<div id="contents"></div>
<body>Hello World!
</body>
</html>

 

- Rest컨트롤러 이용하기

 -  RestController는 Spring 4.0이상에서 지원하며 @RestController 는  @ResponseBody 어노테이션은 기본적으로 활성화되어있어 추가 불필요

 

class 이름을 RestController로 하면 어노테이션과 이름이 충돌되기 때문에 TestRestController로 클래스 생성

 

TestRestController.java

(...)
@RestController
public class TestRestController {
	
	@RequestMapping(method = RequestMethod.GET, value = "/restTest")
	public String getValueTest() {
		String testVal = "restController Test";
		return testVal;
	}

}

index.html에서  ajax요청 url만 바꿔서 테스트 해보면 TestRestController클래스의 메소드의 테스트값이 출력되는 걸 확인가능하다.

 

 

* 스프링 부트 프로젝트 폴더구조

src
└─ main
   └─ resource
      └─ templates (View: Thymeleaf, Groovy, Velocity 등)
      └─ static    (정적 컨텐츠 : html, css, js, image 등)

 

- view로 JSP 사용하기

src/main/webapp/WEB-INF/views 에 index.jsp파일 생성  (폴더 없으면 생성)

 

pom.xml에 의존성 추가

<dependencies>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
		</dependency>
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
		</dependency>
</dependencies>

application.properties에 환경설정 추가

spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp

Controller.Java 소스 추가작성

@RequestMapping("test")
	public ModelAndView test() throws Exception {
		ModelAndView mav = new ModelAndView("index");
		mav.addObject("name", "gildong");
		List<String> testList = new ArrayList<String>();
		testList.add("a");
		testList.add("b");
		testList.add("c");
		mav.addObject("list", testList);
		return mav;

	}

서버실행 후 확인해보면 index.jsp의 화면을 보여줌을 알 수 있다.

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>Hello Spring Boot!</h1>
	<div>JSP List Test</div>
	<c:forEach var="item" items="${list}" varStatus="idx"> ${idx.index}, ${item} <br />
	</c:forEach>

</body>
</html>

 

'Web Develop > Web Programming' 카테고리의 다른 글

WebRTC 및 Node 등 스터디  (0) 2022.02.25
html 기초  (0) 2021.01.07
반응형 웹 만들기  (0) 2017.03.23
HTML 5 미지원 브라우저 고려하기  (0) 2017.03.21
윈도우 웹서버 설치 및 HTML 실습기초  (0) 2017.03.09
728x90

 

stackoverflow.com/questions/15266533/jquery-attrchecked-checked-works-only-once

 

jquery attr('checked','checked') works only once

I have a problem finding reason for the following jquery/checkbox behaviour. $( this.obj + ' table.sgrid-content > thead > tr > th > input.select_all' ).on( 'click' , {grid:this} , fun...

stackoverflow.com

답은 간단하게 .attr 대신  .prop 를 사용하는 것이다.

 

//$('input:checkbox[id="is_include_fees"]').attr("checked", false);
$('input:checkbox[id="is_include_fees"]').prop('checked', false);

 

 

You can change the attribute, and that will also change the property, if the element is untouched. Once the element leaves this initial state, changing the attribute no longer affects the property. The exact behavior probably varies between browsers.

 

 

Instead of .attr('checked', 'cheked') use .prop('checked', true)

728x90

0. 유저생성 및 테이블 정의

0-1. root가 아닌 개별 유저 생성

mysql> grant select,insert,update,delete,create,alter,drop
    -> on jspdb7.* to 'jspid'@'localhost'
    -> identified by 'jsppass';
Query OK, 0 rows affected, 1 warning (0.19 sec)

유저가 없으면 경고가 뜨지만 자동생성되니 무시하고 진행

 

0-2. 테이블 생성

mysql> create table member(
    -> id varchar(20) primary key,
    -> pass varchar(20),
    -> name varchar(20),
    -> date datetime
    -> );

 

1. 테이블 데이터를 가져오는 jsp소스

<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>jsp4/list.jsp</h1>
	<%
	Class.forName("com.mysql.jdbc.Driver");
	String dbUrl = "jdbc:mysql://localhost:3306/jspdb7";
	String dbUser = "jspid";
	String dbPass = "jsppass";
	Connection con = DriverManager.getConnection
			(dbUrl, dbUser, dbPass);
	String sql = "select * from member;";
	PreparedStatement pstmt = con.prepareStatement(sql);
	ResultSet rs = pstmt.executeQuery(sql);
	SimpleDateFormat sdf=new SimpleDateFormat
			("yyyy-MM-dd HH:mm:ss");
	%>
	<table border="1">
		<tr>
			<th>아이디</th>
			<th>비밀번호</th>
			<th>이름</th>
			<th>가입날짜</th>
		</tr>
		<%
		while (rs.next()) {
		%>
		<tr>
			<td><%=rs.getString("id")%></td>
			<td><%=rs.getString("pass")%></td>
			<td><%=rs.getString("name")%></td>
			<td><%=sdf.format(rs.getTimestamp("date"))%></td>
		</tr>
		<%
		}
		%>
	</table>
</body>
</html>

ResultSet은 next메소드를 통해 다음 레코드 값을 가져올 수 있으며 레코드가 있을 시 1을 반환한다.

실행해보면 가입날짜 끝에 .0 이 붙어 나오는데 26라인의 SimpleDateFormat 내장객체를 이용해 43라인에서 포맷을 변환해줘야한다.

+ Recent posts