전체 글 (30) 썸네일형 리스트형 bmsapi 로그인 기능 구현 1. pom.xml에 dependency 추가 jjwt maven spring security io.jsonwebtoken jjwt 0.9.1 org.springframework.boot spring-boot-starter-security 2. 기본패키지에 WebSecurityConfigurerAdapter를 상속하는 SecurityConfig클래스 생성 @RequiredArgsConstructor @Configuration @EnableWebSecurity @EnableGlobalMethodSecurity(prePostEnabled = true) public class SecurityConfig extends WebSecurityConfigurerAdapter{ @Override protected vo.. bmsapi 프로젝트 - bmsfront 리액트 2 (board 패키지) 순서: insert - list / comp - detail / delete - update 작업 1. App.js function App() { return ( 여기는 나중에 navbar가 들어갈 자리 ); } 2. BoardEntity, DTO, Repository 생성 - 나머지는 이전과 동일 @DynamicInsert @Entity @Data @NoArgsConstructor @AllArgsConstructor @Builder @Table(name = "board") public class BoardEntity { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(nullable = false) priv.. bmsapi 프로젝트 - bmsfront 리액트 (member 패키지) 순서: insert - list/comp - detail - update - delete 작업 1. 서로 다른 사이트간의 통신 bmsapi -> http://localhost:9005 bmsfront -> http://localhost:3000 - bmsapi 프로젝트의 기본패키지에 WebMvcConfigurer를 상속하는 클래스 생성 @Configuration public class WebMvcConfiguerImpl implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:3000") .. smsapi 프로젝트 - smsfront 리액트 이클립스의 smsapi프로젝트와 리액트의 sms front 연결하기 1. 서로 다른 사이트간의 통신 smsapi -> http://localhost:9002 ims front -> http://localhost:3000 - smsapi 프로젝트의 기본패키지에 WebMvcConfigurer를 상속하는 클래스 생성 @Configuration public class WebMvcConfiguerImpl implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:3000") .allowedMethod.. imsapi 프로젝트 - imsfront 리액트 이클립스의 imsapi프로젝트와 리액트의 ims front 연결하기 1. 서로 다른 사이트간의 통신 imsapi -> http://localhost:9001 ims front -> http://localhost:3000 - imsapi 프로젝트의 기본패키지에 WebMvcConfigurer를 상속하는 클래스 생성 @Configuration public class WebMvcConfiguerImpl implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:3000") .allowedMethod.. State 1. 사용 목적: 컴포넌트 안에서 값을 변경시키고, 그 변경된 내용을 브라우저에 반영시키고 싶을 때 2. 사용 방법 const [state명, state를 변경하는 함수명] = useState(초깃값); 3. State 값이 바뀌면 브라우저의 화면이 변경되는 재렌더링이 발생 -> 따라서, 너무 많은 재렌더링이 발생하지 않기 위해 이벤트가 발생했을 때, State값이 변경되도록 한다. import './App.css'; import Good from './Good'; function App() { return ( ); } export default App; import React, { useState } from 'react' function Good(props) { function haha(){ cons.. 이벤트 학습/ 컴포넌트 안에 컴포넌트 넣기 1. 컴포넌트에서 함수, onClick이벤트 생성 import './App.css'; import Hello from './Hello'; function App() { return ( ); } export default App; function Hello(){ function test1(){ alert(111); } function test2(){ alert(222); } return( 클릭111 클릭222 ) } export default Hello; 2. App.js에서 동적으로 함수 생성(props) import './App.css'; import Hello from './Hello'; function App() { function func1(){ alert(333); } return ( ); } .. 다운로드 및 실행 / 컴포넌트 / 반복문 / 배열 1. nodejs 설치 nodejs.org 들어가기 18.16.0 LTS (Long Time Support) 다운로드 후 실행 cmd창에서 node -v 입력시 v18.16.0이 출력되어야 함 환경변수에 nodejs 잘 들어가있는지 확인 2. visual studio Code 다운로드 https://code.visualstudio.com/download 들어가기 Windows 다운로드 후 실행 바탕화면 바로가기 체크 후 install 3. VSCode에서 실행하기 File -> Open Folder -> 폴더 열기 Terminal -> new Terminal npx create-react-app . 입력 오류 발생 시, 명령 프롬프트cmd 에서 알맞은 경로에 들어간 후 npx create-react-ap.. 이전 1 2 3 4 다음