mingg IT

CRA를 이용하면 초기 세팅을 직접 하지 않고도 어플리케이션을 만들 수 있다. 오늘은 그것을 사용하지 않고 초기에 세팅해보는 방법에 대해 알아보도록 하겠다. 간단하게 hello-world라는 디렉토리를 만든다. 우선 이름을 보고 판단할 수 있듯이 react-dom.development, react.development는 개발 환경에서 사용되는 파일이고, react-dom.production.min.js, react.production.min.js 는 배포에 필요한 환경 파일임. 파일 상세내용은 git 에 올려놓도록 하겠음. simple1.html 파일을 만든다. 안녕하세요. 이 프로젝트가 마음에 드시면 좋아요 버튼을 눌러주새요. simple1.js function LikedButton() { const ..

Typeit 라이브러리를 사용하면 text 애니메이션을 쉽고 이쁘게 사용할 수 있다. https://www.typeitjs.com/docs/react TypeIt for React | TypeIt The official React component for TypeIt, the most versatile JavaScript typewriter effect library on the planet. www.typeitjs.com 오늘은 React로 사용 예시를 드려고 한다. npx create-react-app@latest typeit-example 로 프로젝트를 하나 만든다 만들고나면 React 18 버전으로 만들어 질텐데 dependency 에러랑 여러 에러가 너무 많이나서 17버전으로 사용하는 예시를 드..

깔끔하게 코드 짜는 꿀팁으로 filter, map을 사용하는 방법이 있다. for문을 돌리는것보다 훨신 직관적으로 확인할 수 있다. 좋은 예시가 있어서 포스팅하려고 한다. 리팩토링 전 함수를 보고 어떻게 바꿔보면 좋을지 혼자 고민하고 결과를 확인해보면 좋을듯. 해당 방법에 익숙해 져야함. //리팩토링 전 function acquireData(input) { const lines = input.split('\n'); let firstLine = true; const result = []; for (const line of lines) { if (firstLine) { firstLine = false; continue; } if (line.trim() === '') continue; const record ..

Shadow dom 말그대로 숨겨진 HTML 요소임 예를들어 를 사용하고 개발자 도구로 보면 button, span 태그가 두개 생길거임. 이게 shadow dom임. apperance : none 속성은 기본 브라우저 css를 없애는것 Progressbar 수정 예시 수정 하기 전 기본 Progress bar F12 클릭 후 Show user agent shadow DOM 을 클릭하면 shadow DOM 을 확인할 수 있다. Shadow DOM 수정 코드 수정 결과 바뀐 것을 확인 할 수 있다.

기본 CRA로 만들어진 페이지를 Next.js로 마이그레이션 하는 과정에서 .module.scss 사용 에러가 났다. yarn 으로 설치 하자 yarn add @zeit/next-sass node-sass next.config.js 를 수정해준다. /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, cssModules: true, }; const withSass = require('@zeit/next-sass'); module.exports = withSass; module.exports = nextConfig; next.config.js를 수정해주었으니 yarn dev 한번 하고나면 module.scss..

interface Author { first : string; last : string; } function getAuthors(database : PostgresDB) : Author[] { const authorRows = database.runQuery('SELECT FIRST, LAST FROM AUTHORS'); return authorRows.map(row=> ({first : row[0], last : row[1]})) } interface DB{ renQuery : (sql:string) => any[]; } function getAuthors(database : DB) : Author[] { const authorRows = database.renQuery('Select FIRST, LA..

협업을 하다보면 자연스레 내가 만든 함수를 다른사람이 봐야할 수도 있고 설명이 필요할 수가 있다. 이때 유용한 주석표기법에 대해 공유하려고 한다. /** 인사말을 생성합니다. 결과는 보기 좋게 꾸며집니다. * @param name 인사할 사람의 이름 * @param title 그 사람의 칭호 * @returns 사람이 보기 좋은 형태의 인사말 */ function greetJSdoc(name: string, title : string){ return 'Hello'; } greetJSdoc('John Doe', 'Sir'); 이런식으로 사용하면 함수이름에 마우스를 올려놓거나, 매개변수에 마우스를 올려놓았을 때 관련 설명을 볼 수 있다. 마크다운 형식으로 꾸며지기 때문에 굵은 글씨로도 표현할 수 있다.

any 타입은 타입스크립트 사용시 컴파일러가 에러를 체크하지 못하기 때문에 지양해야한다. 그렇다면 내가 프로젝트에서 any를 몇개나 쓰는지 알 수 있을까 ? $ npx type-coverage 143878 중 135763이 any가 아닌것을 알려준다. $ npx type-coverage --detail 을 입력하면 any가 있는 파일 위치를 모두 출력해준다.