본문 바로가기

전체 글

[Node] Node Express, React 프록시 연동 Express 서버와 React 클라이언트의 개발을 통해 서로를 연결하려고 합니다. 각각의 특징들과 장점들을 대부분 배우셨을거라고 생각합니다. 서버와 클라이언트가 분리됨으로써 협업을 하기 좋은 구성이 되고 맡은 바 임무에 최고의 효율을 낼 수 있는 프로젝트라고 생각합니다. 리액트는 더불어 리액트 네이티브라는 것이 존재하기 때문에 리액트의 문법을 알게 되면 iOS와 안드로이드 개발에서 도움이 많이 됩니다. 따라서 본 프로젝트를 통해 리액트를 좀 더 알아보고, 서버와 클라이언트를 분리함으로써 유지보수가 쉬운 프로젝트를 만들고자 하는 것이 목표입니다. 먼저 처음 프로젝트를 생성하는 것을 시작으로 하겠습니다. # Contents Express 생성 리액트 생성 연결 # Express 생성 우선 프로젝트의 의존성.. 더보기
[Node] React 정리(6) - 서버사이드 렌더링 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다. 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다. 리액트로 만든 애플리케이션을 서버 사이드 랜더링하는 방법을 소개하고자 합니다. 먼저 적용할 코드는 아래와 같습니다. GitHub - PacktPublishing/Node.j.. 더보기
[Node] React 정리(5) - react-router-dom 에서 존재하지 않는 페이지 커스터마이징 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다. 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다. 리액트로 존재 하지 않는 페이징 처리를 위한 준비는 아래와 같습니다. 먼저 라우터가 설정되어 있어야 합니다. 기본적인 라우터는 react-router-dom을 이용하여 Sw.. 더보기
[Node] React 정리(4) - SPA react-router-dom 를 사용하여 라우터 만들기 - BrowserRouter, Switch, Route, Link 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다. 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다. 먼저 SPA란 무엇인가에 대해 알아보도록 합시다. SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다. 말 그대로 한 개의 페이지로 .. 더보기
[Node] React 정리(3) - 생명주기와 상태 저장을 통한 화면 렌더링 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다. 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다. # Contents 생명 주기 예제 코드 # 생명 주기 리액트를 사용할 때에는 생명주기를 알아야 하는 게 필수이긴 합니다만.. 지원하는 함수도 많고 사이클도 많아서 실무에서.. 더보기
[Node] React 정리(2) - HTM 사용하여 render 하기 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다. 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다. # Contents HTM 라이브러리를 사용 리액트 돔에 렌더 방법 # HTM 라이브러리 사용 표준 JavaScript 태그 템플릿 리터럴을 사용하는 것은 읽고 쓰기가 매우.. 더보기
[Node] React 정리(1) - 프로젝트 구성 방법 리액트로 프로젝트를 생성하여 개발하는 과정 중 리액트의 필수 문법 및 기초적인 부분, 심화 과정 등을 정리한 문서입니다. 정리한 부분에는 제가 이해하는 관점에서만 정리를 하였기 때문에 초점은 보여주는 형식이 아닌 제가 필요할 때 사용하려는 목적이 담겨져 있습니다. 이 문서는 어떠한 리액트의 이론을 다루는 것이 아닙니다. 또한 현재 정리하려는 것은 여러분이 필요한 JSX 부분이 아닐 수 있음을 알려드립니다. 본 과정에서는 차례대로 난이도가 증가하는 정리를 하지 않았습니다. 필요한 부분만을 사용하거나 훑어보는 용도로 사용하시기 바랍니다. # Contents 프로젝트 기본 설정 - index.html 사용 X 프로젝트 기본 설정 - index.html 사용 O # 프로젝트 기본 설정 - index.html 사.. 더보기
[Spring] ExceptionHandler 을 사용하여 Transaction 구현 프로그래밍 관점에서 예외처리는 아주 중요하다고 생각합니다. 예외 처리가 안된 부분은 서버의 무리가 생기게 되고 공격의 취약점이 될 수 있습니다. 자바에서 대표적으로 예외 처리를 하는 방법에는 try-catch 문을 이용하여 적용하는 방법이 있습니다. 하지만 오늘 해볼 내용은 스프링 관점에서 예외처리를 할 예정입니다. 스프링 관점에서 예외처리를 한다고 생각해봅시다. 스프링 프로젝트 중 MVC 패턴 등 쿼리를 이용하여 데이터를 처리하고 여러가지 트렌젝션도 처리된다고 생각해봅시다. 트렌젝션을 처리하는 도중 에러가 발생한다면 Exception 구문으로 들어가게 되는데, 해당 Exception이 롤백을 지원하게 되는지, 안하는지에 따라서 데이터의 손실과 저장 유무가 달라지게 되는 것 입니다. 본 내용에서는 Exc.. 더보기