목록분류 전체보기 (229)
도찐개찐
로컬환경에서 IP를 ipv4가 아니라 ipv6로 인식하고 있어서 이를 변경해줘야 합니다. ipv4의 127.0.0.1은 ipv6의 0.0.0.0.0.1이랑 같음 인텔리제이에서 수정을 하기 위해서는 하단에 작성 된 내용과 같이 진행 해주시면 됩니다. 메뉴 > Help > Edit Custom VM Options 아래 값을 복사, 붙여넣기 해주면 됩니다. -Djava.net.preferIPv4Stack=true -Djava.net.preferIPv4Addresses=true 위 설정이 안되는 경우 아래와 같이 진행 해주셔도 됩니다. 메뉴 > Run > Edit Configurations... 또는 어플리케이션 실행 셀렉트 영역을 눌러 선택 하시는 방법도 있습니다. Modify options > Add VM ..
비즈니스 레이어와 데이터 레이어 스프링을 사용한 웹앱의 경우 DAO, DTO, Repository, Entity를 사용하여 데이터를 다루는데 스프링부트의 경우 내장 톰캣을 통해 서블릿을 관리하고 이를 컨트롤러에서 각 어노테이션을 통해 매핑한다. 도메인(엔티티)의 경우 가장 Persistence Layer에 가까운데 이를 이용하기 위해 사용하는 방법들을 알아본다. Repository MVC 패턴에서 모델에 해당하는 부분으로 POJO로는 접근불가 Persistence Layer와 1:1 매칭 Java Persistence API 구현체를 이용하여 자바 객체로 접근할 수 있다. @Repository @RequiredArgsConstructor public class MemberRepository{ privat..
1. CORS란? (Cross-Origin Resource Sharing,CORS) 란 다른 출처의 자원을 공유할 수 있도록 설정하는 권한 체제를 말합니다. 따라서 CORS를 설정해주지 않거나 제대로 설정하지 않은 경우, 원하는대로 리소스를 공유하지 못하게 됩니다. 위의 사진처럼 CORS에러가 발생하게 됩니다. 이를 Spring에서 해결하는 방법에 대해서 알아보겠습니다. 2. Configuration으로 해결하기 이 방법은 Global하게 적용하는 방법입니다. 우선 config패키지를 만들어 줍니다. 경로는 /src/main/java/{project}/config 만들어진 config패키지 안에 WebConfig클래스를 만들어줍니다. @Configuration public class WebConfig i..
작성 소스 GitHub 경로 GitHub - dev-truly/jwt-demo Contribute to dev-truly/jwt-demo development by creating an account on GitHub. github.com 인증(Authentication)과 권한(Authorization) 먼저 스프링 시큐리티에서 애플리케이션 보안을 구성하는 두 가지 영역에 대해 간단하게 설명해 보도록 하겠습니다. 이 두 영역은 사실상 스프링 시큐리티의 핵심이라고 볼 수 있습니다. https://dev.to/caffiendkitten/authentication-vs-authorization-25lc 인증(Authentication)은 보호된 리소스에 접근하는 대상, 즉 사용자에게 적절한 접근 권한이 있는..
ReactJS로 프로젝트를 시작하면, 보통 create-react-app을 사용합니다. 개발을 하고 시작을 하려면 다음과 같은 명령을 실행하게 됩니다. $ yarn run start 그러면 http://localhost:3000으로 페이지가 열리게 됩니다. 실행포트 변경하기 실제 start 스크립트를 보면 다음과 같이 포트를 설정하고 있습니다. const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; 따라서 package.json 파일에서 scripts 부분의 start에 PORT 환경변수 설정을 추가합니다. 여기서는 Windows환경에서 9090포트로 변경하겠습니다. { ... "scripts": { "start": "set PORT=9090 && r..
문제점 아래와 같이 자바스크립트의 map 함수를 사용한 경우 콘솔에서 " Warning: Each child in a list should have a unique "key" prop "이라는 주의 문구를 확인할 수 있다. {["AAA", "BBB", "CCC"].map(item => {item} )} React는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성한다. 리액트 라이브러리는 이 관계를 이용해 컴포넌트 리렌더링 여부를 결정한다. 불필요한 리렌더링을 방지하기 위해서는 각 자식 컴포넌트마다 독립적인 key값을 넣어줘야 한다. 해결 방법 배열로 map 함수를 사용해 JSX 리스트를 구현할 때 key prop을 자식 컴포넌트마다 넣어줘야 한다. Ex: Item1 자바스크립트의 배열..
일반 state는 setState를 통해 가볍게 state 수정이 가능하지만, 아래와 같이 중첩된 state의 경우엔 setState만으로 값이 변경되지 않습니다. this.state = { tempList: { List1: [], List2: [], List3: [] } }; state의 List1, List2, List3 ... 같이 중첩된 객체의 state를 변경하려면, 단순 setState만으로는 한계가 있습니다. 이는 setState의 비동기성으로 인해 발생하는 상황인데, setState와 함께 업데이트 함수를 이용하여 state 값을 변경시킬 수 있습니다. const newList = [1, 2, 3] this.setState(prevState => { // Object.assign메소드로 t..
Fragment? 리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. 리액트를 사용하기 위한 문법인 JSX 를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다. 이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다. Fragment 사용 이유 fragment 를 사용해야 하는 이유를 찾아보면 가장 많이 나오는 예시! 테이블 예시를 보자. import React from "react"; function App() { return ( ); } function Table() { return ( Hello World ); } export default App; table 컴포넌트의 랜더링을 위해서 table 이라는 클래스명을 가진 div 로 묶어서 return 을 한다..