개발자 지망생의 발전 과정 개발자 지망생의 발전 과정

React 스프링부트와 리액트 연동하기   새 프로젝트를 만드는데, 프론트 단을 리액트를 사용하려고 연동하는 법을 알아왔다.기본적인 방법은 그냥 에디터에서 리액트를 사용하는 것과 같고, 마지막에 연동하는 부분이 중요하다.바로 코드로 알아보자.   1. 리액트 실행프로젝트를 생성하고, 터미널을 연다.이거 경로 이름 한글 들어가있는데, 웬만하면 영어로 하는 것이 좋다.다음 코드 입력cd src/mainnpx create-react-app `프로젝트 명` 이거 예전에는 npx가 아니라 npm이었는데, npx를 사용하는 것이 더 좋다.npm 5.2.0 이후 버전을 설치하면 npx가 자동 설치된다.최근에 나온 npm은 다 적용되어 있다.npx는 npm을 더 편하게 사용할 수 있게 해주는 npm의 도구이다.아 물론..

React RestAPI - 2 앞 장에서는 GET 방식만 다뤘지만 이제 나머지 HTTP 메서드도 다뤄보겠다.    1. PUT화면 지금 화면 상으로는 문제 없이 동작하는 것 같지만, 새로고침하면 체크박스가 해제된 상태로 렌더링된다.당연하지만 지금 db에 값을 바꾼 것이 아니라 state만 바꿔주고 있기 때문이다. 그래서 실제로 체크할 때마다 db에 값이 변동되게 해보자. Word.jsfunction toggleDone() { fetch(`http://localhost:3001/words/${word.id}`, { method : 'PUT', headers : { 'Content-Type' : 'application.json' }, ..

React RestAPI - 1   우선 값을 주고받기 위해 JSX에 태그를 추가하자. 1. 체크박스, 버튼 생성Day.jsexport default function Day() { const day = useParams().day; const wordList = dummy.words.filter(word => word.day === Number(day) ); console.log(wordList); return Day {day} { wordList.map(word => ( ..

React 라우터   먼저 라우터 설명하기 전에, 인터넷에 떠도는 리액트 영상들과 다른 점이 있다.예전에 나온 리액트는 Switch라는 것이 있었는데, Route를 감싸는 용도였다.또한 exact라는 속성도 있었는데 그 둘 다 리액트 버전이 최신화 되면서 더 이상 사용하지 않는다. 라우터를 설치해야 하므로 터미널에 `npm install react-router-dom`을 입력해주자설치가 끝났으면 임포트를 해와야 한다.import {BrowserRouter ,Route ,Routes} from "react-router-dom"; 라우터를 이용해 화면을 만든 예시를 간단하게 살펴보자  1. 라우터 사용 예시App.jsfunction App() { return ( ..

React 더미 데이터 생성, map() 반복   1. 더미 데이터 생성먼저 레이아웃 만들어주자너무 길어질 거 같으니까 css 코드까지 올리지는 않겠다. Header.jsexport default function Header() { return ( 영어 단어 암기 단어 추가 날짜 추가 );} 화면 이제 데이터를 만들어보자. data.json{ "days": [ { ..

React 각 컴포넌트 별 CSS 적용   아래 코드를 보면서 문제 상황을 보자.App.jsfunction App() { return ( App );} Temp.jsfunction Temp() { return ( Temp );}  App.css.box{ width: 100px; height: 100px; background: skyblue;} 아래는 화면 미리보기 App.css에 적은 코드지만 Temp.js에서 JSX로 작성한 코드에도 적용이 된다.사실 이건 기존 HTML, CSS, Js를 사용해봤으면 당연한 것이다.하지만 이렇게 되면, CSS가 많아졌을 때 보기가 너무 힘들 것이다. 아래와 같이 수..

React Component  오늘도 먼저 잠깐 코드 작성 시 주의점을 살펴보고 가자.우리가 지금 return 문 안의 소괄호 안에 HTML 태그를 사용 중인데,반드시 하나의 HTML 태그만 시작되고 끝나야 한다.아래와 같은 경우는 허용하지 않는다.return ( );위 처럼 하려면, 4개의 div 태그를 감싸는 큰 div 태그를 만들고 그 안에 집어넣어야 한다. 이제 Component를 사용하는 것을 보자.  1. 사용법function Example() { return ( );}위와 같이 선언하고, 아래 처럼 사용한다. //...~~ 이러면 리턴문에 있는 값이 내가 컴포넌트를 사용 중인 곳에 반환된다. 그리고 여러개의 태그가 나열될 때, 전체를..

React 이벤트 리스너(핸들러)   먼저 이 장에 앞서, 코드로 이것저것 하다 보면 터미널에 노란 글씨로 `warning`이라고 나오는 경우가 있다.이 것은 에러는 아니고, 잘못된 코딩 습관을 잡아주는 `eslint`라는 라이브러리다.만약 사용하기 싫다면 /* eslint-disable */ 를 사용하면 된다./* eslint-disable */ 이제 이벤트 함수 사용하는 법을 알아보자  1. 버튼 생성어제의 코드를 이렇게 수정하자. {글제목[0]} 👍 1 8월 20일자  화면 상으로는 다음과 같다.  2. 이벤트 함수 사용이벤트를 사용할 때, 기존 js의 경우 아래와 같이 코딩했다.{글제목[0]} 👍 1  하지만 리액트의 경우 쌍따옴표가 아닌 중괄호를 이용하고, 내부엔 함수가 들..