javascript
-
Chrome Extension 개발 이제 여기에 react를 끼얹은...javascript 2021. 2. 12. 01:48
검색검색을 하다가 비교적 최신의, 귀여운 react로 만든 chrome extension 프로젝트를 찾았다. 이 문서는 아래 아티클에 대한 번역 + 따라가는 과정이 담겨있습니다. https://react.christmas/2020/12 Chrome Extension의 기초 extension에는 세가지 메인 컴포넌트가 있습니다. popup, content script, background script입니다. - Popup은 extension icon이 눌리면 뜨는 콘텐츠입니다. - Content script는 Javascript나 CSS로 된 코드이고, 현재 웹 페이지의 context에 주입(inject)됩니다. - Background script는 브라우저에서 분리된 인스턴스로 실행되는 javascrip..
-
Chrome Extension 개발 해보기 - Getting Started 따라하기javascript 2021. 2. 11. 23:30
Getting Started 따라하기 developer.chrome.com/docs/extensions/mv3/getstarted/ 를 따라해보자 Extension Components background scripts content scripts options page UI elements 기타 logic files Extension은 web 개발을 위한 기술들, JS, HTML, CSS로 이루어집니다. extension 기본 틀 만들기 extension을 생성할 폴더를 새로 만듭니다. manifest file을 생성합니다. --- 사실 manifest 파일만 있어도 extension 업로드는 됩니다 하하 background color를 변경하는 코드를 심어 봅시다 -> background script ..
-
[typescript] nodejs 서버 구축하기 - 1javascript 2020. 12. 7. 19:27
medium.com/@hckcksrl/typescript-%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%B4-express-node-js-%EC%84%B8%ED%8C%85-12bbdd62513f 를 참조하여 nodejs, express api 서버를 구축해본다. TypeScript 을 사용해 Express , Node.js 세팅 TypeScript medium.com tsconfig 명세 알아보기 { “compilerOptions”: { "lib": ["es5", "es6"], "target": "es5", "module": "commonjs", "moduleResolution": "node", "outDir": "./build", "emitDecoratorMetadata": true, ..
-
Javascript class의 내부 함수, methodjavascript 2020. 11. 26. 01:36
개인적으로 React를 소소히 튜터링하는 중인데, 튜터링하며 받는 질문에 대한 답변을 공유한다. 초심자 기준이라 완전 초심자용 내용일수도. 질문: React Component 안에 함수를 정의했는데 왜 빨간줄이 생길까? class App extends React.Component { constructor(props) { // 생략 } // 아래 오류 function appFunction() { } render() { return( ); } }Class 내부 method 선언하기 우리가 만드는 React Component는 보통 Class 000 extends React.Component 형식을 하고 있습니다. 그리고 Class로 선언하였으므로 React Component이기 이전에 이는 Javascrip..
-
Javascript Import에 대하여 - import React from 'react'javascript 2020. 11. 23. 22:14
Import 용법 Created: Nov 23, 2020 9:50 PM https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/import mdn은 javascript의 교과서당 module을 통째로 가져오는 경우 // something.jsx import React from 'react'; React 소스코드를 보면 'react' package는 main으로 index.js를 내보낸다(export). 코드에서 가져다 쓸 땐, 기본적으로 export 결과물인 아래와 같은 Object(map, 혹은 key, value로 이루어진 자료구조)를 받게 된다. // react source index.js ex..
-
javascript를 쓰지만 내가 잘 몰랐던 것들javascript 2020. 10. 20. 01:30
1. null과 undefined 어떤 변수의 값이 undefined(primitive type)이라면, 그 변수의 값이 아직 할당되지 않았음을 의미한다. null == undefined // true null === undefined // false 아직 선언하지 않은 변수이름에 대해 typeof x === 'undefined' // true null은 "어떤 값이 의도적으로 비어있음을 표현"한다. 즉 null은 undefined와 달리, 존재하는 변수의 값을 나타내는데에 쓰며 값이 없음(변수가 가리키고 있는 객체가 없음)을 나타낼 때 쓴다. typeof null === 'object' Object는 null의 상속객체이기 때문에, 하위호환을 위해 typeof null은 'object'이다. https..