본문 바로가기

분류 전체보기225

React : 구구단 예시 (State, setState) 구구단 게임 만들기 State 사용하는곳 찾기 이 구구단 게임에서 입력을 누를때 바뀌는곳은 첫줄의 숫자들, 입력창, 결과창(땡,정답) 총 3곳이 바뀌게 된다. 따라서 State는 3개이다. setState를 통해 상태가 변경시킬 수 있다. onChange를 통해서 입력을 받은 값(상태)을 value에 저장시킬 수 있고 onSubmit을 통해서 정답을 맞출때, 맞추지 못할때에 따라서 state를 변화시켜서 화면에 출력시킨다. *참고 render()에서 는 의미없이 한번을 묶어주는 역할을 하는데 이를 로 빈 칸으로 만들어도 된다. setState에서 현재 값 구분해주기. this.setState((Current) => { return { result: "정답!! " + Current.value, first:.. 2020. 7. 27.
React : JSX란 무엇인가? JSX (Javascript+ Xml) Javascript의 확장으로 element로 하는 것은 보기가 너무 불편하다. 따라서 babel을 사용해서 보기 쉽게 바꿔준다. *babel: 최신 문법을 사용하게 해주는 것으로 이걸 사용하여 content안에서 {} 안에 넣으면 javascript로 사용이 가능하다. => {this.state.liked...} JSX(JS+XML) 처럼 닫는 /가 필요하다. (문법이 엄격하다) button을 여러개 생성해 주고 싶을때는 어떻게 하는가?? 로 묶어주면 component로 여러개를 쉽게 사용할 수 있다. *주로 안에서 대문자로 시작되는 것은 컴포넌트이고 소문자로 시작되는것은 html 태그이다. 2020. 7. 27.
React 기본 : 사용하는 이유, 컴포넌트, HTML 속성과 State 추가 React React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리(프레임워크)이다. 페이스북에서 주로 관리한다. React를 사용하는 이유에는 여러가지 이유가 있다. 크게 3가지로 나누자면, 싱글페이지 application으로 화면 깜박임 없이 자연스럽게 넘어가서 app과 비슷한 느낌을 낸다. (사용자 interface, 사용자 경험) 데이터 처리를 쉽게 도와준다. 재사용이 쉽게 component화 한다. (유지보수 좋음) head부분에 react와 dom을 추가해주면 된다. 개발할 당시에는 development를 사용하고 개발이 완료되면 product로 고치면 된다. 처음에 react, react-dom을 불러온다. render() { return e("button", null, ".. 2020. 7. 27.
백준 1120번 파이썬 | 문자열 | Greedy 1120번: 문자열 1120번: 문자열 길이가 N으로 같은 문자열 X와 Y가 있을 때, 두 문자열 X와 Y의 차이는 X[i] ≠ Y[i]인 i의 개수이다. 예를 들어, X=”jimin”, Y=”minji”이면, 둘의 차이는 4이다. 두 문자열 A와 B가 주어진다. 이때, A의 � www.acmicpc.net 문제 길이가 N으로 같은 문자열 X와 Y가 있을 때, 두 문자열 X와 Y의 차이는 X[i] ≠ Y[i]인 i의 개수이다. 예를 들어, X=”jimin”, Y=”minji”이면, 둘의 차이는 4이다. 두 문자열 A와 B가 주어진다. 이때, A의 길이는 B의 길이보다 작거나 같다. 이제 A의 길이가 B의 길이와 같아질 때 까지 다음과 같은 연산을 할 수 있다. A의 앞에 아무 알파벳이나 추가한다. A의 .. 2020. 7. 25.

티스토리툴바