JavaScript
-
[JavaScript] a 태그 href="javascript:void(0);📌 JavaScript 2022. 2. 18. 13:22
경로이름 기존 소스를 분석하는 과정에서 위와 같은 내용을 보게 되었는데요. 그 중에서 경로이름 위와 같은 부분이 눈에 띄었습니다. void(0) 을 사용하면? 결과 값 undefined를 얻게 됩니다. 즉, 해당하는 링크가 정상적으로 동작하지 않게 만들기 위하여 이처럼 undefined를 사용한다고 보면 됩니다. # 을 쓰면 되지 않을까? 경로이름 해쉬기호인 #을 void(0) 대신에 쓰게 되면 링크는 이동하게 됩니다. #뒤에 아이디로 쓰지 않는 텍스트를 넣으면, 오브젝트의 이동도, 스크롤 이동도 하지 않습니다. 경로이름 #을 작성했을 때 스크롤이 위로 올라가는 문제점을 return false로 무력화했습니다. 경로이름
-
[React] 코드 스플리팅(Code Splitting)📌 React 2022. 1. 31. 17:21
A, B, C 로 구성된 싱글 페이지 애플리케이션(SPA)을 개발한다고 가정하였을 때, 사용자가 A 페이지에 방문했다면 B, C 페이지에서 사용하는 컴포넌트 정보는 필요하지 않습니다. 이를 필요로 할때는 B 혹은 C 페이지로 이용하려고 할 때만 필요하게 됩니다. 하지만 리액트 프로젝트에서는 별도로 설정하지 않으면 A, B, C 컴포넌트에 대한 코드가 모두 한 파일에 저장되어 버립니다. 만약 애플리케이션의 규모가 커지면 지금 당장 필요하지 않은 컴포넌트 정보도 모두 불러오면서 파일의 크기가 매우 커져버리겠죠? 그러면 로딩이 오래 걸리고, 사용자의 경험도 안 좋아지며, 트래픽도 많이 나오게 됩니다. 이러한 문제점을 해결해 줄 수 있는 방법은 코드 비동기 로딩입니다. 이 또한 코드 스플리팅 방법 중 하나 입니..
-
XSS(Cross-Site Scripting) 보안 취약점💡 개발 이슈와 해결/📚 누군가를 위한 기록 2022. 1. 20. 16:32
XSS(Cross-Site Scripting) (사이트 간 스크립팅)의 약자로, 웹 페이지에 삽입된 악성 스크립트를 통해 사이트 교차가 되며 발생하는 취약점입니다. 웹 애플리케이션에서 많이 나타나는 취약점의 하나로, 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점입니다. 이 취약점은 웹 애플리케이션이 사용자로부터 입력 받은 값을 제대로 검사하지 않고 사용할 경우 나타난다. 주로 여러 사용자가 보게 되는 전자 게시판에 악성 스크립트가 담긴 글을 올리는 형태로 이루어집니다. 이 취약점으로 해커가 사용자의 정보(쿠키, 세션 등)를 탈취하거나, 자동으로 비정상적인 기능을 수행하게 하거나 할 수 있다. 주로 다른 웹사이트와 정보를 교환하는 식으로 작동합니다. "사용자를 믿지 마라...
-
Uncaught ReferenceError: Cannot access 'OOO' before initialization💡 개발 이슈와 해결/📚 누군가를 위한 기록 2021. 12. 28. 19:23
문제 Uncaught ReferenceError: Cannot access 'OOO' before initialization React로 개발을 하다가 위와 같은 에러 메시지가 떴는데요. 개발하는 화면이 아무것도 렌더링 되지 않고 흰색 화면만 나오며 오류가 발생하였습니다. ㅠㅠ 저의 번역가인 '구글 번역기'를 돌려보면... 잡히지 않은 ReferenceError: 초기화 전에 'OOO'에 액세스할 수 없습니다. 라고 나오는데요. 원인 아래와 같이 구글링을 해보았습니다. uncaught referenceerror cannot access before initialization react 그래서 아래와 같은 내용을 확인 할 수 있었습니다. 초기화되기 전에는 변수를 사용할 수 없으므로 "초기화 전에 '단계'에..
-
[JavaScript] 문자 개행 처리 / 줄바꿈 처리 ('\n', 개행문자) / replace💡 개발 이슈와 해결/📚 누군가를 위한 기록 2021. 12. 24. 14:47
개행문자 : 컴퓨터에서 줄바꿈을 나타내는 제어문자 개행이 \n으로 넘어오는 경우가 생깁니다. 이럴 경우에는 HTML 화면에 개행이 안되는 경우가 있는데요. 아래와 같이 해당 부분을 변경 하면 됩니다. str = str.replace(/(?:\r\n|\r|\n)/g, ' '); 문제 데이터를 보여주는데, 줄바꿈이 되지 않아서 원인을 분석하였습니다. 원인 개발자 도구에 Console에 console.log(agentData); 로 확인해보니 사용하고자 하는 REMARK에 '\r\n\r\n' 가 들어가서 개행 처리가 필요했습니다. 해결 {agentData ? {agentData.REMARK} : } {agentData ? ( {agentData.REMARK.replace(/(?:\r\n\r\n|\n\n)/g,..