전체 글24 react-router-dom 적용 CRA로 만든 리액트 앱에 간단한 무료 테마를 적용해 보았다. https://mui.com/store/items/onepirate/ Onepirate - MUI Store An example landing and Sign Up page. mui.com 이 테마가 내가 하려는 프로젝트와 맞는것 같아 Onepirate로 결정했다. SignIn 페이지와 SignUp 페이지부터 붙였는데 url 매핑이 필요해서 react-router-dom을 이용해 url과 Component를 매핑해보겠다. 1. Routes 사용 먼저 컴포넌트를 소개하자면 Home("/"), SignIn("/sign-in"), SignUp("/sign-up") 이렇게 세가지 컴포넌트가 각 url와 매핑되어야 한다. 가장 간단한 방법은 그냥 Br.. 2023. 3. 3. 리액트 초보의 Redux Toolkit 적용기 리액트 프로젝트에서 가장 까다로웠던 부분이 전역적으로 상태를 관리하는 것이였다. 사용자 정보 같은 전역적으로 필요한 데이터들을 가장 최상위 컴포넌트에서 정의하고 자식 컴포넌트로 내려주는 형태로 개발 했었는데 프로젝트가 커지면서 유지보수가 매우 힘들었던 경험이 있다. 그래서 이번 프로젝트는 Redux를 적용 해보려고 한다. Redux Toolkit은 Redux를 더 사용하기 쉽게 만들기 위해 Redux에서 공식 제공하는 개발도구이다. 리액트도 서툴고 타입스크립트도 서툴지만 아래 튜토리얼을 따라 천천히 적용해 보았다. https://redux.js.org/tutorials/typescript-quick-start TypeScript Quick Start | Redux - How to set up and us.. 2023. 2. 23. Spring Boot 프로젝트에 Spring Security 적용 (로그인) 스프링 시큐리티를 적용하기 전에 간단한 사용자 테이블을 생성해주었다. 테이블 이름: user_info 컬럼: user_id, create_dt, password, role 유저 엔티티 클래스 @Getter @Entity @Table(name = "user_info") @NoArgsConstructor public class User { @Id private String userId; private String password; @Enumerated(EnumType.STRING) private UserRole role; private LocalDateTime createDt; @Builder public User(String userId, String password, UserRole role) { thi.. 2023. 2. 22. React 프로젝트 생성 토이 프로젝트를 진행하려고 오랜만에 React 프로젝트를 만들어 보았다! 1. node 설치 먼저 맞는 사양의 node를 설치한다. 그 다음 잘 설치되었는지 노드의 버전 확인! node --version https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. yarn 설치 개발에 yarn을 사용할 것이므로 yarn을 설치해주었다. npm install -g yarn yarn --version yarn 버전을 확인해보려고 yarn을 실행하면 이 시스템에서는 스크립트를 실행할 수 없으므로... 라는 오류가 뜬다. 시스템의 설정.. 2023. 2. 3. 프론트 컨트롤러 도입 각각의 요청과 서블릿을 1:1로 매핑하지 않고 앞에 공통으로 처리하는 프론트 컨트롤러를 만들어 요청을 처리하는 MVC(Model과 View와 Controller가 분리된) 프레임워크를 만들었다. 1. V1 기존 요청과 1:1 매핑된 서블릿에서 프론트 컨트롤러만 앞에 두어 프론트 컨트롤러만 서블릿으로 만들고 기존 서블릿들은 ControllerV1을 구현한 컨트롤러로 만드는 방식 https://github.com/wooyoung627/inflearn-spring/tree/main/servlet/src/main/java/hello/servlet/web/frontcontroller/v1 GitHub - wooyoung627/inflearn-spring Contribute to wooyoung627/inflear.. 2023. 1. 28. 프론트 컨트롤러(Front Controller) 패턴 스프링 MVC 강의를 듣는 도중 프론트 컨트롤러 패턴이라는 패턴을 처음 들어보았다. 정리하면 좋을 것 같아 포스팅 시작! 프론트 컨트롤러의 등장 배경 MVC 패턴의 한계 클라이언트의 요청 - 서블릿 1:1 매핑 1. viewPath의 prefix(/WEB-INF/views/), suffix(.jsp)의 중복 2. getRequestDispatcher, dispatcher.forward의 중복 3. request, response를 사용하지 않을때가 많음 4. 공통 처리가 어렵다 등등.. @WebServlet(name = "mvcMemberListServlet", urlPatterns = "/servlet-mvc/members") public class MvcMemberListServlet extends .. 2023. 1. 27. A Foreign key refering ... has the wrong number of column. should be 2 요새 회사에서 기존에 쓰던 MyBatis를 버리고 JPA로 옮기는 중인데 MyBatis로 사용하던 기존의 테이블들을 JPA로 매핑하다 보면 참 여러가지 오류를 만난다. 이번에는 A Foreign key refering ... has the wrong number of column. should be 2 라는 오류를 만났다. 해당 오류를 다시 테스트해보기 위해 오류를 일으킨 테이블들과 비슷하게 만든 테이블의 구조는 이렇다. TEAM이라는 테이블이 존재하고 team_id, name이 기본키로 잡혀있다. 그 아래에 MEMBER 테이블이 있는데 team_id로 team을 바라본다. 오류가 난 TEAM, MEMBER 테이블의 엔티티는 이렇다. @Entity @Builder @ToString(of = {"id", .. 2023. 1. 21. InvalidDefinitionException Exception 예전 JPA를 공부하기 전에 겪었던 Exception을 정리해보려고 한다. Controller에서 Entity를 바로 리턴했더니 com.fasterxml.jackson.databind.exc.InvalidDefinitionException: No serializer found for class org.hibernate.proxy.pojo.bytebuddy.ByteBuddyInterceptor and no properties discovered to create BeanSerializer (to avoid exception, disable SerializationFeature.FAIL_ON_EMPTY_BEANS) (through reference chain: spring.proj.shop.entity.Me.. 2023. 1. 15. 이전 1 2 3 다음
