마이덕스타일

이 포스팅은 https://nomadcoders.co/react-for-beginners강의를 보며 작성하였습니다.(무료!)  이제 본격적으로 script로 불러오는 방식이 아닌 react app을 만들어 본격적으로 react를 사용해 볼까 한다. react app을 creat 하는 도중에 npm install error ENOENT라는 작은 에러를 만났다.  우선 기존에 깔려 있던 node.js를 재 설치 한 후 댓글에 있는 방식으로 앱생성을 진행하였다.  생성한 폴더에서 터미널을 열고 node -v을 입력해 node.js의 설치를 확인했다. 그리고 px create-react-app . 을 입력 후 y를 눌러서 설치를 시작했다. 설치가 끝나니 여러가지 폴더와 파일들이 생성되었다!터미널에서 npm st..

이 포스팅은 https://nomadcoders.co/react-for-beginners 강의를 보며 작성하였습니다. #4 Props  Props는 일종의 방식이다. 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법. 이제부터 해볼 것은 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보내는 것이다.중요한 점은 컴포넌트는 단지 JXS를 반환하는 함수일 뿐이다.  이러한 작업이 필요한 이유는 무엇일까? 만약 버튼을 만든다고 했을 때 비슷한 스타일의 버튼을 만들기 위해 설정한 style값을 모두 붙여 넣어 만든다면, 추후 수정이 있을 시 모든 버튼의 style값을 조정해야 할 것이다.function SaveBtn() { return Save Changes}function Confirm..

이 포스팅은 https://nomadcoders.co/react-for-beginners 강의를 보며 작성하였습니다. #3 State 이번에는 React에서 변수의 동적 제어를 하기 위해 State에 대해 공부하였다.기존의 코드에서 counter의 변수를 증가시켜 준 후에 rerender을 통해서 페이지의 바뀐 부분을 변경해 주었다. 하지만, 변수와 함수가 많아지면 관리해야 하는 코드의 양도 늘어나고 실수도 늘어날 수 있다. 따라서 use.State함수를 통해 자동으로 state의 값이 변하면 rerender 해줄 수 있다.const [vlaue, setValue] = React.useState(""); 위와 같이 React.useState() 함수를 이용하여 state 선언을 할 수 있다. 함수의 첫 ..

기존에 Spring Boot를 이용한 서버와 API를 만들었고 프론트단을 JSP와 Thymeleaf를 사용해서 동적인 부분을 처리하는 서비스를 구현했었다. 하지만, Refresh token으로 인한 JWT token의 교체를 구현하는데 어려움이 있었고 동적인 View를 구성하는 데 있어 예전 팀프로젝트에서 사용했던 React를 배워보려고 한다.   강의를 찾아보다 노매드 코더의 무료강의가 눈에 띄어 찾아들어보게 되었다.https://nomadcoders.co/react-for-beginners 우선, 첫 번째로 기존의 html과 JS를 이용하여 동적인 구조를 살펴보았다. Total clicks : 0 Click me기존의 방식은 html 문서 생성 -> 에 contents와 button생성 -..