enum 타입 const ADMIN = 0; const READ_ONLY = 1; const AUTHOR = 2; // JavaScript에선 이런식으로 role을 작성한다. // 상수를 따로 관리해줘야 하는 불편함 const person = { name: 'yu', age: 26, hobbies: ['game', 'sports'], role: ADMIN } enum 타입을 이용해서 작성하면 enum Role { ADMIN, READ_ONLY, AUTHOR } // ADMIN = 1, READ_ONLY = 2, AUTHOR = 3 // enum Role { ADMIN = 5, READ_ONLY = 10 } const person = { name: 'yu', age: 26, hobbies: ['game',..
자바스크립트는 런타입에 타입이 결정되는 동적 타입 타입스크립트는 런타임전에 개발 단계에서 타입이 결정되는 정적 타입 브라우저는 자바스크립트만 이해할 수 있기 때문에 타입스크립트를 실행하려면 자바스크립트로 컴파일을 해야한다. 타입 추론(type reference) 타입스크립트는 스스로 타입을 추론한다. const number1 = 5; // number1의 타입은 5 let number2 = 2.5; // number2의 타입은 number // 따로 타입을 지정해 줄 필요가 없다, 하지만 변수를 먼저 선언하고 // 나중에 값을 할당하는 경우에는 지정하기도 한다. let number3: number; number3 = 5; 타입스크립트는 타입을 잘못 사용하고 있는지 확인하고 에러를 통해 알려준다. cons..
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를..
