화면은 React로 구현하고, 온라인은 Spring Boot로 셋팅하려고한다. 아래 링크들은 환경셋팅하면서 도움받았던 글이다. 누구든지 하는 리액트 2편: 리액트 프로젝트 시작하기 | VELOPERT.LOG 이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 리액트 프로젝트는 보통 우리가 옛날에 jQuery 같은것을 단순히 의 형태로 불러와서 사용했던 velopert.com Spring Boot와 React를 연동하여 개발환경을 만들어보자 이번에는 Spring Boot와 React를 연동하여 개발 환경을 만드는 과정을 이야기해보겠습니다. Spring Boot와 React를 연동하는 과정들 Spring Boot로 백엔드를 만들고, 프론트엔드까지 다 만들었을때 ..

브라우저의 타이머 함수인 SetInterval()을 사용해서 상태를 갱신 할 수있다. 예제를 보자. 아래 코드에서 constructor 함수는 Clock Class의 생성자다. constructor 메소드를 먼저 살펴보면 super()를 통해서 부모 클래스의 생성자를 실행한다. 그 다음 Clock Class에서 구현한 launchClock()을 실행하는데 여기서 setInterval() 메소드를 사용한다. 첫번째 인자가 실행할 구문이고 , 두번째 인자가 interval time이다. 여기서는 1000밀리초로 설정했으므로 1초마다 console.log()와 this.setState()를 실행하게 된다. this.setState를 통해서 1초마다 state의 currentTime을 수정한다. class Cl..

가장 기본적이고 제일 익숙한 모습의 if/else문 render(){ let link if (this.props.user.session){ link = Logout else link = Login return {link} } 즉시실행함수를 사용한 방법. link(this.props.user.session) 과 같은 방식으로 sessionFlag 파라미터에 값을 할당한다. render(){ let link = (sessionFlag) => { if (sessionFlag) link = Logout else link = Login } return {link(this.props.user.session)} } link 변수를 사용하지 않고 즉시실행함수를 사용한 방법. 위 코드의 return을 보면 아래와 같이 ..

1. 변수 React에서 아래와 같이 ` (백틱) 과 ${변수명}을 통해서 변수 사용이 가능하다. class DateTimeNow extends React.Component { render() { return React.createElement( 'span', null, `Current date and time is ${dateTimeNow}` } } ReactDOM.render( DateTimeNow, document.getElementById('content') ) JSX방식을 사용하면 중괄호 표기법을 사용하여 변수사용을 좀더 간결하게 할 수있다. let helloWorldReactElement = Hello world! class HelloWorld extends React.Component { r..

2609번: 최대공약수와 최소공배수 첫째 줄에는 입력으로 주어진 두 수의 최대공약수를, 둘째 줄에는 입력으로 주어진 두 수의 최소 공배수를 출력한다. www.acmicpc.net 최대공약수를 구하는 여러방법이 있는데 가장 유명한것은 유클리드 호제법. 단번에 이해되는 예시도 있으니 아래의 백과사전을 참고하자. 유클리드 호제법 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 유클리드 호제법(-互除法, Euclidean algorithm) 또는 유클리드 알고리즘은 2개의 자연수 또는 정식(整式)의 최대공약수를 구하는 알고리즘의 하나이다. 호제법이란 � ko.wikipedia.org 최대공약수를 먼저 구하면 최소공배수는 쉽게 구할 수 있다. 이유는 최대공약수와 최소공배수는 아래와 같은 관계..

2607번: 비슷한 단어 첫째 줄에는 단어의 개수가 주어지고 둘째 줄부터는 한 줄에 하나씩 단어가 주어진다. 모든 단어는 영문 알파벳 대문자로 이루어져 있다. 단어의 개수는 100개 이하이며, 각 단어의 길이는 10 이�� www.acmicpc.net 문제 이해하는데 한참 걸렸다. 책좀 더 읽어야겠다. 아래 코드처럼 모든경우의 수를 다 확인하는 방법으로 풀었다. 입력은 대문자만 된다고 했으니 대문자 32개를 입력받을수 있도록 했다. ( length가 32인 list에 0으로 초기화 ) 대문자는 아스키코드 65부터 시작하니까 입력받은 문자를 65로 나눈 나머지가 0이면 A, 나머지가 1이면 B 이런식으로 처리했다. 그후 구성이 같은지, 문자를 하나 뺐을때 같은지, 문자를 하나 더했을때 같은지, 기존 문자 ..