jpg의 끄적끄적

이전시간에 우리는 action이 일어났을 때 그것을 dispatch에 통해 store에 전달하면 store가 우리가 작성한 reducer를 호출해 최종적인 state값을 결정한다는 것을 배웠다. 그러면 이제 state값이 바뀌면 UI도 바뀌어야 하는데 이때 render를 호출해야 한다. 즉, state이 바뀔 때마다 render가 통보 받아 그때마다 state값을 가져와 화면에 그려야 한다. with-redux.html 위 코드에서 UI를 그려주는 red함수는 실행할 때마다 state값을 가져와 그에 따라 자신의 color값을 결정해준다. 따라서 언제든지 호출해도 되는 함수이다. 위 코드는 red();를 통해 강제로 호출하였는데, 이것을 state값이 바뀔 때마다(dispatch를 할 때마다) red 함..

이번에는 state의 값을 변경하는 방법에 대해 알아보자. state를 변경하기 위해서는 action이라는 것을 만들고 dispatch에게 제출하면 dispatch가 reducer라는 것을 호출한다. 그때 이전의 state 값과 action의 값을 동시에 준다. 그러면 우리가 짤 reducer 함수가 그것을 분석해 state의 최종적인 값을 return 해준다. with-redux.html 위에서 작성한 코드를 통해 처음에 설명한 dispatch가 reducer 함수를 호출하고, 이전의 state값과 action 값을 동시에 주는 것을 확인해보자. 홈페이지에서 개발자도구 - console로 가서 fire 버튼을 클릭하면 이전의 state 값인 yellow와 action 값인 type값이 나타나는 것을 확..

검색엔진에 redux cdn을 검색하여 홈페이지에 들어가면 redux를 서버에 설치하지 않고, 그냥 복사하여 사용할 수 있는 페이지가 나온다. 여기서 맨 아래 주소를 카피한다. 그리고 public 폴더에 with-redux.html 파일을 만들고 다음과 같이 주소를 넣어준다. 그리고 without-redux.html에서 작성한 부분을 복붙해주고 red만 남기고 지워준다. 이제 red부분을 redux에 의해 동작하도록 변경할 것이다. redux를 이용한다는 것은 store를 만들어 state의 상태를 바꾸는 것이 redux의 핵심이다. 따라서 첫 번째로 해야할 것은 store를 만들어 state가 생성하고, reducer라는 함수를 만들어 store에 주입하는 것이 첫 번째로 할 일이다. state는 st..

redux의 필요성을 느껴보기 위해서 먼저 redux 없이 애플리케이션을 만들어보자. 새로운 폴더 redux를 만들어 react 환경을 구축하고, public 폴더에 without-redux.html를 만들어 다음과 같이 코드를 작성하였다. without-redux.html 결과화면 - red의 fire버튼을 눌렀을 경우 - green의 fire버튼을 눌렀을 경우 - blue의 fire 버튼을 눌렀을 경우 document.querySelector('#component_red').style.backgroundColor = 'red'; document.querySelector('#component_green').style.backgroundColor = 'red'; document.querySelector(..

redux 지도를 보며 redux에 대해 알아보자. store / state redux의 핵심은 store이다. store에는 정보가 저장된다. store 안에는 실제 정보가 저장되어 있는 state가 있다. 이때 중요한 것은 우리는 state에 직접 접속하는 것이 불가능하다. var store = Redux.createStore(reducer); redux에 createStore하게 되면 store가 생성된다. reducer store를 만들 때 가장 먼저 해야 할 것은 reducer라는 함수를 만들어 공급해야 한다. function reducer(oldState, action){ ... } var store = Redux.createStore(reducer); ㅁstore를 생성할 때 꼭 줘야하는 인..

prop을 통해서 입력된 데이터를 우리가 만든 컴포넌트 함수가 처리해서 return 값을 만들면 return 값이 새로운 UI가 된다. state는 prop과 함께 컴퍼넌트 함수를 다시 실행해서 새로운 return 값을 넣어주는 역할을 한다. prop과 state 모두 값이 변경되면 새로운 return 값을 만들어 UI를 바꾼다. 하지만 이 둘의 차이점은 prop은 컴포넌트를 사용하는 외부자를 위한 데이터이고, state는 컴포넌트를 만드는 내부자를 위한 데이터이다. 이번에는 state를 사용하여 각 목록을 눌렀을 때 해당하는 각 내용이 나오도록 만들어 볼 것이다. 전체 코드 import logo from './logo.svg'; import './App.css'; import {useState} fro..

이번에는 컴포넌트에 이벤트 기능을 만들어 클릭하면 알림창이 뜨도록 실습을 해볼 것이다. 전체 코드 import logo from './logo.svg'; import './App.css'; function Header(props){ return {props.title} } function Nav(props){ const lis = []; for(let i = 0; i < props.topics.length; i++){ let t = props.topics[i]; lis.push({t.title}); } return {lis} } function Article(props){ return {props.title} {props.body} } function App() { const topics = [ {id:..

위 html 태그는 src가 무엇이냐에 따라 이미지가 달라지고, width가 무엇이냐에 따라 이미지의 크기가 달라진다. 즉 src, width와 같은 속성들 덕분에 이미지 태그는 입력값을 가질 수 있다. 이번에는 컴포넌트에 속성을 적용해보는 방법에 대해 알아볼 것이다. 우선 코드를 아래와 같이 수정한다. import logo from './logo.svg'; import './App.css'; function Header(props){ return {props.title} } function Nav(){ return html css js } function Article(props){ return {props.title} {props.body} } function App() { return ( ); } ..

"react는 사용자 정의 태그를 만드는 기술이다." 우선 이전 실습 내용을 정리하기 위해 public폴더의 index.html에서 31행의 style~을 지워주고, app.css를 다 지운다. 그리고 App.js를 아래와 같이 코드를 수정한다. import logo from './logo.svg'; import './App.css'; function App() { return ( WEB html html html Welcome Hello, WEB ); } export default App; 그리고 브라우저를 다음과 같이 만든다. 사용자 정의 태그는 함수를 정의하여 만든다. 그리고 반드시 대문자로 시작해야 한다. import logo from './logo.svg'; import './App.css'; ..

1. 디렉토리의 구조 01. index.js src 폴더에서 index.js 파일이 있는데 이 파일은 입구 역할을 한다. npm start를 터미널에 입력하여 create-react-app을 구동시키면 index.js 파일을 찾고 그대로 동작하게 된다. 10행의 이라는 태그가 브라우저 UI의 전체이다. 그리고 이 태그의 파일은 App.js이다. 02. App.js App.js 는 UI를 만드는 역할을 한다. 따라서 App.js를 편집하면서 UI를 만드는 것이다. App.js파일로 이동하여 아래 그림처럼 입력하면 브러우저가 아래와 같이 보이게 된다. 그렇다면 Hello React! 가 가운데에 위치하는 이유는 뭘까? 그 이유는 App.css 때문이다. 03. App.css / index.css App.cs..

https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 링크로 들어가 왼쪽, 오른쪽 둘 중 아무거나 클릭하여 node.js를 먼저 설치한다. Visual Studio Code를 열어 파일 - 폴더 열기 - 바탕화면에 react-app이라는 새로운 폴더를 만들어 열어준다. *폴더를 만들 때는 소문자 이용하기! 그리고 터미널 - 새터미널을 클릭하면 명령어로 Visual Studio를 제어할 수 있게 된다. 터미널에 npx create-react-app . 을 입력하여 설치해준다. 설치가 완료되면 npm start를 입력하여 react 개발 환경이 실행되면서..

실버V https://www.acmicpc.net/problem/5635 5635번: 생일 어떤 반에 있는 학생들의 생일이 주어졌을 때, 가장 나이가 적은 사람과 가장 많은 사람을 구하는 프로그램을 작성하시오. www.acmicpc.net 문제 어떤 반에 있는 학생들의 생일이 주어졌을 때, 가장 나이가 적은 사람과 가장 많은 사람을 구하는 프로그램을 작성하시오. 입력 첫째 줄에 반에 있는 학생의 수 n이 주어진다. (1 ≤ n ≤ 100) 다음 n개 줄에는 각 학생의 이름과 생일이 "이름 dd mm yyyy"와 같은 형식으로 주어진다. 이름은 그 학생의 이름이며, 최대 15글자로 이루어져 있다. dd mm yyyy는 생일 일, 월, 연도이다. (1990 ≤ yyyy ≤ 2010, 1 ≤ mm ≤ 12, ..

실버V https://www.acmicpc.net/problem/4539 4539번: 반올림 정수 x가 주어졌을 때, 10보다 크다면, 1의 자리에서 반올림하고, 결과가 100보다 크면, 10의 자리에서 반올림하고, 1000보다 크면, 100의 자리에서 반올림하고... 이와 같이 계속 반올림하는 프로그램 www.acmicpc.net 문제 정수 x가 주어졌을 때, 10보다 크다면, 1의 자리에서 반올림하고, 결과가 100보다 크면, 10의 자리에서 반올림하고, 1000보다 크면, 100의 자리에서 반올림하고... 이와 같이 계속 반올림하는 프로그램을 작성하시오. 입력 첫째 줄에 테스트 케이스의 개수 n이 주어진다. 각 테스트 케이스는 한 줄로 이루어져 있으며, 정수 x가 주어진다. (0 ≤ x ≤ 9999..

실버V https://www.acmicpc.net/problem/4383 4383번: 점프는 즐거워 Jolly jumper라 불리는 수열이 있다. 길이가 1인 수열은 무조건 Jolly jumper이고, 길이가 2이상일 때는 n개의 연속된 두 수의 차의 절댓값이 1부터 n-1까지 모두 나와야 Jolly jumper라고 한다. 예를 들어 1 4 www.acmicpc.net 문제 Jolly jumper라 불리는 수열이 있다. 길이가 1인 수열은 무조건 Jolly jumper이고, 길이가 2이상일 때는 n개의 연속된 두 수의 차의 절댓값이 1부터 n-1까지 모두 나와야 Jolly jumper라고 한다. 예를 들어 1 4 2 3 이것은 Jolly jumper인데, 두 수의 차의 절댓값이 각각 3,2,1이기 때문이..

브론즈 II https://www.acmicpc.net/problem/15829 15829번: Hashing APC에 온 것을 환영한다. 만약 여러분이 학교에서 자료구조를 수강했다면 해시 함수에 대해 배웠을 것이다. 해시 함수란 임의의 길이의 입력을 받아서 고정된 길이의 출력을 내보내는 함수로 정 www.acmicpc.net 문제 APC에 온 것을 환영한다. 만약 여러분이 학교에서 자료구조를 수강했다면 해시 함수에 대해 배웠을 것이다. 해시 함수란 임의의 길이의 입력을 받아서 고정된 길이의 출력을 내보내는 함수로 정의한다. 해시 함수는 무궁무진한 응용 분야를 갖는데, 대표적으로 자료의 저장과 탐색에 쓰인다. 이 문제에서는 여러분이 앞으로 유용하게 쓸 수 있는 해시 함수를 하나 가르쳐주고자 한다. 먼저, ..

실버IV https://www.acmicpc.net/problem/9012 9012번: 괄호 괄호 문자열(Parenthesis String, PS)은 두 개의 괄호 기호인 ‘(’ 와 ‘)’ 만으로 구성되어 있는 문자열이다. 그 중에서 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(Valid PS, VPS)이라고 www.acmicpc.net 문제 괄호 문자열(Parenthesis String, PS)은 두 개의 괄호 기호인 ‘(’ 와 ‘)’ 만으로 구성되어 있는 문자열이다. 그 중에서 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(Valid PS, VPS)이라고 부른다. 한 쌍의 괄호 기호로 된 “( )” 문자열은 기본 VPS 이라고 부른다. 만일 x 가 VPS 라면 이것을 하나의 괄..

실버IV https://www.acmicpc.net/problem/10866 10866번: 덱 첫째 줄에 주어지는 명령의 수 N (1 ≤ N ≤ 10,000)이 주어진다. 둘째 줄부터 N개의 줄에는 명령이 하나씩 주어진다. 주어지는 정수는 1보다 크거나 같고, 100,000보다 작거나 같다. 문제에 나와있지 www.acmicpc.net 문제 정수를 저장하는 덱(Deque)를 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램을 작성하시오. 명령은 총 여덟 가지이다. push_front X: 정수 X를 덱의 앞에 넣는다. push_back X: 정수 X를 덱의 뒤에 넣는다. pop_front: 덱의 가장 앞에 있는 수를 빼고, 그 수를 출력한다. 만약, 덱에 들어있는 정수가 없는 경우에는 -1을 출력..

실버V https://www.acmicpc.net/problem/1181 1181번: 단어 정렬 첫째 줄에 단어의 개수 N이 주어진다. (1 ≤ N ≤ 20,000) 둘째 줄부터 N개의 줄에 걸쳐 알파벳 소문자로 이루어진 단어가 한 줄에 하나씩 주어진다. 주어지는 문자열의 길이는 50을 넘지 않는다. www.acmicpc.net 문제 알파벳 소문자로 이루어진 N개의 단어가 들어오면 아래와 같은 조건에 따라 정렬하는 프로그램을 작성하시오. 길이가 짧은 것부터 길이가 같으면 사전 순으로 입력 첫째 줄에 단어의 개수 N이 주어진다. (1 ≤ N ≤ 20,000) 둘째 줄부터 N개의 줄에 걸쳐 알파벳 소문자로 이루어진 단어가 한 줄에 하나씩 주어진다. 주어지는 문자열의 길이는 50을 넘지 않는다. 출력 조건에 ..