목록전체 글 (32)
Develope Me!
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/mZ2Fd/btsBFEHXMCn/9P91V6FCICEzc5Cepk8f71/img.png)
타입스크립트는 자바스크립트와는 달리 엄격하게 타입을 관리하는 언어다. 변수를 선언할 때 명시적으로 타입을 설정할 수 있고 자바스크립트를 포함하는 슈퍼셋(Superset)이기 때문에 자바스크립트가 지원하는 데이터타입을 모두 사용할 수 있다. 뿐만 아니라 클래스, 인터페이스 등을 타입으로 설정하는 것도 가능하다. TypeScript 기본 타입 string(문자열) / number(숫자) / boolean(진위) √ 변수 타입을 선언할 때는 :를 사용하여 타입을 표기해준다. // string let coffee : string = "Americano"; console.log(coffee); // Americano // number let age : number = 20; console.log(age); // ..
TypeScript란? 자바스크립트에 타입을 부여한 언어이다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 컴파일 해줘야 한다. 런타임 시 타입이 결정되어 오류를 발견하는 자바스크립트(동적언어)와는 달리 타입스크립트(정적언어)는 컴파일 타임에 타입이 결정되어 오류를 발견할 수 있다. TypeScript 특징? 1. 컴파일 언어, 정적 타입 언어 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점도 있다. 2. 자바스크립트 슈퍼셋(Superset) 타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dzF3Fr/btsBQjaqdx1/vqJfg7AsWdwUfktd2hkFa1/img.webp)
HTTP API와 REST API는 거의 같은 의미로 사용되지만 HTTP API는 좀 더 넓은 범위에서 사용된다. HTTP API는 HTTP 통신 규약을 사용해서 서로 정해둔 스펙으로 데이터를 주고 받으며 통신하는 반면 REST API는 HTTP API에 여러가지 제약 조건이 추가된다. REST는 다음 4가지 제약조건을 만족해야 한다. - 자원의 식별 - 메시지를 통한 리소스 조작 - 자기서술적 메서지 - 애플리케이션의 상태에 대한 엔진으로서 하이퍼미디어 대표적으로 구현하기 어려운 부분이 마지막에 있는 부분으로서 HTML처럼 하이퍼링크가 추가되어서 다음에 어떤 API를 호출해야 하는지를 해당 링크를 통해서 받을 수 있어야 한다. 이런 부분을 완벽하게 지키면서 개발하는 것을 RESTful API라고 하는데..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bzSlbz/btrvLAjzgQo/hmC1Ys0n06ysUzCj5Jx0Q0/img.jpg)
이번엔 게시글 등록 화면을 구현해보고자 한다. PostsApiController 에서 API를 구현했기 때문에 바로 외부 CDN을 사용하는 방법으로 프론트엔드 라이브러리를 사용하여 화면을 만들것이다. (실제 서비스에서는 외부 서비스에 문제가 생기면 같이 문제가 생겨버릴 수 있기 때문에 이 방법을 잘 사용하지 않는다고 한다.) 부트스트랩, 제이쿼리 라이브러리를 inder.mustache 파일에 추가해야 하는데 바로 추가하는 것이 아닌 레이아웃 방식으로 추가하고자 한다. *레이아웃 방식: 공통 영역을 별도의 파일로 분리해놓고 필요한 곳에 가져다 쓰는 방식 src/main/resources/templates 디렉토리에 layout 디렉토리를 추가하여 레이아웃파일(footer,header)을 생성해줬다. 공통 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/IZM6W/btrvPffqSai/XnnxOI1rnkgcZFUqLDQa11/img.jpg)
코로나 확진되고 격리 해제까지..아주 다사다난했던 일주일이었다..ㅎ 증상이란 증상은 다 겪고 나서 이제 좀 정신을 차렸다. 저번 포스팅에선 템플릿엔진이 무엇인지를 알아보고 템플릿엔진인 머스테치 플러그인을 설치해봤다. 이번엔 머스테치를 적용해보고 테스트를 진행하여 잘 적용되었는지를 확인해보고자 한다. build.gradle implementation('org.springframework.boot:spring-boot-starter-mustache') 머스테치 플러그인을 설치해준 뒤 build.gradle파일에 머스테치 의존성을 추가해준다. index.mustache 스프링 부트로 시작하는 웹 서비스 src/main/resources/templates에 위치 시키면 머스테치 파일을 스프링 부트가 자동으로 로..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dlIz5X/btruUnEYNWF/WXqUsEizUKPS9ekhR8fsa1/img.jpg)
API구현에 이어서 이번엔 서버 템플릿 엔진과 머스테치에 대해서 알아보도록 하겠다. 서버 템플릿 엔진 웹 개발 프로젝트를 경험한 분들이라면 누구나 JSP를 알 것이다. JSP의 정의에 대해 검색해보면 JSP(Java Server Pages)는 "HTML 코드에 JAVA 코드를 넣어서 웹 서버에서 동적으로 웹 페이지를 생성해서 웹 브라우저에게 돌려주는 서버 사이드 스크립트 언어"라고 나와있다. 정의도 정의지만 스프링 프레임워크를 사용해서 프로젝트를 진행했을 때의 JSP가 어떤 역할을 했는 지를 생각해보면 JSP는 MVC 모델 중 V 즉, View를 만드는데 사용했다. 이런 JSP를 템플릿 엔진이라고도 한다고 한다. 그렇다면 템플릿 엔진이 뭘까? 웹 개발에 있어서 템플릿 엔진이란 지정된 템플릿 양식과 데이터..