jpg의 끄적끄적

https://studybook.tistory.com/104 [React + TypeScript] select 직접 구현하기(1) select tag를 커스텀하여 디자인을 변경하는 방법도 있지만 디자인 요소가 많이 수정되어야 할 것 같아 직접 구현해볼 것이다. 처음에는 react-select라이브러리를 사용하려고 했으나 라이브러리를 studybook.tistory.com 위 글에서 이어서 select를 직접 구현할 것이다. UI를 좀 변경하여 위 글에서 코드가 조금 변경된 부분이 있을 수 있다..! 1. 선택한 option값 보이기(value값 전달하기) 각 선택한 옵션값이 label에 보이도록 구현할 것이다. GroupType.tsx 각 Option을 클릭하면 handleClickedGroupType(..

💬 select tag를 커스텀하여 디자인을 변경하는 방법도 있지만 디자인 요소가 많이 수정되어야 할 것 같아 직접 구현해볼 것이다. 처음에는 react-select라이브러리를 사용하려고 했으나 라이브러리를 커스텀하고 기능들을 변경하는데 시행착오가 있었다. 그래서 직접 구현을 해볼 것이다. 나는 typeScript와 styled-component를 이용하여 구현하였다. styled-component와 관련된 코드는 SignUpForm.styled.ts에 작성하였고, css를 제외한 나머지는 GroupType.tsx에 작성하였다. 전체 코드는 밑에 이어지는 글에 있다. https://studybook.tistory.com/106 [React + TypeScript] select 직접 구현하기(2) http..

https://studybook.tistory.com/68 Spring Boot(eclipes)와 React 연결(1) 1. Spring Boot 설정에서 gradle 프로젝트 생성 File > New > Spring Starter Project 를 클릭한다. 그 다음 원하는 프로젝트로 이름만 변경(나머지 변경X)한다. 나는 backend로 하였다. Next 클릭 Web에서 Spring Web 체 studybook.tistory.com * 윗 글에 이어서 작성된 글입니다! 1. Spring boot api 서버 만들기 backend > src/main/java > com.app 우클릭을 하고 class를 클릭해 TestController를 만든다. TestController.java를 다음과 같이 작성해..

1. Spring Boot 설정에서 gradle 프로젝트 생성 File > New > Spring Starter Project 를 클릭한다. 그 다음 원하는 프로젝트로 이름만 변경(나머지 변경X)한다. 나는 backend로 하였다. Next 클릭 Web에서 Spring Web 체크를 체크하고 Finish를 클릭하면 gradle 프로젝트가 생성된 모습을 볼 수 있다. 2. react 프로젝트 생성 File > Open Folder클릭하고 위에서 만든 backend 프로젝트에서 src > main폴더를 선택한다. View > Terminal 을 클릭하여 터미널에 'npx create-react-app 생성할 파일이름' 입력한다. 나는 frontend로 이름을 만들었다. 설치가 잘 완료되었으면 Happy Ha..

1. create 기능(글 추가 기능) create버튼을 클릭했을 때 글을 작성하는 화면이 나오도록 구현해보자. main.html 결과화면 CSS를 클릭하교 delete 버튼을 눌렀을 때 잘 삭제되는 것을 확인할 수 있다. 강의영상 - https://youtu.be/2s6s4IHzGSs

1. store 생성 우리가 redux를 사용하기 위해서 제일 첫 번째를 store를 만들어야 하는 동시에 reducer를 생성해야 했다. 그리고 결과화면 HTML을 클릭했을 때와 CSS를 클릭했을 때 본문의 내용이 잘 바뀌는 것을 볼 수 있다. 그렇다면 배웠던 것을 복습삼아 왜 바뀌는지 생각해보자. 우리는 action을 통해 dispatch에 값을 전달하고 reducer가 state값을 갱신해 dispatch가 subscribe하고 있는 함수들을 호출해주기 때문에 그에 따라 render가 동작해 새로운 state값을 참조하여 UI를 새로 그리기 때문이다. 강의영상 - https://youtu.be/zMTqWoe25aU

이제 웹페이지를 직접 만들어 보자. 1. 정적인 웹페이지 만들기(main화면) 먼저 start칸 웹페이지부터 만들자. main.html WEB Hello, WEB! HTML CSS create HTML HTML is ... 결과화면 2. 부품화 이제 각각의 주요한 덩어리들을 일종의 부품으로 만들어보자. WEB Hello, WEB! 만약 이 부분이 1억줄이라고 생각해보자. 우리의 웹페이지는 너무 복잡해서 한 눈에 들어오지 않을 것이다. 따라서 우리는 저렇게 부분부분에 이름을 붙이기만 하면 나중에 웹브라우저를 전달될 때 훨씬 정돈된 코드를 만들 수 있을 것이다. main.html 결과화면은 위에서 보여준 것과 같지만 코드는 훨씬 정돈되어 보기 편하고 나중에 코드를 재활용하기 쉬워졌다. 강의 영상 - http..

redux 대부 툴 설치 방법 https://github.com/zalmoxisus/redux-devtools-extension 위에 있는 깃허브로 들어가 내리다보면 크롬버전으로 설치할 수 있는 것이 나온다. Chrome Web Store를 클릭하여 들어가 확장기능을 설치한다. 설치하고 내리다보면 Basic store가 있다. 연두색 부분에서 +기호를 빼고 복사하여 red함수 위에 createStore한 함수 안에 붙여넣기 해준다. 홈페이지로 가 개발자도구를 클릭하면 redux가 생성된 것을 볼 수 있다. redux 대부 툴 기능 fire버튼을 각각 클릭해보자. 버튼을 누를 때마다 바뀌는 state값을 보여준다. 따라서 redux 대부 툴이라는 것은 redux에서 store에게 전달된 action들을 버..

이전시간에 우리는 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..