개발일지 (47) 썸네일형 리스트형 React에서 두 번 랜더링 react에서 console.log를 찍어보던 도중 의도하지 않은 랜더링이 두 번씩 되는 것을 확인했다. 이는 React.StrictMode 때문인데, npx create-react-app으로 생성하면 자동으로 생성되어 있다. index.js에서 를 제거 후 쉽게 해결이 되었다.root.render( );root.render( ); 그렇다면 왜 이렇게 불필요한 랜더링이 두번 일어나는 것일까? 이는 개발환경에서 잠재적 오류를 체크하기 위한 도구라고 한다. 때문에 개발 과정에서는 StrictMode를 사용하는 것이 오류 발견에 더 유용할 수 있다. StrictMode는 아래와 같은 부분에서 도움이 된다고 한다.안전하지 않은 생명주기를 사용하는 컴포넌트 발견 레거시 문자열 ref 사용에 대.. 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #5 Create React App 이 포스팅은 https://nomadcoders.co/react-for-beginners강의를 보며 작성하였습니다.(무료!) npx create-react-app my-app 이제 본격적으로 script로 불러오는 방식이 아닌 react app을 만들어 본격적으로 react를 사용해 볼까 한다. react app을 creat 하는 도중에 npm install error ENOENT라는 작은 에러를 만났다. 우선 기존에 깔려 있던 node.js를 재 설치 한 후 댓글에 있는 방식으로 앱생성을 진행하였다. 생성한 폴더에서 터미널을 열고 node -v을 입력해 node.js의 설치를 확인했다. 그리고 px create-react-app . 을 입력 후 y를 눌러서 설치를 시작했다. 설치가 끝나니 여러가지 .. 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #4 Props 이 포스팅은 https://nomadcoders.co/react-for-beginners 강의를 보며 작성하였습니다. #4 Props Props는 일종의 방식이다. 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법. 이제부터 해볼 것은 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보내는 것이다.중요한 점은 컴포넌트는 단지 JXS를 반환하는 함수일 뿐이다. 이러한 작업이 필요한 이유는 무엇일까? 만약 버튼을 만든다고 했을 때 비슷한 스타일의 버튼을 만들기 위해 설정한 style값을 모두 붙여 넣어 만든다면, 추후 수정이 있을 시 모든 버튼의 style값을 조정해야 할 것이다.function SaveBtn() { return Save Changes}function Confirm.. 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기 #3 State 이 포스팅은 https://nomadcoders.co/react-for-beginners 강의를 보며 작성하였습니다. #3 State 이번에는 React에서 변수의 동적 제어를 하기 위해 State에 대해 공부하였다.기존의 코드에서 counter의 변수를 증가시켜 준 후에 rerender을 통해서 페이지의 바뀐 부분을 변경해 주었다. 하지만, 변수와 함수가 많아지면 관리해야 하는 코드의 양도 늘어나고 실수도 늘어날 수 있다. 따라서 use.State함수를 통해 자동으로 state의 값이 변하면 rerender 해줄 수 있다.const [vlaue, setValue] = React.useState(""); 위와 같이 React.useState() 함수를 이용하여 state 선언을 할 수 있다. 함수의 첫 .. React를 배워보자(feat. 노마드 코더 - ReactJS 로 영화 웹 서비스 만들기) 기존에 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 서버로 STOMP 구현 후 thymeleaf로 프론트 연결 오류(CORS) 개인적으로 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: 이라는 오류와 함께 커넥션이 멈.. 스프링부트 with JPA 블로그 13강 - 시큐리티 동작 원리 1. 스프링 mvc request life cycle 2. Filter와 Interceptor는 실행 시점이 다르다. Filter는 WebApplication에 등록 - web.xml Interceptor는 Spring의 Context에 등록 필터체인 예제와 인터셉터 예제하기 3. Interceptor와 Filter의 차이 Interceptor는 시큐리티가 나오기전에 인증, 권한을 체크하는 훌륭한 도구로 사용되었다. Interceptor는 AOP를 흉내낼 수 있다. handlerMethod를 제공하기 때문에 메서드의 전후 처리가 가능하다. 4. Security Security의 인증 절차는 필터 체인을 거쳐 dispatcherservlet으로 가기전에 적용된다. 그리고 Security는 필터 체인을 통해.. 스프링부트 with JPA 블로그 11강 - DB격리수준 1. 오라클 read commit 2. MySQL repeatable read 둘은 select시에 트랜잭션을 걸게 되면 차이가 들어난다. 무슨 차이가 있는지 살펴보자. PHANTOM READ (데이터가 보였다 안보였다) -> 정합성이 깨짐 3. 스프링부트의 트랜잭션 - 세션의 시작은 서블릿이 시작되는 시점 부터~ (세션은 영속성 컨텍스트를 포함) - 트랜잭션의 시작은 서비스 레이어부터, JDBC 커넥션도 이 시점부터. - 트랜잭션의 종료는 서비스 계층에서 종료, JDBC 커넥션도 이 시점 부터 종료. - 세션은 컨트롤러 영역까지 끌고 가기 때문에 영속성이 보장되어 select가 가능해지고 lazy-loading이 가능해진다. 참고 블로그 : https://getinthere.tistory.com/27 이전 1 2 3 4 5 6 다음
