마이덕스타일

이 포스팅은 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생성 -..

개인적으로 Spring boot websocket을 이용하여 채팅방 구현을 하던 중 서버 쪽을 완성하고 apic을 이용해 테스트도 완료를 했지만 프론트 연결 중 오류를 하나 만났다. var sockJs = new SockJS("/ws"); //1. SockJS를 내부에 들고있는 stomp를 내어줌 var stomp = Stomp.over(sockJs); stomp.connect({}, function(frame) { // 연결이 되지 않는 오류 }); SockJs를 선언 후 구독을 위해 연결을 하려고 하면 websocket.js:6 WebSocket connection to 'ws://localhost:8000/ws/241/ml45xvou/websocket' failed: 이라는 오류와 함께 커넥션이 멈..