| TypeScript TypeScript실행순서 TypeScript -> JS -> nodejs -> OS ts->js 로 변환하는 과정을 컴파일 한다고 표현 준비물 node,npm typescript 설치하는법 npm install -g typescript 안되면 앞에 sudo 붙이면됨 설치 완료 후 타입스크립트 버전체크 tsc -v npm 초기화 npm init 엔터엔터엔터로 다 생략 package.json파일이 생성된다 타입스크립트 초기화 tsc --init tsconfig.json파일이 생성된다 잠시 2번라인을 눌러서 접기를 하자 "include" : ["**/*.ts"] => 어떤 타입스크립트 파일을 자바스크립트로 변환 할것이냐? 모든폴더의 모든 타입스크립트 파일을 변환하겠다 "exclude"..
| 페이지 부분변경 아래와같이 새로고침도 없고 url 변경없이 페이지 부분 변경하기 위해서는 ajax를 사용하면 된다 index.html index.js openPlanner(sheetId){ $.ajax({ type : 'GET', // 타입 (get, post, put 등등) url : '/main/'+sheetId, // 요청할 서버url async : false, dataType : "HTML", success : function(result) { // 결과 성공 콜백함수 $('.content_box').children().remove(); $('.content_box').html(result); }} ) } pageController @Controller @RequestMapping("") @R..
| Thymleaf Fragement란? 웹페이지의 경우 공통으로 반복되는 영역이 많다. 페이지의 정보를 나타내는 헤더부분, 메뉴 탭을 나타는 네비게이션 바, 저작권 정보 등을 표시하는 푸터 등 여러 페이지에 거쳐 반복되는 영역이 존재한다 이런 공통의 영역들을 매 페이지의 HTML파일에 반복한다면 각 파일이 지저분해지는 것은 물론이고 변경의 지점 또한 분산되게된다. 공통의 영역을 분리함으로써 변경지점을 최소화할 수 있어서 변경에 용이하다 사용법 템플릿 조각을 이용하기 위해 footer.html 파일을 우선 만들어 준다. 푸터 자리 입니다. 파라미터 자리 입니다. 해당 태그들은 다른 HTML 파일에서 th:insert, th:replace 를 통해 사용할 수 있다. th:insert="~{ [ 템플릿 조각..
1. 로그인 아이디 저장하기 2. 아이디 저장 $(document).ready(function(){ var key = getCookie("key"); $("#userId").val(key); if($("#userId").val() != ""){ $("#idSaveCheck").attr("checked", true); } $("#idSaveCheck").change(function(){ if($("#idSaveCheck").is(":checked")){ setCookie("key", $("#userId").val(), 7); //7일간 보관 }else{ deleteCookie("key"); } }); $("#userId").keyup(function(){ if($("#idSaveCheck").is(":ch..
| 외부 경로 Resource 접근하기 Spring 사용시 외부(프로젝트폴더 밖)에 존재하는 Resource를 사용하고 싶을때가 있다. 사용하는 방법을 알아보겠다 fileConfig @Configuration public class fileConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/profile/**") .addResourceLocations("file:///home/ubuntu/img/"); } } .addResourceHandler 를 통해 외부에서 Resource를 요청하는 경로를 .a..
| 카카오톡 간편로그인 과정 Login.html prompt=login 파라미터는 자동로그인X, 항상 로그인해야함 클릭시 카카오톡 로그인페이지로 이동 카카오로그인페이지 카카오톡 로그인을 통해 얻고자 하는것 사용자의 프로필사진, 닉네님, 이메일 정보 프로세스 1. 사용자가 아이디 비번치고 로그인하면 그 정보가 카카오서버로 바로 전송(개발자는 사용자의 아이디 비밀번호를 알 수 없음) 2. 사용자가 로그인을 성공하면 카카오톡 서버에서 인가코드를 Redirect URI에 전달 3. 개발자는 인가코드를 가지고 카카오서버에 전송하면 사용자의 정보를 넘겨줌 4.카카오 서버가 전달해준 데이터, 여기에서는 id값을 받아서 개발자의 DB에 조회 5.db에 id 값이 존재하면 로그인하듯 진행 6.db에 id 값이 존재하지않..
