IT 공부방

에러 설명해당 에러는 form 태그를 사용해서 서버를 호출할 경우 @RequestBody로 해당 데이터를 요청 받는다면 에러가 발생합니다.그 이유는 RequestBody → application/json 타입으로 해당 데이터를 받는 것이고, form → application/x-www-form-urlencoded 이러한 데이터 타입으로 전송하기 때문입니다.해결 방법ModelAttribute 사용하기@PostMapping("/signUp") public String signUpProc(@ModelAttribute MemberReqDto request) { memberService.signUp(request); return "redirect:/signIn"; }Reques..

제1정규형한 칸엔 하나의 데이터만 저장제2정규형현재 테이블의 주제와 관련없는 컬럼을 다른 테이블로 이동 시키는 것composite primary key두개 이상의 컬럼을 합치면, primary key 역할을 할 수 있는 컬럼partial dependency를 제거한 테이블하나의 composite primary key에 종속되는 컬럼을 다른 테이블로 제외 시키는 작업단점으로는해당 테이블 하나로는 데이터를 전부 표현할 수 없음제3정규형일반 컬럼에만 종속된 컬럼은 다른 테이블로 빼기제2정규형에서 transitive dependency 제거컬럼A라는 Primary key가 있다면 컬럼B는 컬럼A에 종속되고컬럼C는 컬럼B에 종속이 된다면컬럼C를 transitive dependency 라고 부른다이 컬럼C를 다른 ..

브라우저 저장공간위치 : 크롬 개발자도구의 Application 탭Local Storage / Session Storage (key : value 형태로 문자, 숫자 데이터 저장가능)Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능)Cookies (유저 로그인정보 저장공간)Cache Storage (html css js img 파일 저장해두는 공간)Local Storage / Session Storage 는문자, 숫자만 key : value 형태로 저장가능하고5MB까지만 저장가능합니다.Local Storage는 브라우저 재접속해도 영구적으로 남아있는데 Session Storage는 브라우저 끄면 날아갑니다.유저가 브라우저 청소하지 않는 이상 반영구적으로 데이터저장이 가능합니다.로컬스토리..

자바스크립트는 HTML를 조작하는 언어인데, 자바스크립트는 HTML 태그를 직접 해석이 불가능자바스크립트가 HTML 조작을 하기 위해서는HTML를 자바스크립트가 해석할 수 있는 문법으로 변환한 것이 DOM 입니다.예)Hello World위와 같은 HTML을 발견하면 브라우저가 document = {}에 담아 줍니다.var document = { div : { style : {color : 'blue'} innerHTML : 'Hello World' }}브라우저가 DOM을 생성해주고 document.div.innerHTML = ‘안녕’ 과 같이 자바스크립트를 이용해서 HTML 조작이 가능해 집니다.

html Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping csstab-button을 클릭 시 현재 클릭만 tab-button에 orange클래스를 추가tab-content에 show 클래스 부착ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc;}ul.list::after { content: ''; display: block; clear: both;}.tab-button {..

html 테스트 예제var products = [{ id: 0, price: 70000, title: 'Blossom Dress' }, { id: 1, price: 50000, title: 'Springfield Shirt' }, { id: 2, price: 60000, title: 'Black Monastery' } ];동적으로 html 만들기 위한 템플릿 함수function 템플릿(data) { data.forEach((a, i) => { var 템플릿 = ` ..

스프링이 뽑은 object를 Bean이라고 합니다.Bean으로 등록해두면 사용 할 때마다 객체를 생성하는 것이 아니라, DI로 가져다 쓸 수 있다.그러면 한 번 뽑아놓은 object를 계속 재사용하니까 매번 new 안해도 되어서 효율적BcryptPasswordEncoder Bean 등록SecurityConfig@Bean public PasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); }Service Layerprivate final PasswordEncoder passwordEncoder;의존성 주입으로 받아서 사용한다.

Spring Security 로그인React + spring bootSecurityConfigpackage com.sanplink.api.security;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.security.config.annotation.web.builders.HttpSecurity;import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;import org.springframework.secu..

리액트 CORS 에러리액트 Axios CORS 에러개발 환경Spring Boot## CORSspring.mvc.cors.allowed-origins=http://localhost:3000spring.mvc.cors.allowed-methods=GET,POST,PUT,DELETEspring.mvc.cors.allowed-headers=*React프록시 설정"proxy": "http://localhost:8080",운영 환경Reactconst { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) { app.use( '/api', createProxyMiddleware({ tar..

- Heap : 런 타임에 크기가 결정됨- Stack : 컴파일 타임에 크기가 결정됨  메모리 공간 종류 4가지 : Code, Data, Heap, Stack  Code : 코드 영역에는 소스코드가 들어가는 영역Data : 프로그램 전역 변수, 정적 변수가 저장Heap : 사용자가 관리하는 영역으로, 데이터가 동적으로 생성되는 영역Stack : 함수의 호출정보, 매개변수, 지역변수 정보를 저장