Light Dev

목차 Node.js 개발 시 자바 스크립트 파일들을 수정 할때마다 매번 ctrl+c를 통해 node를 종료 후 다시 실행해줘야 하는 번거로움이 있다. 하지만 파일들을 모니터링하고 있다가 수정될 경우 자동으로 서버를 재실행시켜주는 스크립트 모니터링 유틸리티 nodemon을 이용하면 번거로움이 상당히 줄어든다. 그럼 nodemon을 설치해보자. nodemon 설치 npm 1.0 이상을 사용할 경우 nodemon은 커맨드라인에서 명령어를 사용할 것이기 때문에 -g 옵션을 붙혀서 글로벌로 설치 합니다. Shell // 'nodemon' 전역으로 설치하기. npm install nodemon -g Nodemon 사용법 기존에 node.js 애플리케이션을 실행할 때 node app.js와 같이 실행해 주었다면 no..

목차 TypeScript에서 "e.target.value" 에러 해결하기 타입스크립트로 리액트 프로젝트를 진행하다 보면 가장 난감한 것 중 하나가 바로 DOM과 관련된 부분이다. 왜냐하면 문자열이나 정수, 객체 정도는 원시 타입이나 인터페이스로 해결할 수 있지만 DOM은 HTMLInputElement같은 특이한 타입들이 존재하기 때문이다. 아마 e가 정확히 어떻게 생겼는지 알 수 없으니 any 타입을 사용하는 경우도 있지만, 정확하게 사용하고 싶다면 React.ChangeEvent을 사용하면 된다. 이런 타입 방식을 사용하는 이유는 자바스크립트 이벤트에는 마우스 클릭, 키보드 키 누르기 등등 여러 종류가 있기 때문이다. 이런 이벤트들 중에서 "사용할 이벤트와 일치하는 이벤트"를 알면 리액트 프로젝트에서 ..

목차 VsCode에서는 원래 .git 등의 여러 파일들을 보이지 않게 설정되어 있다. 그러나 이 파일을 VsCode에서 보고 싶다면 다음과 같이 설정하면 된다. 설정 화면 진입 기본 설정에서 설정 항목을 클릭한다. "exclude" 검색 검색 창에서 exclude를 검색하면 Files:Exclude 항목에 **/.git 등의 숨김 처리된 폴더나 파일들이 설정되어 있다. 표시하고 싶은 폴더 및 파일을 Files: Exclude 에서 제거 마우스를 올리면 나타나는 X버튼을 클릭하여 숨김항목을 제거한다. 연필 모양 아이콘을 클릭하며 편집 가능하다. Add Pattern 버튼을 클릭하여 추가도 가능하다. 완성된 화면 설정을 변경이 완료되었다면, 다음과 같이 .git 파일을 VsCode 상에서 확인할 수 있다. ..

목차 Npm, Yarn 비교. 🎯 Npm (Node Package Manager) 노드 패키지 매니저 자바스크립트 프로그래밍을 위한 패키지 관리자 자바스크립트 런타임 환경 node.js의 기본 패키지 관리자 🎯 Yarn 의 장점 다운로드한 패키지 캐시 운영 병렬화 리소스 활용 극대화로 설치 시간 단축 코드 실행전 설치된 패키지 무결성 확인 이전에 패키지 설치한 경우 오프라인으로 재설치 명령어 모음 Npm 명령어 모음 링크 페이지를 참고하여 작성하였습니다. Shell # package.json의 모듈 설치 npm install npm i # 의존성으로 추가 npm install {module_name} --save # 개발 의존성으로 추가 npm install {module_name} --save-dev ..

목차 Npm 패키지 매니저를 이용하여 여러가지 패키지들을 설치할 때, -g, --save, -D 등 다양한 옵션을 붙여 설치하는 경우가 있다. 각각 어떻게 쓰이는 용도인지는 다음과 같다. 설치는 Tailwind Css를 사용하여 진행하였다. 설치 방법 정리 "npm install -g"를 이용한 설치 Shell # 전역 설치(모든 프로젝트에 적용된다.) $ npm install -g tailwindcss # package.json "dependencies": { "tailwindcss": "^3.2.4" } -g 옵션을 추가한 경우 해당 패키지는 전역으로 설치된다. 시스템상에 있는 모든 node_modules 디렉토리에 있는 패키지를 설치한다는 것을 의미한다. 한마디로 이미 세팅되어 있는 다른 프로젝트에..

목차 useRef 사용시 에러 해결. useRef는 React Hook의 일종으로, 인자로 넘어온 초깃값을 useRef 객체의 .current 프로퍼티에 저장한다. DOM 객체를 직접 가리켜서 내부 값을 변경하거나 focus() 메소드를 사용하거나 하는 때에 주로 사용한다. 또한 값이 변경되어도 컴포넌트가 리렌더링되지 않도록 하기 위한 값들을 저장하기 위해서 사용한다. 그런데 만약 TypeScript에서 useRef 사용시, 아래와 같이 제네릭과 초기값을 설정해야 한다. 값 저장 용도 제네릭 : 값의 타입을 넣어준다. 초기값 : 반드시 타입에 맞는 초기값을 할당해준다. TypeScript // 값 저장 용도(number) const count = useRef(0); const text = useRef("..

목차 그냥 붙여넣기 Icons and Symbols - 𝗛𝗧𝗠𝗟 𝗖𝗛𝗔𝗥𝗔𝗖𝗧𝗘𝗥 𝗖𝗢𝗗𝗘 𝗣𝗜𝗖𝗞𝗘𝗥 Search: ➤Clickto copy Boy Baby Girl Man Woman Old Man Old Woman Alien Monster Man Health Worker Woman Health Worker Man Student Woman Student Man Judge Woman Judge Man Farmer Woman Farmer Man Cook Woman Cook Man Mechanic Woman Mechanic Man Factory W html-css-js.com HTML 😛 위 사이트에서는 이모지를 사용하려면, 그냥 하단에서 위의 코드를 복사해서 붙여 사용하면 된다. 유니코드 수정해서 넣기 E..

목차 Nuxt.js 프로젝트를 정적 페이지로 배포하는 방법을 포스팅한 문서입니다. Nuxt.js 배포하는 방법 배포하기 전 설정하기 Nuxt.js를 사용하여 배포하려고 할 때, GitHub Pages과 같은 정적페이지 형식으로 배포할 수 있다. 만약 Nuxt.js를 GitHub Pages에 정적페이지로 배포하려면 정적 웹 어플리케이션을 생성해야 한다. 그러러면 우선 밑의 명령어를 입력한다. Shell $ npm run generate # or $ yarn generate 명령어가 전부 다 실행되면 dist 폴더가 생성되며, 그 파일 속에 GitHub pages에 배포하면 될 파일들이 생성되어 있다. 프로젝트 리포지토리라면 gh-pages 브랜치, 사용자 혹은 조직 사이트라면 master 브랜치를 지정하세..