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..

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 개발 환경이 실행되면서..