eval 함수는 JavaScript 코드를 실행시켜주는 함수입니다. 하지만, XSS(Cross-Site Scripting)등의 보안문제로 사용하지 말 것을 추천하는데요. 그러나 분명 용도가 있었기에 만들어 졌을 것이기에 어디에 사용되는지 찾아봤습니다. 1.FaaS 같은 서비스를 만드는 경우에 - 사용자가 입력한 함수를 그대로 적용하기 위해 2. 프론트나 백 개발중에 hot reloading을 위해 - eval 함수는 재시작하거나 상태를 잃지 않고 코드를 변경할 수 있다 3. 웹팩등의 설정에서 const data = eval('require')(`./emails/${recipient}/${type}.json`) 참고 자료 https://stackoverflow.com/questions/10474306/wh..
React에서 DOM에 innerHTML을 사용하기 위한 방식입니다. HTML태그와 내용을 넣을 수 있는데 이러한 경우에는 XSS(크로스 사이트 스크립팅) 공격에 쉽게 노출될 수 있습니다. 이러한 보안 문제때문에 React에서는 JSX에 html 태그를 그대로 넣으면 브라우저에 html 태그가 그대로 출력됩니다. const App = () => { const getHtml = () => { return 'Hello!'; } return ( {getHtml()} ) } export default App; HTML 태그를 JSX안에서 DOM에 삽입하기 위해서는 html 태그에 dangerouslySetInnerHTML 속성을 이용합니다. dangerouslySetInnerHTML속에는 객체를 넣어야 하고 객..
Next.js 프로젝트 개발환경 구성(create-next-app, manual setup) create-next-app create-next-app을 이용합니다. npx create-next-app@latest # 또는 yarn create next-app 타입스크립트를 사용할 경우 npx create-next-app@latest --typescript # 또는 yarn create next-app --typescript 직접 패키지를 설치하고 구조를 만듭니다. npm init 혹은 직접 package.json 파일을 만들고 시작합니다. npm install next react react-dom # 또는 yarn add next react react-dom package.json 파일에 scripts를..
vscode 편집기를 사용할 때 *.html 파일에서 !을 입력하면 html 템플릿이 나오게 됩니다. 세부 내용들에 대해 간략하게 알아보고자 합니다. DOCTYPE 선언은 웹 문서가 어떤 버전의 HTML로 작성되었는지 브라우저에게 알려주기 위해 사용합니다. 대소문자는 구분하지 않습니다. 파일의 최상단에 위치해야 합니다. HTML 4.01 에서의 DOCTYPE 선언 HTML4 혹은 XHTML은 HTML5 보다 훨씬 복잡합니다. SGML(Standard Generalized Markup Language)에 기반을 두어 만들어졌기 때문에 DTD(Document Type Definition) 참조가 필요합니다. strict mode transitional mode frameset mode html 태그에 lan..
기본 명령어 * get, set, del, exists, keys, flushall $ redis-server // redis 서버 실행 $ redis-cli // redis-cli 실행 127.0.0.1:6379> quit // redis-cli 종료 127.0.0.1:6379> set name yu // key: name, value : yu OK 127.0.0.1:6379> get name // key값으로 value 출력 "yu" 127.0.0.1:6379> set age 26 OK 127.0.0.1:6379> get age // 숫자도 문자열로 출력 "26" 127.0.0.1:6379> del age // key 제거 (integer) 1 127.0.0.1:6379> get age (nil) 1..
JavaScript ES2022 Array.prototype.at() 음수로도 배열의 요소를 가져올 수 있습니다. const arr = [1, 2, 3, 4, 5] console.log(arr.at(-1)) // 5 // console.log(arr[arr.length - 1]) // 5 console.log(arr.at(1)) // 1 console.log(arr[1]) // 1 Object.hasOwn() Object.hasOwn()은 Object.prototype.hasOwnProperty()의 대안으로 나오게 되었습니다. 객체안에 상속받지 않은 프라퍼티가 존재하면 true, 아니면 false를 반환합니다. Object.create(null)로 객체를 생성하여 프로토타입이 없는 객체여도 Object..
str.split([separator[, limit]]) split 메서드는 String 객체를 지정한 구분자(separator)를 이용하여 여러개의 문자열로 나눌 수 있습니다. 이렇게 나뉜 문자열들은 배열에 담기게 됩니다. const greeting = "안녕하세요, 반갑습니다." const splitArray = greeting.split('') console.log(splitArray) // [ '안', '녕', '하', '세','요', ',', ' ', '반', '갑', '습', '니', '다', '.' ] const splitArray = greeting.split(' ') console.log(splitArray) // [ '안녕하세요,', '반갑습니다.' ] const splitArray =..
