나의라임오렌지원

최근 회의 때 폴링방식을 들었다. 폴링이 뭘까 실시간 웹(리얼타임) 구현의 한계성? 웹튼 실시간을 위해 필수적인 지속되는 연결(persistent connection)을 가질 수 없다. 클라이언트에서 서버에 접속하면 응답하고 연결이 끊어진다.(HTTP의 특징) 때문에 웹에서 운용되는 실시간 서비스들은 대부분 실시간이 아니라고 한다. 실시간이 아니더라고 그렇게 보이는 리얼타임 웹 모델 중 폴링. 위키피디아의 폴링 정의 : 하나의 장치(또는 프로그램)가 다른 장치(또는 프로그램)의 상태를 주기적으로 검사하여 일정한 조건을 만족할 때 송수신 등의 자료처리를 하는 방식. 즉, 현존 하는 대부분의 실시간 처럼 보이는 웹 사이트들은 클라이언트가 서버에게 일정한 주기를 가지고 응답을 주고받는 폴링 방식을 사용한다. ..

이번에 spring boot 미니 프로젝트에서 open api 에 사용하고 있는 RestTemplate에 대해 찾아보고 정리해보려 한다. RestTemplate 스프링에서 제공하는 http 통신에 유용하게 쓸 수 있는 템플릿 Spring 3부터 지원 되고, REST API 호출이후 응답을 받을 때까지 기다리는 동기방식 메서드 HTTP 설명 getForObject GET 주어진 URL 주소로HTTP GET 메서드로 객체로 결과를 반환받는다. getForEntity GET 주어진 URL 주소로 HTTP GET메서드로 결과는 ResponseEntity로 반환 받는다. postForLocation POST POST 요청을 보내고 결과로 헤더에 저장된 URI를 결과로 반환받는다. postForObject POST..

BrowserRouter 는 history 객체를 자동으로 생성하고, 컴포넌트 단위로 history 객체를 컨트롤하기 때문에 커스텀 작업이 어렵다. 컴포넌트 바깥에서 history 객체를 컨트롤하기 위해서는 BrowserRouter 대신 Router를 사용하고, BrowserHistory 를 별도 생성하여 관리해야 한다. history 객체는 history 모듈에서 createBrowserHistory로 받아 올 수 있다. import { createBrowserHistory } from 'history'; const history = createBrowserHistory(); // 히스토리 객체 반환 const store = configureStore(history); 이렇게 작성해주는 방법과 따로 u..

하고있는 미니 프로젝트에서 티스토리 openAPI를 이용해서 글을 조회하는 api가 필요해서 access_token 키를 발급 받았다. 만료기간이 있다고 해서 다시 시도할 경우가 생길 것 같아 작성하는 글. https://tistory.github.io/document-tistory-apis/ 소개 · GitBook No results matching "" tistory.github.io 위의 사이트로 들어가면 tistory key를 발급받을 수 있는 방법이 나와있다. 그 전에 앱 등록을 해야되는데 티스토리 > 관리 > 하단 > 오픈 API 로 들어가서 찾았다. 들어가서 원하는 형식대로 입력하면 되고, 서비스 URL은 내가 원하는 URL 로 작성했고(프로젝트 이름 맞춰서) CallBack도 내가 주소를 ..

dangerouslySetInnerHTML 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법. 일반적으로 코드에서 HTML을 설정하는 것은 "사이트 간 스크립팅 공격" 에 쉽게 노출될 수 있기 때문에 위험. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 "dangerouslySetInnerHTML"을 작성하고 " __html " 키로 객체 전달. function createMarkup() { return {__html: 'First · Second'}; } function MyComponent() { return ; } function MyComponent() { return ; } 참고사이트 https://okayoon.tistor..

Ajax 요청에 대한 기본값을 설정한다. 다만, 사용을 권장하지 않는 다고 한다. $.ajaxSetup() 안에 셋팅을 하고, $.ajax() 실행. 모든 함수를 사용하는 이후의 모든 ajax 호출은 $.ajaxSetup()의 다음 호출까지 개별 호출에 의해 재정의되지 않는 한 그대로 셋팅된 그대로 실행된다. $.ajaxSetup({ url : "ping.php" }); $.ajax({ //url not set here; //use ping.php data : {"name" : "Dan"} }); example $.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); $.ajax({ data: myData }); 참고사이트 https://api.j..

Spring Boot 환경설정 후, localhost에서 열리나 보려고 무작정 돌렸는데 이와 같은 에러가 뜬다면 처음 프로젝트 생성 시 mysql 을 추가했었는데 mysql 설정을 안해줘서 그런다 이런 경우 application.properties 에 DB설정정보를 입력해주면 된다고 하는데, 지금 당장 DB를 쓸 건 아니라서 build.gradle 에서 jpa와 mysql 을 주석처리하고 코끼리를 눌러서 다시 실행 8080포트로 열렸다 확인하면? 돌아가는 것을 확인할 수 있다. 이건 index.html이 없어서 뜨는 에러 페이지 제대로 안 돌아가면 이 페이지마저 안 뜬다. 참고사이트 https://haenny.tistory.com/298 Failed to determine a suitable driver..

event.preventDefault(); 기본으로 정의된 이벤트를 작동하지 못하게 하는 메서드 브라우저 고유의 동작을 중단시켜주는 역할 , , 의 기본 동작 막을 수 있다. onSubmit을 했을 때, 페이지가 리프레쉬 되는 고유의 브라우저 동작을 막아줄 수 있다. a태그는 적용된 href 링크값으로 페이지 이동을 해주는 기본적인 기능을 가지고 있는데 a태그를 클릭 했을 때 preventDefault() 메서드를 실행시켜 주면 페이지 이동을 하는 기본 기능을 막는 것이다. event.preventDefault(); e.preventDefault(); preventDefault() 메서드는 이벤트가 전파되는 것(버블링이나 캡처 단계)를 중지시키지는 않는다. (이벤트의 전파 과정을 이해하고 있지 못한다면 ..

데이터 구조? 데이터를 메모리에 저장할 때 데이터의 순서나 위치 관계 등을 정하는 것 데이터가 온 순서대로 나열하는 방법은 데이터 추가 시 가장 뒤에 작성하면 되기에 간단하지만 검색이 필요할 때 많은 시간이 걸린다. 반대로, 데이터를 가나다순으로 나열하는 방법은 검색은 쉽지만 데이터 추가가 어렵다. 한 번 만든 후에 변경할 가능성이 없다고 하면 -> 후자 (데이터를 가나다순으로 나열하는 방법) 데이터 추가 빈도는 높지만 검색은 거의 하지 않는 경우라면 -> 전자 (데이터가 온 순서대로 나열) 를 선택하는 것이 맞다. 두 가지 방법을 조합한다면 새로운 데이터를 추가할 때는 대응되는 표의 끝에 추가하면 되고, 데이터를 검색할 때는 대응되는 표만 찾으면 된다. 데이터 구조를 고민해서 메모리 이용 효율을 높인다..

React에서 return 문 용법과 겹치는 용법이 바로 "화살표 함수" React에서 함수를 표현할 때 화살표 함수를 쓰는 것은 거의 표준. JSX에서 return문의 용법을 정확히 알아보자 기존의 함수 표현식에서 function 키워드를 삭제하고 인자로 받는 매개변수의 소괄호() 와 코드블록 {} 사이에 화살표 => 만 넣어주면 된다. * 기존 함수 표현식 function abc(a) { return a; } * 화살표 함수 const abc(a) => { return a; } 중괄호 안에 return 문이 있다는 것이 JSX에서 return문의 용법과 헷갈릴 수 있는 부분이다. React 에서 화살표 함수를 기재할 때 () => __ 형식으로 기재하면 return 은 빼도 된다. 그러나 중괄호를 기..