XHTML5 표기법 // 1. 속성값(attribute)를 작성할 때 축약없이 전체를 입력합니다. // required = "required" // 2. 단독으로 사용하는 태그에 slash를 작성합니다. HTML5 표기법 // 1. 속성값(attribute)를 작성할 때 축약할 수 있습니다. // required // 2. 단독으로 사용하는 태그를 그대로 작성합니다.
기본적인 사용법 외에 템플릿 리터럴을 사용하는 방식을 설명하고자 합니다. Nesting Templates 템플릿 리터럴을 중첩하는 방식입니다, 삼항 조건 연산자의 예시로 확인 해 보겠습니다. function isLoveTS() { return true; } function isLoveJS() { return true; } const classes = `자바스크립트${ isLoveJS() ? `${isLoveTS() ? '와 타입스크립트를 사랑힙니다.' : '만 사랑합니다'}` : '를 싫어합니다.' }`; console.log(classes); // 자바스크립트와 타입스크립트를 사랑합니다. Tagged Templates 템플릿 리터럴을 함수의 인수로 넣는 방식입니다. const city = 'Seoul'..
npm(node package manger)을 이용하여 패키지를 설치할 때 사용할 수 있는 옵션들이 있습니다. --save 예전 자료들을 보면 종종 볼 수 있습니다. Node의 예전 버전에서는 --save 옵션을 주지 않고 패키지를 설치하게 되면 package.json의 dependencies에 추가되지 않고 node_modules에만 설치가 되었습니다. 이렇게 되면 Github과 같은 원격 저장소에 node_modules 폴더는 제외하고 올리기 때문에 다른 개발자가 설치한 패키지를 직접 설치해야 합니다. --save 옵션을 주고 패키지를 설치하게 되면 다른 개발자도 파일을 받고 npm i 명령어를 통하여 한번에 패키지를 설치할 수 있게 됩니다. npm 버전 5부터는 --save가 기본값으로 적용이 되어..
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..
