전체보기106 [Java/SpringBoot] Java와 SpringBoot 버전 및 javax와 Jakarta Java와 SpringBoot를 사용하여 버전을 맞추지 않으면 에러가 발생합니다. Java 11을 사용하면서 아래와 같은 방법으로 버전을 맞추었습니다. 1. Java 11 사용 시 SpringBoot 2.X.X 버전을 사용해야 함 - 현재 2.7.2 버전을 사용할 수 있습니다. 2. Java 17부터 라이브러리 import 경로 변경 (Java EE → Jakarta EE) - Java 17 이전 : javax..... - Java 17 이상 : jakarta... // Java 17 이전 import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.validation.Vali.. 2023. 8. 23. [SpringBoot] JWT 토큰 인증기능 구현 시 에러핸들링 Logger 라이브러리 import 에러 1. 문제 코드 작성 과정에서 Logger 라이브러리를 import 하지 못함 // 에러 발생 코드 import java.util.logging.Logger; public class SecurityUtil { private static final Logger logger = LoggerFactory.getLogger(SecurityUtil.class); // 이하 생략 } 2. 해결 - 원인 : 유사 라이브러리를 잘못 불러옴 - 해결방안 : log4j 라이브러를 불러와 사용 // 해결된 코드 import org.slf4j.Logger; public class SecurityUtil { private static final Logger logger = LoggerF.. 2023. 8. 23. [HTML] iframe의 cross-origin 이슈 - cookie, addEventListener 문제상황 채팅 화면을 고객의 웹사이트에 제공하기 위한 코트를 제작하는 과정에서 문제가 발생했다. iframe을 통해 우리 서버에 있는 웹사이트 코드가 고객의 웹사이트에서 동작하도록 해야했다. iframe은 same-origin-policy를 따른다. 내부에 src속성으로 연결된 웹사이트와 iframe 외부에 연결된 웹사이트의 origin이 같아야 기능이 정상적으로 동작한다. 문제는 두 웹사이트는 cross-origin 관계에 있다. 따라서 다음 두 가지의 문제가 발생했다. 1. 고객 웹사이트에서 쿠키를 불러올 수 없었다. (iframe 문제라기 보단 cookie의 정책 문제) 2. 고객 웹사이트에서는 iframe으로 연결된 서버 웹사이트의 HTML 엘리먼트를 DOM 문법으로 조회할 수 없었다. - 즉 .. 2023. 5. 10. [CSS, flex] flex-basis=0으로 flexbox의 사이즈를 일치시키기 문제상황 부모 에 display:flex 속성을 적용시켰다. 그리고 자식 엘리먼트들이 width 사이즈를 일치시키고 싶어서, 여기에 flex-grow: 1 속성을 적용시켰다. 그런데 문제는 자식 엘리먼트들의 width가 모두 같지 않았다. 해결방안 문제가 발생한 이유는 각 자식 엘리먼트마다 텍스트 길이가 달랐기 때문이다. flex-grow를 통해 나머지 공간을 균등하게 분배하도록 flex container에게 지시하더라도, 콘텐츠가 더 많은 엘리먼트가 그에 비례하여 더 많은 공간을 차지했다. flex로 공간을 분배하기 전에 각 엘리먼트의 초기 크기가 다르기 때문이다. 이 경우 flex-basis=0 으로 설정하여 엘리먼트의 초기 크기로 0으로 설정할 수 있다. (디폴트값은 flex-basis=auto이다.. 2023. 5. 10. [React, HTML] tabIndex를 통해 키보드 focus 조정하기 문제상황 1 의도하지 않은 엘리먼트에 focus가 맞추어져 의도된 키보드 이벤트가 동작하지 않는 경우가 있습니다. 예를 들어 Enter 키를 눌렀지만 원하지 않는 엘리먼트에 focus가 맞추어져, 의도하지 않았던 이벤트가 발생할 수 있습니다. 해결방안 tabIndex를 음수로 설정하여 해당 엘리먼트가 focus가 맞추어지지 않도록 설정합니다. *tabIndex tabIndex는 사용자가 키보드를 사용하여 웹 페이지를 탐색할 대 요소에 초점을 맞추는 순서를 결정하는 HTML 속성입니다. tabIndex가 클수록 우선적으로 Focus가 잡히지만 항상 그런 것은 아닙니다. 즉 tabIndex를 높은 값으로 설정한다고 해서 항상 먼저 포커스를 받는 것은 아닌데, 그 이유는 엘리먼트의 visible, disabl.. 2023. 5. 9. [React] 컴포넌트 강제 리렌더링 문제상황 기본적으로 React에서 state가 변경되면 컴포넌트가 자동으로 리렌더링 됩니다. 그러나 가끔 컴포넌트가 참조하고 있는 state가 변경되어도 리렌더링이 일어나지 않는 경우가 있습니다. 저의 경우 외부 CSS 라이브러리를 사용하는 경우 이런 현상이 발생했습니다. 해결방안 아래와 같은 방법으로 컴포넌트를 강제로 리렌더링하여 해결했습니다. 1. key를 별도의 state로 관리하며 목표한 state 변경 시 key state도 함께 변경하기 2. key state 변수를 div 엘리먼트의 key props로 전달하기 export default function Component() { const [scriptCode, setScriptCode] = useState(); const [data, set.. 2023. 5. 9. [React, TypeScript] 브라우저 화면에서 특정 단어 검색 기능 구현 카톡방에서 '대화 내용 검색'기능과 유사한 기능을 React로 브라우저에서 구현했습니다. 보통은 브라우저에 표시된 화면에서 Ctrl(Command) + F 를 사용하면 됩니다. 그러나 특정 컴포넌트 내에서만 이 기능이 동작하도록 코드로 직접 구현했습니다. 1. 검색하고 싶은 단어가 포함된 Node를 HTML DOM으로 불러와 텍스트만 추출하기 검색하고 싶은 단어들이 포함된 Node를 HTML DOM으로 불러옵니다. DOM문법을 사용해도 되고 React를 사용하고 있다면 useRef를 통해 불러옵니다. 저의 경우 useRef를 통해 HTML DOM을 불러왔지만, 그 안에서 특정 클래스에 있는 텍스트만 추출했습니다. 그리고 검색된 키워드를 포함하는 엘리먼트만 배열에 담아 state에 저장해줍니다. const.. 2023. 4. 20. [React] 파일 다운로드(download) 및 헤더(header) 정보 서버 코드 살펴보기 1. 헤더의 Content-Type을 application/octet-stream으로 설정하기 application/octet-stream은 8비트로 된 데이터라는 뜻으로 response 데이터가 binary 파일이라는 것을 암시합니다. 2. Content-Disposition 헤더의 속성값을 attached로 입력하고, filename도 전달하기 Content-Disposition는 Response Body의 콘텐츠를 브라우저에 인라인으로 표시할지 여부를 결정하는 헤더입니다. 속성값에 따른 차이는 아래와 같습니다. Content-Disposition: inline // 콘텐츠를 브라우저 화면에 표시합니다. Content-Disposition: attachment // 콘텐츠를 다운.. 2023. 4. 18. 이전 1 2 3 4 ··· 14 다음 반응형