kiki-dev

Typescript for Beginners

Typescript Strongly typed programming 컴파일 시 javascript로 변환됨 에러가 발생 → 컴파일 X Javascript 매우 유연해서 에러를 잘 보여주지 않음 🚫 숫자 배열 + false → 배열이 사라지고 string으로 바뀜 🚫 함수의 인자에 데이터타입이 잘못 들어가도 실행됨 🚫 const a = { a: "A" }; a.hello(); 실행 시 에러 발생 (런타임에러, 실행할때 발생하는 에러) → 실행 전에 에러 감지 불가 타입스크립트를 사용하는이유 타입 안정성은 타입스크립트가 제공하는 가장 큰 장점이다. 타입 안정성 덕분에 버그가 엄청 줄어든다. Type 시스템 명시적 정의(변수 선언 시 타입 정의) let a: boolean = "x" → ❌ boolean 타입..

fullpage.js v2.9.7

라이브러리 깃허브 사이트 v2까지는 무료이용이 가능하다구함 https://github.com/alvarotrigo/fullPage.js/tree/2.9.7 CDN https://cdnjs.com/libraries/fullPage.js/2.9.7 예제파일 https://alvarotrigo.com/fullPage/examples/scrollBar.html 안에 예제보면서 필요한 부분들 가지구와서 쓰면 댈듯

Jquery load()

.load() 서버에서 데이터를 로드하고 반환된 HTML을 일치하는 요소에 배치한다. .load(url [, data ][, complete ]) 공통 부분 컴포넌트화 많은 페이지에서 사용되는 헤더부분이 수정되면 그 페이지들마다 하나씩 수정해줘야하는 번거로움이 있는데 공통된부분을 따로 빼서 불러오는 방식으로 분리해서 관리했다. load불러온 데이터가 headers,footers안으로 들어가게된다. 스크립트 적용 load메소드로 불러온 데이터는 동적으로 추가된거라 그런지 스크립트가 안먹혔다. 클릭이벤트와 같은것은 동적 이벤트 바인딩을 통해서 사용하면 됐는데, 스와이퍼js같이 로드되고나서 바로 적용돼야하는 스크립트가 안먹혔었는데 load 메소드뒤 콜백함수안에 넣어서 사용하니 해결됐다. $( "#result"..

React.js란?

리액트(React)란? 자바스크립트의 UI 라이브러리 지금은 Meta가 된 Facebook이 개발한 오픈소스 JSX 자바스크립트를 확장한 문법 React요소를 HTML문법처럼 만들수 있게해줌 https://unpkg.com/react@17.0.2/umd/react.production.min.js https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js 자바스크립트 예약어랑 겹치는건 사용못하니 주의 class = className, for = htmlFor Babel JSX코드를 브라우저가 이해할수 있는 형태로 바꿔줌 https://unpkg.com/@babel/standalone/babel.min.js 컴포넌트의 첫 글자는 반드시 대문자 Re..

인텔리제이 한글깨짐

단축키 Ctrl + Alt + S 머스테치가 스프링부트 2.7.0이상에서 한글깨짐 이슈가 있다고한다. bulid gradle에서 2.6.7로 버전을 다운그레이드 하니 한글깨짐이슈 해결완료

HTTP 요청 메소드(GET, POST)

HTTP 요청 메소드 URL을 이용하면 서버에 특정 데이터를 요청할 수 있다. 여기서 요청하는 데이터에 특정 동작을 수행하고 싶으면 HTTP 요청 메소드(Http Request Methods)를 이용한다. 일반적으로 HTTP 요청 메서드는 HTTP Verbs라고도 불리우며 아래와 같이 주요 메서드를 갖고 있다. GET : 존재하는 자원에 대한 요청 POST : 새로운 자원을 생성 PUT : 존재하는 자원에 대한 변경 DELETE : 존재하는 자원에 대한 삭제 GET방식 클라이언트에서 서버로 어떠한 리소스 정보를 요청하기 위해(데이터를 읽거나 검색할때) 사용되는 메서드 GET은 요청을 전송할 때 필요한 데이터를 쿼리스트링을 통해 전송한다. URL의 끝에 ? 와 함께 이름과 값으로 상을 이루는 요청 파라미터..

절대경로와 상대경로

절대경로 최상위 디렉토리부터 해당 파일까지 경유한 경로를 전부 기입하는 방식 / : 최상위 디렉토리(루트 디렉토리) 상대경로 현재 파일이 존재하는 디렉토리를 기준으로 해당 파일까지의 위치를 작성한 경로 ./ : 현재 디렉토리 ../ : 현재 디렉토리의 상위 디렉토리 절대로경로와 상대경로의 차이점 절대경로 상대경로 컴파일 속도 느리다 빠르다 해당 소스의 위치 변환 시 경로를 다시 지정 기준이 된 폴더의 구성이 달라지지 않는 한 경로지정을 할 필요가 없다. 분실 가능성 낮다 높다 사용할 때 타 개발자의 소스 링크시 개발팀 내에서 소스 링크 시 출처 https://mollangpiu.tistory.com/222 https://mommoo.tistory.com/82 https://velog.io/@ryurbsg..

머스테치(mustache)란?

템플릿 엔진 지정된 템플릿 양식과 데이터가 합쳐져 HTML문서를 출력하는 소프트웨어를 이야기한다. 템플릿 엔진에는 서버 템플릿 엔진과 클라이언트 템플릿 엔진이 있다. 서버 템플릿 엔진 서버에서 Java 코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환하여 브라우저로 전달한다. JPS, Velocity : 스프링 부트에서는 권장하지 않는 템플릿 엔진 Freemarker : 템플릿 엔진으로는 너무 과하게 많은 기능을 지원한다. (숙련도가 낮을수록 비즈니스 로직이 추가될 가능성이 높다) Thymleaf : 스프링 진영에서 적극적으로 지원하는 템플릿 엔진이지만 문법이 어렵다. 클라이언트 템플릿 엔진 서버에서는 브라우저로 데이터만 직렬화(JSON)해서 넘겨주고, 브라우저에서 HTML을 생성한다. 따라서 소스 ..

스프링 @Controller, @GetMapping

@Controller Spring에서 컨트롤러를 지정해주기 위한 어노테이션 @Controller의 역할은 Model 객체를 만들어 데이터를 담고 View를 반환하는 것 아래와 같은 과정을 통해 Spring MVC Container는 Client의 요청으로부터 View를 반환한다. Client는 URL형식으로 웹 서비스에 요청을 보낸다. DispatcherServlet이 요청을 위임할 HandlerMapping을 찾는다. HandlerMapping을 통해 요청을 Controller로 위임한다. Controller는 요청을 처리한 후에 ViewName을 반환한다. DispatcherServlet은 ViewResolver를 통해 ViewName에 해당하는 View를 찾아 사용자에게 반환한다. @GetMappi..

MVC패턴이란?

MVC패턴이란? 모델-뷰-컨트롤러(model–view–controller, MVC)는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다. 어플리케이션을 세 개의 영역으로 분할하고 각 구성 요소에게 고유한 역할을 부여하는 개발 방식 MVC패턴을 도입하면 도메인(비즈니스 로직)영역과 UI영역이 분리되므로 서로 영향을 주지 않고 유지보수가 가능하다. 디자인패턴이란? 프로그램을 개발하는 과정에서 빈번하게 발생하는 디자인 문제를 정리해 재사용하기 좋은 형태로 특정 규약을 만들어서 정리한것. 즉, 효율적인 코드를 만들기 위한 방법론 📲 모델(Model) DATA, 정보들의 가공을 책임지는 컴포넌트 모델은 어플리케이션의 정보, 데이터를 나타낸다. 데이타베이스, 처음의 정의하는 상수, 초기화 값, 변수 등을 뜻한..

클라이언트와 서버, localhost, IP와 PORT, UTF-8

클라이언트 서버와 이어진 모든 기기(컴퓨어의 경우 wifi, 모바일은 모바일 네트워크)와 단말기에서 웹에 접근하는 sw이며, 주로 서버에 요청을 보내고 응답을 받는 역할을 한다. 우리가 일반적으로 사용하는 PC는 클라이언트의 역할을 하는데, 이는 서버 컴퓨터로부터 정보를 받아 웹 브라우저를 통해 정보를 볼 수 있다. 서버 클라이언트에게 네트워크를 통해 서비스를 제공하는 시스템을 말한다. 웹서버 웹 서버에 각종 정보를 담은 웹 페이지를 저장한 후 이러한 서버의 웹 페이지를 요청하는 클라이언트에게 제공한다. 구글, 네이버 등 수많은 회사들이 웹 서버를 만들어 웹서비스를 제공하고 있다. 웹브라우저 웹서비스 사용자는 웹 브라우저라는 전용 클라이언트 어플리케이션으로 웹 서버가 제공하는 서비스를 이용한다. 웹 브라..

스프링과 스프링부트

스프링Spring이란? 자바 애플리케이션 개발을 위한 포괄적인 인프라를 지원해주는 프레임워크이다. 종속성 주입 등 다양한 기능을 제공하고 있다. 대한민국 공공기관의 웹 서비스 개발 시 사용을 권장하고 있는 전자정부 표준 프레임워크의 기반 기술로서 쓰이고 있다. Spring의 특징 IoC (Invertion of Control: 제어 역행) DI(Dependency Injection: 의존성 주입) AOP(Aspect-Oriented Programming: 관점 지향 프로그래밍) 스프링부트Spring Boot 스프링은 기능이 많은 만큼 환경설정이 복잡한 편인데 이에 어려움을 느끼는 사용자들을 위해 나온것이 바로 스프링부트이다. 스프링부트는 스프링을 사용하기 위한 설정의 많은 부분을 자동화하여 사용자가 보다..