FrontEnd 17

[TypeScript] UnionType 과 IntersectionType

유니온 타입은 간단히 말하면 하나의 타입 이상을 쓸 수 있게 하는 것이다. function logMessage(value: string | number ){ if(typeof value === 'number'){ //value의 타입을 number로 정의 any라면 어떤 타입이 들어오는지를 볼 수 없지만 유니온은 명시가 되어있기 때문에 바로 사용할 수 있음 value.toLocaleString(); } if(typeof value === 'string'){ value.toString(); } throw new TypeError('value must be string or number'); } ' | ' or 연산자와 비슷한 애로 타입을 골라서 쓸 수 있다는 것이다. any로 타입을 정의 했을 때는 어떤 ..

FrontEnd/TypeScript 2022.06.28

[TypeScript] TypeScript 기본 타입

타입스크립트의 기본타입에는 12가지가 있다. 1. String 2. Number 3. Object, 4. Boolean 5. Array 6. Tuple 7. Enum 8. Any 9. Void 10. Null 11. Undefined 12. Never String 일경우에는 let name: string = 'mandoo'; 변수명 옆에 타입을 써줘야 한다. Number일 경우에는 let age: number = 25; 이런식으로 타입을 지정해주면 된다. 몇 가지만 더 살펴보자면 Array let arr: number=[1,2,3] Tuple let arr:[string, number] = ['mandoo', 25] tuple은 이렇게 각 요소의 타입을 지정할 수 있다. Any let name:any =..

FrontEnd/TypeScript 2022.06.28

[TypeScript] TypeScript 시작하기

TypeScript란?? 타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 자바스크립트의 확장된 언어라고 볼 수 있습니다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 컴파일이 필요하다. TypeScript 를 왜 쓸까? 에러를 사전에 먼저 방지하고, 개발 생산성을 향상시키기 위해서 점점 많이 쓰는 추세이다. 에러의 사전방지 fucntion add(a,b) { return a + b; } 이런 자바스크립트를 타입스크립트는 function add(a: number, b: number){ return a+b; } 이렇게 타입을 지정해 준다는 것이다. 실제로 사용을 해보게 되면 이렇게 개발함에 있어서 가이드를 해주는 느낌이다. (에러를 방지하기 위함) 타입스크립트를 시작할 때 거의 필수적으로..

FrontEnd/TypeScript 2022.06.27

Tyhmleaf 기본문법

학원에서 jsp를 쓰다가 인턴활동을 하면서 tyhmleaf를 알게됐다! 알고나니 너무 유용하다! Tyhmleaf란? Thymeleaf는 View Template Engine입니다. 그리고 컨트롤러에서 전달받은 데이터를 이용해 동적인 페이지를 만들 수 있습니다. 태그의 속성으로 thymeleaf 명령어를 사용할 수 있으며 html 파일 내에서 사용이 가능합니다. SpringBoot를 이용한다면 implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' dependencies에 추가를 해주고, maven을 이용한다면 maven용을 pom.xml에 넣어준다! maven repository에 가면 있으니까 잘 찾아보시면 됩니다~! 2. Tyh..

FrontEnd/Tyhmleaf 2022.04.29

ajax의 data

ajax에서 data부분과 success:function(data)의 data가 같은건 줄 알았다 $.ajax({ url:"/callRegist", method:"post", data:insertSerial, success:function(result){ if(result="0000"){ }else if(result="9999"){ alert("정보를 확인해주세요"); return; } alert("등록되었습니다."); location.href="/companyList" } }); data:~~로 보내는건 controller 부터 디비까지 html의 정보를 쭉 보내는 것이고, success:function(data)는 controller로 부터 정보를 담아오는 것...!! 그래서 success:funct..

FrontEnd/Ajax 2022.04.29

ajax로 <form> 데이터 받아가기!

페이지 연결 시 form에 name값을 submit() 하는 방법을 많이 썼었는데 팀장님께서 그렇게 하면 매번 새로고침이 되는데 그러면 사용자 입장에서 불편하다고 해서 ajax로 다시 바꾸라고 하셨다! 그러면 ajax에서 form의 데이터는 그러면 어떻게 받아갈 수 있을까??? var insertSerial = $("#form1").serialize(); 바로 답은 .serialize()!!!! form의 데이터를 그냥 바로 가져간다!!! 개꿀 함수!! $.ajax({ url:"/callRegist", method:"post", data:insertSerial, success:function(result){ if(result="0000"){ }else if(result="9999"){ alert("정보를..

FrontEnd/Ajax 2022.04.29

목록별로 검색조건 만들어서 ajax로 리스트 띄우기

목록별로 검색조건을 만들어서 검색 되게 하라는 과제! $("#callOrder").click(function(){ //조회버튼 누를 때 실행 if(start == "" || end == '' ){ console.log("공백값입니다." ); alert("날짜를 입력해주세요"); }else{ var searchSerial = $("#form1").serialize(); $.ajax({ url:"/companySearchList", method: "post", data: searchSerial, success : function(data) { $('#dataListDiv').html(data); }, }); } }); 자바스크립트에서 ajax로 /companySearchList를 불러준다 그러면 contro..

FrontEnd/Ajax 2022.04.29